Mobile App 分為三大類：Native App,Hybrid App,Web App。其中 Hybrid App 介于 Native App 和 Web App 之間，它能兼顧 Native App 的良好用戶體驗(yàn)及強(qiáng)大的功能并具有 Web App 跨平臺(tái)快速開發(fā)的優(yōu)勢(shì)。缺點(diǎn)在于依賴于各平臺(tái)的 WebView，WebView 的性能好壞直接決定了 Hybrid App 的性能。
目前國(guó)內(nèi)外的 Hybrid App 開發(fā)框架很多，比較有代表的是國(guó)外的 Cordova(aka PhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin 等和國(guó)內(nèi)的 AppCan、Rexsee、xFace，而 Dr. Dobb's Journal 頒布的2014年度移動(dòng)開發(fā)工具類 Jolt 大獎(jiǎng)中 PhoneGap 和 Titanium 獲得 Jolt 生產(chǎn)力獎(jiǎng)。Titanium 應(yīng)該屬于 Web 到 Native 的 Converter，還有一種就是 Native JavaScript 的應(yīng)用，比如 Chrome Apps／Firefox OS／Windows 8 apps。
基于開源的 Cordova，各大公司都推出了自己的產(chǎn)品，比如：Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft 的 Visual Studio 也支持 Cordova。
（1）前提環(huán)境
安裝 Ant，把%ANT_HOME%\bin 加到 Path 環(huán)境變量中，不然會(huì)報(bào) Error “executing command 'ant'”錯(cuò)。
引用
ant -h
ant -version安裝 Android SDK，把%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools 加到 Path 環(huán)境變量中，不然會(huì)報(bào)"Error: An error occurred while listing Android targets"錯(cuò)，并提前創(chuàng)建好一個(gè) AVD。
關(guān)于 API 版本：
引用
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
http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/1.1.png" alt="picture1.1" />
更新 Cordova 版本
引用
npm update cordova -g如果安裝速度很慢的話可以設(shè)置代理：
引用
npm config set proxy http://xx.xx.xx.xx:xxxx
npm config set https-proxy http://xx.xx.xx.xx:xxxx
npm config list或者使用國(guó)內(nèi)的鏡像站：http://cnpmjs.org
引用
npm config set registry http://registry.cnpmjs.org
npm info cordova
npm --registry http://registry.cnpmjs.org info cordova現(xiàn)在最新版本：3.7.0（2014/10/01 發(fā)布）
（3）創(chuàng)建并運(yùn)行project
a.新建一個(gè)目錄 pro，并進(jìn)入
引用
> cd C:\prob.創(chuàng)建一個(gè)“myapp”工程
引用
> cordova create myapp com.yourname.myapp MyAppc.進(jìn)入工程目錄
引用
> cd myappd.添加平臺(tái)支持
引用
> cordova platforms add ios
> cordova platforms add android
> cordova platforms lsCLI 使用各個(gè)平臺(tái)的 SDK 來(lái)創(chuàng)建工程。
更新 Cordova 工程的版本
cordova platform check
如果有類似“android @ 3.3.0 could be updated to: 3.4.0”的提示可以執(zhí)行更新
也可以查看 platforms\android\assets\www\cordova.js 確認(rèn)當(dāng)前版本信息
cordova platform update android
如果提示“All platforms are up-to-date.”說(shuō)明不需要更新。
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 androidg.運(yùn)行代碼
在模擬器上運(yùn)行（前提是創(chuàng)建好 AVD）
引用
> cordova emulate androidWindows 下 convert 命令沖突，直接“cordova emulate android”會(huì)報(bào) Error: spawn ENOENT，需要先啟動(dòng)模擬器。
h.在瀏覽器運(yùn)行
引用
> cordova serve android瀏覽器訪問(wèn)地址：http://localhost:8000/，就可以和調(diào)試頁(yè)面一樣調(diào)試 app 的布局了。如果 app 中使用了 cordova 的 Native API 調(diào)用，會(huì)彈出以下對(duì)話框：
http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/1.2.png" alt="picture1.2" />
這是因?yàn)闉g覽器無(wú)法提供@JavascriptInterface 的接口，Cordova 視圖通過(guò) prompt()和 Native 交互，這樣做是因?yàn)?Android2.3 simulator 的 Bug。所以調(diào)試頁(yè)面布局，無(wú)視即可。
i.通過(guò) USB 直接安裝到真機(jī)
引用
> cordova run androidCordova CLI 采用 Lazy Loading 的方式，當(dāng)你創(chuàng)建 Cordova 工程、添加平臺(tái)支持，安裝插件等等的時(shí)候從服務(wù)器上下載相應(yīng)的文件解壓到相應(yīng)的文件夾中。lazy-loaded 的文件存放在系統(tǒng)用戶的文件夾下，比如 Windows XP 是C:\Documents and Settings\RenSanNing.cordova。所以第一次使用的時(shí)候會(huì)比較慢。
（1）create
創(chuàng)建一個(gè) cordova 工程，id 為 package 名。
（2）platform [ls | list]
列出該工程支持哪些平臺(tái)
（3）platform add
為工程添加一個(gè)或多個(gè)平臺(tái)支持
（4）platform [rm | remove]
刪除該工程的某個(gè)平臺(tái)支持
（5）platform [up | update]
更新該工程某個(gè)平臺(tái)的 Cordova 版本
（6）plugin [ls | list]
列出該工程包含哪些插件
（7）plugin add
為工程添加一個(gè)或多個(gè)插件
（8）plugin [rm | remove]
從該工程中刪除某個(gè)插件
（9）plugin search [
根據(jù)關(guān)鍵字從 registry 中搜索插件
（10）compile [platform...]
編譯指定平臺(tái)的 app 包
（11）build [
先做 prepare（拷貝文件）后做 compile
（12）emulate [
啟動(dòng)模擬器運(yùn)行應(yīng)用
（13）serve [port]
啟動(dòng)本地 web 服務(wù)來(lái)訪問(wèn) www，默認(rèn)端口是8000
引用
platform 和 platforms 等價(jià)
plugin 和 plugins 等價(jià)詳細(xì)的內(nèi)容可以通過(guò) 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 命令的腳本文件。每個(gè) project 命令都可以定義 before 和 after 的 Hook，比如：before_build、after_build。
Hook 可以采用任何編程語(yǔ)言來(lái)寫，Cordova CLI 采用的是 Node.js，所以一般都是用它來(lái)寫。
這里提供了3個(gè)常用的 Hook 腳本：
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/
（4）merges 目錄
存放各個(gè)平臺(tái)特殊的文件，會(huì)和 www 進(jìn)行合并編譯，相同的文件 merges 下的文件優(yōu)先。
比如：
引用
merges/
|-- ios/
| `-- app.js
|-- android/
| `-- android.js
www/
`-- app.js編譯成 iOS 應(yīng)用的話，包含 merges/ios/app.js；而 Android 應(yīng)用的話，包含 www/app.js、merges/android/android.js
（5）platforms 目錄
各個(gè)平臺(tái)的原生代碼工程，不要手動(dòng)修改，因?yàn)樵?build 的時(shí)候會(huì)被覆蓋。
（6）plugins 目錄
插件目錄（cordova 提供的原生 API 也是以插件的形式提供的）。
（7）www 目錄
源代碼目錄，在 cordova prepare 的時(shí)候會(huì)被 copy 到各個(gè)平臺(tái)工程的 assets\www 目錄中。
其中 index.html 為應(yīng)用的入口文件。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多