需求场景：app开发定制公司在微信打开邀请链接，进入项目，app开发定制公司但不小心点击了左上角的关闭（x）按钮，app开发定制公司导致再次点击链接进入时，登录提示“已经在项目中，请勿登录！！！”但是想要能够重新登录进去

调研解决方案如下：

一、监听visibilitychange事件
经过验证，发现在如下情况会触发：

• 点击微信浏览器的关闭按钮（x）
• 切换app应用
• 切换浏览器的tab页（比如safari，google等浏览器）

document.addEventListener("visibilitychange", this.closeBrowser)closeBrowser(){    if (document.hidden) {        let token = getToken()        let i = localStorage.getItem("inviteCode")        let c = localStorage.getItem("customerType")        let blob = new Blob(          [          `token=${token}`,          `&entNum=2020040801`,          `&videoNum=${this.meetingPeopleList[0].userId}`,          `&uuid=${i}_${c}`],          { type: "application/x-www-form-urlencoded" } );          let result = navigator.sendBeacon(          	window.cpic_config.sdkPreUrl+'/standard/client/unusual/logout',          blob          );          if (result) {          console.log("请求成功排队 等待执行");          } else {          console.log("失败");          }      }    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

未采用此方法的原因
当切换app应用或者浏览器的tab页时，再回到当前页面，应该是可以继续进行录制的，但是触发了visibilitychange，调用了退出接口，导致后续的接口调用都提示“token过期了”，于是产生了下面第二种方法

二、监听unload事件
经过验证，发现在如下情况会触发：

• 点击微信浏览器的关闭按钮(x)
  具体方法如下：

window.addEventListener("unload", this.closeBrowser)closeBrowser(){  let token = getToken()  let i = localStorage.getItem("inviteCode")  let c = localStorage.getItem("customerType")  let blob = new Blob(    [    `token=${token}`,    `&entNum=2020040801`,    `&videoNum=${this.meetingPeopleList[0].userId}`,    `&uuid=${i}_${c}`],    { type: "application/x-www-form-urlencoded" } );    let result = navigator.sendBeacon(    	window.cpic_config.sdkPreUrl+'/standard/client/unusual/logout',    blob    );    if (result) {    console.log("请求成功排队 等待执行");    } else {    console.log("失败");    } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

采用此方法的原因：
关闭微信浏览器可以正常退出，且切换app再回来不影响
在手机浏览器打开，切换app或者tab页再回来也不影响继续录制

visibilitychange和unload两种方法的区别:

1. 作用对象不同：
   visibilitychange作用在document上
   unload作用在window上
2. 触发时机不同：
   当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange(能见度更改)事件
   当文档或一个子资源正在被卸载时，触发 unload事件。
   注意事项：
   当添加了addEventListener事件监听器后，如果想通过removeEventListener移除所监听的事件，事件处理函数不能使用匿名函数，需要使用和addEventListener的事件处理函数同名的函数
   即：
   window.addEventListener(“unload”, A)
   window.removeEventListener(“unload”,A)
   sendBeacon
   sendBeacon发出的是异步请求，但是请求是作为浏览器任务执行的，与当前页面时脱钩的