Cordova 环境搭建

windows下的安装运行

（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）创建并运行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。所以第一次使用的时候会比较慢。

导入eclipse

打开eclipse，File/New/Project，选择Android Project From Existing Code:

copy projects into workspace 千万别勾上，我死于此n次。

有两个项目，一个HelloWorld一个HelloWorld-CordovaLib，后者是类库项目，前者依赖于后者。项目的编码是GBK，最好都改成UTF-8。

常用命令

（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

mac下的安装运行

（1）前提环境

1. 在App Store安装xcode

2. 安装node.js环境

官网： http://nodejs.org/

点击【install】，会下载mac的安装包。正常安装即可

3. 使用命令行安装 cordova

官网： http://cordova.apache.org

命令行帮助： http://cordova.apache.org/docs/en/4.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface

主要命令： npm install -g cordova

如果提示权限不足的话，使用：sudo  npm install -g cordova

4. 创建新项目

命令行：cordova create hello com.mydomain.hello HelloWorld

第一个参数是文件目录，第二个参数是app id, 第三个参数是显示的title

5. 为项目安装平台模块，这里只增加ios

cd hello

cordova platform add ios

6. 安装需要的扩展插件

命令：

cordova plugin add org.apache.cordova.device

7. 双击HelloWorld.xcodeproj，打开xcode的开发环境

xcodeproj工程项目的文件位置：hello/platform/ios/