使用uniapp开发APP实现版本更新并安装

通过一个弹窗去实现版本更新提示

在 首页 中判断是否显示 更新提示 弹窗

弹窗组件

<template>
	<view>
		<u-overlay :show="show">
			<view class="updatetips-whole">
				<view class="updatetips">
					<view>
						<view class="updatetips-head">
							<image src="../static/images/updatetips.png"></image>
							<view class="updatetips-version">
								发现新版本</br>
								V{
   
   {versionNum}}
							</view>
						</view>
						<view class="updatetips-content">{
   
   {versionContent}}</view>
						<!-- 进度条 -->
						<u-line-progress
							v-if="isProgress"
							:percentage="30"
							activeColor="#55D88A"
							:showText="false"
							height="4"
						></u-line-progress>
					</view>
					<view class="updatetips-btn-disable" v-if="isProgress">立即更新</view>
					<view class="updatetips-btn" v-else @click="downloadBtn()">立即更新</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
export default {
	props:['show','versionNum','versionContent','downloadUrl'],
	data() {
		return {
			progress:0,
			isProgress:false
		};
	},
	methods: {
		downloadBtn(){
			this.isProgress=true
			const downloadTask = uni.downloadFile({
				url:this.downloadUrl,
				success: (res) => {
					//安装
					plus.runtime.install(
						res.tempFilePath, {
							force: true
						},
						function(_res) {
							plus.runtime.restart();
						}
					)
				},
				fail: (err)=> {
					uni.$u.toast('下载失败')
				}
			})
			// 查看下载进度
			downloadTask.onProgressUpdate((res) => {
				this.progress=res.progress
			})
		}
	}
};
</script>
<style scoped>
	.updatetips-whole{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.updatetips{
		position: relative;
		width: 80%;
		min-height: 100rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.updatetips-head{
		position: relative;
		width: 100%;
		height: 200rpx;
	}
	.updatetips-head>image{
		position: absolute;
		top: -72rpx;
		width: 100%;
		height: 280rpx;
	}
	.updatetips-version{
		position: absolute;
		top: 30rpx;
		left: 50rpx;
		color: #fff;
		font-size: 40rpx;
	}
	.updatetips-content{
		width: 80%;
		min-height: 100rpx;
		margin: 40rpx auto;
	}
	.updatetips-btn-disable{
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #E6E6E6;
	}
	.updatetips-btn{
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #55D88A;
	}
	.updatetips-btn::before{
		content: "";
		width: 85%;
		height: 1px;
		background-color: #E6E6E6;
		position: absolute;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>

在父组件中使用

onLoad() {
		// 获取版本号
		get().then(res=>{
			var versionNum = uni.getStorageSync('version')
			// 判断当前版本号和后端返回的版本号是否一致
			if(versionNum!=res.data.versionNumber){
				this.show=true
				this.versionContent=res.data.content
				this.versionNum=res.data.versionNumber
				this.downloadUrl=res.data.url
			}
		}).catch(err=>{
			
		})
	},

注：获取本地包版本号

APP.vue

onLaunch: function() {
		//获取本地版本信息
		plus.runtime.getProperty(plus.runtime.appid, (info) => {
			uni.setStorageSync('version', info.version)
		})
	},

在manifest.json中输入本次版本号