APP強制更新(uni-app)

項目要求：

使用者打開APP後，檢測是否是最新版本，不是最新版本提示使用者更新。

解決思路：

步驟一：需要一個接口，用來和本地版本号對比判斷是不是最新的版本。

步驟二：需要一個彈框，提示使用者更新。

步驟三：下載下傳狀态顯示

效果圖：

先有提示框

使用者點選更新後按鈕文字改為正在更新（圖沒截好，但是代碼以實作）

具體代碼：

先來彈框樣式代碼

<!-- #ifdef APP-PLUS -->
		<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>
		<!-- #endif -->
<!-- css樣式 -->
<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()隐藏底部導航欄。