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