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


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编程语言的8张思维导图分享
Mar 27 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
php读取本地json文件的实例
2018/03/07 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
一个javascript参数的小问题
2008/03/02 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python解析多层json操作示例
2019/12/30 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
大国崛起英国观后感
2015/06/02 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL