夜雨聆风UniApp开发的APP如何实现热更新？这套前后端方案请收好
—— 内含完整 Spring Boot 后端 + uniapp（vue3） 管理端 、 客户端代码
做 UniApp 开发的兄弟们，应该都遇到过这个场景：
线上 APP 发现一个 bug，或者想加个小功能，结果——
提交应用商店审核，等 3 天、7 天……用户还要手动点更新。
等审核通过，用户更新完，黄花菜都凉了。
💡 痛点谁都有：① 应用商店审核周期长，紧急 bug 修复来不及② 用户不主动更新，旧版本泛滥，兼容成本飙升③ 整包 APK 更新包大、流量贵、用户抵触
热更新就是解决这个问题的标准答案。
今天分享一套我自己整理完善的 uHotupdate 热更新方案，包含：
🔧 Spring Boot 3 后端（Java 21，接口 + 文件服务） 🖥️ Vue3 管理端（UniApp 编写，发布/管理更新版本） 📱 客户端 SDK（UniApp 集成，检查更新 + 下载安装） 🗄️ 数据库脚本（MySQL，含初始化数据）
一、方案架构：一次说清楚
整个热更新流程分三条线：
① 管理员发布新版本
在管理端填写版本号、上传 WGT/APK 文件、选择更新类型和模式，提交到后端保存。
② 客户端检查更新
APP 启动时（或用户手动点击），调用后端 /app/update/checkVersion 接口，传入当前版本号和设备 ID。
③ 发现新版本，自动下载安装
根据更新模式（静默/提示/强制），客户端自动下载更新包，调用 plus.runtime.install() 安装并重启。
核心设计思路：
- WGT 局部热更新
只更新前端资源，无需重新安装，适合小版本迭代 - APK 全量更新
整包替换，适合大版本或底层变更 - 三种更新模式
静默 / 提示 / 强制，灵活应对不同场景 - 版本号智能比较
自动判断是否需要更新，防止重复提示
二、后端实现：Spring Boot 3 + Java 21
2.1 版本检查接口（核心）
客户端每次打开 APP，调用这个接口检查是否有新版本：
// AppUpdateController.java@GetMapping("/checkVersion")public Result checkVersion(@RequestParam("appVersion") String appVersion,@RequestParam("deviceId") String deviceId) {// 1. 查询最新版本（优先 APK，其次 WGT）AppUpdate latest = appUpdateService.getLatestUpdate();// 2. 版本号比较：去掉小数点转数字后比较if (isNewVersion(appVersion, latest.getVersion())) {// 3. 记录设备信息到 app_device 表deviceService.saveOrUpdate(deviceId, ...);return Result.ok(latest);}return Result.ok(null); // 无需更新}
版本号比较的核心逻辑——把 "1.0.3" 转成 103，再比较大小：
// 版本号比较：去掉小数点，转成数字比较private boolean isNewVersion(String current, String latest) {String c = current.replace(".", "");String l = latest.replace(".", "");try {return Integer.parseInt(l) > Integer.parseInt(c);} catch (Exception e) {return false;}}
⚠️ 注意：这种比较方式要求版本号每段不超过 9（如 1.9.9 ✅，1.10.0 ⚠️）。生产环境建议用标准语义化版本比较库。
2.2 文件下载接口
客户端拿到更新信息后，通过这个接口下载更新包：
// 支持断点续传@GetMapping("/download")public void download(@RequestParam("id") Long id,HttpServletRequest request,HttpServletResponse response) {AppUpdate update = appUpdateService.getById(id);String fileName = update.getId() +(update.getUpdateType() == 0 ? ".apk" : ".wgt");String filePath = projectFolder + "/appUpdate/" + fileName;// 断点续传支持String range = request.getHeader("Range");if (range != null) {// 解析 Range 头，返回 206 Partial Content...}// 正常下载，返回 200...}
2.3 版本保存接口（管理端调用）
管理端上传 WGT/APK 文件，后端保存文件并记录版本信息：
// 保存前校验：版本号必须递增public boolean saveUpdate(AppUpdate entity, MultipartFile file) {// 校验版本号是否递增AppUpdate maxVersion = baseMapper.selectMaxVersion();if (maxVersion != null) {if (!isVersionIncrease(maxVersion.getVersion(),entity.getVersion())) {throw new RuntimeException("版本号必须递增！");}}// 保存文件到运行目录下的 uHotupdateFile/appUpdate/if (file != null) {String destFileName = entity.getId() + "." + ...;File dest = new File(projectFolder + "/appUpdate/", destFileName);file.transferTo(dest);}return saveOrUpdate(entity);}
三、管理端：Vue3 + UniApp
管理端用 UniApp Vue3 编写，可以编译成 H5 部署，也可以打包成 APP 使用。
3.1 版本列表页
展示所有已发布的版本，支持按版本号、更新类型、状态筛选：
<!-- UpdateList.vue 核心片段 --><viewclass="update-card"v-for="(item, i) in list":key="i"><viewclass="card-header"><text>V{{ item.version }}</text><span:class="item.updateType === 0 ? 'tag-apk' : 'tag-wgt'">{{ item.updateType === 0 ? 'APK全量' : 'WGT热更' }}</span></view><viewclass="card-body"><viewv-for="(desc, j) in item.updateDescArray":key="j">{{ j+1 }}. {{ desc }}</view></view></view>
3.2 发布版本弹窗
支持上传文件、选择更新类型（APK/WGT）、选择更新模式（静默/提示/强制）、填写多条更新内容：
// UpdateEdit.vue - 提交表单const submitForm = async () => {const fd = new FormData();fd.append('version', formData.version);fd.append('updateType', formData.updateType);fd.append('updateMode', formData.updateMode);fd.append('updateDesc',formData.updateDescList.map(it => it.title).join('|'));if (formData.file) {fd.append('file', formData.file);}// H5 端用 XMLHttpRequest 发送，避免 uni.request 对 FormData 处理异常const xhr = new XMLHttpRequest();xhr.open('POST', Api.domain + Api.saveUpdate, true);xhr.setRequestHeader('token', uni.getStorageSync('adminToken'));xhr.send(fd);};
四、客户端 SDK 集成
客户端集成是整套方案最核心的部分，分两个文件：
4.1 检查更新（index.vue）
// pages/index/index.vueasync onCheckUpdate() {const result = await Request({url: Api.checkUpdate,method: 'GET',params: {appVersion: this.appVersion, // 当前版本号，从 manifest.json 读取deviceId: this.deviceId // 设备唯一 ID}});if (result && result.data) {// 发现新版本，展示更新弹窗this.updateInfo = result.data;this.$refs.updateRef.show();}}
4.2 下载并安装（update.js）
这是最核心的函数，处理 WGT 和 APK 两种更新方式：
// utils/update.jsexport function downloadAndInstallApp(updateInfo, onProgress) {const downloadUrl = Api.domain + '/app/update/download?id=' + updateInfo.id;const downloadTask = uni.downloadFile({url: downloadUrl,success: (res) => {if (updateInfo.updateType === 1) {// WGT 热更新：安装 wgt 包，自动重启plus.runtime.install(res.tempFilePath, { force: true },() => {plus.runtime.restart();});} else {// APK 全量更新：引导用户安装 APK 文件plus.runtime.install(res.tempFilePath);}}});// 监听下载进度downloadTask.onProgressUpdate((res) => {if (typeof onProgress === 'function') {onProgress(res.progress);}});}
4.3 更新弹窗组件（Update.vue）
根据更新模式展示不同的交互：
- 静默模式：
后台自动下载，下次启动时生效 - 提示模式：
弹窗让用户选择"立即更新"或"稍后再说" - 强制模式：
不更新无法使用 APP，每次打开都弹窗
五、快速上手
Step 1：启动后端
# 1. 创建数据库mysql -u root -p < init.sql# 2. 修改 application.properties 中的数据库配置spring.datasource.url=jdbc:mysql://localhost:3306/u_hotupdate?...spring.datasource.password=你的密码# 3. 启动（端口 8080）mvn spring-boot:run# 或打成 jar 包运行java -jar uHotupdate-java.jar
Step 2：配置客户端
在 uHotupdate-client/utils/Api.js 中修改后端地址：
// utils/Api.jsexport const domain = 'http://你的服务器IP:8080';export const checkUpdate = '/app/update/checkVersion';export const downloadUpdate = '/app/update/download';
Step 3：打包 WGT 更新包
📦 如何生成 WGT 包：在 HBuilderX 中，右键项目 → 发行 → 原生App-制作应用wgt包生成的 .wgt 文件就可以上传到管理端发布！
Step 4：管理端发布版本
访问管理端 H5 页面，登录后点击"发布版本"，填写信息并上传 WGT/APK 文件，提交即可。
✅ 完成！现在客户端打开 APP 就会自动检查更新，发现新版本会按设定模式提示用户更新。
六、关键细节与坑点总结
⚠️ 这几个坑，我替你踩过了：1.WGT 安装后必须重启：调用plus.runtime.install()成功后，务必调用plus.runtime.restart()2.版本号格式要统一：manifest.json 中的版本号要和后端记录的格式一致3.APK 更新需要权限：Android 8+ 需要REQUEST_INSTALL_PACKAGES权限4.iOS 不支持 WGT 热更新：苹果审核指南禁止运行时动态加载代码，iOS 端只能走 App Store 更新5.文件上传 FormData 兼容性：H5 端用 XMLHttpRequest 发送 FormData，不要直接用 uni.request
七、总结
这套 uHotupdate 方案，我自己在多个项目里用过，核心优势是：
✅ 完整的前后端代码，拿来就能跑，不用从零造轮子 ✅ 支持 WGT + APK 两种更新方式，灵活应对不同场景 ✅ 三种更新模式（静默/提示/强制），产品侧可配置 ✅ 管理端可视化操作，运营人员也能发布版本 ✅ 基于 Spring Boot 3 + Java 21，技术栈主流，方便二次开发
当然，热更新不是银弹。iOS 端受苹果审核限制，无法使用 WGT 热更新，这是平台层面的限制，与技术方案无关。Android 端则完全没有问题。
代码我已经整理好了，有需要的朋友可以拿去用，也欢迎提 issue 和 PR ～
📌 使用前请注意：热更新功能请遵守各应用商店的相关政策，特别是 Android 应用在上架各大应用市场时，建议提前了解其对热更新技术的审核要求。
—— END ——
本文由 #小凯爱编程 作者原创分享，转载请注明出处
获取源码方式请翻阅评论区
