IONIC3 打包安卓apk詳細過程(大量圖文)

經歷三天的踩坑,跳坑,相信絕大多數的問題都已經覆蓋到了,請仔細按照流程來對照操做及檢查。javascript

1.基本依賴環境

  1. nodejs環境 (做爲一個前端相信你已經有了) 
    nodejs 
    最好提早配置好node的環境變量,便於全局訪問。
  2. jdk(下面細說) 
    JDK
  3. SDK(下面細說,其實主要難就難在SDK配置了) 
    SDK
  4. gradle(下面細說) 
    gradle

2. 基本工具

  1. gitbash(就是用來替代windows自帶的醜陋的CMD)gitbash 
    下載:我都打包了! 
    連接:https://pan.baidu.com/s/1mje7ZHu 密碼:ob6m
  2. windows自帶的CMD(window+R輸入CMD,管理員身份運行)CMD
  3. VSCode(微軟爸爸開發的前端IDE)VSCode 
    下載:請自行去微軟爸爸官網下載。

3.環境配置

3.1 nodejs (須要配置環境變量)css

前端必會,跳過。前端

不會的去這裏看傻瓜教程:https://www.jianshu.com/p/03a76b2e7e00java

3.2 jdk (無需配置環境變量)node

下載:已經上傳網盤↓android

連接:https://pan.baidu.com/s/1mje7ZHu 密碼:ob6mgit

請自行根據系統安裝32/64位的版本。npm

安裝方法:下載完成,解壓,直接按照提示安裝,全局點肯定,不出意外,最後的安裝路徑爲:C:\Program Files\Javawindows

OK,jdk安裝完成,在cmd中,輸入$ java -version驗證是否安裝成功。promise

jdk安裝成功

OK。

3.3 sdk (須要配置環境變量)

下載:跟上面的同樣,我都打包了。

連接:https://pan.baidu.com/s/1mje7ZHu 密碼:ob6m

解壓後(直接右鍵X解壓並重命名。由於面還有個文件夾,不建議用右鍵+E解壓)。

將重命名的文件夾,跟jdk放在一個父目錄,便於查找:C:\Program Files\SDK

接着配置環境變量,個人電腦——右鍵屬性——-高級系統設置——-環境變量。

在下面的系統變量(s)中,新建,鍵值對以下:

name: ANDROID_HOME

key: C:\Program Files\SDK

如圖所示:

SDK環境變量

而後在path中,全局聲明一下,將;%PATH%;%GRADLE_HOME%\bin綴在最後面,前面有【;】分隔符。

而後運行CMD,輸入$ android -h,若是出現一大堆指令,說明你的SDK安裝無誤,而且環境變量配置OK。

ANDROID環境配置驗證

如今,打開SDK目錄下的SDK Manager.exe

打開界面上的Tools,選擇options,先配置國內鏡像:

域名千萬不要輸入http或者https協議前綴,誰輸誰哭。

配置鏡像

下面記得勾選。

回到主界面,點packages再點reload

先勾選以下圖的三個Tools:

分別是[ Android SDK Tools,Android SDK platform-tools,Android SDK Build-tools]

Tools

別急,還沒完,下面還有一個:

[SDK platform]SDK platform

所有選中後,點右下角 install packages 來安裝,耐心等待便可。

3.4 gradle安裝(須要配置環境變量)

打開:http://services.gradle.org/distributions/

下載:gradle-4.1-bin.zip

一樣安裝在JDK,SDK的目錄下,便於查找。

一樣的配置環境變量:

GRADLE_HOME=C:\Program Files\SDK\gradle-4.1

;%GRADLE_HOME%\bin

測試命令(查看版本):gradle -v

3.基本流程

1.安裝ionic和cordova

打開Gitbash,全局安裝ionic和cordova(IONIC是UI,cordova負責打包成apk,而且能夠調用原生安卓的各類API)

$ cnpm install -g ionic cordova

安裝ionic和cordova

2.建立ionic項目

桌面右鍵,在此處gitbash

$ ionic start app tabs

耐心等待完成,在 cd 到 app 子目錄(app是你的真實項目目錄),而後

$ ionic serve

ionic serve

稍等片刻,瀏覽器自動彈出預覽界面(建議電腦安裝Chrome瀏覽器),而且支持持續熱更新(Webpack的功能),以下圖所示:

CHROME預覽

