最近做微信公众号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)},