用户买了VIP?那Web要怎么知道呢?用页面可见性API解决

180 阅读1分钟

APP中的付费项目通常会用原生的支付宝和微信支付,支付完成后回到web页面。

如果页面通过调桥来进行跳转付款界面,理想情况下有个回调让页面知道用户付款成功了,以对页面进行响应的更新。还有一种方法时,APP在得到用户支付完成的消息后刷新webview,但是如果页面是有很多未保存状态的SPA的话,这种方法就不太合适。

其实我们并不需要真的得知用户是否完成了付款,退一步讲,我们只需要知道用户切换到了其它界面,然后切换回来就行。此时用户可能完成了付款,也可能未完成。我们需要做的,是从后台获取用户的最新状态信息,以更新页面。

这里我们使用了document.visibilityStatevisibilitychangeAPI。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)
}