最近做微信公众号H5页面,有一个用户维修申请的功能。当用户添加请求成功后,跳转到一个提示添加成功页面,此页面有一个倒计时,倒计时完成后再跳转到维修列表页面。
但是当倒计时时,按home键将微信切换到后台,再进入微信,会发现倒计时停止在退出时的状态。期望的是,倒计时应该恢复倒计时。
当微信切换到后台时,安卓端会触发了visibilitychange事件,而苹果端不会触发此事件,还要侦听pagehide 事件。
另外,考虑到兼容性,要使用document.addEventListener而不是window.addEventListener来注册回调。因为Safari <14.0仅支持前者。

当事件发生时,可以通过下面的属性获取页面的状态:
1、document.visibilityState

返回document的可见性, 由此可以知道当前文档(即页面)是在背后, 或是不可见的隐藏标签页,或是(正在)预渲染。值有:
  • 'visible' : 表明页面为浏览器当前激活tab,而且窗口不是最小化状态。
  • 'hidden' : 页面不是当前激活tab页面,或者窗口最小化了,此时页面对用户不可见,或者操作系统正处于“锁屏状态”。
  • 'prerender' : 页面此时正在渲染中, 因此是不可见的。文档只能从此状态开始,永远不能从其他值变为此状态。注意: 浏览器支持是可选的。

2、document.hidden:true/false

项目使用uni-app框架,解决的代码如下:

created() {
  document.addEventListener('visibilitychange', e => {
     if(document.hidden) {
         // 网页被挂起
     }else {
         // 网页被呼起
         this.countDown(this.countDownTime)
      }
   })
   // 当visibleStateState属性的值转换为hidden时,Safari不会按预期触发visibilitychange; 
   // 因此,需要侦听pagehide事件
   // 出于兼容性原因,使用document.addEventListener而不是window.addEventListener来注册回调。因为Safari<14.0仅支持前者。
   document.addEventListener('pagehide', function(e) {
      if(e.persisted) {
          // 网页被挂起
       }else {
          // 网页被呼起    
          this.countDown(this.countDownTime)
       }
    })           
    this.countDown(this.time)
},

lavender
27 声望2 粉丝