uniapp获取版本号进行更新

前言

当app完成后版本进行更新的一个操作，如果不加上这个功能，每次更新会需要重新下载很麻烦。

思路

在首页的时候，获取当前版本号并请求后端拿到最新的版本号进行匹配，如果当前版本号不等于或者大于当前版本号的时候，调用方法对软件进行下载并重装。

        补充：最好是在APP.vue文件进行拦截处理

代码

在首页word.vue（我分三个代码块进行解答）

template部分

			<u-overlay :show="opp" :showConfirmButton="add">
					<view v-if="newbanben.appVersion != banben.appVersion" class="upgrade-popup">
						<image class="header-bg" src="../../static/upgrade_bg.png" ></image>
						<view class="upgrade-main">
							<view class="version">发现新版本 v{{newbanben.appVersion}}</view>
							<view class="upgrade-content">
								<text class="title">更新内容</text>
								<view class="desc" v-html="newbanben.appRemarks"></view>
							</view>
							<view class="footer">
								<view class="btn close" @click="close">以后再说</view>
								<view class="btn upgrade" @click="handleUpgrade">立即更新</view>
							</view>
						</view>
					</view>
			</u-overlay>

js部分

<script>
	import request, {
		host
	} from '@/common/request'

	export default {
		components: {

		},
		data() {
			return {
				banben: '',
				newbanben: '',
				imgUrl: host('imgUrl'),//获取自己的http地址
				add: false,
				opp:false
			}
		},
		onLoad() {
            //初始化调用
			this.requestToJavaBackend()
		},
		methods: {
			//获取版本信息
			async requestToJavaBackend() {
                //请求自己的后端地址
				var res = await request("/sys/appversion/", {
					method: "get",
					params: {},
				})
                //拿到后端返回的数据，并赋值给newbanben这个值
                //后端返回数据必须得有最新的版本号、以及更新内容、最新的apk地址这三个参数
				this.newbanben = res.data
                //获取当前版本号，并赋值给benban这个值
				this.banben = uni.getSystemInfoSync();
				if (this.newbanben.appVersion != this.banben.appVersion) {
					this.opp = true; 
				}
			},
			handleUpgrade() {
				this.opp = false;
                //调用遮罩层方法
				uni.showLoading({
					title: '应用更新中……',
					mask:true
				});
				uni.downloadFile({ //执行下载
					url: this.imgUrl + '/' + this.newbanben.appDownloadUrl, //拼接下载地址
					success: downloadResult => { //下载成功
						uni.hideLoading();//关闭遮罩层
						if (downloadResult.statusCode === 200) {
							uni.showModal({
								title: '更新成功',
								content: '现在需要重新启动应用',
								confirmText: '重启',
								confirmColor: '#EE8F57',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										plus.runtime.install( //安装
											downloadResult.tempFilePath, {
												force: true,
											},
											function(res) {
												_this.$toast('更新成功，正在重启');
												plus.runtime.restart();
											},
											function(err) {
												console.log(err);
											}
										);
									}
								}
							});
						}
					}
				});


			},

			close() {
				this.opp = false;
			},

		}
	}
</script>

说到这里很多小伙伴就要问了，我这个地址怎么拿呢？哈哈，我这里封装了一个方法，给大家借鉴一下。在你们的request.js页面封装了路由地址

export function host(host='default',suffix='/wisdom-iot'){
	var url=process.env.NODE_ENV === 'development'?{
		default:"http://127.0.0.1:8080",
		}:{
			default:``
		}
	return ({
		default:`${url.default}${suffix}`,
		imgUrl:`${url.default}${suffix}/sys/common/static`
	})[host]
}

大概是这样样子，名称的话自己想一个自己喜欢的也成，大家有自己的方法可以拿到也成，不喜勿喷

css部分

<style lang="scss" scoped>
	.upgrade-popup {
		width: 580rpx;
		height: auto;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.header-bg {
		width: 100%;
		margin-bottom: -17rpx;
		margin-top: -112rpx;
	}

	.upgrade-main {
		padding: 0px 15px 15px;
		box-sizing: border-box;

		.version {
			font-size: 18px;
			color: #026DF7;
			font-weight: 700;
			width: 100%;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			letter-spacing: 1px;
		}

		.upgrade-content {
			.title {
				font-size: 14px;
				font-weight: 700;
				color: #000000;
			}

			.desc {
				box-sizing: border-box;
				margin-top: 10px;
				font-size: 14px;
				color: #6A6A6A;
				max-height: 80vh;
				overflow-y: auto;
			}
		}

		.footer {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			flex-shrink: 0;
			margin-top: 50px;

			.btn {
				width: 123px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 999;
				height: 48px;
				box-sizing: border-box;
				font-size: 16px;
				border-radius: 5px;
				letter-spacing: 1px;

				&.force {
					width: 250px;
				}

				&.close {
					border: 1px solid #E0E0E0;
					margin-right: 12px;
					color: #000;
				}

				&.upgrade {
					background-color: #026DF7;
					color: white;
				}
			}

			.progress-view {
				width: 255px;
				height: 24px;
				display: flex;
				position: relative;
				align-items: center;
				border-radius: 3px;
				background-color: #dcdcdc;
				display: flex;
				justify-content: flex-start;
				padding: 0px;
				box-sizing: border-box;
				border: none;
				overflow: hidden;

				&.active {
					background-color: #026DF7;
				}

				.progress {
					height: 100%;
					background-color: #026DF7;
					padding: 0px;
					box-sizing: border-box;
					border: none;
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;

				}

				.txt {
					font-size: 14px;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #fff;
				}
			}
		}
	}
</style>

大致就是这么回事，如有意识代码或者不懂的可私聊博主，希望能帮到有需要的朋友。