Cordova 3.x 基础（1） -- 环境搭建（Windows / Android）

Mobile App分为三大类：Native App、Hybrid App、Web App。

其中Hybrid App介于Native App和Web App之间，它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势。缺点在于依赖于各平台的WebView，WebView的性能好坏直接决定了Hybrid App的性能。

目前国内外的Hybrid App开发框架很多，比较有代表的是国外的Cordova(aka PhoneGap)、Titanium、Sencha Touch、Intel XDK、Xamarin等和国内的AppCan、DCloud、APICloud、WeX5。

Dr. Dobb's Journal颁布的2014年度移动开发工具类Jolt大奖中PhoneGap和Titanium获得Jolt生产力奖。Titanium应该属于Web到Native的Converter，还有一种就是Native JavaScript的应用，比如Chrome Apps／Firefox OS／Windows 8 apps。

基于开源的Cordova，各大公司都推出了自己的产品，比如：Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支持Cordova。

安装运行

（1）前提环境
安装Ant，把%ANT_HOME%\bin加到Path环境变量中，不然会报Error “executing command 'ant'”错。

引用

ant -h
ant -version

安装Android SDK，把%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools加到Path环境变量中，不然会报"Error: An error occurred while listing Android targets"错，并提前创建好一个AVD。

关于API版本：

• 3.0需要的是android-17（Android 4.2.2）
• 3.1和3.2需要android-18（Android 4.3）
• 3.3和3.4需要android-19（Android 4.4.2）

引用

android -h
adb version
android list avd

安装Node.js

引用

node -v
npm -v

如果需要从git地址安装插件，好需要安装Git

引用

git --version

（2）安装Cordova CLI

引用

> npm install -g cordova

安装路径：
C:\Documents and Settings\RenSanNing\Application Data\npm\node_modules\cordova



更新Cordova版本

引用

npm update cordova -g

如果安装速度很慢的话可以设置代理：

引用

npm config set proxy http://xx.xx.xx.xx:xxxx
npm config set https-proxy http://xx.xx.xx.xx:xxxx
npm config list

或者使用国内的镜像站：http://cnpmjs.org

引用

npm config set registry http://registry.cnpmjs.org
npm info cordova

npm --registry http://registry.cnpmjs.org info cordova

现在最新版本：3.7.0（2014/10/01 发布）

（3）创建并运行project

a.新建一个目录pro，并进入

引用

> cd C:\pro

b.创建一个“myapp”工程

引用

> cordova create myapp com.yourname.myapp MyApp

c.进入工程目录

引用

> cd myapp

d.添加平台支持

引用

> cordova platforms add ios
> cordova platforms add android

> cordova platforms ls

CLI使用各个平台的SDK来创建工程。

更新Cordova工程的版本
cordova platform check
如果有类似“android @ 3.3.0 could be updated to: 3.4.0”的提示可以执行更新
也可以查看platforms\android\assets\www\cordova.js确认当前版本信息
cordova platform update android
如果提示“All platforms are up-to-date.”说明不需要更新。

e.添加插件

引用

> cordova plugin add org.apache.cordova.device
> cordova plugin add org.apache.cordova.console

> cordova plugin ls

插件可以从很多地方安装：
插件名（从plugin repository下载）：cordova plugin add org.apache.cordova.console
git地址：cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
本地地址：cordova plugin add d:\cordova-3.3.0\cordova-plugin-camera
本地文件：cordova plugin add plugin.tar.gz
指定版本
cordova plugin add org.apache.cordova.console@0.2.1
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
等等

f.编译代码

引用

> cordova build android

g.运行代码
在模拟器上运行（前提是创建好AVD）

引用

> cordova emulate android

Windows下convert命令冲突，直接“cordova emulate android”会报Error: spawn ENOENT，需要先启动模拟器。

h.在浏览器运行

引用

> cordova serve android

浏览器访问地址：http://localhost:8000/，就可以和调试页面一样调试app的布局了。如果app中使用了cordova的Native API调用，会弹出以下对话框：

这是因为浏览器无法提供@JavascriptInterface的接口，Cordova视图通过prompt()和Native交互，这样做是因为Android2.3 simulator的Bug。所以调试页面布局，无视即可。

i.通过USB直接安装到真机

引用

> cordova run android

Cordova CLI 采用 Lazy Loading的方式，当你创建Cordova工程、添加平台支持，安装插件等等的时候从服务器上下载相应的文件解压到相应的文件夹中。lazy-loaded的文件存放在系统用户的文件夹下，比如Windows XP是C:\Documents and
Settings\RenSanNing\.cordova。所以第一次使用的时候会比较慢。

常用命令

（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命令查看。

目录结构

（1）目录一览：

引用

myApp/
|-- config.xml
|-- hooks/
| | |-- before_xxx/
| | `-- after_xxx/
|-- merges/
| | |-- android/
| | `-- ios/
|-- platforms/
| |-- android/
| `-- ios/
|-- plugins/
| |-- org.apache.cordova.console/
| `-- org.apache.cordova.device/
|-- www/
| |-- css/
| |-- img/
` |-- js/
  `-- index.html

（2）config.xml
cordova的配置文件

（3）hooks目录
存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build。
Hook可以采用任何编程语言来写，Cordova CLI采用的是Node.js，所以一般都是用它来写。

这里提供了3个常用的Hook脚本：
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

（4）merges目录
存放各个平台特殊的文件，会和www进行合并编译，相同的文件merges下的文件优先。

比如：

引用

merges/
|-- ios/
| `-- app.js
|-- android/
| `-- android.js
www/
`-- app.js

编译成iOS应用的话，包含merges/ios/app.js；而Android应用的话，包含www/app.js、merges/android/android.js

（5）platforms目录
各个平台的原生代码工程，不要手动修改，因为在build的时候会被覆盖。

（6）plugins目录
插件目录（cordova提供的原生API也是以插件的形式提供的）。

（7）www目录
源代码目录，在cordova prepare的时候会被copy到各个平台工程的assets\www目录中。
其中index.html为应用的入口文件。

更多：http://cordova.apache.org/docs/en/3.4.0/index.html

评论

5 楼 zzhi191 2014-12-16  

正在学习中,能不能转载一下   http://yijiebuyi.com

4 楼 lqixv 2014-11-15  

  

3 楼 rensanning 2014-07-27  

@yanhaijing
参考这里：http://rensanning.iteye.com/blog/2017380

2 楼 yanhaijing 2014-07-25  

请问如何更换app图标

1 楼 leibf 2014-04-08  

mark,不错