zy-wechat/components/appUpdata/appUpdata.vue

<template>
	<!-- 版本更新提示升级 -->
	<view class="upbox" v-if="isUpdate">
		<view class="content">
	<!-- 		<view class="upimg">
				<image class="img" src="/static/img/updata.png"></image>
			</view> -->
			<view class="versioninfo">
				<view class="title">发现新版本</view>
				<view class="schedule" v-if="isSchedule">	
					<progress :percent="upProgress" show-info stroke-width="15" />
				</view>
				<view class="btn">
					<button type="primary" size="mini" :disabled="isSchedule" @click="nowUpdate()">立即升级</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	  get,
	  post
	} from "../../http/http.js";
	export default {
		name:"appUpdata",
		data() {
			return {
				isUpdate:false,
				// 服务器图片地址
				// baseUrl: configSetting.baseUrl,
				isSchedule: false,
				upProgress: 0,
				Version: true,
				// manifest 中应用版本名称
				appVersion: '',
				// manifest 中应用版本号
				appVersionCode: '',
				apkInfo: {},
				apkUrl:'http://192.168.3.108/getapk/pdaz-v1.0.0.apk',
				updateContent: []
			};
		},
		created() {
			this.getProperty()
		},
		methods: {
			getProperty(){
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.appVersion = wgtinfo.version;
					this.appVersionCode = wgtinfo.versionCode;
					// this.getVersionNumber();
				})
			},
			// 获取后台版本号 检查是否有新版本
			getVersionNumber() {
				let version = this.appVersionCode;
				// this.isUpdate = true;
				post("/configuration/updData/workConfigHistory").then((res) => {
				    if (res.status == 200) {
				      if(res.appVersionCode > version) {
				      	this.apkInfo = res;
				      	this.isUpdate = true;
				      } else {
				      	this.isUpdate = false;
				      }
				    } else {
						uni.showToast({
							icon: "none",
							title: res.msg || "接口获取数据失败！",
						});
					}
				})	
			},
			// 暂不升级
			notUpdate() {
				this.isUpdate = false;
			},
			// 点击立即升级查看手机是安卓还是ios
			nowUpdate() {
				this.androidUpdate();
			},
			// 安卓更新
			androidUpdate() {
				// 浏览器安装
				// plus.runtime.openURL(this.apkUrl, function(res) {
				// 	console.log(res);  
				// }); 
				const downloadTask = uni.downloadFile({
					url: this.apkUrl, //apk下载链接
					success: (res) => {
						if (res.statusCode !== 200) {
							uni.showToast({
								title: '下载安装包失败',
								icon: 'error',
								duration: 2000
							});
							this.isSchedule = false;
							this.isUpdate = false;
							return;
						}
						// 异步请求
						if (res.statusCode === 200) {
							console.log('更新成功');
						// 更新好直接安装，下次启动生效
						plus.runtime.install(res.tempFilePath, {
							force: true
						}, () => {
							// uni.showModal({
							// 	title: '安装成功是否重启？',
							// 	success: res => {
							// 		if (res.confirm) {
							// 			//更新完重启app
							// 			plus.runtime.restart();
							// 		}
							// 	}
							// });				
						}, err => {
							uni.showToast({
								title: '更新失败',
								icon: 'error',
								duration: 2000
							});
						})
					 }	
					},
					fail: (err) => {
						console.log('err',err);
					},
					//接口调用结束 调用成功、失败都会执行
					complete: ()=>{
						downloadTask.offProgressUpdate();//取消监听加载进度
					}
				});
				//监听下载进度
				downloadTask.onProgressUpdate(res => {
					this.isSchedule = true;
					this.upProgress = res.progress;
					if(res.progress >= 100) {
						this.isSchedule = false;
						this.isUpdate = false;
						this.$emit('getUpdate');
					}
				});
			}
		},
		
	}
</script>

<style scoped lang="scss">
.upbox {
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(153, 153, 153, 0.75);
	display: flex;
	align-items: center;
}	
.content {
	margin: 0 5%;
	width: 90%;
	text-align: center;
	.upimg {
		height: 420rpx;
		width: 100%;
		.img {
			height: 100%;
			width: 100%;
		}
	}
	.versioninfo {
		padding: 15rpx 30rpx;
		border-radius: 25rpx;
		background-color: #fff;
	}
	.title {
		// position: absolute;
		// top: 150rpx;
		font-size: 40rpx;
		// color: #fff;
	}
	.info {
		position: relative;
		padding-left: 38rpx;
		view {
			height: 50rpx;
			line-height: 50rpx;
		}
	}
	.schedule {
		margin: 15rpx;
		/deep/.uni-progress-bar {  
		    border-radius: 30rpx;  
		}  
		/deep/.uni-progress-inner-bar {  
		    border-radius: 30rpx;  
		}
	}
	.btn {
		height: 110rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-evenly;
		button {
			width: 46%;
			height: 75rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>