uniapp实现实现点击按钮判断是否需要升级，需要升级则弹出升级弹窗

<template>
	<view>
		<view @click="apiversion">
			<slot></slot>
		</view>
		<u-popup :show="show" mode='center' @close="close">
			<view class="upgradeswin">
				<div class="title1">升级提示</div>
				<div class="title3 mt30">
					<p v-for="(item,index) in content" :key="index">{{item}}</p>
				</div>
				<div class="title2 mt30">{{upgrades}}</div>
				<div v-if="platform=='android'" class="lijishengji mt30" @click="openURL(android_url)">立即升级</div>
				<div v-if="platform=='ios'" class="lijishengji mt30" @click="openURL(ios_url)">立即升级</div>
				<div @click="doNotUpgrade" class="zanbushiji mt30">暂不升级</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiversion
	} from '@/config/api.js'
	import {
		myCache,
		getVersions
	} from '@/utils/utils.js'

	export default {
		data() {
			return {
				show: false,
				upgrades: '',
				version: '',
				urls: '',
				newVersion: '',
				content: '',
				android_url: '',
				ios_url: '',
				platform: 'android'
			}
		},
		mounted() {
			var that = this
			that.platform = uni.getSystemInfoSync().platform
		},
		methods: {
			close() {
				this.show = false
			},
			openURL(url) {
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)
				// #endif
				// #ifdef H5
				window.open(url)
				// #endif
			},
			doNotUpgrade() {
				this.show = false
				// 缓存接口返回的版本号,用以后期判断是否再次显示升级
				myCache('version', this.version) //版本号 存入缓存，最后一个参数是缓存过期时间
			},
			apiversion() {
				var that = this;
				apiversion({
					custom: {
						auth: true
					}
				}).then(res => {
					that.newVersion = res.version
					that.content = res.content
					that.android_url = res.android_url
					that.ios_url = res.ios_url
					that.getcompareVersionNumber2()
				}).catch(err => {

				})
			},
			getcompareVersionNumber2() {
				var that = this;
				console.log('对比当前实际版本号和接口版本号是否一直用以判断是否需要升级')
				console.log('当前实际版本号' + plus.runtime.version)
				console.log('接口返回的版本号' + this.version)
				if (getVersions(this.newVersion, plus.runtime.version)) {
					that.show = true
				} else {
					uni.showToast({
						title: '当前已是最新版本',
						icon: 'none'
					});
				}
			},

		}
	}
</script>


<style lang="scss" scoped>
	.upgradeswin {
		width: 630rpx;
		padding: 30rpx;
	}

	.lijishengji {
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		border: 1rpx solid #00ACA7;
		background: #00ACA7;
		color: #fff;
		font-size: 28rpx;

	}

	.title1 {
		font-size: 44rpx;
	}

	.zanbushiji {
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		border: 1rpx solid #DEDEDE;
		color: #3A3A3A;
		font-size: 28rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}
</style>

使用

<upgrade>
				<u-cell icon="setting-fill" title="版本更新" :value="'当前版本'+version">
					<span slot="icon" class="icon iconfont font14  icon-qiangdan"></span>
				</u-cell>
</upgrade>

<script>
	import {
		logout,
		apiversion
	} from '@/config/api.js'
	import {
		getVersions
	} from '@/utils/utils.js'
	import upgrade from '@/components/upgrade.vue'
	export default {
		components: {
			upgrade
		},
		data() {
			return {
				showSex: false,
				value: false,
				value1: '',
				fileList1: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				model1: {
					userInfo: {
						name: '',
						qq: '',
						email: '',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				version: plus.runtime.version
			};
		},
		mounted() {
			var that = this;
		},
		methods: {
			logout() {
				var that = this;
				uni.showModal({
					title: '确定要退出吗?',
					content: ' ',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.redirectTo({
								url: '/pages/login/login'
							})
							// logout({
							// 	custom: {
							// 		auth: true
							// 	}
							// }).then(res => {
							// 	if (res.code == 1) {
							// 		uni.removeStorageSync('token')
							// 		uni.redirectTo({
							// 			url: '/pages/login/login'
							// 		})
							// 	}
							// }).catch(err => {

							// })
						}
					}
				});
			},
		},
	};
</script>