Cordova入门课程

 Cordova只是一个Webview的架子，只提供给你能够调用Native API的接口，在UI方面他不会管你页面是什么样子，也不会提供给你任何UI方面的功能，所以UI方面还要借助于jQuery Mobile、Sencha Touch、App Framework（jQMoby）、KendoUI Mobile、Adobe Topcoat、jQTouch、Ionic Framework、Onsen UI等等。

 

1. 安装 nodejs

下载：http://nodejs.org/download/

2. 安装 cordova

打开cmd命令行，执行：

npm install -g cordova

3. 安装 ant

ant 下载：

http://ant.apache.org/bindownload.cgi?Preferred=http%3A%2F%2Fmirrors.cnnic.cn%2Fapache%2F

4. 创建一个 cordova 工程

cordova create 创建文件目录  包名  项目名称(如果省略包名就会创建一个默认包名和项目名称的cordova的项目)，例如：cordova create d:\cordovatest com.saiven.cordovaTest CordovaTestProject

5. 进入工程文件夹

 

6. 添加平台支持

有选择的添加即可，如这里以 android 示例。首先应确定已安装配置好了 Android SDK 开发环境，然后执行如下命令：

$ cordova platform add android

您也可有选择的添加其他平台支持，针对每种平台，均应确定已配置好了对应平台的开发环境。

$ cordova platform add ios

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

$ cordova platform add wp7

$ cordova platform add wp8

$ cordova platform add windows8

7. 添加插件支持

主要为系统硬件访问的插件，常见如照相机、媒体访问、设备访问、加速设备、定位设备等。应按需添加。

基本设备资讯 （设备 API）：

$ cordova plugin add org.apache.cordova.device

网路连接和电池事件：

$ cordova plugin add org.apache.cordova.network-information

$ cordova plugin add org.apache.cordova.battery-status

加速度计、 指南针、 和地理定位：

$ cordova plugin add org.apache.cordova.device-motion

$ cordova plugin add org.apache.cordova.device-orientation

$ cordova plugin add org.apache.cordova.geolocation

相机、 媒体重播和捕获：

$ cordova plugin add org.apache.cordova.camera

$ cordova plugin add org.apache.cordova.media-capture

$ cordova plugin add org.apache.cordova.media

访问设备或网路 （档 API） 上的档：

$ cordova plugin add org.apache.cordova.file

$ cordova plugin add org.apache.cordova.file-transfer

通过对话方块或振动发出通知：

$ cordova plugin add org.apache.cordova.dialogs

$ cordova plugin add org.apache.cordova.vibration

连络人：

$ cordova plugin add org.apache.cordova.contacts

全球化：

$ cordova plugin add org.apache.cordova.globalization

闪屏：

$ cordova plugin add org.apache.cordova.splashscreen

打开新的浏览器视窗 (InAppBrowser):

$ cordova plugin add org.apache.cordova.inappbrowser

调试主控台：

$ cordova plugin add org.apache.cordova.console

查看当前应用已安装的插件：

$ cordova plugin ls # or ‘plugin list’

[ ‘org.apache.cordova.console’ ]

删除已安装的插件：

$ cordova plugin rm org.apache.cordova.console

$ cordova plugin remove org.apache.cordova.console # same

通过多个参数增加或删除插件：

$cordovaplugin add org.apache.cordova.console org.apache.cordova.device

具体可参考这里：

http://docs.phonegap.com/zh/3.4.0/guide_cli_index.md.html

8. 参考 API 文档，开发应用

主要为开发 lzwmeapp/www 目录下的 html5 应用。志文工作室推荐您结合 jQuery Mobile 或 Sencha Touch 进行快速开发。

API 参考：

http://docs.phonegap.com/zh/3.4.0/cordova_plugins_pluginapis.md.html

http://docs.phonegap.com/zh/3.4.0/cordova_events_events.md.html

9. 构建应用

cordova build

或

cordova build android

即将 lzwmeapp/www 下的内容，构建到添加的各平台内。如 android 平台，会构建到此目录：

lzwmeapp\platforms\android\assets\www

10. 测试应用

