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框架方面我们主要介绍JQueryMobileSenchaTouch

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 JQueryMobileSenchaTouch比较

JQueryMobile优点:

ü 易开发

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

ü 易调试

ü Stackoverflow

JQueryMobile却点:

ü 比Sencha Touch慢

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

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

 

SenchaTouch优点:

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

ü 有MVC结构

ü 文档很完美

 

SenchaTouch缺点:

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

ü 第三方支持太少

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

ü IDE和支持都得付费

 

 

 

 

 

 

你可能感兴趣的:(android,Cordova)