微信內置瀏覽器關閉事件不觸發的解決方案

業務需求

業務基於微信內置瀏覽器，當頁面關閉時需要調用接口去同步已讀狀態。

需要解決的問題

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: '' }));
},

有幫助點贊收藏鼓勵一下，有問題請留言，謝謝大家！