互动广告 | uni-app官网

# 互动广告

# 简介

互动广告是DCloud联合三方服务商为开发者提供新的广告场景增值服务。

平台差异说明

App	Web	微信小程序	支付宝小程序	百度小程序	抖音小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
x	√(3.6.11+)	√(3.5.5+)	x	x	x	x	x	x	x	x

开通配置广告

开通广告步骤详情

注意

3.6.11+ 支持Web平台。开通方式不是单独开通，而是需要开启 App 基础广告，收益报表在基础广告里看。如未在uniad后台开通，又在界面上使用了本组件，会显示DCloud公益广告。
在和Web平台不需要设置广告位属性 adpid

# 语法

<ad-interactive></ad-interactive>

属性说明

属性名	类型	说明
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>