uniApp实现热更新
热更新
热更新是开发中常见且常用的一种软件版本控制的方式,在uniapp进行使用热更新将软件实现更新操作
思路:
- 服务器中存储着最新版本号,前端进行查询
- 可以在首次进入应用时进行请求版本号进行一个匹对
- 如果版本号一致则不提示,反之则提示进行更新执行更新操作
实现
采用方法封装进行使用~
1.封装一个对比版本号的函数
/*** 对比版本号,如需要,请自行修改判断规则* 支持比对 ("3.0.0.0.0.1.0.1", "3.0.0.0.0.1") ("3.0.0.1", "3.0") ("3.1.1", "3.1.1.1") 之类的* @param {Object} v1* @param {Object} v2* v1 > v2 return 1* v1 < v2 return -1* v1 == v2 return 0*/
function compare(v1 = '0', v2 = '0') {v1 = String(v1).split('.')v2 = String(v2).split('.')const minVersionLens = Math.min(v1.length, v2.length);let result = 0;for (let i = 0; i < minVersionLens; i++) {const curV1 = Number(v1[i])const curV2 = Number(v2[i])if (curV1 > curV2) {result = 1break;} else if (curV1 < curV2) {result = -1break;}}if (result === 0 && (v1.length !== v2.length)) {const v1BiggerThenv2 = v1.length > v2.length;const maxLensVersion = v1BiggerThenv2 ? v1 : v2;for (let i = minVersionLens; i < maxLensVersion.length; i++) {const curVersion = Number(maxLensVersion[i])if (curVersion > 0) {v1BiggerThenv2 ? result = 1 : result = -1break;}}}return result;
}
- 封装更新函数
通过
downloadTask.onProgressUpdate
进行监听,再通过plus.nativeUI.showWaiting("正在下载 - 0%");
进行加载显示下载进度…
var updateUseModal = (packageInfo) => {const {title, // 标题contents, // 升级内容is_mandatory, // 是否强制更新url, // 安装包下载地址platform, // 安装包平台type // 安装包类型} = packageInfo;let isWGT = type === 'wgt'let isiOS = !isWGT ? platform.includes('iOS') : false;let confirmText = isiOS ? '立即跳转更新' : '立即下载更新'return uni.showModal({title,content: contents,showCancel: !is_mandatory,confirmText,success: res => {if (res.cancel) return;// 安装包下载if (isiOS) {plus.runtime.openURL(url);return;}let waiting = plus.nativeUI.showWaiting("正在下载 - 0%"); // uni.showLoading({// title: '安装包下载中'// });// wgt 和 安卓下载更新const downloadTask = uni.downloadFile({url,success: res => {if (res.statusCode !== 200) {console.error('下载安装包失败', err);return;}// 下载好直接安装,下次启动生效plus.runtime.install(res.tempFilePath, {force: false}, () => {uni.hideLoading()if (is_mandatory) {//更新完重启appplus.runtime.restart();return;}uni.showModal({title: '安装成功是否重启?',success: res => {if (res.confirm) {//更新完重启appplus.runtime.restart();}}});}, err => {uni.hideLoading()uni.showModal({title: '更新失败',content: err.message,showCancel: false});});},//接口调用结束complete: ()=>{uni.hideLoading();downloadTask.offProgressUpdate();//取消监听加载进度}});//监听下载进度downloadTask.onProgressUpdate(res => {// state.percent = res.progress;waiting.setTitle("正在下载 - "+res.progress+"%");// console.log('下载进度百分比:' + res.progress); // 下载进度百分比// console.log('已经下载的数据长度:' + res.totalBytesWritten); // 已经下载的数据长度,单位 Bytes// console.log('预期需要下载的数据总长度:' + res.totalBytesExpectedToWrite); // 预期需要下载的数据总长度,单位 Bytes});}});
}
- 用变量接收实现函数(在函数中使用上方封装的函数)并导出
fRequestWithToken为我封装的请求方法,可自行进行使用axios进行请求也行!!!
var fCheckVersion = (cb) => {// #ifdef APP-PLUSplus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {// console.log(widgetInfo.version)// console.log(plus.runtime.version)// console.log(widgetInfo.version)var nVerSta = compare(plus.runtime.version, widgetInfo.version),sLaststVer = plus.runtime.version;if (widgetInfo.version) {if (nVerSta == 1) {console.log(plus.runtime.version)sLaststVer = plus.runtime.version} else if (nVerSta == -1) {console.log(widgetInfo.version)sLaststVer = widgetInfo.version}}console.log(sLaststVer)//发送请求进行匹对,我这里数据库设定的是如果返回null则版本号一致,反之需要更新!!!fRequestWithToken({ajaxOpts: {url: URLS_COM.d_lastVer,data: {versionCode: sLaststVer}},showloading: false,silence:true}).then(data => {console.log(data)// console.log('################')if (data) {var sUrl = '',type = '';if (data.wgtName) {sUrl = data.wgtName;type = "wgt"} else {sUrl = data.pkgName;type = "pkg";}updateUseModal({title: data.title||"",contents: data.note||'',is_mandatory: true,url: sUrl,platform: 'android',type: type // 安装包类型})}}).catch((res)=>{cb&&cb()console.log(res)})})// #endif
}export {fCheckVersion
}
以上代码即可实现热更新的操作
使用
可在App.vue中进行使用,根据项目需求而定
1.引入封装好的函数
路径自己记得填写自己封装的位置
import{fCheckVersion} from '@/common/project/checkversion.js'
2.然后可以在onLoad函数中进行触发
onLoad() {fCheckVersion();//检查更新
}
这样就实现了热更新
然后的话只需要进行打包个热更新的包
后端进行上传至服务器进行更新数据
本地再进行一个云打包,记得在mainifest.json文件中进行版本号的修改,修改成低于热更新包的版本号即可
这样就ok了,实用✌!(别盗我文章
uniApp实现热更新相关推荐
- uni-app 实现热更新 (服务端为php)
热更新就是打开App时遇到的即时更新,可以免重新下载安装来更新我们app上的内容 下面直接贴 uni-app 热更新步骤~ 1:在HBuilder 打包热更需要用到的 wgt 包文件 wgt包上传到你 ...
- uniapp 实现热更新(安卓和ios)
经常在做app的时候,会有做热更新的需求,这也是常用的更新app的一种手段. 当你每次发版不想更新整个app安装包时,可以采用差量更新.在HBuilderx中提供了这个wgt包, 将打出来的包给后端放 ...
- uni-app整包更新与热更新方案(安卓和IOS)
原文链接:uni-app整包更新与热更新方案(安卓和IOS) 效果预览 大致效果: 打开App,进入首页(首次),检测线上是否存在新版本,如果存在,弹窗提示用户是否进行版本更新.Android 有热更 ...
- uniapp 热更新和整包更新
uniapp 热更新和整包更新 版本校验接口返回 自动更新 自动下载APK并安装 弹出下载APK手动安装 参考资料 版本校验接口返回 https://192.168.1.113/public/mobi ...
- uniapp热更新(wgt)
uniapp分两种更新机制: 一.整包更新(这种方式比较繁琐,即每次更新之后就要打云包,更新整包,用户体验也不好) 二.资源包更新,即wgt(因第一种方法想到利用资源更新,用户体验大大提升,用户更新之 ...
- uniapp中App升级和wgt热更新的逻辑处理
uniapp中App升级和wgt热更新的逻辑处理 文章目录 uniapp中App升级和wgt热更新的逻辑处理 一.前言 二.代码示例 三.参考链接 一.前言 在使用uniapp开发中常常遇到APP升级 ...
- uniapp热更新报错安装失败[-1201]:WGT/WGTU文件格式错误?
记录一下折磨了两天的uniapp热更新报错安装失败[-1201]:WGT/WGTU文件格式错误 1.报错原因是因为下载路径/下载文件错了,我的服务器上映射的下载地址访问后打开一个网页(图1),需要进去 ...
- 关于uni-app的资源热更新!!!
先看官方文档,对uni-app 的资源热更新有一个大致的了解: 整包升级 在线资源热更新 app方法 本文主要讲述,实现资源热更新时客户端需要进行的操作: 可以在***app.vue***的***on ...
- 跨平台应用开发进阶(三): uni-app 实现资源在线升级/热更新
文章目录 一.前言 1.1 Android升级检测机制 二.wgt 资源升级包升级 2.1 修改版本号 2.2 发行 2.3 安装资源升级包 2.3.1 代码示例 2.3.2 小结 三.整包升级 3. ...
最新文章
- 5界面怎么做窗帘拉动的效果_布艺窗帘款式有哪些?附2020年最新窗帘款式图!...
- 子弹短信新发布,支付宝即将入驻
- Spring MVC学习路(三) 编写第一个demo
- linux上git克隆命令,Git clone命令用法
- Windows上快速在指定目录打开cmd.exe命令行的方法
- DriverMessageBean配置详解
- OpenGL环境配置(超全整合版)
- solr4.2增量索引之同步(修改,删除,新增)
- McCabe度量方法计算程序复杂度
- Linux文件打包压缩详解
- echart柱状图和折线图混合
- C#实现百度翻译功能
- signature=2a6f113e0dca986b5f4efd92dac9c1cb,android so 文件存私密数据,且防止 so文件未知应用盗用...
- 影片推荐:《机械姬》
- python在园林中的应用_攀缘植物在园林中的应用
- 2019年新年书单 |不可错过的区块链好书 请查收
- H5移动端前置摄像头成像方向错误,横屏方向错误
- 易查分显示教师编号不正确
- 强化学习keras-rl2的安装注意点
- 名人效应(空间优化)