uni-app实现app展示进度条在线更新以及定时更新提醒
需求：需要在app启动后进行检查更新，如果有更新就提示更新，可以点击确定更新或者暂时不更新，如果不更新，就将当前的时间进行缓存，并且再次进入时进行对比，只要超过一天时间就继续提醒检查更新
第一步获取缓存时间，如果有就获取当前时间进行对比
const saveDtime = uni.getStorageSync('saveVersionDay')//判断当前的时间大于检查更新时间if (saveDtime) {const currentDay = dateCurrentDayTime()if (Number(currentDay) > Number(saveDtime)) this.updatevVersion()} else {this.updatevVersion()}
- 假设当有缓存时间就去检查更新，就执行updatevVersion操作
- 确认有更新就可以点击更新或者稍后更新
//检查版本
async updatevVersion() {const apkName = '*****.apk'//获取当前是否有更新let res = await queryNewVersion({fileName: apkName})const _this = this//如果有更新执行更新操作if (res.data && res.data.code == 0 && res.data.data) {let fileComment = res.data.data.fileComment//获取当前版本号const version = plus.runtime.versionconsole.log(fileComment)if (fileComment != version) {uni.showModal({title: `发现新版本`,// title: `发现${fileComment}`,content: "确认更新",confirmText: '立即更新',cancelText: '稍后进行',success: (res) => {//确认检查更新if (res.confirm == true) {//当用户确定更新，执行更新,下面方法进行下载app_this.startDownload(fileComment, apkName)} else {//暂时不更新保存缓存时间const saveTime = dateCurrentDayTime()uni.setStorageSync('saveVersionDay', saveTime);}},fail: (res) => {}})} else {uni.showToast({title: '已是最新版本',icon: 'none'})}} else {uni.showToast({title: '已是最新版本',icon: 'none'})}},
第二步确认更新就执行startDownload方法
startDownload(versons, name) {this.popupShow = trueconst dowUrl = `${uploadUrl}${this.downloadPath}?fileName=${name}&version=${versons}`//loading加载this.isDownloading = true;//设置进度条初始值this.downloadProgress = 0;this.downloadMessage = '';const url = dowUrl//进行下载操作const task = uni.downloadFile({url: url,success: (res) => {console.log(res)if (res.statusCode === 200) {// 下载成功，保存文件路径到临时路径 const tempFilePath = res.tempFilePath;// 下载完成再把下载进度弹框关闭即可plus.runtime.install( //安装res.tempFilePath, {force: true},function(res) {this.popupShow = falseutils.showToast('更新成功，重启中');plus.runtime.restart();});// 这里你可以将文件保存到本地或者进行其他处理 this.downloadMessage = `下载成功，文件路径：${tempFilePath}`;} else {this.popupShow = falseuni.showToast({title: '下载失败',icon: 'none'})this.downloadMessage = `下载失败，状态码：${res.statusCode}`;}this.isDownloading = false;},fail: (err) => {this.downloadMessage = `下载失败，错误信息：${err.message}`;this.isDownloading = false;},complete: () => {// 无论成功或失败都会执行 }});const _this = this// 监听上传进度变化task.onProgressUpdate((res) => {this.downloadProgress = res.progress;if (res.progress == 100) {//取消弹框// task.abort()}});},
4.执行startDownload后就可以进行安装了
总结：会使用如下方法
使用uni-app的loading加载组件
<u-loading :show="true"></u-loading>
使用uni-app的progress组件
使用<progress :percent="downloadProgress" v-if="isDownloading" show-info></progress>组件
使用html5+检查版本
plus.runtime.version
使用html5+安装
plus.runtime.install()
使用downloadFile下载
uni.downloadFile({url:url})
组件展示
<u-modal :show-title="false" v-model="popupShow" ref="uModal" :show-confirm-button="false"><view class="progressBox"><view class=""><u-loading :show="true"></u-loading>更新中...</view><progress :percent="downloadProgress" v-if="isDownloading" show-info></progress></view>
</u-modal>