uniapp开发实现 app热更新

最新推荐文章于 2025-06-11 16:28:28 发布

姑老爷呀

最新推荐文章于 2025-06-11 16:28:28 发布

阅读量3.2k

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/pfourfire/article/details/127557440

本文介绍了uni-app的热更新实现过程，包括检测版本、获取更新资源、用户下载更新包等步骤，并提供了相关代码示例，建议将代码封装成组件。同时提到了打包更新包的方法及注意事项，如更改版本号和版本名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

啊~时隔多月终于闲下来了。最近整理了下资料发现热更新在app开发是经常见的，基本必备而且确实很方便，所以就总结了点东西给大家看看，有问题可以一起讨论

一、实现热更新需要那些东西

需要服务器存放更新包资源，后端提供接口用于检测当前版本是否为最新版本。（增删改查）热更新的流程其实很简单，如下图所示

graph LR
A(用户进入应用) --> C{检测是否有更新}
C --> D(需要更新)
D --> E(请求资源更新包)
E --> F(下载安装)
F --> I(下载完成重启)
F --> J(取消下载)
C -->H(不需要更新)
H-->G(正常运行)
I --> G
J --> G

二、具体流程代码

1.获取当前应用app版本

// 保存 app 版本信息
// #ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo)=> {// console.log('widgetInfo', widgetInfo);this.version = widgetInfo.version;
});
// #endif

2.获取服务器上更新包的资源（包含下载链接，更新包版本），比较当前版本是否为最新版本，不是则弹出提示更新最新版本

checkWgtFun() {//loginApi.getPatchManage() 获取更新包接口loginApi.getPatchManage().then(res=> {console.log('检查更新包', res);if(res.code == 200) {let result = res.data.versionNum // 更新包版本if(this.version.substr(0, 3) * 1 >= result.substr(0, 3) * 1){this.$toast('当前为最新版本');return} if(this.version.replace(/\./g, "") * 1 >= result.replace(/\./g, "") * 1){this.$toast('当前为最新版本');return}uni.showModal({title: '提示',content: '发现有新版本可以升级',cancelText: '取消更新',confirmText: '立即更新',success: res1 => {if (res1.confirm) {console.log('用户点击确定');// 补丁下载安装// this.versionNum=res.data.versionNumthis.downWgt(res.data.patchUrl)} else if (res1.cancel) {console.log('用户点击取消');}},fail: