微信小程序（uniapp）更新提示弹窗

原创已于 2025-04-24 08:45:19 修改 · 2.2k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#微信小程序 #uni-app

于 2025-04-14 18:25:12 首次发布

微信小程序开发实战全攻略专栏收录该内容

15 篇文章

订阅专栏

文章目录

一、需求分析
二、实现思路
三、代码实现
四、注意事项
五、总结

微信小程序（uniapp）更新提示弹窗实现指南

在开发基于uniapp的微信小程序时，为了让用户能够及时获取到应用的最新版本，提升用户体验和功能完整性，实现一个更新提示弹窗是非常必要的。本文将详细介绍如何在uniapp项目中实现微信小程序更新提示弹窗功能，从需求分析到代码实现，一步步带你完成这一功能。

一、需求分析

当微信小程序有新版本发布时，我们希望用户在打开小程序时能够收到更新提示。如果用户选择更新，就引导用户重新进入小程序以获取最新版本；如果用户选择暂不更新，则继续使用当前版本。这样可以确保用户能够及时享受到新版本带来的新功能和优化。

二、实现思路

1. 获取小程序版本信息：

通过调用微信小程序的API获取当前小程序的版本信息。

2. 与服务器版本信息对比（可选）：

将获取到的本地版本信息与服务器上的最新版本信息进行对比。

3. 显示更新提示弹窗：

如果服务器版本高于本地版本，则显示更新提示弹窗，让用户选择是否更新。

4. 处理用户选择：

根据用户的选择，执行相应的操作，如重新进入小程序或继续使用当前版本。

三、代码实现

1. 获取本地小程序版本信息

在微信小程序中，我们可以使用wx.getSystemInfoSync()方法获取系统信息，在uniapp中的写法是 uni.getUpdateManager();

	// 在App.vue页面的onLoad或onLaunch生命周期函数中获取版本信息
	onLaunch() {
	// #ifdef MP-WEIXIN
		this.checkUpdate();
	// #endif
	},
	methods: {
		checkUpdate() {
			const updateManager = uni.getUpdateManager();
			updateManager.onCheckForUpdate(function(res) {
				// 请求完新版本信息的回调
				console.log('是否有新版本：', res.hasUpdate);
			});

			updateManager.onUpdateReady(function() {
				uni.showModal({
					title: '更新提示',
					content: '新版本已经准备好，是否重启小程序？',
					confirmText: '立即重启',
					confirmColor: '#2179f5',
					success(res) {
						if (res.confirm) {
							// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
							updateManager.applyUpdate();
						}
					}
				});
			});

			updateManager.onUpdateFailed(function() {
				// 新的版本下载失败
				uni.showModal({
					title: '更新提示',
					content: '新版本下载失败，请检查网络后重试。',
					showCancel: false
				});
			});
		}
	}

2. 与服务器版本信息对比（可选）

如果希望更加灵活地控制版本更新，可以将版本信息存储在服务器上。在小程序启动时，先向服务器请求最新版本信息，然后与本地版本进行对比。

onLaunch() {
	// #ifdef MP-WEIXIN
	this.checkVersionWithServer(); // 或者直接调用 this.checkUpdate() 如果不需要服务器版本对比
	// #endif
},
methods: {
	// 获取服务器版本信息接口
	getServerVersion() {
		return new Promise((resolve, reject) => {
			uni.request({
				url: 'https://xxxxxx.com/api/getVersion', // 替换为你的服务器接口地址
				method: 'GET',
				success: (res) => {
					if (res.statusCode === 200) {
						resolve(res.data.version);
					} else {
						reject('获取服务器版本信息失败');
					}
				},
				fail: (err) => {
					reject(err);
				}
			});
		});
	}

	// 检查更新
	async checkVersionWithServer() {
		try {
			const localVersion = uni.getAccountInfoSync().miniProgram.version; // 获取本地小程序版本
			const serverVersion = await this.getServerVersion();
			if (serverVersion > localVersion) {
				// 显示更新提示弹窗
				uni.showModal({
					title: '更新提示',
					content: '发现新版本，请更新以获得更好的体验。',
					success(res) {
						// 根据用户点击同意或拒绝处理业务...
					}
				});
			}
		} catch (err) {
			console.error('版本检查失败：', err);
		}
	}
}