The uniapp applet implements update operations to prompt users to upgrade
introduction
When the mini program is updated, in order to prevent the mini program from being unable to obtain new mini program operations due to hot startup or the need to add a new cache when logging in, etc., it is necessary to prompt the user to upgrade the mini program through settings.
Get whether the mini program version needs to be updated and the update operation
1. Implement the update method in the App.vue file
// 在 methods 中实现方法
autoUpdate() {
// 更新的功能基础库要1.9.90以上版本才支持，要做低版本的兼容处理
if (uni.canIUse('getUpdateManager')) {
// uni.getUpdateManager接口，可以获知是否有新版本的小程序、新版本是否下载好以及应用新版本的能力，会返回一个UpdateManager实例
const updateManager = uni.getUpdateManager();
// 检查小程序是否有新版本发布，onCheckForUpdate：当小程序向后台请求完新版本信息，会通知这个版本告知检查结果
updateManager.onCheckForUpdate(res => {
// 请求完新版本信息的回调
if (res.hasUpdate) {
// 检测到新版本，需要更新，给出提示
showModal({
content: '检测到新版本，是否下载新版本并重启小程序' }).then(res => {
if (res.confirm) {
this.downLoadAndUpdate(updateManager);
} else if (res.cancel) {
showModal({
content: '本次版本更新涉及到新功能的添加，旧版本将无法正常使用', showCancel: false, confirmText: '确认更新' }).then(res => {
if (res.confirm) this.downLoadAndUpdate(updateManager);
});
}
});
}
});
} else {
// 在最新版本客户端上体验小程序
showModal({
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试' });
}
},
// 下载小程序最新版本并重启
downLoadAndUpdate(updateManager) {
showLoading({
title: '正在下载' });
// 等待下载更新小程序新版本，onUpdateReady：当新版本下载完成回调
updateManager.onUpdateReady(() => {
uni.hideLoading();
// applyUpdate：强制当前小程序应用上新版本并重启
updateManager.applyUpdate();
// 可在此处添加清除缓存跳转首页操作，由于本人在通过其他判断方式跳转首页，故不再此处跳转
// ....
});
// 当新版本下载失败回调
updateManager.onUpdateFailed(() => {
uni.hideLoading();
// 下载新版本失败
showModal({
content: '新版本已经上线了，请删除当前小程序，重新搜索打开' })
.then(() => {
// 点击确定，清空小程序缓存，是小程序情况而定
clearPartStorageSync();
setTimeout(() => {
// 跳转到首页
uni.reLaunch({
url: '/pages/common/homePage/index' });
}, 100);
})
.catch(() => {
// 点击取消，同理
clearPartStorageSync();
setTimeout(() => {
uni.reLaunch({
url: '/pages/common/homePage/index' });
}, 100);
});
});
}
2. Run in onShow of App.vue
// 注意，需要在 onShow 中运行，切勿在其他生命周期中运行，防止小程序热启动导致不生效
onShow() {
this.autoUpdate();
}
3.Prompt box encapsulation method used in App.vue
export const showModal = ({
content, showCancel = true, confirmText = '确定' }) => {
return new Promise((resolve, reject) => {
uni.showModal({
title: '提示',
content: content,
showCancel,
confirmText,
success: (res) => {
resolve(res)
},
fail: (err) => {
reject(err)
}
})
})
}
export const showLoading = ({
title }) => {
return uni.showLoading({
title,
mask: true
})
}
This method was also modified through online information search and the situation of my project itself. If there are any errors, you are welcome to point them out.
Finally, I emphasize once again that the method of obtaining new applet cannot be placed in a cycle other than onShow! ! !