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


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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
整理一下常见的IE错误
Nov 18 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
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
解析php中heredoc的使用方法
2013/06/17 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
专科毕业生自我鉴定
2013/12/01 职场文书
英语生日邀请函
2014/01/23 职场文书
校园之声广播稿
2014/01/31 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
银行员工考核评语
2014/12/31 职场文书
加班费申请报告
2015/05/15 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python