[小程序] 发版更新方案

背景

小程序每次发版更新,都需要反复的删除打开或清除缓存,以获取最新版本。更新的不及时导致不同用户查看的版本不同(有些用户会报Bug、测试也不方便验证新版本)。

方案

手动更新:由用户选择是否更新,如不更新,则不影响用户当前操作,但后台仍会异步更新

  1. 《优先使用本地版本设置》为是
  2. wx.getUpdateManager()

强制更新:保证用户使用最新版本,但强制下载新版,用户必须等待,也许他不关心新版

  1. 《优先使用本地版本设置》为否
  2. 《小程序最低可用版本》选择最新发布的版本

结论:因为小程序的强制更新只需修改后台配置,所以两种方案都要,代码上只用实现手动更新。当此次更新是破坏性的(严重 Bug 修复、模块大改等),就到后台配置强制更新。

实现

在《我的》页面增加「更新提示」(只在需要更新时显示),点击更新版本。

app.js

js 复制代码
App({
  globalData: {
    needUpdate: false,
    uploadDownloadFail: false,
  },

  // 监测是否有版本更新
  watchUpdate() {
    const updateManager = wx.getUpdateManager()
    updateManager.onUpdateReady(() => {
      // 有更新
      this.globalData.needUpdate = true
    })
    updateManager.onUpdateFailed(() => {
      // 有更新,但下载失败
      this.globalData.needUpdate = true
      this.globalData.uploadDownloadFail = true
    })
  },

  onLaunch(options) {
    this.watchUpdate()
  },
})

mine.js

js 复制代码
<view wx:if="{{ needUpdate }}" bind:tap="updateVersion">存在新版本,点击升级</view>
===============================================================
Page({
  /**
   * 页面的初始数据
   */
  data: {
    needUpdate: false,
    uploadDownloadFail: false,
  },

  // 同步 app.js 中的 needUpdate、uploadDownloadFail 变量值
  // 注意:每次都调用 getApp() 以获取最新值
  watchUpdate() {
    this.setData({
      needUpdate: getApp().globalData.needUpdate,
      uploadDownloadFail: getApp().globalData.uploadDownloadFail,
    })
    setInterval(() => {
      this.setData({
        needUpdate: getApp().globalData.needUpdate,
        uploadDownloadFail: getApp().globalData.uploadDownloadFail,
      })
    }, 5000)
  },

  // 更新版本
  updateVersion() {
    const { uploadDownloadFail } = this.data

    if (!uploadDownloadFail) {
      // 新版本下载成功
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好,是否重启应用?',
        success: (res) => {
          if (res.confirm) {
            // 应用新版本并重启
            const updateManager = wx.getUpdateManager()
            updateManager.applyUpdate()
          }
        }
      })
    } else {
      // 新版本下载失败
      // wx.showToast({
      //   title: '新版本下载失败,请您尝试删除当前小程序,重新搜索打开!',
      //   icon: 'none',
      //   duration: 8000
      // })
      wx.restartMiniProgram({
        path: '/pages/index/index'
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.watchUpdate()
  },
  
})

可扩展:

  • 显示版本号:wx.getAccountInfoSync().miniProgram.version
  • 增加更新公告,说明更新内容

最后

参考文章:

  1. developers.weixin.qq.com/miniprogram...
  2. mp.weixin.qq.com/s/dTDjRZjqd...

欢迎沟通交流。

相关推荐
云起SAAS19 小时前
倒班日历助手抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·倒班日历助手
sheji341621 小时前
【开题答辩全过程】以 基于微信小程序的失物认领系统为例,包含答辩的问题和答案
微信小程序·小程序
计算机毕设指导61 天前
基于微信小程序的网络安全知识科普平台系统【源码文末联系】
java·spring boot·安全·web安全·微信小程序·小程序·tomcat
toooooop83 天前
微信小程序轮播图高度自适应优化
微信小程序·小程序
StarChainTech3 天前
电动车租赁行业的核心需求:智能中控设备的选择与技术方案
物联网·微信小程序·小程序·软件需求·共享经济
计算机毕设指导63 天前
基于微信小程序的积分制零食自选平台【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
云起SAAS3 天前
老年美文文章图文短视频资讯阅读抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·老年美文文章图文短视频资讯阅读
qq_12498707533 天前
基于微信小程序的民宿预订系统的设计与实现(源码+论文+部署+安装)
java·spring boot·后端·微信小程序·毕业设计
一室易安3 天前
uniapp+vue3 微信小程序中 页面切换tab 页面滚动到指定锚点位置,滚动页面时候到达指定锚点位置吸顶tab 会自动进行切换
微信小程序·uni-app·notepad++
不想吃菠萝3 天前
pc端微信小程序post传递data是字符串,自动加了双引号问题修改方案
微信小程序·小程序