若是作到這一步沒問題,說明:

1.nodejs與gitbash沒有問題。

2.ionic和cordova沒有問題。

4.打包

確保SDK,JDK沒問題之後,使用指令

$ ionic cordova build android --release

(若是這條命令有問題,能夠去掉–release而後debug編譯,編譯完成Dos會顯示apk目錄位置)

如若你聰慧的雙眼發現以下字眼:Build Success! 說明你已經成功打包了。耐心等待,命令行結束會提示你apk的生成位置。

OK,此時你已經有了debug的包,可是這個包沒有簽名,不能發佈。

此時,咱們應該:

First:在JDK目錄下的bin文件夾下(C:\Program Files\Java\jdk1.8.0_71\bin),先看看有沒有keytool.exe和jarsigner.exe文件,這兩個程序用於給APK簽名,簽名之後便可發佈。

Second:將Ionic生成的文件先命名爲app.apk,而後複製一份當前的bin目錄裏,執行命令1,生成本身的簽名文件,名爲:zhangqiang.keystrore,別名也是這個,有效期20000天,僅僅在第一次生成簽名文件,之後不須要。

執行完命令1,繼續執行命令2便可完成簽名打包。

命令1:生成簽名密鑰

/* 使用工具, 簽名: -genkey表示構建簽名文件 -v 顯示在dos窗口中 -alias表示簽名包的別名 -validity 簽名有效期(天) 姓名:填上,用你名字拼音全拼 城市:隨便填,不填也行 國家: 隨便填,不填也行 密碼口令:敲的時候不動,是由於保護隱私,別當作你電腦死機! */

在CMD窗口執行以下命令,輸入祕鑰確認便可生成簽名文件 yourname.keystore:

keytool -genkey -v -keystore zhangqiang.keystore -alias zhangqiang.keystore -keyalg RSA -validity 20000

命令2:給文件簽名

使用剛纔生成的zhangqiang.keystore -signedjar 簽名後的apk 簽名以前的apk 簽名包別

jarsigner -verbose -keystore zhangqiang.keystore -signedjar complete.apk app.apk zhangqiang.keystore

簽名完成

如上圖所示,IONIC打包的文件爲app.apk,簽名後的文件爲complete.apk,這時候,能夠說,一個軟件就誕生啦!

後續的軟件壓縮打包能夠百度:jarsigner打包

5.疑難雜症

5.1 Without ·from· option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to undefined to prevent this warning.

出現這個提示,說明配置不正確。

解決方法:

在「/node_modules/@ionic/app-scripts/dist/sass.js」路徑的「sass.js」文件,在postcssOptions參數中添加「from: undefined」。添加後效果以下:

var postcssOptions = { from: undefined, to: path_1.basename(sassConfig.outFile), map: autoPrefixerMapOptions }; 

5.2 安卓SDK組件缺失/缺乏/不匹配

報文:

A problem occurred configuring project ':CordovaLib'. > You have not accepted the license agreements of the following SDK components: [Android SDK Build-Tools 26.0.2].

緣由:SDK構建工具和platform工具不匹配,或者有東西遺漏了,沒下載。

解決:若是中途報錯SDK出問題,請打開C盤/profiles/SDK/manager.exe,使用東軟的鏡像,根絕報錯信息,來down對應的platform或者build包。

5.3 缺乏安卓構建/打包工具

報錯報文:

Unhandled promise rejection (rejection id: 1): CordovaError: Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio (node:3444) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

緣由:缺乏安卓構建打包工具,報文提示你能夠用Android Studio,也能夠安裝一個Gradle。

解決辦法:

http://services.gradle.org/distributions/ 下載 gradle-4.1-bin.zip,下載完成解壓到和JDK,SDK相同的父目錄,便於未來查找(C:\Program Files\gradle-4.1) 
配置相應的環境變量:

GRADLE_HOME=E:\software\gradle-3.0

PATH=%PATH%;%GRADLE_HOME%\bin

測試命令(查看版本):gradle -v

完成上述任務後,從新運行Gitbash,而後 $ ionic cordova build android ,發現build成功,會自動下載gradle-4.1-bin.zip (初步猜想是由於本身的gradle路徑不對,也多是沒有被項目依賴,可是項目在全局空間中發現gradle環境,所以本身要下載gradle來依賴。)

感謝收看。

相關文章
相關標籤/搜索