Uniapp实现版本检测自动更新

一、先自己创建一个组件

所有逻辑都写里面了

<template>
	<!-- 版本更新提示升级 -->
	<view class="upbox" v-if="isUpdate">
		<view class="content">
			<view class="upimg">
				<image class="img" :src="baseUrl + '/static/image/login/versionbj.png'" mode="widthFix"></image>
			</view>
			<view class="versioninfo">
				<view class="title">发现新版本</view>
				<view class="info">
					<view v-for="(item, index) in updateContent" :key=""index>{{item}}</view>
				</view>
				<view class="schedule" v-if="isSchedule">	
					<progress :percent="upProgress" show-info stroke-width="15" />
				</view>
				<view class="btn">
					<button type="primary" plain="true" size="mini" @click="notUpdate()">暂不升级</button>
					<button type="primary" size="mini" @click="nowUpdate()">立即升级</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 思路 检查是否有新版本
	// 有新版本打开弹框
	// 点击立即升级查看手机是安卓还是ios
	// 是安卓则让它下载,ios则让它跳转到苹果商店应用地址下载
	import configSetting from "@/common/config.js";
	// getCheck 这个api是用来检测是否有新版本的接口
	import { getCheck } from "@/api/api.js";
	export default {
		name:"updatedVersion",
		data() {
			return {
				// 服务器图片地址
				baseUrl: configSetting.baseUrl,
				isUpdate: false,
				isSchedule: false,
				upProgress: 0,
				Version: true,
				// manifest 中应用版本名称
				appVersion: '',
				// manifest 中应用版本号
				appVersionCode: '',
				apkInfo: {},
				updateContent: []
			};
		},
		mounted() {
			// 获取本地应用资源版本号
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				this.appVersion = wgtinfo.version;
				this.appVersionCode = wgtinfo.versionCode;
				this.getVersionNumber();
			})
		},
		methods: {
			// 获取后台版本号 检查是否有新版本
			getVersionNumber() {
				let version = this.appVersionCode;
				getCheck(version).then((res)=>{
					// 如果有新版本就返回值没有就会返回null
					if(res) {
						this.apkInfo = res;
						this.updateContent = res.memo.split('\n');
						this.isUpdate = true;
					} else {
						this.isUpdate = false;
					}
				})
			},
			// 暂不升级
			notUpdate() {
				this.isUpdate = false;
				console.log('点击了不升级');
				this.$emit('getUpdate',this.isUpdate);
			},
			// 点击立即升级查看手机是安卓还是ios
			nowUpdate() {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform === 'android') {
				    this.androidUpdate();
				} else if (systemInfo.platform === 'ios') {
				    this.iosUpdate();
				}
			},
			// 安卓更新
			androidUpdate() {
				const downloadTask = uni.downloadFile({
					url: this.apkInfo.filePath, //仅为示例，并非真实的资源
					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: false
						}, () => {
							// 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',this.isUpdate);
					}
				});
			},
			// 苹果更新
			iosUpdate() {
				this.$emit('getUpdate',false);
				//appleId=>自己公司在苹果商店的appleId
				let appleId= 15******74;
				plus.runtime.launchApplication({
					action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
				}, function(e) {
					console.log('Open system default browser failed: ' + e.message);
				});
			},
		},
		
	}
</script>

<style scoped lang="scss">
.upbox {
	position: fixed;
	z-index: 99;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(153, 153, 153, 0.75);
}	
.content {
	position: relative;
	margin: 300rpx auto;
	width: 650rpx;
	.upimg {
		height: 420rpx;
		width: 100%;
		.img {
			height: 100%;
			width: 100%;
		}
	}
	.versioninfo {
		padding: 15rpx 30rpx;
		border-radius: 0 0 25rpx 25rpx;
		background-color: #fff;
	}
	.title {
		position: absolute;
		top: 150rpx;
		font-size: 48rpx;
		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>

二、在首页中引入(导入、注册、使用)

// page/index.vue
<!-- #ifdef APP-PLUS -->
	<updatedVersion/>
<!-- #endif -->
// #ifdef APP-PLUS
	import updatedVersion from "@/components/updatedVersion.vue";
// #endif
components: {
			// #ifdef APP-PLUS
			updatedVersion,
			// #endif
			selectpopup,
			areaweather
},