APP中的付费项目通常会用原生的支付宝和微信支付,支付完成后回到web页面。
如果页面通过调桥来进行跳转付款界面,理想情况下有个回调让页面知道用户付款成功了,以对页面进行响应的更新。还有一种方法时,APP在得到用户支付完成的消息后刷新webview,但是如果页面是有很多未保存状态的SPA的话,这种方法就不太合适。
其实我们并不需要真的得知用户是否完成了付款,退一步讲,我们只需要知道用户切换到了其它界面,然后切换回来就行。此时用户可能完成了付款,也可能未完成。我们需要做的,是从后台获取用户的最新状态信息,以更新页面。
这里我们使用了document.visibilityState
和visibilitychange
API。document会监控页面的可见性,并在可见性变化时触发相应事件。
/**
* 处理页面可见性变化
* @param callback 回调
* @param once 一次
*/
function handleVisibilitychange(callback, once) {
let c = () => {
if (document.visibilityState === 'visible') {
callback()
if (once) {
document.removeEventListener('visibilitychange', c)
}
}
}
document.addEventListener('visibilitychange', c)
}