# 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 | HarmonyOS |
|---|---|---|---|---|
| x | 4.41 | 4.31 | 4.31 | x |
# 属性
| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|
| adpid | string | 广告位id，在uniAD官网申请广告位 | ||
| unit-id | string | (string) 广告单元id，可在小程序管理后台的流量主模块新建 | ||
| ad-intervals | number | (number) 广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新） | ||
| ad-type | string | (string) 广告类型，默认为展示banner，可通过设置该属性为 video展示视频广告, grid为格子广告 | ||
| ad-theme | string | (string) | ||
| @load | (event: UniEvent) => void | 广告加载成功的回调 | ||
| @close | (event: UniEvent) => void | 广告关闭的回调 | ||
| @error | (e:UniAdErrorEvent) => void | 广告加载失败的回调 | ||
| @clicked | Event |
# 事件
# UniAdErrorEvent
# UniAdErrorEvent 的属性值
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| detail | IUniAdError | 是 | |||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||
| 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 alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验
<template>
<view>
<page-head title="信息流广告"></page-head>
<!-- #ifndef MP -->
<ad adpid="1111111111" style="width: 100%;" @load="loadFun" @error="errorFun"></ad>
<!-- #endif -->
<!-- #ifdef MP -->
<view class="uni-center">微信小程序平台暂不支持测试广告位，需要开通uni-ad后可测试</view>
<!-- #endif -->
<view v-if="tips" class="uni-center">信息流广告加载失败，请退出当前页面重试。</view>
<button @click="pushList">列表-信息流</button>
<button @click="pushVideoAd">视频贴片-非全屏</button>
<button @click="pushVideoAdL">视频贴片-横向全屏</button>
<button @click="pushVideoAdP">视频贴片-竖向全屏</button>
</view>
</template>
<script setup lang="uts">
const tips = ref(false)
const pushList = () => {
uni.navigateTo({
url: '/pages/component/ad/list-view-ad',
})
}
const pushVideoAd = () => {
uni.navigateTo({
url: '/pages/component/ad/video-ad',
})
}
const pushVideoAdL = () => {
uni.navigateTo({
url: '/pages/component/ad/landscape-video-ad',
})
}
const pushVideoAdP = () => {
uni.navigateTo({
url: '/pages/component/ad/portrait-video-ad',
})
}
const loadFun = () => {
uni.showToast({
position: "bottom",
title: "信息流广告加载成功"
})
}
const errorFun = () => {
tips.value = true;
}
</script>
