ionic3 從建立到打包成apk

前言：

ionic 3 開發APP，從零到成功build成apk ，以windows 系統爲例 。

目錄：

1. 材料準備
2. 環境搭建
3. 建立項目
4. 打包
5. 其餘
複製代碼

1、材料準備

1. 安裝 node.js （提供npm） 下載地址：nodejs.org/en/

2. 安裝 Python（由於安裝依賴過程當中提示我須要安裝Python，具體緣由我沒有去找） 下載地址：www.python.org/downloads/

3. 安裝 Java （打包成 apk 須要用到Java的環境） 下載地址：www.oracle.com/technetwork…

   

4. 安裝Android SDK （打包成 apk 須要用到Android 的API） 下載地址：（http://www.androiddevtools.cn/）

   

   

5. 下載Android API 在下載 API 的時候 tools 也要下載一樣版本的。

提醒：這些API 須要的內存很是大，因此你安裝Android SDK 的時候儘可能選擇大點的盤安裝，爲這些API 騰出空間，根據需求選擇，不建議所有勾選，內存多的隨意哈。

6. 安裝 Android Studio （ionic 2x 打包成 apk 依賴 Gradle 編譯，安裝這個會自動幫咱們安裝了 Gradle，免去了設置 Gradle 環境變量）

   

2、環境變量設置

• 環境變量須要設置兩個 ：Java 、Android SDK

  Java 的環境變量名是： JAVA_HOME

  Android SDK 的環境變量名是： ANDROID_HOME

• 其實也很簡單點擊電腦屏幕左下角的開始按鈕，在輸入框裏面輸入 ‘環境變量’ 回車進入設置窗口

• 以 ANDROID_HOME 爲例子以下圖（Java 也同理）

  變量名是：ANDROID_HOME

  變量值是：你安裝Android SDK的路徑 （例：D:\Program Files (x86)\Android\android-sdk）

• 通常狀況下默認系統變量裏面是沒有的，因此你要新建一個。

• 接下來是Path的設置

  若是電腦自己已經有這個Path了，就不用新建，沒有就要新建一個

  變量名：Path （網上有一些教程是大寫 PATH，應該是不區分大小寫纔對）

  變量值： Android SDK安裝目錄下面的 tools、tools/bin、platform-tools 的路徑，用分號 ";" 隔開，官網建議3個路徑都加，詳情請移步至cordova.apache.org/docs/en/lat…

3、建立項目

• 建立項目以前首先要安裝 ionic cordova

  • 安裝 （默認安裝最新版）

    npm install -g ionic cordova

• 建立項目

  • myApp 是文件夾名字，隨意命名，更多例子請輸入 " ionic start -h " 查看幫助

    ionic start myApp blank 建立一個空的項目例子

    ionic start myApp tabs 建立一個有tabs的項目例子

    ionic start myApp blank --type=ionic1 建立一個基於 ionic1 的項目例子 （在這裏不討論這個）

  • 安裝依賴的時候有點慢，耐心點就行了

    

• 啓動項目

  • 安裝好項目以後就是啓動項目了，命令以下

    cd dome 進入這個項目文件夾

    ionic serve 運行這個項目

  • 這樣就是啓動成功了，端口號是 8100，若是這個端口被佔用，會有提示

    

4、打包

• 這一步是最後一步了，若是以上步驟都成功了，那這一步就很容易了

  cd dome 進入這個項目文件夾

  ionic cordova platform add android 添加Android平臺

• 下面三個根據你的需求選擇一個

  ionic cordova build android --prod 生成一個debug的 apk文件

  ionic cordova build android --release 生成一個未簽名可發佈版本的（release ）的 apk文件

  ionic cordova build android --prod --release 生成兩種（debug、release） apk文件

• 顯示這樣就是Android平臺添加成功了

  

• 這樣就是打包成功了，下面的路徑就是apk文件存放的路徑

  

• 在這裏，我遇到一個問題，release 版本在手機裏面安裝不了（模擬器也不行），debug 版本就能夠安裝，若是你有幸知道解決的辦法，你能夠聯繫我（微信：380018663）或者評論告訴我，以上有什麼不對的地方也能夠指出來，感謝感謝！！！

5、其餘

• 下面附上你可能會用到的連接
  • ionic 3 英文文檔ionicframework.com/docs/api/co…
  • ionic 3 中文文檔www.ionic.wang/css_doc-v3.…
  • Es6 中文文檔es6.ruanyifeng.com/
  • TypeScript 中文文檔ts.xcatliu.com/introductio…