广告-信息流的使用

1、模板广告 1093+

开发者不用自行对广告样式进行编辑和渲染，模板广告组件在创建后会自动拉取广告数据并显示。
使用及其简单：

<com-ad-yoy
    space-key="{{spaceKey}}"
    page-name="{{pageName}}"
    >
</com-ad-yoy>

space-key：广告位key（例如：main_top_ad，由产品定义，一般由产品经理定义广告位名称）。
page-name：页面名 或者 文件名 或者 自定义的名字 （由前端定义）

2、信息流广告自渲染 1094+

较为复杂，建议先简单看看各个厂商广告文档，再继续接下来的阅读。
我根据不同场景，设计了两种自渲染模式。（两种模式还需要完善，文档将会持续更新）

1、先来了解一下标签属性的含义吧：

<com-ad-yoy
  space-key="{{spaceKey}}"
  page-name="{{pageName}}"
  all-type="0"
  adisout="1"
  @adselfshow="adselfshow"
  @adclick="popreturn"
  @aderror="aderror"
  id="com-ad-yoy"
  >
</com-ad-yoy>

space-key、page-name和模板广告一样。
all-type：自渲染模板类型。空(不填写该属性)：使用模板广告(及之前介绍的模板广告)。0：抛出数据，在标签内自渲染。1：也是抛出数据，在标签内自渲染，与0有区别：不需要自己写广告点击域。2~无穷：sdk自定义自渲染模板（暂时没有自渲染模板）
adisout：自渲染模式(默认0，仅在all-type为0模式下生效)。0：抛出数据自渲染，1：抛出数据自渲染并且需要自己调用上报接口。稍后会详细说明。
@adselfshow：广告数据回调函数
@adclick：广告点击回调函数
@aderror：广告获取失败回调函数
id：用于获取组件信息（和网站id属性一样）

2、adisout为0的模式（默认为0可不填写该属性）

相对来说较为简单

<!-- all-type="0" 需要自己写点击域 -->
<com-ad-yoy
  space-key="{{spaceKey}}"
  page-name="{{pageName}}"
  all-type="0"
  @adselfshow="adselfshow"
>
  <!-- 自己写的广告样式 -->
  <ad-clickable-area>
    <text>{{sdselfshow.title}} 按钮</text>
  </ad-clickable-area>
</com-ad-yoy>

<!-- all-type="1" 不需要自己写点击域 -->
<com-ad-yoy
  space-key="{{spaceKey}}"
  page-name="{{pageName}}"
  all-type="1"
  @adselfshow="adselfshow"
>
  <!-- 自己写的广告样式 -->
  <text>{{sdselfshow.title}} 按钮</text>
</com-ad-yoy>

<script>
export default {
    data() {
        return {
            sdselfshow: null,
            spaceKey: 'dp_welfare_po****',
            pageName: 'repor****',
        }
    },
    // 自渲染广告，获取广告数据
    adselfshow(evt) {
        console.log('adselfshow', evt.detail)
        this.sdselfshow = evt.detail
    }
    // 错误回调函数
    // 错误回调就不举例了，根据项目自己调用就行
}
</script>

<ad-clickable-area>这个标签是基座自带的，不需要引入（广告厂商文档有说明，就不详细说了）需要注意的是开发环境会报错误，需要在正式环境才正常
原理：使用了slot，把<com-ad-yoy>里的内容插入了<ad>组件里。

3、adisout为1的模式

稍微赋值一点点，当写法更加自由

<com-ad-yoy
    space-key="{{spaceKey}}"
    page-name="{{pageName}}"
    all-type="0"
    adisout="1"
    @adselfshow="adselfshow"
    @adclick="popreturn(1)"
    @aderror="aderror"
    id="com-ad-yoy"
    >
</com-ad-yoy>

<!-- 自己写的广告样式 -->
<!-- 可多次使用广告数据，在页面不同地方使用广告数据 -->
<!-- 需要注意的是：显示和错误回调在一个ad里写就行，不然会重新重复上报问题 -->
<block if="sdselfshow">
    <ad
        class="adadad"
        adid="{{sdselfshow.adId}}"
        @adclick="reportAdClick"
        @adshow="reportAdShow"
        @error="reportAdReq('fail')"
        >
        <ad-clickable-area>
            <block for="(index,item) in sdselfshow.imgUrlList" if="index==0">
                <image src="{{item}}"></image>
            </block>
        </ad-clickable-area>
    </ad>
</block>
<block if="sdselfshow">
    <ad
        class="adadad"
        adid="{{sdselfshow.adId}}"
        @adclick="reportAdClick"
        >
        <ad-clickable-area class="but_cklq">
            <image src="{{but_img}}"></image>
        </ad-clickable-area>
    </ad>
</block>

<script>
export default {
  data() {
    return {
        sdselfshow: null,
        spaceKey: 'dp_welfare_*****',
        pageName: 'product****',
      }
    }
  },
    // 自渲染广告
    adselfshow(evt){
        console.log('adselfshow product-kaihongbao', evt.detail)
        this.sdselfshow = evt.detail
    },
    // 广告显示回调上报
    reportAdShow(){
        this.$child('com-ad-yoy').reportAdShow()
    },
    // 广告点击回调上报（小米调用这个函数能主动触发广告点击）
    reportAdClick(){
        this.$child('com-ad-yoy').reportAdClick()
    },
    // 广告获取失败回调上报
    reportAdReq(msg){
        this.$child('com-ad-yoy').reportAdReq(msg)
    },
}
</script>

每次需要广告点击的地方都需要使用<ad>组件包裹一下，并使用回调函数进行上报。
这种模式的写法就不局限于广告内容必须写在<com-ad-yoy>标签内，写法更加自由，但需要调用上报函数。