Ionic專案打包Android版本實戰
最近在帶團隊做一個前端用Ionic+angularjs 的web app專案,由於自身不是做前端的,所以不太瞭解ionic,正好前端人員也是半吊子,所以只有自力更生學著自己打android包,在網上不斷搜尋打包方案,不斷測試不斷掉坑又不斷解決再掉坑再解決後,終於在一天半時間android打包成功。接下來我把這些經驗記錄下來,希望能給大家提供參考和幫助。
配置Ionic下面android打包
1.安裝Node.js
下載安裝:http://nodejs.org/
安裝完成之後開啟PowerShell輸入命令node -v和npm -v驗證是否安裝成功
2.安裝ant
由於ant非常難裝,所以我用brew安裝
先安裝brew
curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip 1
安裝wget
brew install wget
安裝ant
brew install ant
3.安裝android sdk for mac
http://down.tech.sina.com.cn/page/45703.html
android sdk 下載後需要安裝所需要的控制元件
命令列進入tools目錄
然後輸入 ./android sdk 請出SDK Manager的圖形介面
Android SDK Manager -> Preferences
可以參照文章:
http://www.cnblogs.com/yjmyzz/p/4219829.html
此文章較靠譜。
配置android SDK環境靠譜文章
http://blog.csdn.net/jjmm2009/article/details/29595593
安裝上面連結操作即可完成SDK在mac下的配置
配置androidSDK環境變數
輸入cd ~/ 進入當前使用者的home目錄
1. 建立:
touch .bash_profile
2.開啟並編輯:
open .bash_profile
配置檔案這麼些:
export ANDROID_HOME=/Users/liujian/Downloads/android-sdk-macosx/
export PATH=${PATH}:/Users/liujian/Downloads/android-sdk-macosx/platform-tools:/Users/liujian/Downloads/android-sdk-macosx/tools
環境配置參照:
http://cordova.apache.org/docs/en/dev/guide/platforms/android/index.html
環境配置好後,需要關閉終端重啟一個終端
配置完成以後,需要驗證是否安裝
adb 如果不是找不到該命令,就OK
4.安裝Cordova
npm install -g cordova
安裝Ionic
npm install -g ionic
5.部署android打包環境:
ionic platform add android
進入Ionic
進入專案跟目錄,比如:/Users/liujian/Downloads/wutongApp
命令:
新增支援android系統
ionic platform add android
顯示支援平臺列表資訊
ionic platform list
顯示:
bash-3.2# ionic platform list
Updated the hooks directory to have execute permissions
Installed platforms:
android 5.1.1
ios 3.8.0
Available platforms:
amazon-fireos ~3.6.3 (deprecated)
blackberry10 ~3.8.0
browser ~4.1.0
firefoxos ~3.6.3
osx ~4.0.1
webos ~3.7.0
執行打包命令:
ionic build android
備註:第一次會下載很多東西,需要耐心等待,第二次打包就快了
會在ionic專案的platforms下面生成android包
執行:
ionic run android
會把apk包安裝到手機上,請先接好手機,需要在手機螢幕允許除錯。
需要注意:ionic專案下www是app的原始碼會打到:platforms->android->build->outputs->apk 然後打成apk包,所以要保證www資料夾最新,而不是直接去替換assets下www檔案。