☰

我可以为 Ubuntu Phone 开发混合原生/HTML5 应用程序吗？

tag-icon • tag-icon application-development ubuntu-touch html5 ubuntu-sdk
我可以为 Ubuntu Phone 开发混合原生/HTML5 应用程序吗？

我可以开发一个与 Ubuntu 手机中的原生 API 和 HTML5 结合使用的混合应用程序吗？

我知道可以开发原生应用程序或 HTML5 应用程序。

但是，我想知道如何在 Ubuntu Phone 中开发具有 HTML5 UI（混合）的本机应用程序。

答案1

我不确定您说的“混合”是什么意思（显示 webapp 的 C++ 应用？在 C++/QML/javascript 之间分配应用代码？），但您可以使用 WebView 组件在 qml 应用上显示网页/webapp。这在 Ubuntu Phone 上也应该有效。

以这个由“app.qml”、“app.html”和“app.js”组成的简单应用程序为例（是的，我知道，这个“应用程序”很蹩脚……）。它只用 进行了测试qmlviewer，因此如果您尝试通过 IDE 运行它，您可能需要修改所使用的相对路径。

应用程序.qml

import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
        width: 800
        height: 600
        WebView {
                url: "app.html"
                anchors.fill: parent
                preferredWidth: 800
                preferredHeight: 600
                smooth: false
                settings.developerExtrasEnabled : true 
                settings.javascriptEnabled: true
        }
}

应用程序.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Hi</title>
        <style>
        body {
                margin: 20px;
        }
        </style>
</head>
<body>
        <a href="#" id="test_me">Click me!</a>
</body>
<script src="app.js"></script>
</html>

应用程序.js

var x = document.getElementById("test_me");
x.onclick = function(){
        console.log("Hi there");
        new_elem = document.createElement("h2");
        new_elem.textContent = "Hi there!";
        document.getElementsByTagName("body")[0].appendChild(new_elem);
};

希望能帮助到你。

相关内容