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