一個基于ionic框架和AngularJS的跨平臺(iOS,Android) APP

jopen 10年前發布 | 221K 次閱讀 移動開發 ionic-babythings

關于


使用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 未完簽名。

項目主頁:http://www.baiduhome.net/lib/view/home/1416898439483

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!