Cordova学习（一） 环境搭建

一、什么是cordova

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。

Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

二、环境搭建

1、下载nodeJS，cordova是利用nodeJS进行管理，其中也包含了npm管理器

（什么是NPM：Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。）

在命令行窗口确认安装完成：

2、配置ant环境，到官方主页下载新版（目前为Ant1.8.1）的ant，得到的是一个apache-ant-1.8.1-bin.zip的压缩包。将其解压到你的硬盘上，例如：C:\apache-ant-1.8.1。

window中设置ant环境变量：

ANT_HOME    C:/ apache-ant-1.8.1

path             C:/ apache-ant-1.8.1/bin

classpath      C:/apache-ant-1.8.1/lib

验证ant是否成功安装，可以进行如下操作：

依次选择：开始->运行->cmd，输入如下命令：ant

如果出现如下内容，说明安装成功：

Buildfile: build.xml does not exist!

Build failed

3、在windows上安装Cordova

在命令行窗口输入：

npm install -g cordova

安装完成，输入命令验证：

cordova -v

4、安装JDK

5、下载SDK，配置android开发环境（android studio/eclipse）

三、创建一个简单Cordova项目

创建一个MyApp工程

> cordova create myapp com.yourname.myapp MyApp     项目名 包名 类名

进入工程目录

> cd myapp

添加平台支持

> cordova platforms add ios 
> cordova platforms add android

> cordova platforms ls

添加插件

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

> cordova plugin ls

编译代码

> cordova build android

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

> cordova emulate android

在浏览器运行

> cordova serve android

通过USB直接安装到真机

> cordova run android

 

 

常用命令

（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 

 

目录结构

（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为应用的入口文件。