uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程

更新時(shí)間：2022年11月11日 16:04:25 作者：碰磕

經(jīng)常在做app的時(shí)候,會(huì)有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

熱更新

熱更新是開發(fā)中常見且常用的一種軟件版本控制的方式，在uniapp進(jìn)行使用熱更新將軟件實(shí)現(xiàn)更新操作
思路:

服務(wù)器中存儲(chǔ)著最新版本號，前端進(jìn)行查詢
可以在首次進(jìn)入應(yīng)用時(shí)進(jìn)行請求版本號進(jìn)行一個(gè)匹對
如果版本號一致則不提示，反之則提示進(jìn)行更新執(zhí)行更新操作

實(shí)現(xiàn)

采用方法封裝進(jìn)行使用~

1.封裝一個(gè)對比版本號的函數(shù)

/**
 * 對比版本號，如需要，請自行修改判斷規(guī)則
 * 支持比對	("3.0.0.0.0.1.0.1", "3.0.0.0.0.1")	("3.0.0.1", "3.0")	("3.1.1", "3.1.1.1") 之類的
 * @param {Object} v1
 * @param {Object} v2
 * v1 > v2 return 1
 * v1 < v2 return -1
 * v1 == v2 return 0
 */
function compare(v1 = '0', v2 = '0') {
	v1 = String(v1).split('.')
	v2 = String(v2).split('.')
	const minVersionLens = Math.min(v1.length, v2.length);

	let result = 0;
	for (let i = 0; i < minVersionLens; i++) {
		const curV1 = Number(v1[i])
		const curV2 = Number(v2[i])

		if (curV1 > curV2) {
			result = 1
			break;
		} else if (curV1 < curV2) {
			result = -1
			break;
		}
	}

	if (result === 0 && (v1.length !== v2.length)) {
		const v1BiggerThenv2 = v1.length > v2.length;
		const maxLensVersion = v1BiggerThenv2 ? v1 : v2;
		for (let i = minVersionLens; i < maxLensVersion.length; i++) {
			const curVersion = Number(maxLensVersion[i])
			if (curVersion > 0) {
				v1BiggerThenv2 ? result = 1 : result = -1
				break;
			}
		}
	}
	return result;
}

2.封裝更新函數(shù)

通過downloadTask.onProgressUpdate進(jìn)行監(jiān)聽,再通過plus.nativeUI.showWaiting("正在下載 - 0%"); 進(jìn)行加載顯示下載進(jìn)度…

var updateUseModal = (packageInfo) => {
	const {
		title, // 標(biāo)題
		contents, // 升級內(nèi)容
		is_mandatory, // 是否強(qiáng)制更新
		url, // 安裝包下載地址
		platform, // 安裝包平臺(tái)
		type // 安裝包類型
	} = packageInfo;

	let isWGT = type === 'wgt'
	let isiOS = !isWGT ? platform.includes('iOS') : false;
	let confirmText = isiOS ? '立即跳轉(zhuǎn)更新' : '立即下載更新'

	return uni.showModal({
		title,
		content: contents,
		showCancel: !is_mandatory,
		confirmText,
		success: res => {
			if (res.cancel) return;

			// 安裝包下載
			if (isiOS) {
				plus.runtime.openURL(url);
				return;
			}
			let waiting =  plus.nativeUI.showWaiting("正在下載 - 0%");  
			// uni.showLoading({
			// 	title: '安裝包下載中'
			// });
			// wgt 和 安卓下載更新
			const downloadTask = uni.downloadFile({
				url,
				success: res => {
					if (res.statusCode !== 200) {
						console.error('下載安裝包失敗', err);
						return;
					}
					// 下載好直接安裝，下次啟動(dòng)生效
					plus.runtime.install(res.tempFilePath, {
						force: false
					}, () => {
						uni.hideLoading()
						if (is_mandatory) {
							//更新完重啟app
							plus.runtime.restart();
							return;
						}
						uni.showModal({
							title: '安裝成功是否重啟？',
							success: res => {
								if (res.confirm) {
									//更新完重啟app
									plus.runtime.restart();
								}
							}
						});
					}, err => {
						uni.hideLoading()
						uni.showModal({
							title: '更新失敗',
							content: err.message,
							showCancel: false
						});
					});
				},
				//接口調(diào)用結(jié)束
				complete: ()=>{
					uni.hideLoading();
					downloadTask.offProgressUpdate();//取消監(jiān)聽加載進(jìn)度
				}
			});
			//監(jiān)聽下載進(jìn)度
			downloadTask.onProgressUpdate(res => {
				// state.percent = res.progress;
				waiting.setTitle("正在下載 - "+res.progress+"%");
				// console.log('下載進(jìn)度百分比:' + res.progress); // 下載進(jìn)度百分比
				// console.log('已經(jīng)下載的數(shù)據(jù)長度:' + res.totalBytesWritten); // 已經(jīng)下載的數(shù)據(jù)長度，單位 Bytes
				// console.log('預(yù)期需要下載的數(shù)據(jù)總長度:' + res.totalBytesExpectedToWrite); // 預(yù)期需要下載的數(shù)據(jù)總長度，單位 Bytes
			});
		}
	});
}

