yicangzongtai_app_240321/pages/index/update.vue

<template>
	<view>
		<navbar ref="hxnb" :config="navConfig" backColor="#666"></navbar>

		<view class="flex-column">
			<view class="content">
				<image class="logo" src="@/static/logo-icon.png" />
				<view class="mainInfo">
					<text class="title">{{ info }} | {{ Minfo }}</text>
					<text class="tip">\n{{ Mtip }}</text>
				</view>
				<text class="line" />
			</view>
			<view>
				<view class="infoContentTitle">
					<!-- <image class="infoPic" src="../../static/info-circle.png" /> -->
					<text class="infoTitle">更新摘要</text>
				</view>
				<view class="infoContent">
					<text class="updateInfo">{{ updateInfo }}</text>
				</view>
			</view>
			<view v-if="!currentIsLatest">
				<view class="infoContentTitle">
					<!-- <image class="infoPic" src="../../static/sync.png" /> -->
					<text class="infoTitle">更新大小</text>
				</view>
				<view class="infoContent">
					<text class="updateInfo">{{ packgeSize }}</text>
				</view>
			</view>
			<view class="minorContent bottom_aera">
				<view v-if="startProgress && !currentIsLatest" class="smallTitle">
					<text>下载进度:{{ downloadProgress }}%</text>
					<progress :percent="downloadProgress" stroke-width="4" />
				</view>
				<button class="btn" v-if="!startProgress && !currentIsLatest" type="primary" @click="handleUpdate()">立即更新</button>
				<button class="btn" v-if="currentIsLatest" :loading="buttonLoading" type="primary" @click="getLatest()">检查更新</button>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	components: {},
	data() {
		return {
			navConfig: {
				back:true,
				title: '检查更新',
				color: '#1a1a1a',
				statusBarFontColor: '#000000',
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, '#FFFFFF']
			},
			info: '正在加载', // 主标题显示版本号
			Minfo: 'release', // 副标题显示版本类型
			Mtip: '', // 小提示标语
			updateInfo: '无', // 更新摘要

			verInfo: null, // 版本信息
			packgeSize: null, // 更新包大小
			packgePath: null, // 更新包的文件地址
			downloadTask: null, // 下载任务
			downloadProgress: 0, // 下载进度

			buttonLoading: false, // 加载 - 标记
			installed: false, // 是否执行了安装 - 标记
			startProgress: false, // 下载进行 - 标记
			currentIsLatest: true, // 当前版本就是最新版本 - 标记
			version: null
		};
	},
	onLoad() {
		 
		const updated = uni.getStorageSync('updated');
		if (updated.packgePath) {
			this.packgePath = updated.packgePath;
		}

		plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
			this.version = wgtinfo.versionCode;
			this.getLatest();
		});
	},
	// 如果用户下载后没有完成安装，却回到app，则执行这里
	onShow() {
		if (this.installed === true && this.packgePath) {
			this.installed = false;
			this.haveDownloaded();
		}
	},
	// 用户关闭页面时检查是否存在下载任务
	onUnload() {
		if (this.downloadTask) {
			this.closeTask();
			this.showToast('更新被取消');
		}
	},
	// 下拉刷新更新
	onPullDownRefresh() {
		this.getLatest();
		uni.stopPullDownRefresh();
	},
	methods: {
		// 封装个Toast方便用
		showToast(text) {
			uni.showToast({
				title: text,
				duration: 3000,
				icon: 'none'
			});
		},
		installPackge() {
			// 安装更新
			plus.runtime.install(this.packgePath, {
				force: true
			});
			this.installed = true;
			// 保存更新记录到stroage，方便下次启动app时删除安装包
			uni.setStorage({
				key: 'updated',
				data: {
					completed: true,
					packgePath: this.packgePath
				},
				success: res => {
				
					console.log('成功保存更新记录');
					// console.log(res.data)
				}
			});
			// 判断是否为热更新（判断文件名中是否含有.wgt）
			console.log(8888888888888888888888 + this.packgePath);
			if (this.packgePath.match(RegExp(/.wgt/))) {
				console.log("9999999999999")
				this.installed = false;
				uni.showModal({
					title: '提示',
					content: '应用将重启以完成更新',
					showCancel: false,
					complete: () => {
						plus.runtime.restart();
					}
				});
			}
		},
		// 已经下载了更新包但是没有安装
		haveDownloaded() {
			uni.showModal({
				title: '更新尚未完成',
				content: '您已下载更新包，但是还没有完成安装，请问是否要继续安装更新包呢？',
				success: res => {
				
					if (res.confirm) {
						// 安装
						this.installPackge();
					} else if (res.cancel) {
						this.showToast('更新被取消');
					}
				}
			});
		},
		// 取得最新版本及其所有信息
		async getLatest() {
			console.log("gengxinyemian")
			this.info = '正在加载'; // 主标题显示版本号
			this.Minfo = '未知'; // 副标题显示版本类型
			this.updateInfo = '无'; // 更新摘要
			this.buttonLoading = true;
			this.verInfo = null;
			let res = await this.$http.get('/app/config/info');

			if (res.code == 200) {
				this.buttonLoading = false;
				console.log("gengxinxixi"+JSON.stringify(res.data))
				this.info = res.data.name;
				this.Minfo = res.data.ver;

				this.updateInfo = res.data.info;
				this.packgeSize = res.data.packge_size + 'MB';
				this.verInfo = res.data;
				
				if (this.verInfo) {
					this.checkLatest(this.verInfo);
				}
			}
		},
		// 检查版本
		checkLatest(verInfo) {
			console.log(222222222222222222222222222);
			console.log(JSON.stringify(verInfo.ver) + this.version);
			if (!verInfo.ver) {
				this.Mtip = '未找到发行版本';
			} else if (this.version < verInfo.number) {
				// 当前版本与新版本不符（$current在main.js里）
				this.currentIsLatest = false;
				this.Mtip = '发现新版本';
			} else {
				this.showToast('当前是最新版了');
				this.currentIsLatest = true;
				this.Mtip = '当前是最新版';
			}
		},

		// 关闭下载任务
		closeTask() {
			this.downloadTask.abort();
			this.downloadTask = null;
			this.startProgress = false;
		},
		// 开始下载任务
		createTask(downloadLink) {
			 console.log("下载链接"+downloadLink)
				this.downloadProgress = 0;
				this.startProgress = true;
				// 创建下载任务对象
				this.downloadTask = uni.downloadFile({
					url: downloadLink,
					success: res => {
						
						if (res.statusCode === 200) {
							// 保存下载的安装包
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: res => {
									this.packgePath = res.savedFilePath;
									// 进行安装
									this.installPackge();
									// 任务完成，关闭下载任务
									this.closeTask();
								}
							});
						}
					}
				});
			 
				this.downloadTask.onProgressUpdate(res => {
					this.downloadProgress = res.progress;
					console.log(res.progress)
				});
			 
		},
		handleUpdate() {
			// 判断系统类型
			if (plus.os.name.toLowerCase() === 'android') {
				if (this.verInfo.android_link && this.verInfo.android_link !== '#') {
					
					this.createTask(this.verInfo.android_link);
				} else {
					this.showToast('未找到下载地址');
				}
			} else {
				if (this.verInfo.ios_link && this.verInfo.ios_link !== '#') {
					// 我这里默认#也是没有地址，请根据业务自行修改
					// 苹果(A)：进行热更新（如果iosUrl是wgt更新包的下载地址）判断文件名中是否含有.wgt
					if (this.verInfo.ios_link.match(RegExp(/.wgt/))) {
						this.createTask(this.verInfo.ios_link);
					} else {
						// 苹果(B)：打开商店链接（如果iosUrl是苹果商店的地址）
						plus.runtime.openURL(this.verInfo.ios_link);
					}
				} else {
					this.showToast('未找到ios商店地址');
				}
			}
		}
	}
};
</script>

