uni-app实现app展示进度条在线更新以及定时更新提醒

需求：需要在app启动后进行检查更新，如果有更新就提示更新，可以点击确定更新或者暂时不更新，如果不更新，就将当前的时间进行缓存，并且再次进入时进行对比，只要超过一天时间就继续提醒检查更新

第一步获取缓存时间，如果有就获取当前时间进行对比

	const saveDtime = uni.getStorageSync('saveVersionDay')
		//判断当前的时间大于检查更新时间
		if (saveDtime) {
			const currentDay = dateCurrentDayTime()
			if (Number(currentDay) > Number(saveDtime)) this.updatevVersion()
		} else {
			this.updatevVersion()
		}

1. 假设当有缓存时间就去检查更新，就执行updatevVersion操作
2. 确认有更新就可以点击更新或者稍后更新

//检查版本

	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>