项目技术栈:Vue+vant前端框架 用h5+app打包;
功能:实现安卓端自动检测版本及更新app
实现原理:
有两种方式,第一种是前端做处理,后端的接口只给你返回版本、下载app链接地址以及更新了哪些内容(更新的内容根据需求可传可不传);
第二种是前期的一切处理都由后端小哥哥给你处理好,例如判断是安卓还是iOS,版本比较是否需要更新等,你只需要根据后端处理完返回的结果展现内容,并处理下载就可以了,我们后端小哥哥比较善良,给我处理的很完善,所以我采用的是第二种方式,第一种方法个人推荐此篇文章,讲解的很详细,有需要的伙伴可以参考一下:https://blog.youkuaiyun.com/weixin_45754967/article/details/104347576
第二种简易方法具体处理思路如下:
1.首先是后端小哥哥给你处理好了用户手机系统,以及版本是否需要更新;
2.在mounted函数中获取到当前app版本,获取app版本信息方法如下:
this.version = plus.runtime.version;
该方法只有在打包后才会生效;
3.调取后端接口,将当前版本号传给后端,后端根据你传过去的版本号进行处理,给你返回个状态,让你知道是否需要更新安装包,需要更新了再做更新处理,具体代码如下:
/* 版本升级*/
updataVerson(){
//调后端接口判断是否升级
this.JUDGMENTVERSION({version:this.version}).then(res => {
if(res.code == 0){
Dialog.confirm({
title: '软件升级',
message: '发现新版本'+res.data.version+',' +'是否升级',
}).then(() => {
this.version = res.data.version;
this.wgtUrl = res.data.logo;
this.undate();
}).catch(() => {
});
}
})
},
undate(){
let that = this
const wgtUrl = this.wgtUrl
plus.nativeUI.showWaiting("下载更新");
plus.downloader.createDownload(wgtUrl, { filename: "_doc/update/" }, function (d, status) {
if (status == 200) {
console.log("下载更新成功:" + d.filename);
that.installWgt(d.filename); // 安装wgt资源包
} else {
console.log("下载更新失败!");
plus.nativeUI.toast("下载更新失败!");
}
plus.nativeUI.closeWaiting();
}).start();
},
installWgt(path) {
plus.nativeUI.showWaiting("安装更新");
plus.runtime.install(path, {}, function () {
plus.nativeUI.closeWaiting();
console.log("安装更新成功!");
plus.nativeUI.alert("更新完成!", function () {
// 更新完成后重启应用
plus.runtime.restart();
});
}, function (e) {
plus.nativeUI.closeWaiting();
console.log("安装更新失败![" + e.code + "]:" + e.message);
plus.nativeUI.toast("安装更新失败!");
});
}
当然,调接口也是需要在页面开始加载的时候就进行的。
不当的地方还请大神指出