1. 程式人生 > >IONIC3 打包安卓apk詳細過程(大量圖文)

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

(2018年8月9日 更新:更新部落格中錯誤的地方,修改排版。)

本文寫於2018年2月12日 22:25:59。

如果2018年的新春之際,你遇到IONIC的開發問題,這將是一篇最為詳盡的打包方案。

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

1.基本依賴環境
nodejs環境 (作為一個前端相信你已經有了) 
 
最好提前配置好node的環境變數,便於全域性訪問。
jdk(java的開發基礎類庫,因為 android ) 

SDK(安卓開發整合包,集成了安卓的開發工具,外掛,API等等) 

gradle( JAVA界的Weboack ,支撐app的編譯,打包的流程) 

2. 基本工具
gitbash(就是用來替代windows自帶的醜陋的CMD) 
下載:我都打包了! 
連結:https://pan.baidu.com/s/1mje7ZHu 密碼:ob6m
windows自帶的CMD(window+R輸入CMD,管理員身份執行)
VSCode(微軟爸爸開發的前端IDE) 
下載:請自行去微軟爸爸官網下載。
3.環境配置
3.1 nodejs (需要配置環境變數)

前端必會,跳過。

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

3.2 jdk (無需配置環境變數)

下載:已經上傳網盤↓

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

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

安裝方法:下載完成,解壓,直接按照提示安裝,全域性點確定,不出意外,最後的安裝路徑為:C:\Program Files\Java

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

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

如圖所示:

然後在path中,全域性宣告一下,將 ;%ANDROID_HOME%\tools 綴在最後面,前面有【;】分隔符。(注:win 10 系統不需要封號,SDK,JDK也是同理)。

然後執行CMD,輸入$ android -h,如果出現一大堆指令,說明你的SDK安裝無誤,並且環境變數配置OK。

現在,開啟SDK目錄下的SDK Manager.exe

開啟介面上的Tools,選擇options,先配置國內映象:

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

下面記得勾選。

回到主介面,點packages再點reload

先勾選如下圖的三個Tools:

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

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

[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
1
 
[ 2018/8/1 17點58分 加更 ]

驗證 ionic 是否安裝成功 

IONIC更新到 v4 了,後續我會體驗一下,寫一篇新部落格~
2.建立ionic專案

桌面右鍵,在此處gitbash

$ ionic start app tabs
1
耐心等待完成,在 cd 到 app 子目錄(app是你的真實專案目錄),然後

$ ionic serve
1


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

如果做到這一步沒問題,說明:

1.nodejs與gitbash沒有問題。

2.ionic和cordova沒有問題。

4.打包
確保SDK,JDK沒問題以後,使用指令

$ ionic cordova build android --release
1
(如果這條命令有問題,可以去掉–release然後debug編譯,編譯完成Dos會顯示apk目錄位置)

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

OK,此時你已經有了debug的包,但是這個包沒有簽名,不能釋出。

此時,我們應該:

在JDK目錄下的bin資料夾下(C:\Program Files\Java\jdk1.8.0_71\bin),先看看有沒有keytool.exe和jarsigner.exe檔案,這兩個程式用於給APK簽名,簽名以後即可釋出。 

.將Ionic生成的檔案先命名為app.apk,然後複製一份當前的bin目錄裡,執行命令1,生成自己的簽名檔案,名為:zhangqiang.keystrore,別名也是這個,有效期20000天,僅僅在第一次生成簽名檔案,以後不需要。
執行完命令1,繼續執行命令2即可完成簽名打包。

命令1:生成簽名金鑰

/*
使用工具, 簽名:
-genkey表示構建簽名檔案

-v 顯示在dos視窗中 

-alias表示簽名包的別名 

-validity 簽名有效期(天)

姓名:填上,用你名字拼音全拼

城市:隨便填,不填也行

國家: 隨便填,不填也行

密碼口令:敲的時候不動,是因為保護隱私,別當做你電腦宕機!
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在CMD視窗執行如下命令,輸入祕鑰確認即可生成簽名檔案 yourname.keystore ,

$ keytool -genkey -v -keystore [姓名].keystore -alias [姓名].keystore -keyalg RSA -validity 20000

輸入如圖: 


(PS:真 · JAVA 密保) 
此時按下回車,即可生成簽名: 

如果報錯,說明你的 CMD 不是以管理員身份開啟的,請在管理員身份下開啟。

命令2:給檔案簽名

使用剛才生成的 signer 來給 app 簽名,Usage:

[姓名].keystore -signedjar 簽名後的apk 簽名之前的apk 簽名包名(命令一生成的簽名檔名)

Exeample :

$ jarsigner -verbose -keystore [姓名].keystore -signedjar complete.apk app.apk [姓名].keystore


輸入前面設定的密碼,即可簽名。

如上圖所示,IONIC打包的檔案為app.apk,簽名後的檔案為complete.apk,這時候,可以說,一個軟體就誕生啦!

後續的軟體壓縮打包可以百度:jarsigner打包

5.疑難雜症
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

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

5.1 檔案引用路徑錯誤

解決方法:

在“/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  
    }; 
1
2
3
4
5
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 中繼續後綴 
;%GRADLE_HOME%\bin (WIN7及以下系統注意封號,WIN 10 可以忽略)

完成上述任務後,重新執行Gitbash,然後 $ ionic cordova build android ,發現build成功,會自動下載gradle-4.1-bin.zip (初步猜測是因為自己的gradle路徑不對,也可能是沒有被專案依賴,但是專案在全域性空間中發現gradle環境,因此自己要下載gradle來依賴。)

5.4 在安裝,或者build 時沒有管理員許可權,導致無法寫入磁碟

  
解決方法: 以管理員身份執行 CMD (commder )即可。

5.5 無法簽名

jarsigner: 無法對 jar 進行簽名: java.util.zip.ZipException: invalid entry compressed size (expected 7508 but got 7333 bytes)

解決辦法:已經簽名過了,無需再次簽名。

感謝收看。
--------------------- 
作者:Tycho丶 
來源:CSDN 
原文:https://blog.csdn.net/qq_20264891/article/details/79319408 
版權宣告:本文為博主原創文章,轉載請附上博文連結!