最近我用hippy做波洞動漫項目，在曝光檢測上踩過不少坑，問過很多人，事成后也被很多人問過?，F(xiàn)在將摸索出來的方案總結(jié)一下，方便大家參考。

所謂曝光檢測，即是找到某一刻顯示在手機屏幕上的元素，一般用來做曝光元素的數(shù)據(jù)上報。

接下來我從簡單到復雜介紹三個曝光檢測方案，然而適用范圍剛好也是從適用范圍小到普遍適用。

方案一：onAppear

方法：

方法很簡單直接，在ul的第一層li節(jié)點上綁定onAppear事件就行了。當li全部出現(xiàn)在屏幕里的時候，就會觸發(fā)onAppear事件。

 <ul>
  <li onAppear="onAppearEventHandler">
    <img src="" />
    <h2>我是標題</h2>
    <p>我是描述</p>
  </li>
 </ul>

適用情況

如果你的需求滿足以下所有情況，則你可以使用本方案：

1. 只需要對第一層li進行曝光檢測，不需要對li里面更小的元素進行檢測。
2. 接受整個li都暴露在屏幕里時才觸發(fā)曝光事件，而不是露出一點點就觸發(fā)事件。
3. 元素在離開屏幕之前只觸發(fā)一次曝光事件。
4. hippy版本要在2.1以上。

在我的項目中，第一層li元素對應的是上圖中的大模塊，產(chǎn)品希望里面的每個作品進入屏幕時都要進行曝光上報，因此就不合適使用該方案了。

方案二： measureInWindow

方法：

方法同樣簡單直接，先用該方法獲取元素的坐標和寬高值，再通過屏幕寬高、頁面偏移量判斷是否在該坐標是否在屏幕里。

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

這個方案同樣不推薦，因為這個是一問一答，效率很低，性能很差，不適合頻繁調(diào)用。

方案三： onLayout + scroll （最終選用方案）

方法：

1. ul的第一層li元素上綁定onLayout事件，在渲染完成的時候會觸發(fā)該事件，此時可以獲取該li的坐標。
2. 自行計算li里的元素在該li里的相對位置，得到li里各個小元素的坐標。另外各個小元素可以編一個曝光時的方法。
3. 在ul上綁定scroll事件，事件觸發(fā)時計算出曝光的坐標范圍是大于頁面偏移量offsetY，小于頁面偏移量offsetY與屏幕高度Vue.Native.Dimensions.window.height之和。
4. 第一層li曝光篩選：遍歷一遍所有的第一層li，將坐標在屏幕里的記下來。
5. li內(nèi)小元素曝光檢測：遍歷曝光的li里的所有小元素，當坐標在屏幕里時，運行該小元素曝光時的方法，以此完成各種曝光數(shù)據(jù)上報等業(yè)務(wù)邏輯。

適用情況

經(jīng)過項目的實踐，該方法適合任何情形下的曝光檢測，而且也是準確有效的。

項目實踐

接下來我以最近參與的項目來介紹下如何使用方案三進行曝光上報。
繼續(xù)以文章開頭的手機界面圖為例，下面ul可以看作是整個滾動的列表，li則是“波洞君為你推薦”的模塊，li里的小元素可以看作是模塊里的單個作品。

具體操作如下：

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

<ul @scroll="onScroll($event)">
  <li
    v-for="(item, index) in renderData"
    :key="index"
    @layout="onLiLayout($event)"
  >
</ul>

2. 編寫li上的onLiLayout事件及獲取li的坐標、數(shù)據(jù)和方法。

  private onLiLayout(e) {
    // 獲取li節(jié)點的坐標、數(shù)據(jù)、事件
    const compData = this.getCompData(e);
    const { pageId } = this.$route.meta;
    const { index } = e.target;
    // 計算節(jié)點內(nèi)的小元素的坐標
    if (compData.calItemsPos) {
      compData.calItemsPos();
    }
    // heightOfComponents是一個保存各個li的數(shù)據(jù)的變量，用于后續(xù)檢查li的坐標是否在屏幕里，以及獲取li的數(shù)據(jù)
    this.heightOfComponents[index] = compData;
    // 手動觸發(fā)一次曝光檢測方法，因為在切換tab時，切換tab后的頁面要顯示之前停留的位置的內(nèi)容，此時需要再對這些內(nèi)容曝光一次。頁面剛加載時也可以這樣手動做一次曝光檢測。由于后面有做避免重復上報的操作，所以手動觸發(fā)不會造成重復上報。
    // 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');
    // 獲取節(jié)點的數(shù)據(jù)曝光方法，當檢測到曝光時調(diào)用該方法
    const showItemReport = _get(el, 'showItemReport');
    // 節(jié)點內(nèi)的小元素的坐標計算方法
    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 {
      // 獲取可視范圍內(nèi)的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;
            // 當小元素的坐標大于頁面偏移量，小于頁面偏移量與頁面高度之和，即認為他曝光在屏幕里了
            // 假如小元素有l(wèi)eft變量，是因為他在一個可以橫向滾動的列表中，此時還需要判斷l(xiāng)eft的坐標要小于屏幕寬度，這里只判斷大列表豎向滾動時是否曝光，小元素的橫向曝光在li組件里再判斷
            if (
              screenTop <= top &&
              screenTop + this.$windowHeight >= top &&
              (list[j].left === undefined || list[j].left < this.$windowWidth)
            ) {
               // 觸發(fā)小元素的曝光事件
              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,
      });
    }
  }

總結(jié)

從多個解決方案中可以看出，hippy官方還是有從簡單到復雜的情況去認真考慮過如何做好曝光數(shù)據(jù)上報，另外也做了一個和方案三相似的demo。如果大家有更好的上報方案，歡迎留言分享。