uniapp版本升级和热更新

bug:获取版本号是异步操作,要在获取成功的回调里掉接口
bug:非强制更新只弹出一次。方法:在close时,若是非强制更新本地存储标识,在onshow判断本地有标识不再弹出更新提示

基本规则

  • 版本升级为大版本更新 版本号 1.0.0 1.1.0 1.2.0,区分安卓 和 ios,区分强制更新和自主更新
  • 热更新为小版本更新,不区分安卓 和 ios,可以不同时发版,但要保证相同版本的功能一致,静默更新

判断规则

  • 传递参数手机类型 和 现有版本号 V
  • if 大版本的前两位 > V ==> 大版本更新
  • else if 小版本前两位.0 < V < 小版本号 ==> 小版本更新 (解决热更新时,安卓和ios大版本不一致问题,所以热更新只能针对当前大版本,不能差段更新)
  • else 不更新 (包含:已经更新为最新版本和热更新和大版本差段情况)

版本升级组件

<template>
	<u-popup v-model="show" close-icon="close-circle-fill" :closeable="upinfo.enforce==0" close-icon-color="#fff"
	 close-icon-size="44" :mask-close-able="false" @close="close()" mode="center" width="617rpx" height="720rpx"
	 border-radius="14">
		<view class="update u-p-30">
			<view class="u-font-30 white bold">创客门店 V{{upinfo.version}}</view>
			<view class=" u-p-l-50 u-p-r-50" style="margin-top:250rpx;">
				<view class="u-font-32 bold text-center u-m-b-20">更新内容</view>
				<text class="gray-2 u-font-26" style="height:200rpx;display:block;overflow-y: scroll;">
					{{upinfo.content}}
				</text>
			</view>
			<view class="flex1" style="margin-top:30rpx;" v-if="upinfo.enforce==0">
				<view class="btn2 yellow center" @click="close()">暂不更新</view>
				<view class="btn1 white center" @click="update">立即更新</view>
			</view>
			<view class="center" style="margin-top:30rpx;" v-if="upinfo.enforce==1">
				<view class="btn1 white center" @click="update">立即更新</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: Boolean,  //升级弹窗
			upinfo: Object  //升级信息
			//"content": "很多事可发货速度工会发的111挂号费将根据韩国",
			//"url": "http://djck-oss.xjdm88.com/ckmd_1.0.0.apk",
			//"version": "1.1.0",
			//"enforce": 1,
			//"update_type": 1
		},
		mounted() {},
		methods: {
		   // 点击立即更新
			update() {
				this.close()
				if (uni.getStorageSync('phone') == 'ios') {
					//跳转appstore
				} else {
					let _this = this
					uni.downloadFile({
						url: _this.upinfo.url,
						success: (res) => {
							if (res.statusCode === 200) {
								plus.runtime.install(res.tempFilePath); //下载成功安装apk
							}
						},
						fail: (err) => {
							console.log(err);
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '安装失败,请重新下载',
							});
						},
					})

				}
			},
			close() {
				//非强制关闭不在弹出
				if (this.upinfo.enforce==0) {
					uni.setStorageSync('noup', 1)
				}
				this.$emit('close')
				uni.showTabBar(); //显示tabbar
			},
		},
	}
</script>

<style lang="scss" scoped>
	.update {
		width: 100%;
		height: 100%;
		background: url(../static/update.png) no-repeat center center;
		background-size: 100% 100%;

		.btn1,
		.btn2 {
			width: 260rpx;
			height: 68rpx;
			border-radius: 34rpx;
		}

		.btn1 {
			background: linear-gradient(180deg, rgba(255, 177, 40, 1), rgba(226, 101, 0, 1));
		}

		.btn2 {
			border: 1px solid $yellow;
		}
	}
</style>

首页引入组件

		<update @close="close" :upinfo="upinfo" :show="showPop"></update>

		 onShow() {
			let _this=this
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				uni.setStorageSync('version', widgetInfo.version)
				_this.update() //获取是异步的,获取版本号并存储本地成功在调接口
			})
			// #endif
			this.init()
		},
         // #ifdef APP-PLUS
			update() {
				this.$http('/api/common/version', {
					mobile: uni.getStorageSync('phone') == 'android' ? 2 : 1,
					version: uni.getStorageSync('version')
				}).then(data => {
					// update_type  0 不更新  1 大版本  2 小版本
					if (data.update_type == 1) {
						if (!uni.getStorageSync('noup')) {
							this.showPop = true
							uni.hideTabBar()
							this.upinfo = data
						}
					} else if (data.update_type == 2) {
						uni.downloadFile({
							url: data.url,
							success: (res) => {
								if (res.statusCode === 200) {
									plus.runtime.install(res.tempFilePath, {
										force: false
									}, function() {
										console.log('install success...');
										plus.runtime.restart(); //安装 wgt 资源包成功后,必须执行 plus.runtime.restart(),否则新的内容并不会生效
									}, function(e) {
										uni.showToast({
											icon: 'none',
											title: '安装失败'
										});
										console.error(e);
									}); //下载成功安装apk
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									icon: 'none',
									title: '安装失败,请重新下载',
								});
							},
						})
					}
				})
			},
			// #endif

			close() {
				this.showPop = false
			},
			

你可能感兴趣的:(uniapp)