微信小程序强制更新

(如果想直接使用,可直接拉到最底部5.2,有比较全的代码)

1.场景:随着这些年的不断完善,移动端的产品在往小程序倾斜,以前是小程序为app倒流,现在小程序不断完善app能做到的功能,小程序基本都能做到,而是小程序属于轻应用,无需下载,用完即走,也可添加到桌面快捷方式,使用起来非常方便,深受广大用户的喜爱;而且发布审核的周期也比较短,功能更新发布也比较迅速。所以公司在大力开发,推广使用小程序。小程序版本更新比较频繁,但新版本覆盖率比较慢,因为小程序的更新机制是异步的,部分用户不会马上应用上新版本。

而我们这次改版,改动的比较大,例如以前进详情页需要带入(city,物业类型,id...)参数,这次新加的详情页功能还要要求新增参数,这就导致路径携带太多参数,这样不好。我们这次改版就想着,只带city和一个id,把其余的参数都干掉,但老版本的小程生成的二维码已经被推广出去了,而且会一直存在...;页面中也新增了许多全局变量;缓存中新增了许多缓存变量;接口也做了调整...说了这么多,总之一句话,我们必须得强制更新。然后查了一些官方资料和博客,找了一些方法。做一下总结归纳。

2.涉及的知识点

2.1小程序的冷热启动

    2.1.1 分类:冷启动,热启动

    2.1.2 冷启动:用户首次打开小程序,或者小程序被主动销毁,此时小程序需要重新加载启动。

    2.1.3 热启动:用户已经打开小程序,在一定时间内(且没销毁关闭,进入后台运行),此时只需将后台小程序切换到前台即可。

2.2 小程序的更新机制

    小程序的异步更新发生在冷启动过程,当发现新版本后,会异步下载新版本的代码包,但不会马上应用上最新版本,需要等小程序下一次冷启动,才会应用上新版本。(摘自官方

3. 官方提供了四种解决思路

    3.1. 同步检查更新(放弃):可能是最直接的解决思路,但主要问题是会影响小程序的启动速度,当下小程序的更新迭代是非常频繁的,部分用户可能每次启动都命中更新,如果需要同步检查更新+同步下载新的版本,那将会影响这部分用户的启动体验。

    3.2. 模块热替换(放弃):从技术上来说,这是最好的方案,小程序运行起来后,在打开新页面时,马上应用新版本里的页面,但这就会存在新旧逻辑、页面共存问题,对于开发者来说,反而更不好处理,特别是涉及到全局变量时,情况会更复杂,对于我们已有的框架来说,也是一个大挑战,不过这个也是我们之后努力的方向。

    3.3. 定时 check 新版本(目前方案):6.6.3 及以上版本的客户端,会定时 check 最近使用过的小程序是否有发布新版本;如果有,下次打开的时候会同步更新新版本再打开。这可以保证在新版本发布 24 小时后,所有小程序都能使用最新版本。(这部分是微信客户端自身优化,开发者无需关心)

   3.4. 异步更新 + 强制更新(目前方案):同步检查更新与模块热替换两者之间的折衷方案,即还是维持异步更新机制,在异步下载完小程序代码包后,提供重启小程序的能力,这样在遇到紧急问题时可以马上解决。

4. 结合官方的思路,加上我们当前的场景,我们只能启用3.4的思路,会涉及wx.getUpdateManager 方法,可以点击参考官方说明

5.代码部分

5.1代码思路:首先判断该方法是否可用(因为对微信版本有限制,如果不可用,提示用户升级微信版本,如果可用该方法,再执行后续操作),其次判断是否有新版本,然后当新版本下载完毕showModal提示用户更新。

5.2代码更新代码放在app.js的onLaunch生命周期中

onLaunch: function () {
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        console.log('onCheckForUpdate====', res)
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
          console.log('res.hasUpdate====')
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: '更新提示',
              content: '新版本已经准备好,是否重启应用?',
              success: function (res) {
                console.log('success====', res)
                if (res.confirm) {
                  // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function () {
            // 新的版本下载失败
            wx.showModal({
              title: '已经有新版本了哟~',
              content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
            })
          })
        }
      })
    }
  },

5.3 调试

5.4 说明

    5.4.1官方地址:https://developers.weixin.qq.com/community/develop/doc/000c2430d30b70251e86f0a0256c09

    5.4.2 博客推荐:https://www.jianshu.com/p/4f5e3faaf483

    5.4.3 官方api地址:https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html

猜你喜欢

转载自blog.csdn.net/hangGe0111/article/details/101360541