hippy必踩坑之元素曝光检测方案

最近我用hippy做波洞动漫项目，在曝光检测上踩过不少坑，问过很多人，事成后也被很多人问过。现在将摸索出来的方案总结一下，方便大家参考。

所谓曝光检测，即是找到某一刻显示在手机屏幕上的元素，一般用来做曝光元素的数据上报。

接下来我从简单到复杂介绍三个曝光检测方案，然而适用范围刚好也是从适用范围小到普遍适用。

方案一：onAppear

方法：

方法很简单直接，在ul的第一层li节点上绑定onAppear事件就行了。当li全部出现在屏幕里的时候，就会触发onAppear事件。

 

  

    
    
我是标题
    
我是描述
  
 

适用情况

如果你的需求满足以下所有情况，则你可以使用本方案：

1. 只需要对第一层li进行曝光检测，不需要对li里面更小的元素进行检测。
2. 接受整个li都暴露在屏幕里时才触发曝光事件，而不是露出一点点就触发事件。
3. 元素在离开屏幕之前只触发一次曝光事件。
4. hippy版本要在2.1以上。

在我的项目中，第一层li元素对应的是上图中的大模块，产品希望里面的每个作品进入屏幕时都要进行曝光上报，因此就不合适使用该方案了。

方案二： measureInWindow

方法：

方法同样简单直接，先用该方法获取元素的坐标和宽高值，再通过屏幕宽高、页面偏移量判断是否在该坐标是否在屏幕里。

const scrollPosi = await Vue.Native.measureInWindow(this.$refs.tabWrapInner);
// scrollPosi 里包含了元素的left、right、width、height等信息。

这个方案同样不推荐，因为这个是一问一答，效率很低，性能很差，不适合频繁调用。

方案三： onLayout + scroll （最终选用方案）

方法：

1. ul的第一层li元素上绑定onLayout事件，在渲染完成的时候会触发该事件，此时可以获取该li的坐标。
2. 自行计算li里的元素在该li里的相对位置，得到li里各个小元素的坐标。另外各个小元素可以编一个曝光时的方法。
3. 在ul上绑定scroll事件，事件触发时计算出曝光的坐标范围是大于页面偏移量offsetY，小于页面偏移量offsetY与屏幕高度Vue.Native.Dimensions.window.height之和。
4. 第一层li曝光筛选：遍历一遍所有的第一层li，将坐标在屏幕里的记下来。
5. li内小元素曝光检测：遍历曝光的li里的所有小元素，当坐标在屏幕里时，运行该小元素曝光时的方法，以此完成各种曝光数据上报等业务逻辑。

适用情况

经过项目的实践，该方法适合任何情形下的曝光检测，而且也是准确有效的。

项目实践

接下来我以最近参与的项目来介绍下如何使用方案三进行曝光上报。
继续以文章开头的手机界面图为例，下面ul可以看作是整个滚动的列表，li则是“波洞君为你推荐”的模块，li里的小元素可以看作是模块里的单个作品。

具体操作如下：

1. 列表ul上绑定scroll事件，li上绑定onLayout事件。

2. 编写li上的onLiLayout事件及获取li的坐标、数据和方法。

  private onLiLayout(e) {
    // 获取li节点的坐标、数据、事件
    const compData = this.getCompData(e);
    const { pageId } = this.$route.meta;
    const { index } = e.target;
    // 计算节点内的小元素的坐标
    if (compData.calItemsPos) {
      compData.calItemsPos();
    }
    // heightOfComponents是一个保存各个li的数据的变量，用于后续检查li的坐标是否在屏幕里，以及获取li的数据
    this.heightOfComponents[index] = compData;
    // 手动触发一次曝光检测方法，因为在切换tab时，切换tab后的页面要显示之前停留的位置的内容，此时需要再对这些内容曝光一次。页面刚加载时也可以这样手动做一次曝光检测。由于后面有做避免重复上报的操作，所以手动触发不会造成重复上报。
    // this.pageOffsetYMap记录每个页面的最新滚动坐标
    this.exposureReport(this.pageOffsetYMap[pageId]);
  }

  private getCompData(e) {
    const { top } = e;
    const el = _get(e, 'target.childNodes[2].__vue__');
    const list = _get(el, 'list');
    // 获取节点的数据曝光方法，当检测到曝光时调用该方法
    const showItemReport = _get(el, 'showItemReport');
    // 节点内的小元素的坐标计算方法
    const calItemsPos = _get(el, 'calItemsPos');
    return {
      top,
      list,
      showItemReport,
      calItemsPos
    };
  }

3. 编写ul上的onScroll事件及曝光方法

  private onScroll($event): void {
    const { pageId } = this.$route.meta;
    // this.pageOffsetYMap记录每个页面的最新滚动坐标
    this.pageOffsetYMap[pageId] = $event.offsetY;
    // 传入当前页面偏移量$event.offsetY，进行曝光检测
    this.exposureReport($event.offsetY);
  }

  private exposureReport(screenTop) {
    try {
      // 获取可视范围内的li组件
      const componentsInWindow = Object.keys(this.heightOfComponents).filter(index => {
        const { top } = this.heightOfComponents[index];
        return screenTop + this.$windowHeight >= top; 
      });
      // 只对曝光的li组件里的每个小元素进行曝光检测，减少计算量
      for (let i = 0, ilen = componentsInWindow.length; i < ilen; i++) {
        const showComp = this.heightOfComponents[componentsInWindow[i]];
        const { list } = showComp;
        if (list) {
          for (let j = 0, jlen = list.length; j < jlen; j++) {
            // 小元素的坐标 = li组件的坐标 + 小元素在li组件里的相对坐标
            const top = showComp.top + list[j].top;
            // 当小元素的坐标大于页面偏移量，小于页面偏移量与页面高度之和，即认为他曝光在屏幕里了
            // 假如小元素有left变量，是因为他在一个可以横向滚动的列表中，此时还需要判断left的坐标要小于屏幕宽度，这里只判断大列表竖向滚动时是否曝光，小元素的横向曝光在li组件里再判断
            if (
              screenTop <= top &&
              screenTop + this.$windowHeight >= top &&
              (list[j].left === undefined || list[j].left < this.$windowWidth)
            ) {
               // 触发小元素的曝光事件
              showComp.showItemReport(list[j]);
            }
          }
        }
      }
    } catch (e) {
      console.log(`exposureReport err ${e?.message}`);
    }
  }

4. 编写每个小元素里的坐标计算方法及曝光事件

  // 小元素坐标计算方法
  calItemsPos(): void {
    const positionData = rem.evaluateAll({
      header: {
        height: 40 + 27,
      },
      item: {
        height: 388 + 40,
      },
    });
    const hasHeader = this.title !== '';
    this.list.forEach((item, index) => {
      // 相对top值的计算包括li模块上是否有标题，以及这个作品在第几行
      item.top =
        (hasHeader ? parseInt(positionData.header.height) : 0) + positionData.item.height * Math.floor(index / 3);
    });
  }
  
  // 小元素曝光事件
  showItemReport(item, options): void {
    // this.hasReportIds 用于记录该小元素是否已曝光上报过，避免重复上报
    if (this.hasReportIds.indexOf(item.id) === -1) {
      this.hasReportIds.push(item.id);
      this.$report({
        ...commonReportData.comicWorksShow,
        ret_id: item.id,
      });
    }
  }

总结

从多个解决方案中可以看出，hippy官方还是有从简单到复杂的情况去认真考虑过如何做好曝光数据上报，另外也做了一个和方案三相似的demo。如果大家有更好的上报方案，欢迎留言分享。