Cordova5,cordova

來源:互聯網
上載者:User

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/ 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.