第一步,在uni-app的 App.vue目录下获取当前版本号, appInfo为当前应用程序的所有信息// // 获取版本名称appInfo.version,获取版本号appInfo.versionCode,获取当前应id appInfo.appid(注意需要在手机上运行才能看到)如下代码:
<script>
export default {
globalData: {//使用全局储存信息
version: '',
versionCode: '',
},
onLaunch: function() {
},
onShow: function() {
// 获取应用信息
plus.runtime.getProperty(plus.runtime.appid, (appInfo) => {
// appInfo为当前应用程序的所有信息
this.globalData.version = appInfo.version
this.globalData.versionCode = appInfo.versionCode
// console.log(JSON.stringify(appInfo));
// // 获取版本名称
// console.log(appInfo.version);
// // 获取版本号
// console.log(appInfo.versionCode);
// // 获取当前应用id
// console.log(appInfo.appid);
});
},
onHide: function() {
console.log('App Hide')
},
onReady: function() {
console.log('tiangua')
console.assert('tianga')
}
}
</script>
第二步,在想要触发热更新的页面进行代码编写,首先,1,异步获取数据,2,获取后端给的版本号,3,判断当前版本号是否一致,4,判断当前是否热更新,5,应用热重启,重新启动进入首页,如下代码:
getUpversion() {
upversion().then((res) => {//异步获取数据
let _this = this//定义this
let sum = res.data//获取后端给的版本号
if (sum.version != this.dataObj.version) {//判断当前版本号是否一致,修改后在后端返回更新的版本号
if (sum.type == 10) {//判断当前是否整包,这个是后端给的状态
uni.showModal({
title: sum.text,
content: sum.explain,
showCancel: false,
success() {
uni.navigateTo({
url: '/pages/webview/web-view'//使用web-view进行下载
})
}
})
} else {//判断当前是否热更新
uni.showModal({
title: '已发现新版本',
content: sum.explain,
showCancel: false,
success: function(res) {
if (res.confirm) {
let downloadTask = uni.downloadFile({
url: sum.url,//下载热更新的链接
success: (downloadResult) => {
_this.percent = downloadResult
plus.runtime.install(downloadResult
.tempFilePath, {
force: true
},
function() {
// 应用热重启,重新启动进入首页。
plus.runtime.restart();
uni.showModal({
title: '提示',
content: '安装成功!',
showCancel: false,
success: function(
res) {
uni.reLaunch({
url:'/pages/index/index'
})
}
});
// uni.hideToast();
},
function(e) {
uni.showToast({
title: '安装失败',
icon: 'none'
})
})
},
fail: (err) => {
// console.log(err)
uni.showToast({
title: '下载失败',
icon: 'none'
})
}
})
downloadTask.onProgressUpdate((res) => {
// console.log('下载进度' + res.progress);
_this.schedule = res.progress
if (res.progress == 100) { //满足条件显示隐藏
this.showData = false
} else {
this.showData = true
}
// let sun = '下载中...' + res.progress + '%'
// // 打开loading等待
// uni.showLoading({
// mask: true,
// title: sun
// })
// this.progress = res.progress
// 满足测试条件,取消下载任务。
// if (res.progress > 50) {
// downloadTask.abort();
// }
});
}
}
})
}
}
})
},
第三步,根据业务需求,显示下载进度,使用width监听this.schedule的变化,如下代码:
data() {
return {
schedule: "",,
};
},
computed: {
width() {
return (this.schedule) + '%';
},
},
HTML代码,根据业务需求,样式自行修改。
<text>{{schedule}}%</text>