腾讯优量汇接入的问题

1. h5接入插屏广告时，广告位上copy的代码是不能直接用的

copy的代码：

<script type="text/javascript">
    // H5 SDK 在线文档地址：http://developers.adnet.qq.com/doc/web/js_develop
    // 全局命名空间申明TencentGDT对象
    window.TencentGDT = window.TencentGDT || [];
    
    // 广告初始化
    window.TencentGDT.push({
        app_id: '1201538404', // {String} - appid - 必填
        placement_id: '4034072990480276', // {String} - 广告位id - 必填
        type: 'interstitial', // {String} - 原生广告类型 - 必填
        muid_type: '1', // {String} - 移动终端标识类型，1：imei，2：idfa，3：mac号 - 选填
        muid: '******', // {String} - 加密终端标识，详细加密算法见API说明 -  选填
        count: 1, // {Number} - 拉取广告的数量，默认是3，最高支持10 - 选填
        onComplete: function(res) {
            if (res && res.ret === 0) {
                // 原生模板广告位调用 window.TencentGDT.NATIVE.renderAd(res[0], 'containerId') 进行模板广告的渲染
                // res[0] 代表取广告数组第一个数据
                TencentGDT.NATIVE.renderAd(res.data[0]);
            } else {
                // 加载广告API，如广告回调无广告，可使用loadAd再次拉取广告
                // 注意：拉取广告频率每分钟不要超过20次，否则会被广告接口过滤，影响广告位填充率
                setTimeout(function() {
                    window.TencentGDT.NATIVE.loadAd(placement_id)
                }, 3000)
            }
        }
    });
    
    // H5 SDK接入全局只需运行一次
    (function() {
        var doc = document,
        h = doc.getElementsByTagName('head')[0],
        s = doc.createElement('script');
        s.async = true;
        s.src = '//qzs.qq.com/qzone/biz/res/i.js';
        h && h.insertBefore(s, h.firstChild);
    })();
</script>

实际起作用的：

  window.TencentGDT = window.TencentGDT || [];

    // 广告初始化
    window.TencentGDT.push({
      app_id: '1201538404', // {String} - appid - 必填
      placement_id: '4034072990480276', // {String} - 广告位id - 必填
      // type: 'interstitial', // {String} - 原生广告类型 - 必填
      type: 'native',
      display_type: 'interstitial', // 播放类型：插屏
      // muid_type: '1', // {String} - 移动终端标识类型，1：imei，2：idfa，3：mac号 - 选填
      // muid: '******', // {String} - 加密终端标识，详细加密算法见API说明 -  选填
      count: 3, // {Number} - 拉取广告的数量，默认是3，最高支持10 - 选填
      onComplete: function (res) {
        if (res && res.ret === 0) {
          // 原生模板广告位调用 window.TencentGDT.NATIVE.renderAd(res[0], 'containerId') 进行模板广告的渲染
          // res[0] 代表取广告数组第一个数据
          TencentGDT.NATIVE.renderAd(res.data[0]);
        } else {
          // 加载广告API，如广告回调无广告，可使用loadAd再次拉取广告
          // 注意：拉取广告频率每分钟不要超过20次，否则会被广告接口过滤，影响广告位填充率
          setTimeout(function () {
            window.TencentGDT.NATIVE.loadAd(placement_id);
          }, 3000);
        }
      },
    });

    // H5 SDK接入全局只需运行一次
    (function () {
      var doc = document,
        h = doc.getElementsByTagName('head')[0],
        s = doc.createElement('script');
      s.async = true;
      s.src = 'https://qzs.gdtimg.com/union/res/union_sdk/page/h5_sdk/i.js';
      h && h.insertBefore(s, h.firstChild);
    })();

所以直接从广告位上copy的是错的

2. h5接入banner广告时，广告位上copy的代码上有个 containerid: 'banner_2_0'，这个广告容器需要自己的页面上定义，才能知道在哪里展示广告。

<script type="text/javascript">
    // 腾讯广告全局申明只需运行一次
    window.TencentGDT = window.TencentGDT || [];

    // 广告示例声明
    TencentGDT.push({
        app_id: '1201538404',
        placement_id: '9034586239740871', // 广告位id，请从联盟平台广告位获取
        type: 'native', // 广告类型
        display_type: 'banner', // 广告播放类型: banner广告
        carousel: 3000, // 轮播时间，> 3000数字类型，否则轮播会被取消
        containerid: 'banner_2_0', // 广告容器
        onComplete: function(res) {
            if (res.ret == 0) {
                console.log('广告播放成功');
            } else {
                console.log('广告播放失败');
            }
        }
    });
    
    // H5 SDK接入全局只需运行一次
    (function () {
        var doc = document,
        h = doc.getElementsByTagName('head')[0],
        s = doc.createElement('script');
        s.async = true;
        s.src = '//qzs.qq.com/qzone/biz/res/i.js';
        h && h.insertBefore(s, h.firstChild);
    })();
