微信H5頁面關閉事件

需求：

在微信瀏覽器中，監聽頁面關閉事件，當頁面關閉時，處理一些事件。這是平時工作中比較常遇到的問題。與此同時，還有微信頁面的刷新問題，切后臺問題等等。現就目前的需求，對前一段時間遇到的問題以及最終的解決辦法，做一下記錄。

業務需求：

微信瀏覽器頁面關閉，暫停播放，停止記錄時長；
微信瀏覽器頁面切后臺時，同上，暫停播放，停止記錄時長；
后臺殺死微信瀏覽器時，同上。

此中涉及到的事件主要有：

微信瀏覽器頁面關閉事件：pagehide / unload 事件
頁面的后臺前臺切換事件（即頁面的顯示與隱藏）：visibilitychange 事件

微信（APP客戶端）頁面關閉

微信端對Android和iOS的處理方式有所差異，有些事件監聽函數只能在Android和iOS中的一端生效，所以微信頁關閉事件也是如此，不同操作系統平臺，所需的事件監聽方法還是有差異的。

Android微信關閉

const unloadHander(e) {
      // 獲取瀏覽器信息ua
      let u = navigator.userAgent;
      // 判斷設備
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      if (isAndroid) {
      	// 處理事件
      }
}

// 添加事件
window.addEventListener('unload', function(e) {
      unloadHander();
}, false);

// 移除事件
window.removeEventListener('unload', function(e) {
      unloadHander();
}, false);

iOS微信頁面關閉

const pagehideHander(e) {
      // 獲取瀏覽器信息ua
      let u = navigator.userAgent;
      // 判斷設備
      let isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isiOS) {
      	// 處理事件
      }
}

// 添加事件
window.addEventListener('pagehide', function(e) {
      pagehideHander();
}, false);

// 移除事件
window.removeEventListener('pagehide', function(e) {
      pagehideHander();
}, false);

總結

以上是生活随笔為你收集整理的微信页面关闭事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。