小程序 版本自动更新的实现

摘要:
参与微信小程序开发的合作伙伴肯定会遇到这样的问题,即新版本发布后,旧版本无法自动更新。在我开发时:首先,我在今年3月和4月首次接触了小程序。然而,互联网上没有找到相关的解决方案-最愚蠢的方法是删除小程序,然后再次搜索以打开它-然后,我记不清在哪里看到了信息-小程序的更新机制将自动检测。根据手机的缓存级别,最迟两个小时就可以自动更换-所以这有点死路一条!!!

涉及到微信小程序开发的小伙伴们,相信一定会遇到新版本发布后,旧版本无法自动更新的困扰.

我之前进行开发的时候:

-  首先是因为在今年的 3、4月份进行小程序的初次接触;
-  但是网上也没搜到相关的解决方案;
-  最笨的方法就是,删除小程序后再重新搜索打开就好;

-  然后,记不清从哪里看到的信息;
-  大概意思是:小程序的更新机制会自动检测,根据手机的缓存程度不同,一般最迟两个小时就能自动替换
-  所以就有点不了了之了

!!!(真实情况是,在之前进行版本发布后,有的iphone手机,即便一天之后进入,依然是旧版本,根本不会自动更新替换好吧)!!!

-  今天无意中又想到这个问题,再进行百度,发现很多道友给出解决方案了;
-  我猜测是这段时间官方进行了功能补充,亦或者是道友们的深层挖掘吧;
-  在此进行一下整理,希望能帮到更多的朋友...
实现方案

首先,你必须要了解一下 小程序 - 运行机制

小程序 版本自动更新的实现第1张

   然后根据文档指导,自然而然就会进入到 UpdateManager 对象 的介绍与使用

 我根据官方提供的示例及其他道友的文章参考,最后进行了如下代码整合 : >>>
/**
 * 检测当前的小程序
 * 是否是最新版本,是否需要下载、更新
 */
function checkUpdateVersion() {
  //创建 UpdateManager 实例
  const updateManager = wx.getUpdateManager();
  //检测版本更新
  updateManager.onCheckForUpdate(function(res) {
    // 请求完新版本信息的回调
    if (res.hasUpdate) {
      //监听小程序有版本更新事件
      updateManager.onUpdateReady(function() {
        wx.showModal({
          title: '更新提示',
          content: '新版本已经准备好,是否重启应用?',
          success(res) {
            if (res.confirm) {
              // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
              updateManager.applyUpdate();
            }
          }
        })
      })

      updateManager.onUpdateFailed(function() {
        // 新版本下载失败
        wx.showModal({
          title: '已经有新版本咯~',
          content: '请您删除当前小程序,到微信 “发现-小程序” 页,重新搜索打开呦~',
        })
      })
    }
  })
}
具体使用

根据小程序的运行机制,适合在启动时就进行版本检测的操作

  • 所以,可以在 app.js 的 onLaunch() 方法中进行调用 上面的 checkUpdateVersion()

小程序 版本自动更新的实现第2张

 运行效果截图:

小程序 版本自动更新的实现第3张

 Tips:

1. 小程序开发版/体验版没有「版本」概念,所以无法在开发版/体验版上测试更版本更新情况
2. 准确来讲,版本自动更新的方法越早进行补充越合理,
   尤其适合前期使用人数较少的时候就做补充
   以避免后期使用人数太多时而旧版本依然无法检测更新及时替换的情况

补充:
考虑再三,为了版本的统一化,当然是建议小程序可以自动更新,所以升级一下代码如下:

建议可以对比两种写法,找找不同...
/**
 * 检测当前的小程序
 * 是否是最新版本,是否需要下载、更新
 */
function checkUpdateVersion() {
  //判断微信版本是否 兼容小程序更新机制API的使用
  if (wx.canIUse('getUpdateManager')) {
    //创建 UpdateManager 实例
    const updateManager = wx.getUpdateManager();
    //检测版本更新
    updateManager.onCheckForUpdate(function(res) {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        //监听小程序有版本更新事件
        updateManager.onUpdateReady(function() {
          //TODO 新的版本已经下载好,调用 applyUpdate 应用新版本并重启 ( 此处进行了自动更新操作)
          updateManager.applyUpdate();
        })
        updateManager.onUpdateFailed(function() {
          // 新版本下载失败
          wx.showModal({
            title: '已经有新版本喽~',
            content: '请您删除当前小程序,到微信 “发现-小程序” 页,重新搜索打开哦~',
          })
        })
      }
    })
  } else {
    //TODO 此时微信版本太低(一般而言版本都是支持的)
    wx.showModal({
      title: '溫馨提示',
      content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
    })
  }
}
 

免责声明:文章转载自《小程序 版本自动更新的实现》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇单片机串口通讯RXD与TXD如何对接详解git和github的用法汇总下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序地图控件篇 自定义图标被地图覆盖的问题

今天在做微信小程序的时候遇到这个这样的问题  需要在地图上加个一个自定义的图标控件 类似这样的    刚开始的时候怎图片一直会被地图组件覆盖  ,要怎么解决这个问题  我去翻了下小程序的文档 有个cover-view以及cover-image组件是可以覆盖在map组件之上  只要把view换成 cover-view就解决啦   希望对各位开发的同学有帮助...

(其他)小程序介绍和开发

转自CSDN: 本文会从小程序前端开发,小程序服务端开发及小程序的发布与审核三个方面来阐述小程序的开发流程。 一、小程序前端介绍及开发 小程序的开发涉及到前端开发和后端开发,前端指的是在手机上能看到的部分,主要负责页面的布局排版及展示,后端提供数据和业务处理能力,指的是我们写给前端调用的API接口。 注册账号 小程序的注册比较简单,首先,登录微信公众号平台...

微信小程序WXML页面常用语法(讲解+示例)

(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可以理解为我们传统页面中的HTML,它是微信为我们提供的一套标签语言,可以说它就是我们小程序的脸面(虽然没经过CSS装饰前不一定光鲜亮丽),开发中 WXML...

我是如何学习小程序的

前段时间和大家一起分享了一篇关于学习方法内容《大牛与搬运工的差距——学习方法的力量》。我们将学习过程分成八步,并借鉴了敏捷开发的迭代思想,以达到自我迭代学习的效果。行胜于言,理论结合实践才是王道,所以本文我将基于前面的学习方法,分享我是如何学习微信小程序的。 关于小程序 小程序是继订阅号、服务号、企业号后,16年腾讯新推出的又一种开发能力。小程序无需下载安...

h5页面跳转小程序

2020年以前, 只能通过 web-view内嵌h5跳转小程序,现在  可以直接跳了!!!!!!  官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 用的是JS-SDK的接口,需要使用到js-sdk-1.6.0的版本才有支持,htt...

关于微擎小程序的操作的步骤,如何上传小程序?

2018年,微信小程序,到了风口期了,小龙欧巴,孵化了快1年多的项目,注定会成为大家经常接触的项目, 微擎,基于微信第三方的开发框架,的确好用,只是文档的更新貌似永久性停留在了2017年4月份啦! https://www.we7.cc/manual/index.php 故鄙人特开此博客,来记录学习微擎开发过程中的各种神坑。 第一讲:讲解如何安装微擎小程序...