前言
由于我们的(Android)app更新是挂在第三方的,所以每次更新的时候都要去浏览器下载,这样用户体验很不好。这样就萌发了怎样去实现在app内部实现更新而不是重新下载新版本的念头。查阅资料后发现 HBuilderX提供了一个很好的解决方案,就是打包一个wgt包,用下载文件的方式实现app的热更新
一、注意事项:
- 打包好的wgt文件包放在自己的服务上。
- 如果原来的用户还用的是去浏览器或者商店更新下载的方式的话,在这次版本发布之后必须让用户强制更新(也就是用原来的方法更新一次)后,再在以后的版本更新中启用热更新。
- 打包的wgt文件的版本号必须和app打包的版本号相同,
二、操作步骤
1.打包wgt更新文件包
发行-(原生app-制作wgt包)
2.将打包好的wgt文件放在服务器上,保存好链接地址
wgtUrl="https://www.xxx/xxx.wgt"//测试地址
3.代码
updateVersion() {
var that =this
uni.getSystemInfo({
success: (res) => {
//检测当前平台,如果是安卓则启动安卓更新
if (res.platform == "android") {
that.CheckAndroidUpdate();
} else {
}
}
})
},
CheckAndroidUpdate() {
var that = this;
let params = {
//填写请求服务器版本接口的参数
};
return this.$http
.get('/consumer/system/app/version', params)
.then(data => {
console.log(data)
if (data.length != 0) {
//获取当前app的版本号
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
console.log(inf.version,'当前版本号')
console.log(data.versionDisplay,'服务器存储的app的版本号')
//是否强制更新(存储版本表中的字段)
if (data.compulsoryFlag == 1) {
plus.nativeUI.alert("发现新版本,点击确认下载!", function() {
//强制更新()
plus.runtime.openURL(data.url);
})
} else
if (inf.version != data.versionDisplay) {
//判断是否wifi下下载更新
if (plus.networkinfo.getCurrentType() != 3) {
uni.showModal({
title:'发现新版本'
content: '当前网络为非WIFI连接,确定下载?',
success: function (res) {
if (res.confirm) {
that.downApk()
} else if (res.cancel) {
}
}
});
} else {
uni.showModal({
title:'发现新版本'
content: '确定下载?',
success: function (res) {
if (res.confirm) {
that.downApk()
} else if (res.cancel) {
}
}
});
}
}, cancel => {
})
} else {
}
});
}
})
.catch(error => {
this.$message.error(error.message);
});
//版本更新
downApk() {
var that = this;
var url = wgtUrl;
plus.nativeUI.showWaiting("下载更新文件...");
const downloadTask = uni.downloadFile({
url: url, //仅为示例,并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
that.installWgt(res.tempFilePath)
}
},
fail:(err)=>{
plus.nativeUI.alert("下载失败!");
}
});
//监听下载速度
downloadTask.onProgressUpdate((res) => {
// console.log('已下载' + res.progress + '%');
});
},
installWgt(path) {
plus.nativeUI.showWaiting("安装更新文件...");
plus.runtime.install(path, {force: true}, function() {
plus.nativeUI.closeWaiting();
plus.nativeUI.alert("应用资源更新完成!", function() {
//更新完成,重启app
plus.runtime.restart();
});
}, function(e) {
plus.nativeUI.closeWaiting();
plus.nativeUI.alert("安装更新文件失败[" + e.code + "]:" + e.message);
});
},
总结
小提示:检查app更新的方法我是写在App.vue文件中的,所以强制更新的时候如果用户退出浏览器不进行更新,他依然可以使用老的版本,所以我在首页文件的onShow中调用了App.vue的更新方法
onShow() {
getApp().updateVersion()
},
如有不妥,敬请指正!!!