Cordova应用解析

本文承接上篇《使用Cordova命令行界面(CLI)》。

到此我们完全做好开发前的准备工作，Cordova应用使用常见的HTML、CSS和JavaScript开发，因此Cordova应用基本等同于Web应用。先看一些Hello World的例子，以便对Cordova应用开发的过程做一些了解。最后再看一下官方提供的Hello World示例。

Hello World

Cordova应用的Hello World可以只写一个简单的Web页面实现：

<!DOCTYPE HTML>
<html>
<head>
    <titile>HelloWorld1</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a sample Cordova application</p>
</body>
</html>

如果想在模拟器或物理设备上看到执行效果。回忆之前的内容，按下面步骤做：

首先新建一个Cordova项目叫比如叫TestCordova。用到我们之前讲的CLI创建项目命令cordova create TestCordova。
在项目文件夹的根目录下的www文件夹中新建一个html页面，写入以上代码，保存成HelloWorld.html。
修改项目文件夹根目录下config.xml，找到content配置节，把src属性改为HelloWorld.html，意思是修改程序启动页面。
在模拟器或物理设备上运行程序。使用cordova run命令。

执行效果图如下：
图片描述

以上只是对运行过程做的一个简单的说明。如果不用Cordova run，使用IDE的调试或运行功能当然也是可以的。关于这方面内容之后做介绍。

示例实质上生成一个呈现web内容的原生应用，但是没有使用Cordova框架的API，没有体现Cordova的优势。实际上所有的web应用都可以打包到Cordova项目中，如果你有一个web应用，想以原生应用的方式在手机上运行，这也是一种实现方式。

Cordova应用的初始化

把上个例子的HelloWorld.html另存为HelloWorld2.html并放到同一目录下。向其中添加一些代码，作用是在Cordova完成初始化时弹出一个提示窗口告知Cordova已经准备好了。完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
    <script src="cordova.js" type="text/javascript" charset="uft-8"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            navigator.notification.alert("Cordova is ready");
        }
    </script>
    <title>HelloWorld1</title>
</head>
<body onload="onBodyLoad()">
    <h1>Hello World</h1>
    <p>This a sample Cordova application</p>
</body>
</html>

截图如下：
![HelloWorld2](img/07.png)

<head>部分新增了两处：meta标签描述了内容类型和viewport(视口)。内容类型是标准的HTML。而viewport告诉浏览器内容占用屏幕多大面积及怎样缩放内容。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />

上面代码说明html页面占用全部屏幕并以其100%大小呈现，并且不允许用户以任何形式缩放页面。

viewport和相关属性不是必需的，如果不设置浏览器将使用它的默认设置。

还加载了Cordova JavaScript库：

<script src="cordova.js" type="text/javascript" charset="uft-8"></script>

这样就加载了核心的Cordova API库，应用就可以使用核心Cordova功能。因为3.0以后核心API迁移到了插件中，cordova.js文件只保留了一些基本功能。

Cordova应用只有在web应用加载完成才去访问Cordova API。原生的Cordova容器在使用JavaScript代码调用API之前必须完成初始化。基于上述原因开发者必须让容器在API初始化完成后告知web应用。需要API的应用逻辑只有才接收到API可用的通知后才能执行。

在这个例子中，通知是通过添加body部分的onload事件定义完成的。

<body onload="onBodyLoad()">

在onBodyLoad函数中注册了事件监听器，它告诉应用在Cordova容器在完成初始化任务并触发deviceready事件后调用onDeviceReady函数。

document.addEventListener("deviceready", onDeviceReady, false);

onDeviceReady函数简单的显示了Cordova警告对话框(它和JavaScript对话框不一样)告知用户：

navigator.notification.alert("Cordova is ready");

注意大部分Cordova API迁移到了插件中。要使用Cordova alert方法，必须安装对话框架插件。使用之前提到的安装插件命令：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

许多Cordova API都由Navigator对象实例化。但不总是这样，调用API之前要查看API文档确认。

使用Cordova API

API可用后，用下面的例子说明API的使用，同样创建一个HelloWorld3.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="viewport" content="user-scale=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width;">
    <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad(){
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            br = "<br />";

            var element = document.getElementById("appInfo");

            element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS Version: ' + device.version;
        }
    </script>
</head>
<body onload="onBodyLoad()">
    <h1>HelloWorld3</h1>
    <p>This is a cordova application that makes calls to Cordova APIs.</p>
    <p id="appInfo">Waiting for Cordova Initialization to complete</p>
</body>
</html>

程序截图如下：
![HelloWorld3](img/08.png)

