当前位置：首页 > article >正文

Uniapp 微信小程序检测新版本并更新

article 2024/12/28 1:14:48

技术栈：Uniapp + Vue3

简介

在开发微信小程序过程中，会经常发布新的版本，与此同时，需要正在使用的用户进行更新才可以正常使用。于是，需要及时检测是否有新版本、应用更新版本。

主要会使用到

uni.canIUse(‘getUpdateManager’) 更新管理器在当前版本是否可用
uni.getUpdateManager() 获取版本更新管理器对象（用于小程序更新）
updateManager
a. onCheckForUpdate() 向小程序后台请求完新版本信息，会回调
b. onUpdateReady() 下载更新小程序新版本，会回调
c. applyUpdate() 应用新版本并重启
d. onUpdateFailed() 新的版本下载失败，会回调

实现

生命周期中调用检测更新

根据实际情况，可在入口文件App.vue中 onLaunch 或者 onShow 生命周期中调用检测更新

import { onLaunch, onShow} from '@dcloudio/uni-app';

onLaunch(() => {
	autoUpdate();
})

// 或
onShow(() => {
	autoUpdate();
})

检测是否有新版本并提示

const autoUpdate = () => {
	// 获取小程序更新机制兼容
	if (uni.canIUse("getUpdateManager")) {
		// 获取更新管理器
		const updateManager = uni.getUpdateManager();
		//1. 检查小程序是否有新版本发布，向小程序后台请求完新版本信息
		updateManager.onCheckForUpdate((res) => {
			// 请求完新版本信息的回调
			if (res.hasUpdate) {
				//检测到新版本，需要更新，给出提示
				uni.showModal({
					title: "更新提示",
					content: "检测到新版本，是否下载新版本并重启小程序？",
					success: (res) => {
						if (res.confirm) {
							//2. 用户确定下载更新小程序，小程序下载及更新静默进行
							downLoadAndUpdate(updateManager);
						} else if (res.cancel) {
							//用户点击取消按钮的处理，如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
							uni.showModal({
								title: "温馨提示",
								content: "本次版本更新涉及到新的功能添加，旧版本无法正常访问的哦",
								showCancel: false, //隐藏取消按钮
								confirmText: "确定更新", //只保留确定更新按钮
								success: (res) => {
									if (res.confirm) {
										//下载新版本，并重新应用
										downLoadAndUpdate(updateManager);
									}
								},
							});
						}
					},
				});
			}
		});
	} else {
		// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
		uni.showModal({
			title: "提示",
			content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
		});
	}
}

实质更新

/**
 * 下载小程序新版本并重启应用
 */
const downLoadAndUpdate = (updateManager) => {
	uni.showLoading();
	//静默下载更新小程序新版本，更新完成后回调
	updateManager.onUpdateReady(() => {
		uni.hideLoading();
		//新的版本已经下载好，调用 applyUpdate 应用新版本并重启
		updateManager.applyUpdate();
	});
	
	// 更新失败回调
	updateManager.onUpdateFailed(() => {
		// 新的版本下载失败
		uni.showModal({
			title: "已经有新版本了哟~",
			content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
		});
	});
}