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


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 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
js处理表格对table进行修饰
May 26 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
php实现简易计算器
2020/08/28 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
酒店总经理助理职责
2014/02/12 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
个性与发展自我评价
2015/03/06 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python