需求:需要在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.version
console.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 = true
const 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 = false
utils.showToast('更新成功,重启中');
plus.runtime.restart();
}
);
// 这里你可以将文件保存到本地或者进行其他处理
this.downloadMessage = `下载成功,文件路径:${tempFilePath}`;
} else {
this.popupShow = false
uni.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>