微信小程序发布新版本时自动提示用户更新的方法


Posted in Javascript onJune 07, 2019

如图,当小程序发布新的版本后,用户如果之前访问过该小程序,通过已打开的小程序进入(未手动删除),则会弹出这个提示,提醒用户更新新的版本。用户点击确定就可以自动重启更新,点击取消则关闭弹窗,不再更新。

微信小程序发布新版本时自动提示用户更新的方法

官方给的示例代码:

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
 // 请求完新版本信息的回调
 console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
 wx.showModal({
  title: '更新提示',
  content: '新版本已经准备好,是否重启应用?',
  success(res) {
   if (res.confirm) {
    // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
    updateManager.applyUpdate()
   }
  }
 })
})

updateManager.onUpdateFailed(function () {
 // 新版本下载失败
})

官方提供的demo中,只有最基本的更新提示,并未做异常处理。而且官方也说了这个功能基础库 1.9.90 开始支持,低版本需做兼容处理,那么就需要对着端代码进行改进了。

另一方面,如果当前版本更新有重大调整,一定需要用户更新,那么可以在用户点击取消的回调中给出提示,并重新进入版本提示流程。如下图,在上边的更新提示中,用户点击取消,则弹出下面提示弹窗,用户点击确定,则更新版本,点击取消,则重新调用上边的更新提示。总之,用户只有更新了,才能正常访问小程序(如非必须,建议慎用)。

微信小程序发布新版本时自动提示用户更新的方法

改善后的代码:

//app.js

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

更新版本的模拟测试:

1. 微信开发者工具上可以通过「编译模式」下的「下次编译模拟更新」开关来调试;

2. 小程序开发版/体验版没有「版本」概念,所以无法在开发版/体验版上测试更版本更新情况;

对于开发者工具,可以这样验证测试:

点击编译模式设置下拉列表,然后点击“添加编译模式”,在自定义编译条件弹窗界面,点击下次编译时模拟更新,然后点击确定,重新编译就OK了。

微信小程序发布新版本时自动提示用户更新的方法

微信小程序发布新版本时自动提示用户更新的方法

需要注意的是,这种方式模拟更新一次之后就失效了,后边再测试仍需要对这种编译模式进行重新设置才可以。

更新提示有延迟?

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

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秒),虽说还是有一点延迟,但目前也只能这样了。

总结:

综上,无论如何,使用小程序版本更新检测功能都是需要一定时间的(一两秒的时间已经不算短了哈),如果在检测这一两秒中内用户进行了操作,那么更新提示弹窗则会打断用户的操作。但毕竟不是频繁更新版本,所以这方面还是可以接受的。

另外,下载新的版本包的时候建议loading,这样用户就知道是在下载,然后下载完成自动重启,这样整个流程就顺畅多了。

梳理了下,整了份思维导图,可以辅助理解:

微信小程序发布新版本时自动提示用户更新的方法

其他注意事项:

基础库最低版本设置:

如果不想做API支持判断,那么可以给小程序设置最低版本支持。

打开小程序管理后台-设置-基础库最低版本设置,根据现有小程序的访问情况或者小程序官方提供的数据,设置一个比较大众化的基础库版本就好了,这样就能进了尽量减少API兼容性判断,也能促使用户更新微信版本,以支持小程序正常运行,体验小程序一些高级功能。

微信小程序发布新版本时自动提示用户更新的方法

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
React简单介绍
May 24 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
微信小程序与webview交互实现支付功能
Jun 07 #Javascript
在微信小程序中使用vant的方法
Jun 07 #Javascript
微信小程序实现折线图的示例代码
Jun 07 #Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 #Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 #Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 #Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 #Javascript
You might like
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
Vue中引入样式文件的方法
2017/08/18 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
小学毕业演讲稿
2014/04/25 职场文书
社团活动总结
2014/04/28 职场文书
禁止酒驾标语
2014/06/25 职场文书
2014年党建工作总结
2014/11/11 职场文书
经理聘任证明
2015/03/02 职场文书
大二学年个人总结
2015/03/03 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL