現(xiàn)在比較流行使用 html5 開(kāi)發(fā)移動(dòng)應(yīng)用，畢竟只要寫(xiě)一套html頁(yè)面就可以適配各種移動(dòng)設(shè)備，大大節(jié)省了跨平臺(tái)應(yīng)用的開(kāi)發(fā)時(shí)間。而不像以前一樣 Android 要寫(xiě)一套程序，iOS 要寫(xiě)一套，甚至 Windows Phone 還要再寫(xiě)一套程序。
雖然使用H5開(kāi)發(fā)的界面很容易適配各種手機(jī)設(shè)備，但由于系統(tǒng)的差異，如果要訪問(wèn)原生的設(shè)備功能（如攝像頭、麥克風(fēng)等）還是有些不便，或者說(shuō)不是那么統(tǒng)一。這時(shí)我們可以借助 Cordova 來(lái)開(kāi)發(fā)H5跨平臺(tái)應(yīng)用。<big style="outline: 0px;">一，Cordova介紹</big>
（1）Cordova 前身是 PhoneGap，Adobe將PhoneGap貢獻(xiàn)給Apache后成為開(kāi)源項(xiàng)目就改名成Cordova。
（2）Cordova提供了一組設(shè)備相關(guān)的API，通過(guò)這組API，移動(dòng)應(yīng)用能夠以 JavaScript 訪問(wèn)原生的設(shè)備功能，如攝像頭、麥克風(fēng)等。
（3）Cordova還提供了一組統(tǒng)一的 JavaScript 類(lèi)庫(kù)，以及為這些類(lèi)庫(kù)所用的設(shè)備相關(guān)的原生后臺(tái)代碼。
（4）Cordova支持如下移動(dòng)操作系統(tǒng)：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
<big style="outline: 0px;">二，環(huán)境搭建</big>
1，安裝Node.js ：
主要是需要用來(lái)下載和安裝Cordova
下載地址：https://nodejs.org
將下載下來(lái)的pkg文件運(yùn)行安裝即可。
在終端運(yùn)行 npm -v，如果出現(xiàn)版本號(hào)則說(shuō)明 Node.js 安裝成功
2，安裝Cordova CLI
運(yùn)行如下命令安裝：
|
1
|
sudo npm install -g cordova
|
以后如果要更新Cordova，運(yùn)行如下命令：
|
1
|
sudo npm update cordova -g
|
cordova更新完成后，還需要更新項(xiàng)目（比如更新ios項(xiàng)目）：
|
1
|
cordova platform update ios
|
3，測(cè)試下Cordova是否安裝成功
運(yùn)行如下命令：
|
1
|
cordova -v
|
顯示版本號(hào)則證明安裝成功。
<big style="outline: 0px; color: rgb(0, 0, 255);">三，創(chuàng)建一個(gè)簡(jiǎn)單的Cordova項(xiàng)目</big>
1，在終端中運(yùn)行cd命令進(jìn)入創(chuàng)建項(xiàng)目工程的目錄位置
比如我們想把工程創(chuàng)建在用戶文稿目錄下：
|
1
|
cd ~/Documents
|
2，運(yùn)行如下命令創(chuàng)建工程項(xiàng)目
|
1
|
cordova create hello com.example.hello HelloWorld
|
參數(shù)說(shuō)明：
第一個(gè)參數(shù) hello 為工程的文件夾名；
第二個(gè)參數(shù)（可選）com.example.hello 為應(yīng)用程序的id名，與Xcode中類(lèi)似，可以在 config.xml 中修改，如果不指定的話默認(rèn)為 io.cordova.hellocordova；
第三個(gè)參數(shù)（可選）HelloWorld 為App顯示的名稱(chēng)，也可在 config.xml 中修改。
3，創(chuàng)建成功后工程目錄如下：
目錄文件說(shuō)明：
conig.xml ：cordova的配置文件
hooks/ ：存放自定義cordova命令的腳本文件。
platforms/ ：各個(gè)平臺(tái)原生工程代碼，會(huì)在build時(shí)被覆蓋勿修改
plugins/ ：插件目錄（主要是提供各個(gè)平臺(tái)的原生API）
www/ ：用H5編寫(xiě)的源代碼目錄，build時(shí)會(huì)被放入各個(gè)平臺(tái)的assets\www目錄。
www/index.html ：App入口html文件
4，添加iOS平臺(tái)支持
（1）進(jìn)入工程目錄
|
1
|
cd hello
|
（2）添加iOS平臺(tái)文件
|
1
|
cordova platform add ios
|
（3）執(zhí)行完畢后可以看到在platforms文件夾下已經(jīng)創(chuàng)建了個(gè)iOS工程
<big style="outline: 0px;">四，工程的編譯、運(yùn)行</big>
直接打開(kāi) HelloWorld.xcodeproj 工程即可在Xcode中進(jìn)行編譯和運(yùn)行
1，目錄結(jié)構(gòu)如下
2，目錄結(jié)構(gòu)說(shuō)明
可以看到 Staging 文件夾下面有個(gè) www 文件夾和一個(gè) config.xml 文件（藍(lán)框標(biāo)注的）。
而在 Staging 文件夾外也有個(gè) www 文件夾和一個(gè) config.xml 文件（紅框標(biāo)注的）。
后面我們進(jìn)行開(kāi)發(fā)的時(shí)候通常有如下兩種方案：
（1）如果在Xcode編譯運(yùn)行的話，使用的是 Staging 下面的html頁(yè)面。所以我們可以把外面的www文件夾和config.xml從工程中移除（上圖紅框標(biāo)注的），只編輯使用Staging文件夾下的html文件，但不建議這么做。
因?yàn)槊看蜟ordova編譯的時(shí)候，或者更新工程、安裝插件時(shí)都會(huì)重新把紅框里的文件覆蓋到各個(gè)平臺(tái)下的文件（藍(lán)框標(biāo)注的）。同時(shí)只編輯單個(gè)平臺(tái)工程文件夾下的html頁(yè)面，也不符合一次編寫(xiě)，同時(shí)編譯發(fā)布多平臺(tái)的跨平臺(tái)應(yīng)用開(kāi)發(fā)思想。
（2）所以一般我都是編輯外面的（紅框標(biāo)注）www文件夾里的頁(yè)面，然后運(yùn)行如下命令重新 build 工程，這些頁(yè)面就會(huì)自動(dòng)覆蓋到各個(gè)平臺(tái)下對(duì)應(yīng)目錄下。
|
1
|
cordova build
|
（3）然后可以在Xcode中編譯運(yùn)行，也可以不用Xcode直接在“終端”中運(yùn)行如下命令啟動(dòng)模擬器運(yùn)行：
|
1
|
cordova emulate ios
|
可以指定模擬器使用的模擬設(shè)備：
|
1
2
|
cordova emulate ios --target iPhone-6s
cordova emulate ios --target iPhone-6s-Plus
|
3，運(yùn)行結(jié)果如下
4，我們也可以啟動(dòng)Cordova自帶的服務(wù)器，通過(guò)瀏覽器來(lái)訪問(wèn)程序頁(yè)面
（1）運(yùn)行如下命令：
|
1
|
cordova serve ios
|
（2）可以看到服務(wù)啟動(dòng)成功了
（3）在瀏覽器中打開(kāi)相關(guān)地址 http://localhost:8000 （不管是桌面瀏覽器還是移動(dòng)瀏覽器都行，下面是使用Safari）
原文出自：www.hangge.com 轉(zhuǎn)載請(qǐng)保留原文鏈接：http://www.hangge.com/blog/cache/detail_1145.html
