中文參考文檔:https://yanxiaodi.gitbooks.io/ionic2-guide/content/introduction/
Ionic2項目源碼:https://github.com/driftyco/ionic
windows下ionic2開發環境配置步驟如下:
- 下載node.js環境,穩定版本:v6.9.5
- 下載android studio: android-studio-bundle-145.3360264-windows.exe包含 Android SDK,打開出現問題進行如下操作:
- 到控制檯安裝ionic2和Cordova
首先更換淘寶鏡像,下載起來會快很多,使用時需要將npm命令換成cnpm
npm install -g cnpm –registry=http://registry.npm.taobao.org
安裝ionic2:npm install -g ionic (查看:ionic -version 卸載:npm uninstall -g ionic)
安裝Cordova:npm install -g cordova(查看:cordova -version)
(兩者默認安裝路徑的是在C盤下的user目錄下) - 新建項目
可以自己建立workspace,然後cd到該目錄下創建項目
ionic start MyIonic2Project tutorial –v2 (若要建立tabs項目,將tutorial改爲tabs即可)
可能會失敗,出現如下信息:
說明npm安裝失敗了,可以cd到項目目錄,改用cnpm重新進行安裝
cnpm install
出現如下信息則安裝成功:
- 列表內容
運行項目
ionic serve
可瀏覽器上面訪問在提示的ip,即可出現項目效果:
此時只能看到瀏覽器模式,若想在瀏覽器上查看手機上面的樣式,有以下兩種方法:
a.在谷歌瀏覽器上,按F12進入調試模式,然後再按ctrl+Shift+M即可進入手機調試模式;
b.在谷歌瀏覽器上進入應用商店安裝插件Ripple,即可模擬出手機模式。
這裏更推薦使用第二種模式,因爲該模式模擬原生的手機模式,更貼近手機應用環境。 - 打包apk
需要先安裝jdk,sdk,並分別配置環境變量,jdk版本1.8以上
運行命令:
cordova platform add android
(重新添加android環境時用到:cordova platform rm android)
ionic build android
成功build後在控制檯提示的目錄下可以找到項目生成的APK,傳到手機上安裝即可。
7.apk性能優化
通過Ionic2打包後的Android應用在手機上可能會出現卡頓等情況,此時可以給應用添加crosswalk環境,此方法將瀏覽器內核打包進入apk,使應用的流暢程度大大增加(在android5.0以下應用中體現得尤爲明顯)。此方式打包apk的缺點是會使apk的大小增加20M左右。
添加crosswalk:
cordova plugin add cordova-plugin-crosswalk-webview
cordova build android
打包web內核進入app,體積換取app流暢度
(下一節總結Ionic2與服務器進行異步通信的方法)