1. 程式人生 > >Ionic專案打包Android版本實戰

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檔案。