</script>

    <q-page-container class="bg-primary">
      <keep-alive exclude="DetailLayout">
        <router-view />
      </keep-alive>
    </q-page-container>


    <div id="banner_2_0"></div>

　　

3. 模版广告有个containId，初始化广告需要确保页面已经渲染完能找到这个containId，否则广告显示失败。一个信息流广告搞了好久无法播放发现最后是因为把containId的div放在了v-if里，这个v-if依赖listData，所以如果list没返回这个dom应该是没有初始化的。因为list返回滞后结果就找不到containId了。

  <div v-if="listData.length === 0" class="column items-center justify-center absolute-full">
      <div class="clo-4 YL__no_data">
        <q-img
          src="https://cheap-david.oss-cn-hangzhou.aliyuncs.com/static/no-data.png"
          spinner-color="white"
        >
        </q-img>
        <div class="text-subtitle2 text-center text-grey">~空空如也~</div>
      </div>
      <div class="col-3"></div>
    </div>
    <div v-else ref="scrollTargetRef">
      <!--   当使用:scroll-target 时，被指定的container必须要有 style="overflow: auto; max-height: 3000px" -->
      <q-infinite-scroll @load="onLoad" :offset="250" :initial-index="1" :disable="disable">
        <q-pull-to-refresh @refresh="refresh" no-mouse>
          <div id="flowAdverYunpanId"></div>
          <q-list dense separator class="bg-secondary">
            <div
              v-bind:key="item.id"
              v-for="item in listData"
              class="bg-primary"
              v-bind:class="{ 'q-pb-xs': !isBigScreen }"
            >
              <!-- 这里q-item 不加to，因为加上to会导致pc端整个变成可点击 -->
              <q-item
                dense
                v-ripple
                clickable
                @click="itemClick(item.id)"
                class="bg-secondary q-pt-sm"
              >
 

     window.TencentGDT.push({
        app_id: '1201538404', // {String} - appid - 必填
        placement_id: '2064887249833651', // {String} - 广告位id - 必填
        type: 'native', // {String} - 原生广告类型 - 必填
        // muid_type: '1', // {String} - 移动终端标识类型，1：imei，2：idfa，3：mac号 - 选填
        // muid: '******', // {String} - 加密终端标识，详细加密算法见API说明 -  选填
        count: 2, // {Number} - 拉取广告的数量，默认是3，最高支持10 - 选填
        onComplete: function (res) {
          if (res && res.constructor === Array) {
            // 原生模板广告位调用 window.TencentGDT.NATIVE.renderAd(res[0], 'containerId') 进行模板广告的渲染
            // res[0] 代表取广告数组第一个数据
            // containerId：广告容器ID
            window.TencentGDT.NATIVE.renderAd(res[0], 'flowAdverYunpanId');
            window.adver = res[0];
            console.log('信息流广告-2');
          } else {
            // 加载广告API，如广告回调无广告，可使用loadAd再次拉取广告
            // 注意：拉取广告频率每分钟不要超过20次，否则会被广告接口过滤，影响广告位填充率
            setTimeout(function () {
              window.TencentGDT.NATIVE.loadAd(placement_id);
            }, 3000);
          }
        },
      });
    

因为 <div id="flowAdverYunpanId"></div> 写在了 v-if="listData.length === 0"，经document.getElementById("flowAdverYunpanId")测试，确实取不到这个id

正确的做法应该把这个div移到v-if的外层。

  <q-page class="bg-primary">
    <div id="flowAdverYunpanId"></div>

    <div v-if="listData.length === 0" class="column items-center justify-center absolute-full">
      <div class="clo-4 YL__no_data">
        <q-img
          src="https://cheap-david.oss-cn-hangzhou.aliyuncs.com/static/no-data.png"
          spinner-color="white"
        >
        </q-img>
        <div class="text-subtitle2 text-center text-grey">~空空如也~</div>
      </div>
      <div class="col-3"></div>
    </div>
    <div v-else ref="scrollTargetRef">
      <!--   当使用:scroll-target 时，被指定的container必须要有 style="overflow: auto; max-height: 3000px" -->
      <q-infinite-scroll @load="onLoad" :offset="250" :initial-index="1" :disable="disable">
        <q-pull-to-refresh @refresh="refresh" no-mouse>
          <q-list dense separator class="bg-secondary">

 注意：

    // H5 SDK接入全局只需运行一次
    (function () {
        var doc = document,
        h = doc.getElementsByTagName('head')[0],
        s = doc.createElement('script');
        s.async = true;
        s.src = '//qzs.qq.com/qzone/biz/res/i.js';
        h && h.insertBefore(s, h.firstChild);
    })();

这段一定不能运行两次