小程序开发中如何实现版本自动更新

前沿

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

好了，小程序的版本更新检查就到此为止

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