我们知道Cordova HTML5应用具有夸平台的特性，同时也具有访问本地一些资源的能力。在今天的这篇文章中，我们将介绍一下如何创建并运行一个Cordova HTML5的应用到我们的Ubuntu手机中。本文的英文原文在“developer.ubuntu.com/en/apps/htm…”。
\
1）安装好我们的armhf chroot
\
如果开发者已经看过我以前的文章“ Ubuntu SDK 安装”的话，你可能已经安装好自己的armhf chroot了。除了在SDK中可以帮我们安装我们所需要的chroot外，我们也可以通过如下的命令来简单地安装我们自己所需要的chroot。下面以15.04 framework为例：
\
$sudo click chroot -aarmhf -f ubuntu-sdk-15.04 create
我们可以在命令行键入如上的命令就可以创建我们的15.04的armhf chroot。等安装完以后，我们就可以进行下一步的动作。开发者如果想为14.10的目标进行编译，也可以使用同样的方法来安装14.10的armhf chroot。
\
\
2）安装Cordova
\
在这一步，我们来安装Cordova环境。如果你以前已经安装过的，建议你使用如下的方法删除以前的安装（由于以前的安装有bug）。 如果你从来没有安装过的话，请忽略这一步：
\
$rm -rf ~/.cordova
$rm -rf ~/.cache
\
这是为了彻底删除以前已经在你的电脑中的安装。
\
然后，我们按照如下的步骤来安装Cordova:
\
$ sudo apt-add-repository ppa:cordova-ubuntu/ppa; sudo apt-get update
$ sudo apt-get install cordova-cli
\
到目前的这一步，我们基本上已经创建好我们的Cordova环境了。
\
\
3）创建一个简单的Cordova例程
\
目前14.10的架构是默认的开发架尽管将来会有变化。在如下的命令中，如果没有指定具体的架构，14.10架构将会被采用。
\
使用如下的命令来创建一个简单的Cordova应用：
\
$cordova create myapp myapp.mycompany "My App"
$cd myapp
$cordova platform add ubuntu
$vi config.xml
\
注意：请在你的config.xml中加入如下的句子，以保证你的应用有一个icon图标：
\
<icon src="www/img/logo.png" />
\
另外，请你在config.xml中加入自己的有效的邮件地址：
\
<author email="myid@ubuntu.com" />
这样整个config.xml的文件如下：
\
config.xml
\
\
<?xml version='1.0' encoding='utf-8'?>
<widget id="myapp.mycompany" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My App</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="myname@mycompany.com" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<icon src="www/img/logo.png" />
</widget>
\
这样我们整个的Cordova模版已经被建立好了。下面我们来具体描述怎么进行编译。
\
\
4）编译我们的模版Cordova应用
\
我们可以使用如下的命令为我们的手机进行编译：
\
$ cordova build --device
就如我们上面所说的一样，它选择默认的一个版本的armhf chroot进行编译。目前它指的是14.10。在第一次编译时，可能需要我们去安装一些额外的库才可以进行编译。它会提示如下所示的错误信息：
\
\
\
\
List of devices attached
750ABLLH4897 device
Target Device: 750ABLLH4897
Building Phone Application...
Error: missing dependency inside armhf chroot
run:
sudo click chroot -a armhf -f ubuntu-sdk-14.10 install cmake libicu-dev:armhf pkg-config qtbase5-dev:armhf qtchooser qtdeclarative5-dev:armhf qtfeedback5-dev:armhf qtlocation5-dev:armhf qtmultimedia5-dev:armhf qtpim5-dev:armhf libqt5sensors5-dev:armhf qtsystems5-dev:armhf
就像上面显示的错误信息一样，我们必须在命令行中打入如下的命令来安装我们所需要的库：
\
$sudo click chroot -a armhf -f ubuntu-sdk-14.10 install cmake libicu-dev:armhf pkg-config qtbase5-dev:armhf qtchooser qtdeclarative5-dev:armhf qtfeedback5-dev:armhf qtlocation5-dev:armhf qtmultimedia5-dev:armhf qtpim5-dev:armhf libqt5sensors5-dev:armhf qtsystems5-dev:armhf
\
当然我们也可以使用如下的方法来安装：
\
$click chroot -aarmhf -fubuntu-sdk-14.10 maint
\
然后，再打入如下的命令：
\
\
\
等安装完后，我们打入exit命令，退出即可。
重新进入到我们的应用的根目录，再次打入如下的命令：
\
$ cordova build --device
\
\
我们可以在项目目录下找到我们所需要的click包文件:
\
liuxg@liuxg:~/web/myapp$ find ./ -name *.click
./platforms/ubuntu/ubuntu-sdk-14.10/armhf/prefix/myapp.mycompany_0.0.1_armhf.click
为了能够在手机上直接运行，我们可以直接运行一下的命令：
\
$ cordova run --device --debug
\
在手机上的运行结果：
\
\
\
对于使用基于ubuntu-sdk-15.04 chroot来说，我们必须使用如下的命令来完成我们的build:\
\
$ cordova build --device -- --framework ubuntu-sdk-15.04 --verbose
\
当我们运行时，我们也必须使用如下的命令来完成：
\
$ cordova run --device --debug -- --framework ubuntu-sdk-15.04
整个项目的源码在： github.com/liu-xiao-gu…
\
\
５）如何在手机中调试自己的应用
\
为了能够输出一些有用的调试信息，我们可以在我们的index.js文件中加入如下的console.log语句：
\
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
console.log("This shows how to output something to debug");
app.initialize();
\
\
当我们运行我们的HTML5应用到手机时，我们可以看到如下的输出：
\
$ cordova run --device --debug -- --framework ubuntu-sdk-15.04
\
\
\
\
\
就像上图中显示的那样，我们可以在电脑中打开chromium浏览器，并输入以上的http://127.0.0.1:9222地址：
\
\
\
\
\
从上面我们可以看出来我们添加的的调试信息：
\
This shows how to output something to debug
\
在Desktop上的调试也是一样的。我们只需要用如下的方法进行运行：
\
$ cordova run --debug
在chromium浏览器中输入地址http://127.0.0.1:9222即可。
\
更多想知道如何在手机上利用Cordova实现camera功能，请参阅文章“ Cordova camera app tutorial”。开发者可以参考文章“ 在Ubuntu平台上创建Cordova Camera HTML5应用”来开发一个Cordova Camera HTML5应用。
\
\