3.用變量接收實(shí)現(xiàn)函數(shù)(在函數(shù)中使用上方封裝的函數(shù))并導(dǎo)出

fRequestWithToken為我封裝的請求方法,可自行進(jìn)行使用axios進(jìn)行請求也行!!!

var fCheckVersion = (cb) => {
	// #ifdef APP-PLUS
	plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
		// console.log(widgetInfo.version)
		// console.log(plus.runtime.version)
		// console.log(widgetInfo.version)
		var nVerSta = compare(plus.runtime.version, widgetInfo.version),
			sLaststVer = plus.runtime.version;
		if (widgetInfo.version) {
			if (nVerSta == 1) {
				console.log(plus.runtime.version)
				sLaststVer = plus.runtime.version
			} else if (nVerSta == -1) {
				console.log(widgetInfo.version)
				sLaststVer = widgetInfo.version
			}
		}
		console.log(sLaststVer)
		//發(fā)送請求進(jìn)行匹對,我這里數(shù)據(jù)庫設(shè)定的是如果返回null則版本號一致，反之需要更新!!!
		fRequestWithToken({
			ajaxOpts: {
				url: URLS_COM.d_lastVer,
				data: {
					versionCode: sLaststVer
				}
			},
			showloading: false,
			silence:true
		}).then(data => {
			console.log(data)
			// console.log('################')
			if (data) {
				var sUrl = '',
					type = '';
				if (data.wgtName) {
					sUrl = data.wgtName;
					type = "wgt"
				} else {
					sUrl = data.pkgName;
					type = "pkg";
				}

				updateUseModal({
					title: data.title||"",
					contents: data.note||'',
					is_mandatory: true,
					url: sUrl,
					platform: 'android',
					type: type // 安裝包類型
				})
			}
		}).catch((res)=>{
			cb&&cb()
			console.log(res)
		})
	})
	// #endif
}

export {
	fCheckVersion
}

以上代碼即可實(shí)現(xiàn)熱更新的操作

使用

可在App.vue中進(jìn)行使用，根據(jù)項(xiàng)目需求而定

1.引入封裝好的函數(shù)

路徑自己記得填寫自己封裝的位置

import{fCheckVersion} from '@/common/project/checkversion.js'

2.然后可以在onLoad函數(shù)中進(jìn)行觸發(fā)

onLoad() {
		fCheckVersion();//檢查更新
}

這樣就實(shí)現(xiàn)了熱更新

然后的話只需要進(jìn)行打包個(gè)熱更新的包

后端進(jìn)行上傳至服務(wù)器進(jìn)行更新數(shù)據(jù)

本地再進(jìn)行一個(gè)云打包，記得在mainifest.json文件中進(jìn)行版本號的修改，修改成低于熱更新包的版本號即可

補(bǔ)充：uniapp整包升級

整包升級代碼:

在App.vue的onLaunch中，發(fā)起升級檢測請求，如下：

onLaunch: function () {  
    //#ifdef APP-PLUS  
    var server = "https://www.example.com/update"; //檢查更新地址  
    var req = { //升級檢測數(shù)據(jù)  
        "appid": plus.runtime.appid,  
        "version": plus.runtime.version  
    };  
    uni.request({  
        url: server,  
        data: req,  
        success: (res) => {  
            if (res.statusCode == 200 && res.data.status === 1) {  
                uni.showModal({ //提醒用戶更新  
                    title: "更新提示",  
                    content: res.data.note,  
                    success: (res) => {  
                        if (res.confirm) {  
                            plus.runtime.openURL(res.data.url);  
                        }  
                    }  
                })  
            }  
        }  
    })  
    //#endif  
}

注意：App的升級檢測代碼必須使用條件編譯，否則在非App環(huán)境由于不存在plus相關(guān)API，將會(huì)報(bào)錯(cuò)。

升級地址URL，如果是自行托管的App，就提供自己的包地址。如果是打開應(yīng)用市場，那URL如下：

if (plus.os.name=="Android") {  
    appurl = "market://details?id=io.dcloud.hellouniapp"; //這個(gè)是通用應(yīng)用市場，如果想指定某個(gè)應(yīng)用商店，需要單獨(dú)查這個(gè)應(yīng)用商店的包名或scheme及參數(shù)  
}  
else{  
    appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253";  
}