<style lang="scss">
.btn {
	background:#053520 !important;
}
.flex-column {
	display: flex;
	flex-direction: column;
}

.content {
	text-align: center;
	padding: 20upx;
	background-color: #efeff4;
}

.minorContent {
	width: 650upx;
	padding: 0 50upx;
}

.process {
	margin-top: 200upx;
	margin-left: 30%;
}

.logo {
	margin: 0 auto;
	height: 216upx;
	width: 216upx;
}

.title {
	font-size: 36upx;
	color: #373737;
	font-weight: bold;
}

.infoTitle {
	font-size: 32upx;
	color: #373737;
	padding-left: 15upx;
	font-weight: bold;
}

.tip {
	font-size: 28upx;
	color: #7e7e83;
	vertical-align: text-top;
}

.bottom_aera {
	position: absolute;
	bottom: 0;
	height: 12%;
}

.line {
	/* padding: 0 600upx; */
	display: inline-block;
	border-bottom: 2upx solid #d8d8d8;
	width: 100%;
}

.infoPic {
	height: 50upx;
	width: 50upx;
}

.infoContentTitle {
	display: flex;
	align-items: center;
	padding: 40upx 40upx;
}

.infoContent {
	display: flex;
	align-items: center;
}

.updateInfo {
	font-size: 28upx;
	color: #7e7e83;
	padding: 0 80upx;
}

.smallTitle {
	font-size: 26upx;
	font-weight: 500;
	padding: 20upx 0;
	line-height: 1.5;
	color: #888;
}
</style>