UniApp开发的APP如何实现热更新? 这套前后端方案请收好(附所有源码)

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 ——

本文由 #小凯爱编程作者原创分享，转载请注明出处

获取源码方式请翻阅评论区

今日封面

下期预告

任务平台脚本 OR 自动化脚本开发教程 OR 壁纸平台 OR 小凯自己开发的有意思的小程序 OR 资源导航更新