--- theme: channing-cyan --- 啊~时隔多月终于闲下来了。最近整理了下资料发现热更新在app开发是经常见的，基本必备而且确实很方便，所以就总结了点东西给大家看看，有问题可以一起讨论 ## 一、实现热更新需要那些东西需要服务器存放更新包资源，后端提供接口用于检测当前版本是否为最新版本。（增删改查）热更新的流程其实很简单，如下图所示 ```mermaid graph LR A(用户进入应用) --> C{检测是否有更新} C --> D(需要更新) D --> E(请求资源更新包) E --> F(下载安装) F --> I(下载完成重启) F --> J(取消下载) C -->H(不需要更新) H-->G(正常运行) I --> G J --> G ``` ## 二、具体流程代码 ### 1.获取当前应用app版本 ```javascript // 保存 app 版本信息 // #ifdef APP-PLUS plus.runtime.getProperty(plus.runtime.appid, (widgetInfo)=> { // console.log('widgetInfo', widgetInfo); this.version = widgetInfo.version; }); // #endif ``` ### 2.获取服务器上更新包的资源（包含下载链接，更新包版本），比较当前版本是否为最新版本，不是则弹出提示更新最新版本 ```javascript 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.versionNum this.downWgt(res.data.patchUrl) } else if (res1.cancel) { console.log('用户点击取消'); } }, fail: (err) => { console.log('下载失败', err); } }); } else { this.$toast(res.msg); } }) }, ``` ### 3.用户选择更新版本下载更新包 ```javascript // 下载补丁 // patchUrl 更新包下载路径 downWgt(patchUrl) { let _this=this this.downloadTask = uni.downloadFile({ url:patchUrl, success: (downloadResult) => { if (downloadResult.statusCode === 200) { // 安装应用 plus.runtime.install( downloadResult.tempFilePath, {force: false}, ()=> { plus.nativeUI.toast('最新版本下载完成') // 安装成功之后关闭应用重启app plus.runtime.restart(); }, (e)=> { plus.nativeUI.toast("补丁安装失败")// 常见问题：版本号，appId }); } }, fail: (err) => { plus.nativeUI.toast("补丁下载失败") } }) }, // 用户取消更新，中断下载 cancel() { if(this.downloadTask) { this.$toast('取消下载安装!') this.downloadTask.abort() this.downloadTask = null } }, ``` #### 到此就完成了热更新的功能，看着不难吧，最后贴出我写的完整的代码，最好封装成一个组件 ```javascript ``` **filters.js文件** ```javascript function sizeMB(size){ if(size<1024){ return size+'B'; }else if(size/1024>=1 && size/1024/1024<1){ return Math.floor(size/1024*100)/100+'KB'; }else if(size/1024/1024>=1){ return Math.floor(size/1024/1024*100)/100+'MB'; } } export default { sizeMB } ``` 最后在附上如何打包更新包，这个也简单，跟打包安装包一样 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a7af057bda44d2795614491a050e40b~tplv-k3u1fbpfcp-zoom-1.image) 选择制作wgt包，然后点击生成就可以了，然后就等待打包，更新包一般比安装包快且没有次数限制 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1b2d18e93ea4385bc0115dcb5b0205c~tplv-k3u1fbpfcp-zoom-1.image) 还有值得注意的是记得每次打包记得更改版本号跟版本名称这两个地方哦 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/438262838a1144b984030bac21182ed5~tplv-k3u1fbpfcp-zoom-1.image) 有缘下次见！！！！