一、场景描述
1、由于APP应用环境是需要发布到客户端进行更新，每次发布更新时需要连接到内网才能更新，更新共采用了两种方式。
①：cordova-hot-code-push-plugin 插件进行热更新，遇到了应用缓存问题导致更新失败，需要清除缓存才可以，有更好的解决方案欢迎指点。
②：采用检查更新方式，每次进入系统后，主动调用检查更新
③：思路：登录系统=>获取当前安装版本号=>调用服务端获取版本信息进行比较=>当前版本小于服务端版本则提示版本更新信息=>下载最新安装包=>安装。
所需插件：
1、cordova-plugin-app-version 获取 config.xml版本号
2、cordova-plugin-file-transfer 下载最新版本apk
3、cordova-plugin-file-opener2 打开安装，此处遇到了签名不一致不能覆盖安装问题
index.html
# 引入cordova
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="media-src *; img-src * data: 'unsafe-inline';default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'; font-src * data:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<title></title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
login.vue
# 1、获取当前版本与服务端版本比较--此处比较逻辑由后端处理返回
async getVersions(){
let versionCode = await window.cordova.getAppVersion.getVersionNumber();
let resp = await commApi.checkVersion(versionCode);
this.versions = resp.data;
if(this.versions.status){
this.$dialog.alert({
title: '版本更新',
message: `\t 当前最新版本为：${this.versions.version}，请更新！\n 更新说明：\n ${this.versions.remark}`,
messageAlign:'left'
}).then(() => {
this.progressShow = true;
//处理下载逻辑
this.downLoadApk(this.versions.dataUrl).then(result => {
this.$toast('下载成功！');
}).catch(err => {
this.$toast('下载失败，请检查网络是否畅通！');
});
});
}else{
this.$toast('已是最新版本！');
}
},
# 2、下载最新版本apk
downLoadApk(url) {
let _this = this;
_this.progress = 0;
_this.fileTransfer = new FileTransfer();
//监听下载进度
_this.fileTransfer.onprogress = function(e) {
if (e.lengthComputable) {
const progress = e.loaded / e.total;
_this.progress = (progress * 100).toFixed(2);
}
};
var targetPath = 'cdvfile://localhost/persistent/app.apk';
_this.fileTransfer.download(
encodeURI(url), //服务器地址
targetPath, //本地存储地址
function (entry) { //下载完成回调
_this.progressShow = false;
let url = entry.toURL();
window.cordova.plugins.fileOpener2.open(url, 'application/vnd.android.package-archive', {
error: function(e) {
console.log('open fail')
},
success: function() {
console.log('open successfully')
}
})
}
);
},
展示效果
Screenshot_20210608-160115.jpg
Screenshot_20210608-160123.jpg
