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

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

1.    PhoneGap(Cordova)

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

    目前国内外的HybridApp开发框架很多，比较有代表的是国外的Cordova(akaPhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin等和国内的AppCan、Rexsee、xFace，而Dr. Dobb's Journal颁布的2014年度移动开发工具类Jolt大奖中 PhoneGap和Titanium获得Jolt生产力奖。Titanium应该属于Web到Native的Converter，还有一种就是 NativeJavaScript的应用，比如Chrome Apps／Firefox OS／Windows 8 apps。

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

2.    安装运行

（1）前提环境

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

引用

ant -h
ant -version

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

引用

android -h
adb version
android list avd

    安装Node.js

引用

node -v
npm -v

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

引用

git --version

（2）安装PhoneGapCordova CLI

引用

> npm install -g phonegap

> npm install -gcordova

安装路径：
C:\Users\YourDomain\AppData\Roaming\npm\node_modules\cordova


    更新Cordova版本

引用

npm update cordova –g

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

引用

npm config set proxyhttp://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 registryhttp://registry.cnpmjs.org
npm info cordova
npm --registry http://registry.cnpmjs.org info cordova

（3）创建并运行project

a.进入需要放置工程的文件夹pro，并进入

引用

> cd  C:\...\pro

b.创建一个“myapp”工程，包命为com.yourname.myapp，标题为MyApp

引用

> cordova create myapp “com.yourname.myapp” MyApp

c.进入工程目录

引用

> cd myapp

d.添加平台支持

引用

> cordova platforms addios
> cordova platforms add android

> cordova platforms ls(查看安装了哪些平台)

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

更新Cordova工程平台的版本

cordova platform check

如果有类似“android @ 3.3.0 could be updatedto: 3.4.0”的提示可以执行更新
也可以查看platforms\android\assets\www\cordova.js确认当前版本信息

cordova platform update android

如果提示“All platforms are up-to-date.”说明不需要更新。

e.添加插件

引用

>  cordova plugin searchkeyword（搜索相关keyword插件）

 

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

> cordova plugin ls

插件可以从很多地方安装：

第三方插件库：http://plugins.cordova.io/#/

插件名（从plugin repository下载）：cordova plugin add org.apache.cordova.console
git地址：cordova plugin addhttps://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
本地地址：cordova plugin addd:\cordova-3.3.0\cordova-plugin-camera
本地文件：cordova plugin add plugin.tar.gz
指定版本
cordova plugin add [email protected]
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 emulateandroid

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

h.在浏览器运行（服务器）

引用

> cordova serve android

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

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

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

引用

> cordova run android

（注：可用PhoneGap指令替换，如下：

$ phonegap  create  yourProjectName  “com.example.yourpackage”  yourProjectTitleName

$ cd  yourProjectName 

$ phonegap  run  android （run + 平台，表示在那个平台下运行编译））

3.    常用命令

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