Cordova5，cordova

Cordova5，cordova
 由於最近公司的項目要求用Cordova來進行開發，便開始了對Cordova的學習。由於本人之前也是做iOS開發，因此相關內容主要從iOS平台的角度來寫。剛開始學習Cordova這個平台，希望以此總結所學並給需要的人提供一些參考，如有不當的地方敬請指正。 關於App到底是Native還是Web或者Hybrid的討論很多，而Cordova就是這樣一套為Web開發人員提供進行快速行動裝置 App開發的架構。其前身為Adobe的PhoneGap架構，後貢獻給Apache社區成為了一個開源項目。Cordova既可使熟悉Web開發的技術人員很容易的開發行動裝置 App，也可以讓原來的原生行動裝置 App開發人員整合Web頁面，並通過plugin（外掛程式）實現裝置底層資源與js的互操作，是較理想的Hybrid或Web App的解決方案，可實現App的低成本和快速開發。 

• 1. 環境搭建

  安裝Xcode： 這個不用多說了，直接在AppStore下載最新版安裝即可。  安裝Node.js ： 主要是需要用來下載和安裝Cordova，需要注意：不要下載最新的4.x.x版，可能會由於版本太新無法安裝cordova，下面的版本已經證實可用。 ：https://nodejs.org/download/release/v0.12.7/ 下載後直接運行安裝檔案pkg，一直“繼續”直至安裝成功。在終端運行npm -v出現版本號碼即說明成功。 然後就可以安裝Cordova了。  安裝Cordova CLI： 

sudo npm install -g cordova或者sudo npm install -g cordova@x.x.x來安裝指定版本

 註：本文編寫時最新為5.3.3版  更新Cordova： 

sudo npm update cordova -g

 如果下載失敗的話，需要用以下的方式引用國內鏡像站： 

npm config set registry http://registry.cnpmjs.org npm info cordova  npm --registry http://registry.cnpmjs.org info cordova

 安裝成功畫面：  或輸入：

cordova -v  

顯示版本號碼即證明安裝成功。 基於iOS平台的環境還是相對比較容易的，完成以上步驟後環境搭建結束。  

• 2. 建立第一個Cordova項目

 開啟終端，cd到相應的路徑下，輸入： 

$cd ~/Documents $cordova create hello com.example.hello HelloWorld

 加-d可以顯示工程的建立的詳細情況。 第一個參數hello為工程的檔案夾名；第二個參數（可選）com.example.hello為應用程式的id名，與Xcode中類似，可以在config.xml中修改，如果不指定的話預設為io.cordova.hellocordova；第三個參數（可選）HelloWorld為App顯示的名稱，也可在config.xml中修改。 建立成功後可以開啟hello目錄查看以下結構： |--conig.xml         //cordova的設定檔|--hooks/             //存放自訂cordova命令的指令檔。      ||--README.md |--platforms/      //各個平台原生工程代碼，會在build時被覆蓋勿修改|--plugins/        //外掛程式目錄（主要是提供各個平台的原生API）|--www/          //用H5編寫的原始碼目錄，build時會被放入各個平台的assets\www目錄。||--css/||--img/||--index.html       //App入口html檔案||--js/  

• 3. 添加iOS平台支援

 在終端中輸入： 進入工程目錄：

$ cd hello

 添加iOS平台檔案：

$cordova platform add ios

 也可添加其他平台，如：

$cordova platform add android

 

Adding ios project...
iOS project created with cordova-ios@3.9.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npmInstalling "cordova-plugin-whitelist" for ios 見到以上內容為執行成功。 完成後可以看到platforms檔案夾下面增加了以下路徑： |--platforms|--platforms.json||--ios/|||--cordova/|||--CordovaLib/|||--HelloWorld/|||--platform_www/|||--www/|||--HelloWorld.xcodeproj 可直接開啟HelloWorld.xcodeproj工程在Xcode中進行編譯和運行，   運行結果：   參考資料： http://rensanning.iteye.com/blog/2016364http://cordova.apache.org/docs/en/5.1.1/guide/overview/