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
運行如下命令安裝：

1	sudo npm install -g cordova

以后如果要更新Cordova，運行如下命令：

1	sudo npm update cordova -g

cordova更新完成后，還需要更新項目（比如更新ios項目）：

1	cordova platform update ios

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

1	cordova -v

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

 

三，創建一個簡單的Cordova項目
1，在終端中運行cd命令進入創建項目工程的目錄位置 

比如我們想把工程創建在用戶文稿目錄下：

1	cd ~/Documents

2，運行如下命令創建工程項目

1	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）進入工程目錄

1

cd hello

（2）添加iOS平台文件

1	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 工程，這些頁面就會自動覆蓋到各個平台下對應目錄下。

1	cordova build

3，運行結果如下

原文出自： www.hangge.com  轉載請保留原文鏈接： http://www.hangge.com/blog/cache/detail_1145.html