【Ionic實戰】一個和AngularJS的跨平臺(iOS,Android) APP框架
關於
使用HTML5和CSS來開發手機應用,一直是廣大前端開發者的理想,並且已經有不少解決方案了。例如
- PhoneGap(用javascript來呼叫裝置原生API)
- JQuery Mobile(UI庫)
- Titanium(混合方式)
- AppCan(國產的開發工具)
Ionic是一個輕量的手機UI庫,具有速度快,介面現代化、美觀等特點。為了解決其他一些UI庫在手機上執行緩慢的問題,它直接放棄了IOS6和Android4.1以下的版本支援,來獲取更好的使用體驗。
快速開始
安裝環境
首先應該安裝好 node.js (略),然後安裝cordova、ionic等
sudo npm install -g cordova ionic ios-sim
建立不同型別的專案
目前可以用blank,tabs,sidemenu三種
ionic start myApp tabs
常用外掛
cordova plugin add com.ionic.keyboard && cordova plugin add org.apache.cordova.console && cordova plugin add org.apache.cordova.device && cordova plugin add org.apache.cordova.device-motion && cordova plugin add org.apache.cordova.file && cordova plugin add org.apache.cordova.file-transfer && cordova plugin add org.apache.cordova.geolocation && cordova plugin add org.apache.cordova.inappbrowser && cordova plugin add org.apache.cordova.network-information && cordova plugin add org.apache.cordova.splashscreen && cordova plugin add org.apache.cordova.camera && cordova plugin add com.google.cordova.admob
測試執行
cd myApp
ionic platform add ios
ionic build ios
ionic emulate ios #會開啟ios的模擬器
ionic run andoird #真機測試,需要先platform add andoird和build android
ionic serve #也可以先在瀏覽器裡看效果,如果chrome安裝了livereload外掛,可以實現程式碼編輯時介面即時變化
直接編輯IOS或Android工程
可以直接用xcode或其他IDE來編輯 /platforms/xxxx/ 下的工程,但要注意的是,應該以專案根目錄下的 /www/ 檔案為主,而不要編輯/platforms/ios/www/ 裡的檔案。執行下面的命令會自動用 /www/ 覆蓋 /platforms/ios/www 裡的檔案
cordova prepare ios
www資料夾結構與檔案分析
開發專案
釋出應用在生成之前,去掉不需要的外掛
cordova plugin rm org.apache.cordova.console
釋出到android 未完簽名。