微信小程序版本自动更新的方法


Posted in Javascript onJune 14, 2019

公司的小程序项目上线, 后期还会有小型的版本迭代. 为了让用户能在我们进行版本迭代后及时使用最新版本的功能. 做了以下优化..

知识点1: 当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;
当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

知识点2: 小程序的启动分为"冷启动" 和 "热启动".

热启动是指: 小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前台。

冷启动是指: 小程序首次打开或销毁后再次被打开

知识点3: 更新版本

冷启动时, 如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。

如果要马上应用最新版本,使用wx.getUpdateManager API 进行处理。

代码如下:

// 在app.js里写下以下代码
 onLaunch () {
  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)
        // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
        if (res.confirm) {
         // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
         updateManager.applyUpdate()
        }
       }
      })
     })
     updateManager.onUpdateFailed(function () {
      // 新的版本下载失败
      wx.showModal({
       title: '已经有新版本了哟~',
       content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
      })
     })
    }
   })
  }
 }

知识点4: 小程序重新初始化时会触发onLaunch事件.  onLaunch事件会触发在页面onShow事件之前.获取小程序更新版本可以写在onLaunch里.

知识点5:

在开发和体验版无法测试版本更新

需要在开发者工具里,编译时选择"模拟更新编译"

微信小程序版本自动更新的方法

(部分开发者工具版本, 每次update编译时都需要重新勾选此选项)

点击确定,重新编译.

页面会弹窗显示:

微信小程序版本自动更新的方法

点击确认后: 

微信小程序版本自动更新的方法

控制台显示:

微信小程序版本自动更新的方法

知识点6: 随着小程序的不断更新, 部分功能可能需要最新版的微信客户端才能使用. 这时候可以弹窗提示用户更新到最新版本微信

if (wx.canIUse('getUpdateManager')) {
 ...
} else {
 // can't use getUpdateManager
 wx.showModal({
    title: '提示',
    content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
  })

完整版本:

onLaunch () {
  if (wx.canIUse('getUpdateManager')) {
   const updateManager = wx.getUpdateManager()
   updateManager.onCheckForUpdate(function (res) {
    if (res.hasUpdate) {
     updateManager.onUpdateReady(function () {
      wx.showModal({
       title: '更新提示',
       content: '新版本已经准备好,是否重启应用?',
       success: function (res) {
        if (res.confirm) {
         updateManager.applyUpdate()
        }
       }
      })
     })
     updateManager.onUpdateFailed(function () {
      wx.showModal({
       title: '已经有新版本了哟~',
       content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
      })
     })
    }
   })
  } else {
   wx.showModal({
    title: '提示',
    content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
   })
  }
 }

知识点7: 如果在onLaunch里进行请求, 这是异步请求. 如果对交互顺序有要求, 如: 版本更新--重新获取数据-- 用户展示, 那么需要考虑在callback里进行重获数据.

知识点8:小程序启动时,正常是会热更新,下载新版本的包,下一次启动就会使用新包。但发现有更新不成功的情况发生.
官方回答: 策略生效跟网络环境以及发布时间等若干因素有关,会尽可能让小程序快地更新,但无法保证每次都热更新成功。

知识点9:小程序的异步更新发生在冷启动过程. 官方不建议热更新. 原因:

微信小程序版本自动更新的方法

参考资料:

官方-强制更新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
超清晰的document对象详解
Feb 27 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
vue+express+jwt持久化登录的方法
Jun 14 #Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 #Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 #Javascript
ES6顶层对象、global对象实例分析
Jun 14 #Javascript
ES6数组与对象的解构赋值详解
Jun 14 #Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 #Javascript
通过JS深度判断两个对象字段相同
Jun 14 #Javascript
You might like
收音机的保养
2021/03/01 无线电
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
类之Prototype.js学习
2007/06/13 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
js动态引入的四种方法
2018/05/05 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
详解python中递归函数
2019/04/16 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
详解Python设计模式之策略模式
2020/06/15 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
Python脚本调试工具安装过程
2021/01/11 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
优秀团队获奖感言
2014/02/19 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python