ubuntu如何创建一个html文件,在Ubuntu Touch上创建一个HTML 5 Web应用

最新推荐文章于 2025-03-18 21:24:58 发布

weixin_39605414

最新推荐文章于 2025-03-18 21:24:58 发布

阅读量919

点赞数

文章标签： ubuntu如何创建一个html文件

本文介绍了如何在Ubuntu Touch上使用Ubuntu SDK创建HTML5 Web应用。通过Ubuntu SDK，我们可以创建一个名为'WebSysInfo'的应用，利用HTML5标签和Cordova API扩展功能。在应用中，我们可以获取并显示设备的系统信息。通过监听window.onload和deviceready事件，结合Cordova API，向UI添加信息，如设备的Cordova版本、型号、版本号等。完成应用后，可在Ubuntu Touch设备或Chrome浏览器中进行调试和查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道在Ubuntu Touch上面，我们可以创建Qt/QML的应用，同时，我们也可以使用Ubuntu SDK来创建一些跨平台的HTML 5的应用。这些应该虽然是在Ubuntu Touch的SDK上面创建的，但也是可以修改在其它的平台上运行。下面，我们来简单介绍一些怎么在SDK中创建并部署.

在Ubuntu Touch上面，我们可以使用HTML 5的一些tag来些，我们的应用，同时我们也可以使用Cordova API接口来扩展我们的功能。更多的阅读，可以阅读我们的官方网站

1) 创建一个基本的框架

首先我们打开我们的SDK，可以看到如下的界面：

接下来我们可以创建一个称作“WebSysInfo"的应用。这个应用的目的是为了显示一些系统的一些信息。

紧接着，按照SDK的提示完成剩下的步骤来创建一个最基本的框架应用。由于HTML 5的应用是跨平台的，我们可以直接在电脑上运行这个最基本的应用，也可以直接部署到手机上。如果你在这个步骤不能正确地运行你的应用，请查看我的

SDK安装指南。

如果你运行程序正常，你可以看到如下的画面：

至此，我们已经完成了一个最基本的应用。下面我们来学习如何添加Cordova API 到我们的应用中来扩展我们的一些功能。

２)添加Cordova API到应用中

我们知道Cordova API有很多有用的功能。可以是我们的应用更加丰富。下面我们来学习怎么把

Cordova API加到我们的应用中去。首先，我们选中我们的项目，同时选择菜单“　Tool”==>"Ubuntu" ==>"Add Cordova runtime to HTML 5 project"。

这时应用开始下载最新的Cordova API的包，并安装到我们所在的应用中。目前由于一些原因，需要关闭项目(最终的版本应该解决这个问题)，再重新打开项目来查看在项目栏更新后的目录结构。

为了使用这些API，我们可以对"index.html"的代码做如下的修改。

An Ubuntu HTML5 application

System Info

System Info

这里我们定义了一个“System Info”的tab。它对应着"mainpage"。当它被点击的时候，对应的"mainpage"就会被打开。在“mainpage"中我们定义了一个section, 在section中，定义了一个list。我们为list也定义了一个叫做"System Info”的"header"。当然我么也可以定义更多的"header"。值得注意的是我们通过一下语句

来加载Cordova API以使我们能够正常使用们。同时，

我们可以使用"app.js"来对我们的HTML进行操作。

３)怎么调试应用

当我们运行应用的时候，我们可以在"Application output"窗口看到如下的信息：

unity::action::ActionManager::ActionManager(QObject*):

Could not determine application identifier. HUD will not work properly.

Provide your application identifier in $APP_ID environment variable.

Using "/home/liuxg/cases/WebSysInfo/www" as working dir

"file:///home/liuxg/cases/WebSysInfo/www/index.html"

Using "/home/liuxg/cases/WebSysInfo/www" as working dir

"file:///home/liuxg/cases/WebSysInfo/www/index.html"

Inspector server started successfully. Try pointing a WebKit browser to http://192.168.199.228:9221

显然它告诉我们我们可以在Chrome浏览器中打开

http://192.168.199.228:9221地址查看我们所需要的信息。我们不妨在“app.js"文件里输入如下的句子

window.onload = function () {

var UI = new UbuntuUI();

UI.init();

console.log("we are so glad to see it works!")

// Add an event listener that is pending on the initialization

// of the platform layer API, if it is being used.

document.addEventListener("deviceready", function() {

if (console && console.log)

console.log('Platform layer API ready');

}, false);

};

运行程序，同时在Chrome中打开

http://192.168.199.228:9221。可以看到如下的画面：

我们可以在“Console”里看到我们需要的输出。必须注意的是，如果一个应用有两个同时运行的实例，那么最新的实例将不会有任何的输出。在Console里只能看到第一个实例的输出。当你运行第二个实例的时候，你可以在Application Output 窗口中看到如下的输出：

Couldn't start the inspector server on bind address "192.168.199.228" and port "9221". In case of invalid input, try something like: "12345" or "192.168.2.14:12345"

另外应用必须先启动，然后再看地址

http://192.168.199.228:9221。否则你将进不去。

４) 加入JS代码实现Cordova API的调用

现在我们来修改项目中“app.js”文件来对UI进行改变。首先我们在"index.html"中加入如下的句子：

这样，我们就可以在"app.js"中使用如下的句子来得到我们的list了：

varinfo=UI.list('#info');

有了变量info，我们就可以向其中添加我们所需要的东西了。

处理window.onload事件

对于Web开发者来讲，window.onload事件并不陌生。当DOM被完全载入时，这个事件会被发生。这个事件对于处理一些需要在DOM完全载入紧接着执行一些代码。

window.onload = function ()　｛

....

}