ionic的安裝及簡單的應用

ionic是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程序,它提供了很多 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript  MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定,使用它成爲 Web 和移動開發者的共同選擇。Ionic是一個專注於用WEB開發技術,基於HTML5創建類似於手機平臺原生應用的一個開發框架。Ionic框架的目的是從web的角度開發手機應用,基於PhoneGap的編譯平臺,可以實現編譯成各個平臺的應用程序。官方網站:http://ionicframework.com/     中文版的教程:http://www.ionic.wang/

安裝ionic1前先要準備好下載安裝好Node.jsAndroid SDK及環境變量配置

Android SDK,目前無法通過google直接下載,可以通過設置Http Proxy Server來獲取;打包apk只需要sdk,模擬運行則需要system images

mirrors.neusoft.edu.cn 80
//勾選 other - Force https//... sources to be fetched using http://...

Android SDK 環境變量配置


ANDROID_HOME    D:\android\sdk                              
path     %ANDROID_HOME%\platform-tools;  
path     %ANDROID_HOME%\tools;  

安裝ionic 及 cordova
安裝命令
npm install -g cordova ionic


更新命令
npm update -g cordova ionic


安裝特定版本
npm install -g ionic [email protected]
npm install -g [email protected]


刪除命令
npm uninstall cordova -g
npm uninstall ionic -g

npm 淘寶鏡像(GFW,導致很多插件下載失敗)

npm install -g cnpm --registry=https://registry.npm.taobao.org
// 安裝完成後,以後所有的插件都使用cnpm這個命令來進行安裝
cnpm install -g ionic cordova
創建應用

創建ionic 項目,可選模板:sidemenu(側滑菜單),tabs(底部tab),blank 空白

ionic start myapp blank
ionic start myapp tabs
ionic start myapp sidemenu
如果是github上下載的項目,裏面的插件、依賴項一般通過下面命令下載:

bower install
npm install
如果是老ionic 項目,如果需要更新項目裏面的ionic文件(如js類庫)


ionic lib update
瀏覽器端運行

ionic serve
ionic serve --lab
真機模擬、打包、運行

ionic platform add android  //[ios]
ionic build android
ionic run android
ionic emulate android
如何用xcode 打包IONIC 項目(IPK)

將項目文件copy到MAC底下。運行終端,cd到項目所在文件夾,運行

ionic platform add ios
然後finder,在 platforms->ios->xxx.xcodeproj 打開項目

然後,將xcode的模擬器類型選成iOS Device

然後在XCODE 的菜單欄 選擇 Product -- Archive ,會生成 xxx的Archive文件。


在窗口右側的Submit to AppStore 按鈕的下方,點擊 Export...

有三個選項

Save to IOS App Store Deployment
Save to Ad Hoc Deployment
Save for Enterprise Deployment
選第二個Save to Ad Hoc Deployment 打包成.ipk

選擇證書等等,選擇導出文件夾,導出

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章