現(xiàn)在比較流行使用 html5 開發(fā)移動應(yīng)用翠桦，畢竟只要寫一套html頁面就可以適配各種移動設(shè)備，大大節(jié)省了跨平臺應(yīng)用的開發(fā)時間糊渊。而不像以前一樣 Android 要寫一套程序市咆，iOS 要寫一套，甚至 Windows Phone 還要再寫一套程序再来。
雖然使用H5開發(fā)的界面很容易適配各種手機(jī)設(shè)備，但由于系統(tǒng)的差異磷瘤，如果要訪問原生的設(shè)備功能（如攝像頭芒篷、麥克風(fēng)等）還是有些不便，或者說不是那么統(tǒng)一采缚。這時我們可以借助 Cordova 來開發(fā)H5跨平臺應(yīng)用针炉。<big style="outline: 0px;">一，Cordova介紹</big>
（1）Cordova 前身是 PhoneGap扳抽，Adobe將PhoneGap貢獻(xiàn)給Apache后成為開源項(xiàng)目就改名成Cordova篡帕。
（2）Cordova提供了一組設(shè)備相關(guān)的API，通過這組API贸呢，移動應(yīng)用能夠以 JavaScript 訪問原生的設(shè)備功能镰烧，如攝像頭、麥克風(fēng)等楞陷。
（3）Cordova還提供了一組統(tǒng)一的 JavaScript 類庫怔鳖，以及為這些類庫所用的設(shè)備相關(guān)的原生后臺代碼。
（4）Cordova支持如下移動操作系統(tǒng)：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian固蛾。
<big style="outline: 0px;">二结执，環(huán)境搭建</big>
1，安裝Node.js ：
主要是需要用來下載和安裝Cordova
下載地址：https://nodejs.org
將下載下來的pkg文件運(yùn)行安裝即可艾凯。
在終端運(yùn)行 npm -v，如果出現(xiàn)版本號則說明 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铸敏，測試下Cordova是否安裝成功
運(yùn)行如下命令：
|
1
|
cordova -v
|
顯示版本號則證明安裝成功缚忧。
<big style="outline: 0px; color: rgb(0, 0, 255);">三杈笔，創(chuàng)建一個簡單的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ù)說明：
第一個參數(shù) hello 為工程的文件夾名蒙具；
第二個參數(shù)（可選）com.example.hello 為應(yīng)用程序的id名球榆，與Xcode中類似，可以在 config.xml 中修改禁筏，如果不指定的話默認(rèn)為 io.cordova.hellocordova持钉；
第三個參數(shù)（可選）HelloWorld 為App顯示的名稱，也可在 config.xml 中修改篱昔。
3每强，創(chuàng)建成功后工程目錄如下：
目錄文件說明：
conig.xml ：cordova的配置文件
hooks/ ：存放自定義cordova命令的腳本文件州刽。
platforms/ ：各個平臺原生工程代碼空执，會在build時被覆蓋勿修改
plugins/ ：插件目錄（主要是提供各個平臺的原生API）
www/ ：用H5編寫的源代碼目錄，build時會被放入各個平臺的assets\www目錄穗椅。
www/index.html ：App入口html文件
4辨绊，添加iOS平臺支持
（1）進(jìn)入工程目錄
|
1
|
cd hello
|
（2）添加iOS平臺文件
|
1
|
cordova platform add ios
|
（3）執(zhí)行完畢后可以看到在platforms文件夾下已經(jīng)創(chuàng)建了個iOS工程
<big style="outline: 0px;">四匹表，工程的編譯门坷、運(yùn)行</big>
直接打開 HelloWorld.xcodeproj 工程即可在Xcode中進(jìn)行編譯和運(yùn)行
1，目錄結(jié)構(gòu)如下
2默蚌，目錄結(jié)構(gòu)說明
可以看到 Staging 文件夾下面有個 www 文件夾和一個 config.xml 文件（藍(lán)框標(biāo)注的）。
而在 Staging 文件夾外也有個 www 文件夾和一個 config.xml 文件（紅框標(biāo)注的）苇羡。
后面我們進(jìn)行開發(fā)的時候通常有如下兩種方案：
（1）如果在Xcode編譯運(yùn)行的話敏簿，使用的是 Staging 下面的html頁面。所以我們可以把外面的www文件夾和config.xml從工程中移除（上圖紅框標(biāo)注的）宣虾，只編輯使用Staging文件夾下的html文件惯裕，但不建議這么做。
因?yàn)槊看蜟ordova編譯的時候绣硝，或者更新工程蜻势、安裝插件時都會重新把紅框里的文件覆蓋到各個平臺下的文件（藍(lán)框標(biāo)注的）。同時只編輯單個平臺工程文件夾下的html頁面鹉胖，也不符合一次編寫握玛，同時編譯發(fā)布多平臺的跨平臺應(yīng)用開發(fā)思想够傍。
（2）所以一般我都是編輯外面的（紅框標(biāo)注）www文件夾里的頁面，然后運(yùn)行如下命令重新 build 工程挠铲，這些頁面就會自動覆蓋到各個平臺下對應(yīng)目錄下冕屯。
|
1
|
cordova build
|
（3）然后可以在Xcode中編譯運(yùn)行，也可以不用Xcode直接在“終端”中運(yùn)行如下命令啟動模擬器運(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，我們也可以啟動Cordova自帶的服務(wù)器瓢棒，通過瀏覽器來訪問程序頁面
（1）運(yùn)行如下命令：
|
1
|
cordova serve ios
|
（2）可以看到服務(wù)啟動成功了
（3）在瀏覽器中打開相關(guān)地址 http://localhost:8000 （不管是桌面瀏覽器還是移動瀏覽器都行，下面是使用Safari）
原文出自：www.hangge.com 轉(zhuǎn)載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1145.html
