快捷導(dǎo)航

uniapp實(shí)現(xiàn)app自動(dòng)更新詳細(xì)步驟

更新時(shí)間：2023年08月25日 10:00:28 作者：懷中貓@j

這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app自動(dòng)更新的詳細(xì)步驟,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

需求概述：

最近遇到的需求，掃碼核驗(yàn)的app需要在線(xiàn)自動(dòng)升級(jí)安裝（因app簡(jiǎn)單上不了應(yīng)用市場(chǎng)，所以調(diào)研用在線(xiàn)更新的辦法）

第一步：首先需要一個(gè)可以更新和獲取數(shù)據(jù)的接口（后端）

比如第一次打包時(shí)的版本名稱(chēng)是1.0.1，那第一次將這個(gè)1.0.1版本的手動(dòng)安裝到手機(jī)上后，后續(xù)想要實(shí)現(xiàn)自動(dòng)更新，再次打包的版本名稱(chēng)就必須大于1.0.1（因?yàn)楸敬螌?shí)現(xiàn)的邏輯就是根據(jù)版本名稱(chēng)）
版本號(hào)位置：manifest.json >> 基礎(chǔ)配置 >> 應(yīng)用版本名稱(chēng)
當(dāng)需要更新app的時(shí)候，改變版本名稱(chēng)（必須大于上一個(gè)版本），開(kāi)始打包
同時(shí)在后端的接口里同步更新你的此次打包的版本名稱(chēng)

第二步：打包后的apk文件需要放在服務(wù)器上，然后拿到在服務(wù)器上的文件的地址（后續(xù)有用）

第三步：開(kāi)始在App.vue里書(shū)寫(xiě)前端邏輯（直接貼代碼）

onLoad() ：在頁(yè)面加載的時(shí)候觸發(fā)，只會(huì)調(diào)用一次，在onLoad() 函數(shù)中，可以通過(guò) option獲取當(dāng)前頁(yè)面路徑中的參數(shù)
onShow()：在頁(yè)面顯示時(shí)調(diào)用，也就是切換頁(yè)面的時(shí)候，或者切入前臺(tái)的時(shí)候觸發(fā)，可以多次觸發(fā)
根據(jù)自己的需求來(lái)確定是寫(xiě)在onShow還是onLoad

原理：獲取當(dāng)前app的版本名稱(chēng)，在onShow觸發(fā)的時(shí)候調(diào)接口比對(duì)當(dāng)前app版本名稱(chēng)和線(xiàn)上最新版本名稱(chēng)，如果線(xiàn)上最新版本名稱(chēng)大于當(dāng)前版本名稱(chēng)則下載最新的apk安裝更新

onShow: function() {
	console.log('App Show')
	plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
	this.version = widgetInfo.version
	uni.request({
		url: 'http://xxxx.cczu.edu.cn:8081/api/dict',
		success: (res) => {
			function compareVersion(version1, version2) {
				const newVersion1 = `${version1}`.split('.').length < 3 ? `${version1}`.concat('.0') : `${version1}`;
				const newVersion2 = `${version2}`.split('.').length < 3 ? `${version2}`.concat('.0') : `${version2}`;
				  //計(jì)算版本號(hào)大小,轉(zhuǎn)化大小
				 function toNum(a){
				 	const c = a.toString().split('.');
				 	const num_place = ["", "0", "00", "000", "0000"],
				 		r = num_place.reverse();
				 	for (let i = 0; i < c.length; i++){
				 		const len=c[i].length;
				 		c[i]=r[len]+c[i];
				 	}
				 		return c.join('');
				 	}
				 	// 檢測(cè)版本號(hào)是否需要更新
				 	function checkPlugin(a, b) {
				 		const numA = toNum(a);
				 		const numB = toNum(b);
				 		return numA > numB ? 1 : numA < numB ? -1 : 0;
				 	}
				 		return checkPlugin(newVersion1 ,newVersion2);
				 	}
				 	for (let i of res.data.content) {
				 		if (i.description === 'app版本') {
							// 1代表app新包版本號(hào)大于本地版本號(hào)
				 			if (compareVersion(i.dictDetails[0].value, this.version) === 1) {
				 				uni.showModal({
				 					title: '提示',
				 					content: '發(fā)現(xiàn)新的應(yīng)用安裝包，點(diǎn)擊確定立即更新',
				 					success: function (res) {
				 					   if (res.confirm) {
				 					       	console.log('用戶(hù)點(diǎn)擊確定');
											uni.showLoading({
												title: '更新中……'
											})
				 							uni.downloadFile({
				 								// 存放最新安裝包的地址
				 								url: 'http://xxxx.xxxx.com/__UNI__xxxx.apk',
				 								success: (downloadResult) => {  
													uni.hideLoading();
				 								    if (downloadResult.statusCode === 200) { 
														uni.hideLoading();
				 								        plus.runtime.install(downloadResult.tempFilePath,{ 
				 								        	force: false 
				 								        }, function() {
				 								        	console.log('install success...');  
				 								            plus.runtime.restart();  
				 								        }, function(e) {  
															uni.hideLoading();
				 								            console.error('install fail...');  
				 								        });  
				 								    }
				 								}  
				 							}); 
				 					   } else if (res.cancel) {
				 					   		console.log('用戶(hù)點(diǎn)擊取消');
				 					   }
				 					}
				 				});
				 			} else {
				 		}
				 	}
				 }
			}
		});
	});
},

總結(jié)

到此這篇關(guān)于uniapp實(shí)現(xiàn)app自動(dòng)更新詳細(xì)步驟的文章就介紹到這了,更多相關(guān)uniapp app自動(dòng)更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: