小程序开发的简单功能：小程序开发如何实现版本自动更新
小程序开发的简单功能：小程序开发如何实现版本自动更新好了小程序的版本更新检查就讲到这了这种情况我们可以在跳转到我们小程序的那个页面主动调用一次autoUpdate也行，因为这个方法是通用的// 自动更新检测 autoUpdate() { const that = this // 返回一个promise，用于更新后的后续处理 return new Promise((resolve) => { // 加载一个全屏遮罩，提示版本更新检查 wx.showLoading({ title: '更新检查中' mask: true }); // 获取小程序是否支持版本更新检查api if (wx.canIUse('getUpdateManager')) { // 获取更新检查的实例
前沿我们在做WX小程序开发的时候，版本迭代和功能更新是比较频繁的，但每次有新版本发布时，客户端的小程序并不会实时更新，而是在特定的时间内更新（这就有点随缘了），一般是24小时内，但是我们的后台api是实时更新的，这样就会导致部分没有实时更新的客户端小程序就有可能出现bug
那我们如何实现客户端的版本实时更新，今天就跟大家来讲一下，如何更优雅更灵活地实现一个小程序版本自动更新机制
实现WX小程序的版本自动更新的核心api是wx.getUpdateManager
我们在小程序根目录下的app.js文件加入如下两个方法，为什么要把这个方法加在app.js下面，因为app.js下的方法是全局方法，可以在任何的子页面系统里调用到，这样我们就可以在任何想做更新检查的地方，调用下面的方法
// 自动更新检测
autoUpdate() {
const that = this
// 返回一个promise，用于更新后的后续处理
return new Promise((resolve) => {
// 加载一个全屏遮罩，提示版本更新检查
wx.showLoading({
title: '更新检查中'
mask: true
});
// 获取小程序是否支持版本更新检查api
if (wx.canIUse('getUpdateManager')) {
// 获取更新检查的实例
const updateManager = wx.getUpdateManager()
//1. 检查小程序是否有新版本发布
updateManager.onCheckForUpdate(updateRes => {
// 检查完后全屏遮罩关闭掉
wx.hideLoading()
if (updateRes.hasUpdate) {
//检测到新版本，需要更新，给出提示
wx.showModal({
title: '更新提示'
content: '检测到新版本，是否下载新版本并重启小程序？'
showCancel: false //隐藏取消按钮
confirmText: "确认更新" //只保留确定更新按钮
success() {
//2. 用户确定下载更新小程序，小程序下载及更新静默进行
that.downLoadAndUpdate(updateManager resolve)
}
})
} else {
// 如果没有新版本更新，promise直接返回true
// 代表已经是最新版本了
resolve(true)
}
})
} else {
// 小程序的当前api不支持版本更新检查
// 关闭遮罩
wx.hideLoading()
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({
title: '提示'
content: '当前微信版本过低，为了更好的体验功能，请升级到最新微信版本。'
success() {
// promise返回true，不影响用户后续的操作
resolve(true)
}
})
}
})
}
/**
* 下载小程序新版本并重启应用
*/
downLoadAndUpdate(updateManager resolve) {
// 更新中的遮罩提醒
wx.showLoading({
title: '更新中'
mask: true
});
//静默下载更新小程序新版本
updateManager.onUpdateReady(() => {
wx.hideLoading()
//新的版本已经下载好，调用 applyUpdate 应用新版本并重启
resolve(true)
updateManager.applyUpdate()
})
updateManager.onUpdateFailed(() => {
wx.hideLoading()
// 新的版本下载失败
wx.showModal({
title: '提示'
content: '新版本下载失败，请您删除当前小程序，重新打开'
success() {
resolve(true)
}
})
})
}
核心代码写完了，那么我们一般是什么地方调用呢
1、首先可以考虑在小程序的默认进入页面进行调用，就是客户端首次加载的页面
// 在onShow生命周期函数调用
// 这样每次都会检查更新
onShow() {
const that = this
// getApp()获取全局的app实例
// 调用autoUpdate方法检查更新
getApp().autoUpdate().then(res => {
// 如果是最新版本
// 获取版本已经更新完
if (res) {
// 做后续处理
}
})
}
2、也有可能是从其它的小程序跳转到我们的小程序
这种情况我们可以在跳转到我们小程序的那个页面主动调用一次autoUpdate也行，因为这个方法是通用的
好了小程序的版本更新检查就讲到这了
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