ID为"appInfo"的应用内容显示了设备信息和Cordova版本。设备信息可通过API获取(http://cordova.apache.org/docs/en/3.0.0/cordova_device_device.md.html#Device)，示例中使用了API方法的子集。为了调用API需要安装插件：

cordova plugin add https://git-wip-us.apache.org.org/repos/asf/cordova-plugin-device.git

提升Cordova应用的用户界面体验

Cordova框架提供了访问设备和应用的功能，但应用界面主题还是要由开发者使用HTML、CSS和JavaScript自己定义。开发者希望web应用的界面和感觉更像原生应用，并产生了许多开源和商业JavaScript移动框架简化这种工作，如jQuery Mobile、Dojo Mobile和Sencha Touch。

为简化创建美观的Cordova应用工作，Adobe的开发者开发了一个小型、快速的叫Topcoat的CSS库(http://topcoat.io)，它可以用来开发简单、干净的UI。Topcoat封装了一些常用的带有图像和按钮的web应用UI元素。它并不是像Sencha Touch或jQuery Mobile一样完全是HTML5框架，但对于创建干净、简单、快速的web应用UI很有用。

上述框架在Cordova应用开发中经常用到，因此在这里强调一下是必要的。下面举例说明使用jQuery Mobile提升UI效果。jQuery和JQuery Mobile一起使用提供一些有用的UI元素并为web移动应用定制外观。

用同样的方法创建名为HelloWorld4.html的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="user-scale=no,initial-scale=1,maxmium-scale=1,minimum-scale=1,width=device-width;"/>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
    <script type="text/javascript" charset="utf-8" src="js/jquery-2.0.2.js"></script>
    <script src="js/jquery.mobile-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad(){
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            br = "<br/>";

            var element = document.getElementById("appInfo");
            element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS version: ' + device.version;
        }
    </script>
</head>
<body onload="onBodyLoad()">
    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Hello World 4</h1>
        </div>
        <div data-role="content">
            <p>This is a Cordova application that makes calls to the Cordova APIs and uses the jQuery Mobile framework.</p>

            <p id="appInfo">Waiting for Cordova Initialization to complete.</p>
        </div>  
        <div data-role="footer" data-position="fixed">
            <h1>Cordova Programming</h1>
        </div>
    </div>
</body>
</html>

程序截图如下图：
图片描述

如果应用在不同程序上部署，它们看起来的效果都是一样的。在复杂点的应用中，如向更深层导航，jQM框架会自动向应用添加移动应用平台功能，如iOS的后退键和Android的退出键和菜单。

注意到页面的头部加入了一些资源：jQM提供的CSS文件、jQuery和jQuery Mobile的js库文件。在生产环境中要替换为相应的压缩版本。

页面body部分在一些div标签中添加由jQM使用的data-role属性，用来把页面指定部分格式化为它们指定的角色的样式。像data-role为header的部分被格式化为渐变背景色并使用data-position="fixed"属性固定在页面顶端。同样，data-role为footer的部分为渐变背景色并被固定在页面底部。data-role=content的部分位于header和footer之间，可以滚动浏览。例子只是简单的涉及到jQM的一些内容，更多内容请参考jQM的在线文档或相关书藉。

CLI生成的web应用页面

由CLI创建项目时生成的项目的web内容位于项目根目录的www文件夹中。不同的文件分开放置，像CSS文件放在css文件夹中，JavaScript文件在js文件夹中。index.html页面跟前面示例类似，只是把cordova.js放在文件后面导入，这么做的目的是为了在加载js文件之前先加载HTML内容并在屏幕上显示内容。页面内容如下：

!<DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone-no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maxmium-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

应用简单显示了Cordova的Logo和一些闪动的文本。操作页面元素的js代码位于index.js中，由文件底部的app.initialize()函数调用。

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');  
    },
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.queryElement('.listening');
        var receivedElement = parentElement('received');

        listeningElement.setAttribute('style', 'display:none');
        receivedElement.setAttribute('style', 'display:none');
    }
};

app.initialize();

代码首先注册了devcieready的监听器。deviceReady函数执行时向控制台写了一些信息，然后更新页面内容说明Cordova容器已经准备好了。这个示例的js写法明显说明Cordova应用的构建过程，相比之前的例子，结构上更像现代的HTML5应用。

好了，现在我们已经对Cordova开发有了一个初步的印象，下一篇我们仔细研究一下Cordova开发过程。

Cordova应用解析

Hello World

Cordova应用的初始化

使用Cordova API

提升Cordova应用的用户界面体验

CLI生成的web应用页面

AfternoonLeaf

引用和评论

使用Powershell实现自动登陆域帐号