10.1 在模拟器上安装测试应用

如android平台，应先将 android 模拟器启动并打开。

cordova emulate android

10.2 使用真机测试（推荐）

可使用如下命令：

cordova run android

10.3 在浏览器中运行

cordova serve android

10.4 使用 Ripple Emulator 调试

npm install -g ripple-emulator

ripple emulate

详细参考：http://lzw.me/a/ripple-emulator.html

11. 打包为发布的应用

1. 本地打包（需要安装配置对应平台开发环境）

cordova build android –release

2. phonegap 在线打包

https://build.phonegap.com/

3. 新浪 sae 云窗调试器

http://sae.sina.com.cn/doc/mobile/tutorial.html

4. 打包android应用：借助 eclipse 来完成

12. 常用命令

（1）create <directory> [<id> [<name>]]

创建一个cordova工程，id为package名。

（2）platform [ls | list]

列出该工程支持哪些平台

（3）platform add <platform> [<platform> …]

为工程添加一个或多个平台支持

（4）platform [rm | remove] <platform> [<platform> …]

删除该工程的某个平台支持

（5）platform [up | update] <platform>

更新该工程某个平台的Cordova版本

（6）plugin [ls | list]

列出该工程包含哪些插件

（7）plugin add <path-to-plugin> [<path-to-plugin> …]

为工程添加一个或多个插件

（8）plugin [rm | remove] <plugin-name> [<plugin-name> …]

从该工程中删除某个插件

（9）plugin search [<keyword1><keyword2> …]

根据关键字从registry中搜索插件

（10）compile [platform…]

编译指定平台的app包

（11）build [<platform> [<platform> […]]]

先做prepare（拷贝文件）后做compile

（12）emulate [<platform> [<platform> […]]]

启动模拟器运行应用

（13）serve [port]

启动本地web服务来访问www，默认端口是8000

platform和platforms等价

plugin和plugins等价

详细的内容可以通过cordova help命令查看。

13. 目录结构

assets\www 

这个就是Cordova工程根目录下的www文件夹的所有内容。（cordova.js和cordova_plugins.js是Cordova自动创建的） 

 

***可见Cordova最终也会把你的代码以assets的形式打包到apk中，所以代码安全上，需要对js等进行压缩，核心代码最好不要放在客户端！！！

 

Cordova Android工程的代码不是特别的复杂，通过继承CordovaActivity在首页面的Activity中，解析config.xml文件，做初期化设置，然后嵌入CordovaWebView并加载config.xml中配置的页面URL。

14. UI框架介绍

文档一开始提到Cordova只是提供硬件设备调用的接口，不提供任何UI的支持。UI框架方面我们主要介绍JQueryMobile和SenchaTouch

14.1 JQueryMobile简介

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。

此框架简单易用。页面开发主要使用标记，无需或仅需很少 JavaScript。

jQuery Mobile 框架的整体大小比较小，JavaScript 库 12KB，CSS 6KB，还包括一些图标。

所有浏览器都应该能够访问全部基础内容。

所有浏览器都应该能够访问全部基础功能。

开发方式：html(html5) + css(css3) + javascript

14.2 SenchaTouch简介

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。

基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架

开发方式：Extjs(javascript)

 

14.3 JQueryMobile和SenchaTouch比较

JQueryMobile优点：

ü 易开发

ü 不错的第三方支持，插件就是知识，知识就是力量

ü 易调试

ü Stackoverflow

JQueryMobile却点：

ü 比Sencha Touch慢

ü APP几乎是同样的UI，如果你是个能忍的UI设计师，那你就可以接受这种呆滞的UI

ü 官方文档缺少一些东西，因为其在UI方面介绍的太多而欠缺在架构方面的介绍

 

SenchaTouch优点：

ü 运行非非常流畅，有中像是原生API开发的一样

ü 有MVC结构

ü 文档很完美

 

SenchaTouch缺点：

ü 对于缺乏经验的开发者来说过于复杂

ü 第三方支持太少

ü 由于只支持webkit，所以除过混合应用程序外，对于一般程序来说作用不大

ü IDE和支持都得付费