H5嵌套到小程序、APP，還能埋點統計？看完這篇便知曉

這是我參與8月更文挑戰的第 2 天，活動詳情查看： 8月更文挑戰html

贈人玫瑰，手有餘香。先點贊，再查看哇。ios

業務需求

最近產品須要作一個埋點，不管是預覽商品仍是預覽企業信息都須要統計改用戶停留的時長，可是這個裏有個特色，就是商品和企業信息都是用H5寫的，最終這個H5頁面會嵌套自家產品小程序和本身產品安卓端和IOS端，因爲嵌套的緣由，須要處理的東西確實會比較複雜，而且仍是嵌套到三個不一樣的宿主環境裏，想一想都會頭疼，這樣會致使有些事件H5是沒法監聽到的。web

碰到的難題

上一篇文章，我有講解在H5中，如何解決關閉瀏覽器發送統計信息及測試是否發送成功的問題；使用navigator.sendBeacon發送接口及window.addEventListener('unload', function(){}, false)來監聽是否關閉瀏覽器，更多詳情點我
這裏將要講解的難點有2個：
- 1.嵌套進去的H5頁面，在APP或小程序中，用戶把軟件切換到後臺咱們都沒法監聽。
- 2.用戶在使用嵌套的小程序和IOS宿主環境中點擊左上角自帶返回按鈕，H5都沒法監聽到用戶退出了當前H5頁面。

解決思路

解決上面的難點以前，我想講講，統計時間預覽怎麼算，若是我不猜錯，估計不少人都會和我一開始看見需求同樣，什麼統計預覽時間？搞個定時器？這樣會不會很消耗性能？個人代碼會不會跑着跑着就蹦？一連串的疑問。
- 其實統計時間並無那麼難，咱們只須要記錄一次便可，咱們在進入H5頁面時，咱們就new一個時間戳(new Date).getTime()把它保存到全局，如何在要調接口統計時長時，咱們在(new Date).getTime()弄一個時間戳減去進來時保存的時間戳便可獲得一個預覽時間，這裏相減是毫秒，本身轉化下便可。
解決完時間統計問題，咱們要來解決今天的難點問題。
- 解決這兩個難點問題，咱們H5主要使用一個監聽事件visibilitychange，這個時間能夠監聽頁面是否隱藏，下面咱們詳細介紹：

visibilitychange

當其選項卡的內容變得可見或被隱藏時，會在文檔上觸發 visibilitychange (能見度更改)事件。小程序

MDN文檔有些2點注意事項

當 visibleStateState 屬性的值轉換爲 hidden 時，Safari不會按預期觸發visibilitychange；所以，在這種狀況下，您還須要包含代碼以偵聽 pagehide 事件。瀏覽器

出於兼容性緣由，請確保使用 document.addEventListener 而不是window.addEventListener來註冊回調。 Safari <14.0僅支持前者。服務器

重要代碼

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
      // 頁面被顯示
    // backgroundMusic.play();
  } else {
      // 頁面被隱藏
    // backgroundMusic.pause();
  }
});
複製代碼

邏輯思路

全局設置一個變量用於記錄初始時間，當頁面隱藏（例如：切換後臺）監聽到visibilitychange下的document.visibilityState === 'hidden'時，咱們就把時間統計發送到服務器；當document.visibilityState === 'visible'時，咱們又開始新的統計時間，這樣就能夠精準把須要統計的時間完成到服務器。微信
此時新的問題開始出現了，就是嵌套H5後，在ios系統中，直接點擊系統右上角的返回按鈕，是沒法觸發visibilitychange事件的，這就讓咱們很困惑了，有人會提出，那不是能夠監聽關閉瀏覽器或者關閉網站事件，不就能夠解決？我只能說這些都沒法監聽的，你想到的事件基本都不會觸發H5頁面中的因此事件安靜的有點可怕，這種狀況也只有ios纔會出現，安卓手機和鴻蒙手機都不會出現這樣的狀況。markdown
- 爲了解決這種狀況，我思索了好久好久差點把本身腦轉暈，最後想到的解決方案是：
H5嵌套APP

若是嵌套ios的APP裏面，當用戶點擊左上角返回按鈕，由APP生命週期裏調用H5方法，在H5中window裏掛載本身寫好的一個函數，當調用本身掛載的函數時發送統計上傳到服務器；ide

H5嵌套小程序

若是嵌套到小程序的H5，咱們不能這麼寫了，由於小程序沒辦法在頁面銷燬時調用H5頁面的任何東西，這裏不止頁面銷燬調不了H5方法而是任什麼時候候都沒法調用直接調H5裏面的方法，因此這裏咱們須要使用微信提供的一個方法wx.miniProgram.postMessage文檔詳情，咱們應該怎麼合理使用這個方法呢？個人想法是，每此進入須要記錄時間的頁面使用該方法，把須要上傳的參數及時間記錄並賦值給wx.miniProgram.postMessage({data:{}}),如何當用戶點擊小程序原生返回時，咱們能夠在原生裏面寫一個方法用於接收該參數；函數
```
<web-view bindmessage="bindmessage"></web-view>
  // js
  bindmessage(){
  // H5頁面接收發送回來的參數
  }
  wx.miniProgram.postMessage({ data: 'foo' })
  
複製代碼
```

咱們就能夠把拿到的參數直接在小程序內完成發送統計；

總結

其實要解決這些問題也不難，難在怎麼跳出思惟，不能一成不變的認爲只能在H5監聽全部事件或者完成全部操做。回顧一下：咱們使用的主要代碼有

// 在H5頁面中，監聽事件
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
      // 頁面被顯示
    // backgroundMusic.play();
  } else {
      // 頁面被隱藏
    // backgroundMusic.pause();
  }
});
// 用於H5頁面發送給小程序的內容
wx.miniProgram.postMessage({ data: 'foo' });
// 用於iosAPP端調用的方法
window.logData = function() {};
複製代碼

// 小程序原生代碼綁定監聽H5回傳參數
        <web-view bindmessage="bindmessage"></web-view>
複製代碼

bindmessage(){
// H5頁面接收發送回來的參數
}
複製代碼

就這些代碼，咱們就完成咱們想要的效果了。

創做不易，喜歡記得點贊，若有錯誤請評論區留言。