標籤：
原文地址：http://rensanning.iteye.com/blog/2016364CordovaPhoneGap Mobile App分為三大類：Native App,Hybrid App,Web App。其中Hybrid App介於Native App和Web App之間，它能兼顧Native App的良好使用者體驗及強大的功能並具有Web App跨平台快速開發的優勢。缺點在於依賴於各平台的WebView，WebView的效能好壞直接決定了Hybrid App的效能。
目前國內外的Hybrid App開發架構很多，比較有代表的是國外的Cordova(aka PhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin等和國內的AppCan、Rexsee、xFace，而Dr. Dobb‘s Journal頒布的2014年度移動開發工具類Jolt大獎中PhoneGap和Titanium獲得Jolt生產力獎。Titanium應該屬於Web到Native的Converter，還有一種就是Native JavaScript的應用，比如Chrome Apps／Firefox OS／Windows 8 apps。
基於開源的Cordova，各大公司都推出了自己的產品，比如：Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支援Cordova。
安裝運行
（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.7.0（2014/10/01 發布）
（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 [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 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。所以第一次使用的時候會比較慢。
常用命令
（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
Cordova 3.x 基礎（1） -- 環境搭建（Windows / Android）（轉）
