微信小程序热更新-用户打开小程序时检测版本自动更新

在微信小程序中,「热更新」(也叫运行时更新)是指小程序发布新版本后,无需用户重新下载,自动检测并更新到最新版本的能力。

一、核心原理

通过微信小程序官方提供的 getUpdateManager API 实现,核心流程:

  1. 小程序启动 / 切前台时检测后台是否有新版本;
  2. 若有新版本,自动后台下载;
  3. 下载完成后提示用户重启小程序,加载新版本;
  4. 重启后小程序使用最新代码包,完成热更新。

二、完整实现代码(app.vue 中全局配置)

javascript 复制代码
<script setup>
import { onLaunch } from '@dcloudio/uni-app';

// 小程序启动时检测(核心时机)
onLaunch(() => {
  // 兼容低版本基础库
  if (!uni.canIUse('getUpdateManager')) return;

  const updateManager = uni.getUpdateManager();

  // 1. 检测是否有新版本
  updateManager.onCheckForUpdate((res) => {
    if (res.hasUpdate) {
      console.log('检测到新版本,后台自动下载中...');
    }
  });

  // 2. 新版本下载完成,提示重启
  updateManager.onUpdateReady(() => {
    uni.showModal({
      title: '版本更新',
      content: '已为您更新小程序,点击确定重启生效',
      cancelText: '稍后',
      confirmText: '确定',
      success: (res) => {
        if (res.confirm) {
          // 应用新版本并重启
          updateManager.applyUpdate();
        }
      }
    });
  });

  // 3. 新版本下载失败
  updateManager.onUpdateFailed(() => {
    uni.showToast({
      title: '更新失败,请手动清理缓存重试',
      icon: 'none'
    });
  });
});

</script>

若需强制更新(隐藏取消按钮),修改弹窗配置:

javascript 复制代码
uni.showModal({
  title: '版本更新',
  content: '必须更新才能继续使用',
  showCancel: false, // 隐藏取消按钮
  confirmText: '立即重启',
  success: (res) => {
    if (res.confirm) updateManager.applyUpdate();
  }
});

三、关键注意事项

  1. 生效范围:仅对「正式版」小程序生效(开发版 / 体验版不会触发);
  2. 更新时机:发布新版本后,微信服务器同步需 5-10 分钟,期间检测可能不触发;

四、验证流程

  1. 上传当前代码到小程序后台,发布「正式版 V1.0」;
  2. 修改代码(比如改版本号),再次上传、发布「正式版 V1.1」;
  3. 打开已安装 V1.0 的小程序,会自动检测到 V1.1 并下载;
  4. 下载完成后弹窗提示重启,重启后即加载 V1.1 版本。

五、与「热重载」的区别(再次明确)

特性 热更新(热更新) 热重载(开发者工具)
适用场景 正式版面向用户 开发阶段面向开发者
核心目的 更新线上小程序版本 开发时快速预览代码修改效果
状态保留 重启后状态重置 保留页面状态(输入框、变量等)
触发方式 发布新版本后自动检测 修改代码后自动触发

六、开发工具调试

七、与manifest.json 中版本号关系

小程序热更新的检测逻辑不依赖 manifest.json 里的版本号,也和你手动改的版本号数字高低无关。

1. 热更新的核心检测依据

微信小程序的热更新(getUpdateManager)是通过微信服务器存储的「代码包标识」 来判断是否有新版本,而非你配置的版本号:

  • 你每次上传代码到微信后台,不管 manifest.json 版本号是否修改,微信都会生成一个唯一的「代码包 ID / 哈希值」;
  • 当用户打开小程序时,客户端会对比「本地缓存的代码包 ID」和「微信后台最新的代码包 ID」:
  • ✅ 若不一致 → 判定为「有新版本」,触发热更新;
  • ❌ 若一致 → 判定为「无新版本」,不触发。
2. 关于 manifest.json 版本号的作用

manifest.json 里的 versionName(如 1.1.0)只是你手动维护的标识,作用是:

  • 方便你在后台「版本管理」里识别不同版本(比如标注 1.1.0 是 "修复提现 bug",1.1.1 是 "优化地址显示");
  • 方便在小程序内展示给用户看(比如页面上显示 "版本号:1.1.0");
  • 不参与热更新的检测逻辑 ------ 哪怕你上传代码时不改 manifest.json 版本号(仍写 1.0.0),只要代码内容变了,微信后台会生成新的代码包 ID,用户侧仍会检测到更新。
3. 正确的操作流程(以你的场景为例)
步骤 操作 说明
1 本地修改代码 比如修复 bug、加功能
2 (可选)改 manifest.json 版本号 从 1.0.0 改为 1.1.0(仅为标识,非必需)
3 上传代码到微信后台 生成新的代码包 ID
4 提交审核 → 发布正式版 微信后台将这个新代码包标记为 "最新正式版"
5 用户打开旧版本小程序 客户端检测到本地代码包 ID ≠ 后台最新 ID → 触发热更新
相关推荐
深邃的眼1 小时前
微信小程序从 0-1:从本地开发到部署服务器上线整体流程保姆式教学
阿里云·微信小程序·个人开发
一叶星殇1 小时前
高颜值微信小程序 UI 组件库大盘点,助你轻松开发!
微信小程序·小程序
计算机专业码农一枚1 小时前
微信小程序 uniapp+vue高校社团管理
vue.js·微信小程序·uni-app
Raytheon_code1 小时前
从零到一:我用微信小程序做了一款串珠DIY定制工具
css·微信小程序·html5·ai编程
晴天sir1 小时前
微信小程序订阅消息推送实战(Java Spring Boot + Redis)
小程序
yzx9910131 小时前
从零开始写一个微信小程序:完整代码实战指南(入门篇)
微信小程序·小程序·notepad++
Можно1 小时前
微信小程序获取用户信息完整流程
微信小程序·小程序
QQ2422199791 小时前
基于python+微信小程序的家教管理系统_mh3j9
开发语言·python·微信小程序
计算机程序定制辅导1 小时前
计算机小程序毕设实战-基于Spring Boot与微信小程序的考研资源共享平台设计与实现基于springboot+微信小程序的考研复习辅助平台【完整源码+LW+部署说明+演示视频,全bao一条龙等】
spring boot·微信小程序·小程序·课程设计