我们在做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也行，因为这个方法是通用的

好了小程序的版本更新检查就讲到这了

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