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页面接收发送回来的参数
}
复制代码

就这些代码，咱们就完成咱们想要的效果了。

创做不易，喜欢记得点赞，若有错误请评论区留言。