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的低成本和快速開發。
安裝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平台的環境還是相對比較容易的,完成以上步驟後環境搭建結束。
開啟終端,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/
在終端中輸入: 進入工程目錄:
$ 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/