H5微信支付返回页面不刷新解决办法

最新推荐文章于 2025-04-06 10:11:44 发布

原创最新推荐文章于 2025-04-06 10:11:44 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

移动端支付专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在H5页面调用微信支付时，通过监听页面的可见性变化来判断用户是否离开页面的方法。利用visibilitychange事件，可以在用户返回页面时调用接口检查订单状态。

前端小伙伴可以学习一下源码获取

在H5调用微信支付过程中，肯定都回遇到返回订单页面单页面不刷新的情况，所以我就想，能不能在跳转微信后，在返回页面的时候监听visibilitychange变化，调用方法

visibilitychange

当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件

document.addEventListener('visibilitychange', (e) => {
	console.log(document.visibilityState);
	let state = document.visibilityState
	if (state == 'hidden') {
		console.log('用户离开了');
	}
	if (state == 'visible') {
		//调用接口,获取订单状态
	}
});