微信内置浏览器关闭事件不触发的解决方案

业务需求

业务基于微信内置浏览器，当页面关闭时需要调用接口去同步已读状态。

需要解决的问题

1. 监听页面返回事件
2. 监听页面关闭事件

解决方案

解决浏览器页面返回事件

普通页面：
当活动历史记录条目更改时，将触发popstate事件。

 window.addEventListener(
  "popstate",
  () => {
    this.ajaxSync();//触发ajax
  },
  false
);

vue-router页面：
调用组件内的离开守卫，调用接口

 beforeRouteLeave(to, from, next) {
    this.ajaxSync();//触发ajax
    next();
  },

解决浏览器页面关闭事件

微信浏览器左上角有原生的“×”直接关闭webview的操作，测试onbeforeunload事件还有几个其他的事件都无效，只有unload事件是有用的。

unload事件

当用户离开页面时，会发生 unload 事件。
当发生以下情况下，会触发 unload 事件：

• 点击某个离开页面的链接
• 在地址栏中键入了新的 URL
• 使用前进或后退按钮
• 关闭浏览器窗口
• 重新加载页面

如果unload事件以上条件影响你的业务，那就得另想办法了，看看能不能本地存点值自己构建逻辑。

ajax事件一定得是Sync

测试发现只有当接口请求为sync模式的时候接口才能成功调用，我用的axios不支持sync模式，所以写了原生的方法留给大家备用。

ajaxSync() {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var responseValue = xmlHttp.responseText;
    }
  };
  //true：异步；false：同步
  xmlHttp.open(
    "POST",
    url:'',
    false
  );
  xmlHttp.setRequestHeader("Content-Type", "application/json");
  xmlHttp.setRequestHeader(
    "Authorization",
    "Bearer " + ''
  );
  xmlHttp.send(JSON.stringify({ id: '' }));
},

有帮助点赞收藏鼓励一下，有问题请留言，谢谢大家！