APP强制更新(uni-app)

港控/mmm° 2022-09-12 10:45 354阅读 0赞

# 项目要求： #

用户打开APP后，检测是否是最新版本，不是最新版本提示用户更新。

--------------------

# 解决思路： #

步骤一：需要一个接口，用来和本地版本号对比判断是不是最新的版本。  
步骤二：需要一个弹框，提示用户更新。  
步骤三：下载状态显示

--------------------

# 效果图： #

先有提示框  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2Z55qE5bCP55m96I-c_size_20_color_FFFFFF_t_70_g_se_x_16]  
用户点击更新后按钮文字改为正在更新（图没截好，但是代码以实现）  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2Z55qE5bCP55m96I-c_size_20_color_FFFFFF_t_70_g_se_x_16 1]

--------------------

# 具体代码： #

先来弹框样式代码

<view v-show="isupAppStatu" class="upAppBg">
    			<view class="upAppBox">
    				<view class="upAppBox_title">
    					发现新版本
    					<text >{
       {isupAppList.version}}</text>
    				</view>
    				<view class="upAppBox_content">
    					{
       {isupAppList.descrption}}
    					
    				</view>
    				<view v-show="updateprogress" style="width: 80%;margin-bottom: 30rpx;">
    						<progress :percent="updatesum" activeColor="red" stroke-width="8" />
    				</view>
    				<view @click="upApp" class="upAppBox_btn">
    					{
       {updateprogresstxt}}
    				</view>
    			</view>
    		</view>
    		
    
    <style> .upAppBg{ position: fixed; width: 750rpx; height: 100vh; background: rgba(0,0,0,0.3); z-index: 100; display: flex; align-items: center; justify-content: center; } .upAppBox{ width: 600rpx; padding: 20rpx 0 50rpx; background: #FFFFFF; border-radius: 20rpx; display: flex; flex-direction: column; align-items: center; } .upAppBox_title{ line-height: 80rpx; font-weight: bold; } .upAppBox_content{ padding: 20rpx 0 40rpx; font-size: 26rpx; } .upAppBox_btn{ width: 400rpx; line-height: 60rpx; text-align: center; background: rgb(250, 66, 55); border-radius: 20rpx; color: #FFFFFF; } </style>

弹框需要的data中的变量，首页是否显示提示框，以及更新按钮的方法

export default { 
    		data() { 
    			return { 
    				isupAppStatu:false, // 更新提示框
    				updatesys:'', // 更新系统型号
    				isupAppList:'', // 更新系统型号
    				updateprogresstxt :'更新',
    				updatesum:0, // 更新进度条
    				updateprogress: false, // 更新进行状态
    			}
    		},
    		onShow() { 
    			
    			//#ifdef APP-PLUS
    			//发起http请求，res中包含安卓和ios最新版本号，更新描述等数据
    			getVersion().then(res => { 
    				// 需要区分ios和安卓（两者更新APP方式不一致）
    				if (/android/.test(uni.getSystemInfoSync().platform)) { 
    					var _this = this // 改变this的指向在下面方法可使用this
    					plus.runtime.getProperty(plus.runtime.appid, function(inf) { 
    						const ver = inf.version; //测试
    						if (res.data.android.version > ver) { 
    							uni.hideTabBar()//隐藏底部导航栏
    							_this.isupAppList = res.data.android // 更新描述
    							_this.isupAppStatu = true // 显示更新提示框
    						}
    					})
    				}else if (/ios/.test(uni.getSystemInfoSync().platform)){ 
    					var _this = this // 改变this的指向在下面方法可使用this
    					plus.runtime.getProperty(plus.runtime.appid, function(inf) { 
    						const ver = inf.version; //测试
    						if (res.data.ios.version > ver) { 
    							uni.hideTabBar()//隐藏底部导航栏
    							_this.isupAppList = res.data.ios // 更新描述
    							_this.isupAppStatu = true // 显示更新提示框
    						}
    					})
    				}
    			})
    			//#endif
    			
    		},
    		methods: { 
    			// 更新APP
    			upApp(){ 
    			// 防止用户多次点击
    				if (this.updateprogress) { 
    					return
    				} else { 
    					if (/android/.test(uni.getSystemInfoSync().platform)) { 
    						this.updateprogress = true //显示进度条
    						this.updateprogresstxt = '正在更新...' //更改按钮文字 
    						// console.log(this.isupAppList)
    						const downloadTask = uni.downloadFile({ 
    						 url: this.isupAppList.address,
    						 success: (res) => { 
    							if (res.statusCode === 200) { 
    							 this.updateprogress = false
    							 plus.runtime.install(res.tempFilePath); // 自动安装apk文件
    							 plus.runtime.quit();
    							} else { 
    							this.updateprogress = false
    							}
    						 }
    						})
    						// 监控下载apk的进度
    						downloadTask.onProgressUpdate((res) => { 
    						 this.updatesum = res.progress
    						});
    					}else { 
    						// 苹果更新需要携带参数打开APPStore跳转到上架的应用上
    						var urlStr = encodeURI("APPStore中你们ios的地址")
    						plus.runtime.openURL(urlStr, function(res) { })
    					 }
    				}
    			}
    		}
    		
    			
    	}

# 总结 #

最开始的时候底部导航栏无法被覆盖，  
使用uni.hideTabBar()隐藏底部导航栏。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2Z55qE5bCP55m96I-c_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/89e7fe940f3b423d89c6d688a06147af.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2Z55qE5bCP55m96I-c_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/01cf799f1ac04ce8855d4a0ed7c0a196.png