提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助檔案
Cordova + vue 打包安卓[Android] apk 及 Apk版本自動升級及安裝[實時獲取下載進度]
- 準備
- 一、Cordova + vue 打包安卓(Android) apk
- 1.安裝Cordova環境
- 2.新建Cordova專案（建議放在英文目錄下）
- 3.Vue專案打包放入cordova專案
- 4.除錯打包apk軟體
- 5.打包成安卓apk
- 6.APK簽名
- 7.常見的問題
- 二、Apk版本自動升級及安裝（實時獲取下載進度）
- 1.安裝安卓插件
- 2.添加cordova.js
- 3.創建版本更新js
- 4.呼叫版本更新
- 5.打包注意事項
- 6.其他注意事項
準備
環境：node.js , 安卓sbk , jdk , npm
node.js官網: https://nodejs.org/zh-cn/ 下載安裝node.js , 安裝完成后在命令列（cmd）中使用“node -v”，檢驗是否安裝成功，
npm：新版node已經集成了npm，在命令列輸入“npm -v”，測驗是否安裝成功，
一、Cordova + vue 打包安卓(Android) apk
1.安裝Cordova環境
使用：
npm install -g cordova
來全域安裝cordova
安裝完成后使用：cordova -v 檢驗是否安裝成功
2.新建Cordova專案（建議放在英文目錄下）
執行行命令
cordova create myApp
myapp - cordova目錄名
cd myApp 進入目錄
使用命令
cordova platform add android
來生成Android平臺的cordova庫，這時platforms檔案夾中會生成一個android檔案夾，
在生成的cordova檔案中 :
config.xml -包含應用相關資訊，使用到的插件以及面向的平臺
platforms – 包含應用運行平臺如 Android 和 iOS 上對應的 Cordova 庫
plugins – 包含應用所需插件的 Cordova 庫，使得應用能夠訪問例如照相機和電池狀態相關的事項，
www – 包含應用源代碼，例如 HTML, JavaScript 和 CSS 檔案
hooks – 包含為個性化應用編譯系統所需的腳本
到這里，cordova專案就已經建好了，
3.Vue專案打包放入cordova專案
(如果還沒有vue專案請看這篇博客：https://www.cnblogs.com/qirui/p/8421372.html)
需要先將vue.config.js中publicPath屬性改為：”/” （沒有vue.config.js檔案可以百度一個模板自己在根目錄創建一個）
然后使用打包命令
npm run build
之后將打包檔案夾下的檔案（默認打包在dist檔案夾下）全部復制到cordova專案下的www目錄中（將原先www目錄中的檔案全部洗掉）
4.除錯打包apk軟體
在打包之前，檢查打包相關環境是否正確安裝，在cordova專案檔案夾下執行命令，
cordova requirements
即可查看當前環境中安裝情況，顯示如下即標識環境正確安裝，（確認安裝正確即可，不需要每次都去進行檢查）
聯調Android軟體（需要連接真機或模擬器）
cordova run android
5.打包成安卓apk
執行命令
cordova build android -release
即可打包為發布版apk
紅框標出來的就是apk所在的路徑
6.APK簽名
APK都必須經過數字簽名后才能安裝到設備上，簽名需要對應的證書（keystore），大部分情況下 APK 都采用的自簽名證書，就是自己生成證書然后給應用簽名，
數字簽名證書是給APK打包所必需的檔案，所以要先把數字簽名證書生成，
在命令列輸入:
keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000
-keystore D:/mytest.keystore表示生成的證書及其存放路徑，如果直接寫檔案名則默認生成在用戶當前目錄下；
-alias mytest 表示證書的別名是mytest,不寫這一項的話證書名字默認是mykey；
-keyalg RSA 表示采用的RSA演算法；
-validity 20000表示證書的有效期是20000天，
填寫完相關資訊后在最后[否]那里輸入y
生成后的證書檔案
之后將證書與apk放在同一目錄下
命令列輸入：
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore myapp.keystore app-release-unsigned.apk myapp
進行簽名操作
此時apk就已經是帶簽名的apk了，
7.常見的問題
大概意思就是說打包的目錄有中文, 可以在組態檔中加入android.overridePathCheck=true來忽略此錯誤，
…\myapp\platforms\android 在這個目錄下找到gradle.properties檔案，
將android.overridePathCheck=true 加入即可
二、Apk版本自動升級及安裝（實時獲取下載進度）
1.安裝安卓插件
進入cordova專案根目錄
輸入命令列
cordova plugin add cordova-plugin-app-version //獲取版本號
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-opener2
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-whitelist
2.添加cordova.js
vue專案的index.html中加入
<script src="cordova.js"></script>
3.創建版本更新js
創建upgrade.js
import apis from '@/request'
import { Dialog } from 'vant';
Dialog.setDefaultOptions({
confirmButtonColor:"#006BE0",
closeOnPopstate:false
})
//檢測新版本升級
export function upgradeForAndroid(releasePath, packageName) {
//從window中獲取Cordova物件
var cordova = window.cordova
//apk所在的服務器路徑（下載路徑）
var url = process.env.VUE_APP_APK_URL + process.env.VUE_APP_APK_NAME + ".apk";
var targetPath = cordova.file.externalCacheDirectory + "Download/Pass/" + "test.apk"; //要下載的目標路徑及檔案名（本地存盤路徑）
var trustHosts = true;
var options = {};
console.log("url:" + url);
console.log("targetPah:" + targetPath);
console.log("trustHost:" + trustHosts);
downLoadApp();
function downLoadApp() {
// 初始化FileTransfer物件
// eslint-disable-next-line no-undef
var fileTransfer = new FileTransfer();
fileTransfer.onprogress = function (progressEvent) {
if (progressEvent.lengthComputable) {
var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
var result = "已下載：" + Math.floor(downloadProgress) + "%";
console.log(result,"已經下載")
if(Math.floor(downloadProgress) == 100){
Dialog.alert({
title: result,
message:"下載完成后會自動彈出安裝",
showConfirmButton:false,
showCancelButton:true
}).then(
).catch(() => {
// on cancel
navigator.app.exitApp();
})
}else{
Dialog.alert({
title: result,
message:"下載完成后會自動彈出安裝",
showConfirmButton:false,
showCancelButton:false
})
}
}
};
// 呼叫download方法
fileTransfer.download(
url, //uri網路下載路徑
targetPath, //url本地存盤路徑
function (entry) {
console.log("download complete: " + entry.toURL());
cordova.plugins.fileOpener2.open(
targetPath,
'application/vnd.android.package-archive',
{
error: function (e) {
console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
Dialog.alert({
title: "打開下載檔案失敗",
message:"請退出后重新進入應用",
}).then(res => {
navigator.app.exitApp();
})
},
success: function () {
console.log('open successfully');
}
})
},
function (error) {
// AlertModule.show({ title: "下載失敗" })
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
}
);
}
}
/*
* 檢測升級方法
*/
export function checkUpgrade(locationVersion) {
/**
* 從服務器獲取應用的版本資訊，和本地應用版本對比
*/
apis.updateVersion.getAppVersion().then(response => {
if(response != null){
var serverVersion = response.data.appVersion;
//獲取本地App版本;
console.log("本地版本：" + locationVersion);
console.log("服務器版本：" + serverVersion);
var locationVersionNum = parseInt(locationVersion.replace(/\./g,""))
var serverVersionNum = parseInt(serverVersion.replace(/\./g,""))
if(locationVersionNum < serverVersionNum){
Dialog.confirm({
title: '發現版本: ' + serverVersion + ',請進行升級',
message: '建議您在WIFI環境下升級',
}).then(() => {
// on confirm
upgradeForAndroid()
}).catch(() => {
// on cancel
navigator.app.exitApp();
});
}
}
})
// 監聽網路狀況，無網路時
document.addEventListener('offline', function () {
console.log("網路例外，不能連接到服務器！");
Dialog.alert({
title:"網路例外，不能連接到服務器！",
message:"請在連接網路的情況下升級應用"
}).then(() => {
navigator.app.exitApp();
})
}, false);
}
apis：封裝的請求實體
Dialog：彈窗組件 這里參考的是v-vant的彈窗插件
4.呼叫版本更新
在進入app的地方呼叫這個js中的方法
服務端需要做的就是需要存盤一個當前的版本號供app發請求去和本地的版本號做對比，還有將新版本的apk上傳到服務器的一個位置供app去下載，
5.打包注意事項
打包時要注意將版本號升級
進入cordova專案的根目錄找到config.xml
在這里更改版本號
6.其他注意事項
安卓9.0版本以上請求必須使用https請求，否則請求會被強制結束，狀態碼回傳0
如果需要使用http請求，在（…/platforms/android/app/src/main/AndroidManifest.xml）加入android:usesCleartextTraffic="true
即可解決該問題，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/246877.html
標籤：其他
上一篇：鴻蒙OS應用開發之——跑馬燈效果
下一篇：Android 應用的版本兼容 了解一下（理解 minSdkVersion、targetSdkVersion、maxSdkVersion、compileSdkVersion）