ad | uni-app-x

# ad

ad组件是一种展现在页面中间的广告。它可以用于banner广告，也可以用于信息流广告。

uni-ad的业务介绍：详见

上述文档是uni-app和uni-app x的通用文档，如遇到uni-app x不一致的文档，需以uni-app x文档为准。

开通广告，需在 https://uniad.dcloud.net.cn/ 管理后台开通。

开通时需要进行开发者认证和应用资质审核。

获取和使用广告位id

开通uni-ad后，在uni-ad后台给应用创建信息流广告位后，需要拿到广告位id（adpid），传入ad组件的属性 adpid中。

配置广告模块

App平台在manifest中配置添加三方广告SDK。具体配置可参考文档。

打正式包或自定义基座后可生效。标准基座包含的是测试广告位，无法为你产生收益。

# 兼容性

Web	Android	iOS
x	4.31	4.31

# 属性

名称

类型

默认值

兼容性

描述

adpid

string

广告位id，在uniAD官网申请广告位

@load

(event: UniEvent) => void

广告加载成功的回调

@close

(event: UniEvent) => void

广告关闭的回调

@error

(e:UniAdErrorEvent) => void

广告加载失败的回调

# 事件

# UniAdErrorEvent

# UniAdErrorEvent 的属性值

名称

类型

必填

默认值

兼容性

描述

detail

IUniAdError

是

名称	类型	必备	默认值	兼容性	描述
errCode	number	是	-	-	错误码 - -5001 广告位标识adpid为空，请传入有效的adpid - -5002 无效的广告位标识adpid，请使用正确的adpid - -5003 广告位未开通广告，请在广告平台申请并确保已审核通过 - -5004 无广告模块，打包时请配置要使用的广告模块 - -5005 广告加载失败，请稍后重试 - -5006 广告已经展示过了，请重新加载 - -5007 广告不可用或已过期，请重新请求 - -5008 广告不可用或已过期，请重新请求 - -5009 广告类型不符，请检查后再试 - -5011 打包或开通的渠道，不支持此类型广告 - -5013 广告播放失败，请重新加载
errSubject	string	是	-	-	统一错误主题（模块）名称
data	any	否	-	-	错误信息中包含的数据
cause	Error	否	-	-	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	-	-

bubbles

boolean

是

是否冒泡

cancelable

boolean

是

是否可以取消

type

string

是

事件类型

target

UniElement

否

触发事件的组件

currentTarget

UniElement

否

当前组件

timeStamp

Long

是

事件发生时的时间戳

# UniAdErrorEvent 的方法

名称	类型	必填	默认值	兼容性	描述
stopPropagation	() => void	是	-	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	-	阻止当前事件的默认行为

# 子组件

不可以嵌套组件

# Tips

uni-app x 标准基座信息流广告测试广告位id为1111111111。正式开发需配置自己的广告位id，并且打包自定义基座后生效。
<ad> 组件测试广告位是上图下文，uni-ad后台申请的广告位默认左图右文。
信息流广告不需要设置height属性，广告渲染成功之后会自动撑开。

# 示例

hello uni-app x

该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验

<template>
  <view>
    <page-head title="信息流广告"></page-head>
    <ad adpid="1111111111" style="width: 100%;" @load="loadFun" @error="errorFun"></ad>
    <view v-if="tips" class="uni-center">信息流广告加载失败，请退出当前页面重试。</view>
    <button @click="pushList">列表-信息流</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tips: false
      }
    },
    methods: {
      pushList(){
        uni.navigateTo({
        	url: '/pages/component/ad/list-view-ad',
        })
      },
      loadFun() {
        uni.showToast({
          position: "bottom",
          title: "信息流广告加载成功"
        })
      },
      errorFun() {
        this.tips = true;
      }
    }
  }
</script>

<style>

</style>