小程序发布新版本提示更新

487 阅读3分钟

一、效果展示

1.png

2.png

3.png

二、前言

当发布新版本小程序后,需要用户能赶紧用上最新的,避免出问题。查了一下官方文档,总结出几个情况如下:

  1. 微信运行时,会定期(24小时内)检查最近使用的小程序是否有更新 (黄花菜都凉了)
  2. 用户长时间未使用小程序时,会强制同步检查版本更新 (对于使用频率高的小程序没P用)
  3. 小程序每次冷启动时,都会异步检查是否有更新版本 (本次不生效,下次冷启动才生效)

前台、后台定义:  当用户点击左上角关闭或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了手机后台;当再次进入微信(iphone)或再次打开小程序,又会从后台进入前台

注意: 只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁。

这里科普一下什么是冷启动和热启动:

  • 冷启动:用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载(小程序在冷启动时会依次触发onLaunch—>onShow)
  • 热启动:用户已经打开过某小程序,然后在一定时间内(30分钟)再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态(小程序在热启动时会触发onShow)

三、解决方案

最终解决方案是在app.js的onShow生命周期里检查是否有新版本,如果有的话,就异步下载,下载完毕弹窗提示用户更新,代码如下:

// app.js
onLaunch: function () {
    // 小程序版本更新管理器
    const updateManager = wx.getUpdateManager();
    updateManager.onUpdateReady(function () {
        // 新版本下载成功的回调
        wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好,是否重启应用?',
        success: function (res) {
            if (res.confirm) {
                // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate()
            }
            },
        });
    });

    updateManager.onUpdateFailed(function () {
        // 新版本下载失败的回调
        updateManager.onUpdateFailed(res => {
            // 新版本下载失败,提示用户删除后通过小程序搜索后重新打开
            wx.showModal({
                title: '更新提示',
                content: '新版本已上线,请删除当前小程序后重新打开',
                showCancel: false, // 隐藏取消按钮
                confirmText: '知道了'
            })
        })
    });
}

补充: 在微信小程序中,检测新版本更新通常放在应用的 onLaunch 生命周期钩子函数中比较好。 因为在应用 onLaunch 生命周期钩子函数中,应用刚启动时,系统会提供最新的版本信息,此时可以及时检测到新版本更新。如果放在其他生命周期钩子函数中,例如 onShowonUpdate 等,可能需要等待应用加载完毕后或者更新完成后才能检测到新版本更新。 另外,建议在 onLaunch 生命周期钩子函数中添加检测新版本更新的逻辑,因为这通常是用户启动应用时发生的第一件事,可以给用户带来更好的使用体验。

四、调试须知

  • 小程序开发版/体验版没有版本概念,所以无法在开发版/体验版上测试更版本更新情况
  • 微信开发者工具上可以通过编译模式中勾选下次编译模拟更新开关来调试

330412ddf99848ae85e06e6d2d064735.gif