Cordova - 使用Cordova開發iOS應用實戰1（配置、開發第一個應用）

現在比較流行使用 html5 開發移動應用，畢竟只要寫一套html頁面就可以適配各種移動裝置，大大節省了跨平臺應用的開發時間。而不像以前一樣 Android要寫一套程式，iOS 要寫一套，甚至Windows Phone 還要再寫一套程式。
雖然使用H5開發的介面很容易適配各種手機裝置，但由於系統的差異，如果要訪問原生的裝置功能（如攝像頭、麥克風等）還是有些不便，或者說不是那麼統一。這時我們可以藉助 Cordova 來開發H5跨平臺應用。

一，Cordova介紹

（1）Cordova 前身是 PhoneGap，Adobe將PhoneGap貢獻給Apache後成為開源專案就改名成Cordova。
（2）Cordova提供了一組裝置相關的API，通過這組API，移動應用能夠以 JavaScript 訪問原生的裝置功能，如攝像頭、麥克風等。
（3）Cordova還提供了一組統一的 JavaScript 類庫，以及為這些類庫所用的裝置相關的原生後臺程式碼。
（4）Cordova支援如下移動作業系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

二，環境搭建

1，安裝Node.js ：主要是需要用來下載和安裝Cordova下載地址：https://nodejs.org將下載下來的pkg檔案執行安裝即可。

在終端執行 npm -v，如果出現版本號則說明 Node.js 安裝成功

2，安裝Cordova CLI執行如下命令安裝：

sudo npm install -g cordova

以後如果要更新Cordova，執行如下命令：

sudo npm update cordova -g

cordova更新完成後，還需要更新專案（比如更新ios專案）：

cordova platform update ios

3，測試下Cordova是否安裝成功執行如下命令：

cordova -v

顯示版本號則證明安裝成功。

三，建立一個簡單的Cordova專案

1，在終端中執行cd命令進入建立專案工程的目錄位置

比如我們想把工程建立在使用者文稿目錄下：

cd ~/Documents

2，執行如下命令建立工程專案

cordova create hello com.example.hello HelloWorld

引數說明：第一個引數 hello 為工程的資料夾名；
第二個引數（可選）com.example.hello 為應用程式的id名，與Xcode中類似，可以在 config.xml 中修改，如果不指定的話預設為 io.cordova.hellocordova；
第三個引數（可選）HelloWorld 為App顯示的名稱，也可在 config.xml 中修改。

3，建立成功後工程目錄如下：

目錄檔案說明：conig.xml ：cordova的配置檔案
hooks/ ：存放自定義cordova命令的指令碼檔案。
platforms/ ：各個平臺原生工程程式碼，會在build時被覆蓋勿修改
plugins/ ：外掛目錄（主要是提供各個平臺的原生API）
www/ ：用H5編寫的原始碼目錄，build時會被放入各個平臺的assets\www目錄。
www/index.html ：App入口html檔案

4，新增iOS平臺支援（1）進入工程目錄

cd hello

（2）新增iOS平臺檔案

cordova platform add ios

（3）執行完畢後可以看到在platforms資料夾下已經建立了個iOS工程

四，工程的編譯、執行

直接開啟 HelloWorld.xcodeproj 工程即可在Xcode中進行編譯和執行

1，目錄結構如下

2，目錄結構說明

可以看到  Staging 資料夾下面有個 www 資料夾和一個 config.xml 檔案（藍框標註的）。
而在 Staging 資料夾外也有個 www 資料夾和一個 config.xml 檔案（紅框標註的）。

** 後面我們進行開發的時候通常有如下兩種方案：**
（1）如果在Xcode編譯執行的話，使用的是 Staging 下面的html頁面。所以我們可以把外面的www資料夾和config.xml從工程中移除（上圖紅框標註的），只編輯使用Staging資料夾下的html檔案，但不建議這麼做。
因為每次Cordova編譯的時候，或者更新工程、安裝外掛時都會重新把紅框裡的檔案覆蓋到各個平臺下的檔案（藍框標註的）。同時只編輯單個平臺工程資料夾下的html頁面，也不符合一次編寫，同時編譯釋出多平臺的跨平臺應用開發思想。
（2）所以一般我都是編輯外面的（紅框標註）www資料夾裡的頁面，然後執行如下命令重新 build 工程，這些頁面就會自動覆蓋到各個平臺下對應目錄下。

cordova build

（3）然後可以在Xcode中編譯執行，也可以不用Xcode直接在“終端”中執行如下命令啟動模擬器執行：

cordova emulate ios

可以指定模擬器使用的模擬裝置：

cordova emulate ios --target iPhone-6s
cordova emulate ios --target iPhone-6s-Plus

3，執行結果如下

原文出自：
www.hangge.com
轉載請保留原文連結：
[http://www.hangge.com/blog/cache/detail_1145.html]
(http://www.hangge.com/blog/cache/detail_1145.html)