微信小程序检测版本是否有更新

当我们的小程序线上有更新时，需要弹出个提示框，告知用户更新小程序，而不是删掉旧版，再搜索小程序，点击打开后才可以看到新版，所以好的方法是给用户个提示

image.png

在开发者工具上测试验证的时候，更新提示弹窗在小程序界面加载出来五六秒之后才弹出来，这是由于小程序在检测到有新版本之后，调用 UpdateManager.onUpdateReady(function callback) 进行版本更新监听，此时客户端主动触发下载（无需开发者触发），下载成功后回调。也就是说我们的更新提示弹窗是在小程序检测到新版本并完成新版本下载之后弹出的，所以就有了这几秒的时间差。所以这样用户体验会很差，至少应该在小程序编译时检测到有新版本就应该先给出更新提示，至于新版本下载的准备工作，可以在用户点击确认按钮之后进行，将代码写在app.js中：

App({
    onLaunch: function(options) {
        this.autoUpdate()
    },
    autoUpdate: function() {
        var self = this
        // 获取小程序更新机制兼容
        if (wx.canIUse('getUpdateManager')) {
            const updateManager = wx.getUpdateManager()
            //1. 检查小程序是否有新版本发布
            updateManager.onCheckForUpdate(function(res) {
                // 请求完新版本信息的回调
                if (res.hasUpdate) {
                    //检测到新版本，需要更新，给出提示
                    wx.showModal({
                        title: '更新提示',
                        content: '检测到新版本，是否下载新版本并重启小程序？',
                        success: function(res) {
                            if (res.confirm) {
                                //2. 用户确定下载更新小程序，小程序下载及更新静默进行
                                self.downLoadAndUpdate(updateManager)
                            } else if (res.cancel) {
                                //用户点击取消按钮的处理，如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
                                wx.showModal({
                                    title: '温馨提示~',
                                    content: '本次版本更新涉及到新的功能添加，旧版本无法正常访问的哦~',
                                    showCancel: false, //隐藏取消按钮
                                    confirmText: "确定更新", //只保留确定更新按钮
                                    success: function(res) {
                                        if (res.confirm) {
                                            //下载新版本，并重新应用
                                            self.downLoadAndUpdate(updateManager)
                                        }
                                    }
                                })
                            }
                        }
                    })
                }
            })
        } else {
            // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
            wx.showModal({
                title: '提示',
                content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
            })
        }
    },
    /**
     * 下载小程序新版本并重启应用
     */
    downLoadAndUpdate: function(updateManager) {
        var self = this
        wx.showLoading();
        //静默下载更新小程序新版本
        updateManager.onUpdateReady(function() {
            wx.hideLoading()
            //新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
        })
        updateManager.onUpdateFailed(function() {
            // 新的版本下载失败
            wx.showModal({
                title: '已经有新版本了哟~',
                content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
            })
        })
    }
})

如上，在检测到小程序有新版本之后，就给出弹窗提示用户下载新版并重启小程序，用户点击确定按钮后进行小程序新版本的下载和更新。也为了调用方便，将新版本下载及小程序的重启应用单独封装起来。

这样，从小程序加载到弹出版本更新弹窗只需要耗费调用新版本检测API并返回结果的时间（开发者工具测试有2~3秒），虽说还是有一点延迟，但目前也只能这样了。PS:线上版本只有在第一次时提示，之后会自动更新，不会再次弹框

好了，代码写好了，给怎么测试呢，如图：

image.png
image.png

需要注意的是，本地测试只能运行一次，想要再次测试，就需要重复上图步骤

ps:微信小程序更新有时会弹出提示，有时不会弹出提示，很正常，没有弹出提示是因为微信自动更新了你上传的新版本，有弹框是因为微信没有更新小程序，弹框是为了强制让其强制更新