互动广告 | uni-app

属性名	类型	说明
adpid	String	广告位id
open-page-path	String	点击广告后打开的页面路径，详见
v-slot:default="{data, loading, error}"		作用域插槽，详见
@load	EventHandle	加载成功事件
@error	EventHandle	加载失败事件

# `v-slot:default="{data, loading, error}"` 属性说明

属性名	类型	说明
data	Object	广告位数据, {imgUrl }
loading	Boolean	加载状态
error	Object	加载错误, {errCode, errMsg}

# 简单示例

<template>
  <view>
    <!-- 用户点击组件后将打开广告页面，参见属性 open-page-path -->
    <ad-interactive adpid="1000000001" v-slot:default="{data, loading, error}" open-page-path="/pages/ad-interactive-webview/ad-interactive-webview">
      <view v-if="data">
        <!-- 可以自定义此图片，组件提供了默认素材，通过 uni-ad 后台配置 -->
        <image :src="data.imgUrl" style="width: 128px; height: 72px;"></image>
      </view>
    </ad-interactive>
  </view>
</template>

注意：需要添加依赖页面 open-page-path

# 完整示例

<template>
  <view class="content">
    <!-- 用户点击组件后将打开广告页面，参见属性 open-page-path -->
    <ad-interactive adpid="1000000001" v-slot:default="{data, loading, error}" @load="onadload" @error="onaderror" open-page-path="/pages/ad-interactive-webview/ad-interactive-webview">
      <view v-if="loading">Loading</view>
      <view v-if="data">
        <!-- 可以自定义此图片，组件提供了默认素材，通过 uni-ad 后台配置 -->
        <image :src="data.imgUrl" style="width: 128px; height: 72px;"></image>
      </view>
      <view v-if="error">{{error.errMsg}}</view>
    </ad-interactive>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onadload(e) {
      console.log('广告数据加载成功');
    },
    onaderror(e) {
      // 广告加载失败
      console.log("onaderror", e.errCode, e.errMsg);
    }
  }
}
</script>

# open-page-path 页面代码

组件的 open-page-path 属性所需页面，点击广告后将打开此页面

在项目的pages目录上右键，新增 ad-interactive-webview.vue 页面，并复制替换为下面代码

<template>
  <web-view :src="url"></web-view>
</template>

<script>
  export default {
    data() {
      return {
        url: ''
      }
    },
    onLoad(options) {
      if (options && options.url) {
        this.url = decodeURIComponent(options.url);
      }
    }
  }
</script>