ionic3 從創(chuàng)建到打包成apk

前言：

ionic 3 開發(fā)APP， 從零到成功build成apk ，在這里做個記錄，以windows 系統(tǒng)為例。

目錄：

一、材料準備
二、環(huán)境搭建
三、創(chuàng)建項目
四、打包
五、其他

一、材料準備

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

  2. 安裝 Python（因為安裝依賴過程中提示我需要安裝Python，具體原因我沒有去找）
    下載地址：（https://www.python.org/downloads/）

  3. 安裝 Java （打包成 apk 需要用到Java的環(huán)境）
    下載地址：（http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html）

    下載之前要點擊上面的同意許可

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

    點擊SDK Tools

    選擇exe文件下載

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

提醒：這些API 需要的內存非常大，所以你安裝Android SDK 的時候盡量選擇大點的盤安裝，為這些API 騰出空間，根據(jù)需求選擇，不建議全部勾選，土豪隨意。


  1. 安裝 Android Studio （ionic 2x 打包成 apk 依賴 Gradle 編譯，安裝這個會自動幫我們安裝了 Gradle，免去了設置 Gradle 環(huán)境變量）
    我電腦是64位，所以選擇了這個

二、環(huán)境變量設置

  • 環(huán)境變量需要設置兩個 ：Java 、Android SDK

    Java 的環(huán)境變量名是： JAVA_HOME
    Android SDK 的環(huán)境變量名是： ANDROID_HOME

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

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

    變量名是：ANDROID_HOME
    變量值是：你安裝Android SDK的路徑 （例：D:\Program Files (x86)\Android\android-sdk）
    一般情況下默認系統(tǒng)變量里面是沒有的，所以你要新建一個。

  • 接下來是Path的設置

    如果電腦本身已經(jīng)有這個Path了，就不用新建，沒有就要新建一個
    變量名：Path （網(wǎng)上有一些教程是大寫 PATH，應該是不區(qū)分大小寫才對）
    變量值： Android SDK安裝目錄下面的 tools、tools/bin、platform-tools 的路徑，用分號 ";" 隔開，官網(wǎng)建議3個路徑都加，詳情請移步至（https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html）

三、創(chuàng)建項目

  • 創(chuàng)建項目之前首先要安裝 ionic cordova

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

      npm install -g ionic cordova

  • 創(chuàng)建項目

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

      //創(chuàng)建一個空的項目例子
      ionic start myApp blank

      //創(chuàng)建一個有tabs的項目例子
      ionic start myApp tabs

      //創(chuàng)建一個基于 ionic1 的項目例子 （在這里不討論這個）
      ionic start myApp blank --type=ionic1

安裝依賴的時候有點慢，耐心點就好了
  • 啟動項目
    • 安裝好項目之后就是啟動項目了，命令如下

      // 進入這個項目文件夾
      cd dome
      // 運行這個項目
      ionic serve

這樣就是啟動成功了，端口號是 8100，如果這個端口被占用，會有提示

四、打包

  • 這一步是最后一步了，如果以上步驟都成功了，那這一步就很容易了

    // 進入這個項目文件夾
    cd dome
    // 添加Android平臺
    ionic cordova platform add android

    • 下面三個根據(jù)你的需求選擇一個
      // 生成一個debug的 apk文件
      ionic cordova build android --prod
      // 生成一個未簽名可發(fā)布版本的（release ）的 apk文件
      ionic cordova build android --release
      // 生成兩種（debug、release） apk文件
      ionic cordova build android --prod --release
顯示這樣就是Android平臺添加成功了

這樣就是打包成功了，下面的路徑就是apk文件存放的路徑
  • 在這里，我遇到一個問題，release 版本在手機里面安裝不了（模擬器也不行），debug 版本就可以安裝，如果你有幸知道解決的辦法，你可以聯(lián)系我（微信：380018663）或者評論告訴我，以上有什么不對的地方也可以指出來，感謝感謝?。?！

五、其他

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容