Skip to content

U
unidocs-zh

没有积善却想登上天堂 / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 0
Fork 0
U
unidocs-zh

体验新版 GitCode，发现更多精彩内容 >>

提交 9fb51bb9 编写于 作者: H hdx
浏览文件
操作

uni-ad: 将以前的文档迁移至新地址

上级 194ea85e
展开全部 隐藏空白更改
内联 并排
Showing with 9 addition and 1598 deletion
docs/component/ad-content-page.md
浏览文件 @ 9fb51bb9
......@@ -12,90 +12,9 @@
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|✓|x|x|x|x|x|x|x|x|x|x|
**`仅nvue支持` (iOS-hx3.4.2支持、Android-hx3.1.17支持)**
**开通配置广告**
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
注意：打包时必须选择快手内容联盟。
**属性说明**
|属性名|类型|默认值|说明|平台差异|
|:-|:-|:-|:-|:-|
|adpid|String||uni-AD App广告位id，在[uni-AD官网](https://uniad.dcloud.net.cn/)申请广告位|仅nvue支持|
|@load|EventHandle||广告加载成功的回调||
|@error|EventHandle||广告加载失败的回调||
|@start|EventHandle|开始播放时触发|3.4.3+|
|@pause|EventHandle|暂停时触发|3.4.3+|
|@resume|EventHandle|恢复播放时触发|3.4.3+|
|@complete|EventHandle|播放完成时触发|3.4.3+|
**@start @pause @resume @complete回调参数说明**
|字段名|说明|
|:-|:-|
|id|唯一标识|
|type|0未知类型 1 普通信息流 2 sdk内部广告 3第三方广告 4 直播|
|duration|视频总时长|
HBuilder 基座的测试广告位 `adpid` 为 `1111111112`
**示例：**
```html
<template>
<view class="content">
<ad-content-page class="ad-content-page" ref="adContentPage" adpid="1111111112" @load="onadload" @error="onaderror"></ad-content-page>
</view>
</template>
<script>
export default {
data() {
return {
title: 'ad-content-page'
}
},
onShow() {
this.$nextTick(() => {
// 需要在页面显示时调用广告组件的 show 方法
this.$refs.adContentPage.show();
})
},
onHide() {
// 需要在页面隐藏时调用广告组件的 hide 方法停止广告内容的声音
this.$refs.adContentPage.hide();
},
methods: {
onadload(e) {
console.log("onadload",e);
},
onaderror(e) {
console.log("onaderror",e);
}
}
}
</script>
<style>
.content {
flex: 1
}
.ad-content-page {
flex: 1
}
</style>
```
**注意**
- 需要在页面隐藏时调用组件的 `hide` 方法以停止广告内容的声音
- 3.4.17+ iOS平台 因广告商限制，调用 `show` 或 `hide` 方法需要申请通过后有效，详情咨询 `uniad@dcloud.io`
文档已迁移至 [短视频内容联盟广告](https://uniapp.dcloud.net.cn/uni-ad/ad-content-page.html)
docs/component/ad-draw.md
浏览文件 @ 9fb51bb9
......@@ -28,122 +28,4 @@
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
**属性说明**
|属性名|类型|默认值|说明|平台差异|
|:-|:-|:-|:-|:-|
|data|Object|可选|广告数据，通过 plus.ad.getDrawAds (参考示例代码)，设置后adpid将无效|App|
|adpid|String||uni-AD App广告位id，在[uni-AD官网](https://uniad.dcloud.net.cn/)申请广告位|App|
|@load|EventHandle||广告加载成功的回调||
|@error|EventHandle||广告加载失败的回调，event.detail = {errCode: }||
**注意**
- HBuilderX2.8+版本Android平台更新穿山甲（今日头条）广告SDK后不再支持x86类型CPU，无法运行到x86类型cpu的模拟器。
- HBuilderX标准基座真机运行测试draw信息流广告位标识（adpid）为：1507000690
**@error 错误码**
- App端聚合的穿山甲(iOS)：[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=16&docId=5de8d574b1afac00129330d5&osType=ios)
- App端聚合的穿山甲(Android)：[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=4&docId=5de8d9b925b16b00113af0ed&osType=android)
- App端聚合的广点通(iOS)：[错误码](https://developers.adnet.qq.com/doc/ios/union/union_debug#%E9%94%99%E8%AF%AF%E7%A0%81)
- App端聚合的广点通(Android)：[错误码](https://developers.adnet.qq.com/doc/android/union/union_debug#sdk%20%E9%94%99%E8%AF%AF%E7%A0%81)
**示例：**
示例1
```html
<template>
<!-- 仅nvue页面支持 -->
<!-- 必须指定ad-draw的宽度和高度，否则大小全屏 -->
<view class="container">
<ad-draw class="ad-draw" adpid="1507000690"></ad-draw>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container {
flex: 1;
}
.ad-draw {
flex: 1;
width: 750rpx;
}
</style>
```
示例2
```html
<template>
<!-- 仅nvue页面支持 -->
<view class="content">
<view class="ad-draw">
<ad-draw :data="adData" @load="onload" @error="onerror"></ad-draw>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'ad-draw',
adData: {}
}
},
onReady: function (e) {
this.getAdData()
},
methods: {
getAdData: function (e) {
// 仅APP平台支持
plus.ad.getDrawAds({
adpid: '1507000690', // 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
count: 1, // 广告数量，默认 1-3
width: 300, // 根据宽度获取合适的广告(单位px)
height: 300 // 根据高度获取合适的广告(单位px)
},
(res) => {
this.adData = res.ads[0];
console.log(this.adData);
},
(err) => {
console.log(err);
}
)
},
onload(e) {
console.log("onload",e);
},
onerror(e) {
console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
}
}
}
</script>
```
沉浸视频流广告不是激励视频广告，激励视频广告另见：[https://uniapp.dcloud.io/api/a-d/rewarded-video](https://uniapp.dcloud.io/api/a-d/rewarded-video)
**注意**
- iOS平台配置应用使用广告标识（IDFA）详见：[https://ask.dcloud.net.cn/article/36107](https://ask.dcloud.net.cn/article/36107)
- App端广告开通指南和收益相关问题：[https://ask.dcloud.net.cn/article/36769](https://ask.dcloud.net.cn/article/36769)
- App端除了ad组件，ad-draw组件，还支持开屏、激励视频、全屏广告等多种广告形式。详见[uni-AD官网](https://uniad.dcloud.net.cn/)
- App端uni-AD聚合了腾讯广点通、头条穿山甲、360广告联盟等服务，打包时必须勾选相应的sdk，详见：[https://ask.dcloud.net.cn/article/36718](https://ask.dcloud.net.cn/article/36718)
![](https://web-assets.dcloud.net.cn/unidoc/zh/ad.jpg)
文档已迁移至 [Draw视频信息流广告](https://uniapp.dcloud.net.cn/uni-ad/ad-draw.html)
docs/component/ad-fullscreen-video.md
浏览文件 @ 9fb51bb9
......@@ -19,80 +19,4 @@
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
### 语法
`<ad-fullscreen-video adpid=""></ad-fullscreen-video>`
**属性说明**
|属性名 |类型 |默认值 |说明 |平台差异 |
|:- |:- |:- |:- |:- |
|adpid |String&#124;Number&#124;Array| |广告位id，如果传入的是数组，会从索引0开始请求失败后继续下一个，适用于已配置底价的逻辑| |
|preload |Boolean |true |页面就绪后加载广告数据 | |
|loadnext |Boolean |false |自动加载下一条广告数据 | |
|v-slot:default="{loading, error}"| | |作用域插槽可以获取组件内部广告加载状态和加载错误信息 | |
|@load |EventHandle |加载事件 | | |
|@close |EventHandle |关闭事件 | | |
|@error |EventHandle |错误事件 | | |
**方法说明**
|方法名|说明|
|:-|:-|
|load|加载广告数据|
|show|显示广告|
简单示例
```html
<template>
<view>
<ad-fullscreen-video adpid="1507000611" :loadnext="true" v-slot:default="{loading, error}">
<button :disabled="loading" :loading="loading">显示广告</button>
<view v-if="error">{{error}}</view>
</ad-fullscreen-video>
</view>
</template>
```
完整示例
```html
<template>
<view class="content">
<ad-fullscreen-video adpid="1507000611" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
<button :disabled="loading" :loading="loading">显示广告</button>
<view v-if="error">{{error}}</view>
</ad-fullscreen-video>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
onadload(e) {
console.log('广告数据加载成功');
},
onadclose(e) {
console.log("onadclose",e);
},
onaderror(e) {
// 广告加载失败
console.log("onerror: ", e.detail);
}
}
}
</script>
```
**错误码**
[错误码相关问题排查](https://uniapp.dcloud.net.cn/component/ad-error-code.html)
文档已迁移至 [全屏视频](https://uniapp.dcloud.net.cn/uni-ad/ad-fullscreen-video.html)
docs/component/ad-grid.md
浏览文件 @ 9fb51bb9
......@@ -15,42 +15,4 @@
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|adpid|String||uni-AD 广告位id，在[uni-AD官网](https://uniad.dcloud.net.cn/)申请广告位|
|@load|EventHandle||广告加载成功的回调|
|@error|EventHandle||广告加载失败的回调，event.detail = {errCode: xxx}|
### 广告事件监听
Grid 广告在创建后会自动拉取广告。开发者可以通过 ad 组件的 load 和 error 事件监听广告拉取成功或失败，可以通过 close 事件监听广告被关闭。
```html
<template>
<view class="adContainer">
<ad adpid="xxxx" @load="adLoad" @error="adError"></ad>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
}
},
methods: {
adLoad() {
console.log("adLoad");
},
adError(e) {
console.log("adError",e);
}
}
}
</script>
```
文档已迁移至 [Grid 广告](https://uniapp.dcloud.net.cn/uni-ad/ad-grid.md)
docs/component/ad-interactive.md
浏览文件 @ 9fb51bb9
......@@ -16,127 +16,5 @@
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
注意
- 3.6.11+ 支持App平台和Web平台。开通方式不是单独开通，而是需要开启 App 基础广告，收益报表在基础广告里看。如未在[uniad后台](https://uniad.dcloud.net.cn/)开通，又在界面上使用了本组件，会显示DCloud公益广告。
- 在App平台和Web平台不需要设置广告位属性 `adpid`
## 语法
`<ad-interactive></ad-interactive>`
**属性说明**
|属性名 |类型 |说明 |
|:- |:- |:- |
|adpid |String |广告位id |
|open-page-path |String |点击广告后打开的页面路径，[详见](#openpagepath)|
|v-slot:default="{data, loading, error}"| |作用域插槽，[详见](#vslot) |
|@load |EventHandle|加载成功事件 |
|@error |EventHandle|加载失败事件 |
### `v-slot:default="{data, loading, error}"` 属性说明@vslot
|属性名 |类型 |说明 |
|:- |:- |:- |
|data |Object |广告位数据, {imgUrl } |
|loading|Boolean|加载状态 |
|error |Object |加载错误, {errCode, errMsg}|
### 简单示例
```html
<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](#openpagepath)
### 完整示例
```html
<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 页面代码@openpagepath
组件的 `open-page-path` 属性所需页面，点击广告后将打开此页面
在项目的pages目录上右键，新增 `ad-interactive-webview.vue` 页面，并复制替换为下面代码
```html
<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>
```
## 接入步骤
1. 开通并[申请](https://uniapp.dcloud.net.cn/uni-ad.html#start)广告位
3. 在需要展示广告的地方放入 `<ad-interactive></ad-interactive>` 组件代码，此广告可作为悬浮红包使用，设置组件样式 fixed 定位即可
4. 在项目中新增 [ad-interactive-webview](#openpagepath) 页面
运行到微信小程序时需要添加request合法域名和业务域名白名单
1. 登陆 [微信公众平台](https://mp.weixin.qq.com/)，左侧栏找到 `开发管理` 并点击 开发设置->服务器域名
2. 新增 `request合法域名`: `https://wxac1.dcloud.net.cn`
3. 配置业务域名-> 下载校验文件
4. 在[uniAD后台](https://uniad.dcloud.net.cn/)，微信小程序广告管理-> 开通微信小程序互动广告 -> 上传校验文件，等待校验成功
5. 新增 `业务域名`: `https://engine.dcad01.com` 和 `https://xcx.dcad01.com`
文档已迁移至 [互动游戏](https://uniapp.dcloud.net.cn/uni-ad/interactive.md)
docs/component/ad-interstitial.md
浏览文件 @ 9fb51bb9
......@@ -17,133 +17,4 @@
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
### 语法
`<ad-interstitial></ad-interstitial>`
**属性说明**
|属性名 |类型 |默认值 |说明 |平台差异 |
|:- |:- |:- |:- |:- |
|adpid |String&#124;Number&#124;Array| |广告位id，如果传入的是数组，会从索引0开始请求失败后继续下一个，适用于已配置底价的逻辑| |
|preload |Boolean |true |页面就绪后加载广告数据 | |
|loadnext |Boolean |false |自动加载下一条广告数据 | |
|options |Object | |透传到作用域插槽 | |
|v-slot:default="{loading, error, options}" | | |作用域插槽可以获取组件内部广告加载状态和加载错误信息 | |
|@load |EventHandle |加载事件 |微信小程序暂不支持 | |
|@close |EventHandle |关闭事件 |微信小程序暂不支持 | |
|@error |EventHandle |错误事件 |微信小程序暂不支持 | |
**方法说明**
|方法名|说明|
|:-|:-|
|load|加载广告数据|
|show|显示广告|
HBuilder 基座的测试广告位 `adpid` 为 `1111111113`，微信小程序暂不提供测试广告位
简单示例
```html
<template>
<view>
<ad-interstitial adpid="1111111113" :loadnext="true" v-slot:default="{loading, error}">
<button :disabled="loading" :loading="loading">显示广告</button>
<view v-if="error">{{error}}</view>
</ad-interstitial>
</view>
</template>
```
完整示例
```html
<template>
<view class="content">
<ad-interstitial adpid="1111111113" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
<button :disabled="loading" :loading="loading">显示广告</button>
<view v-if="error">{{error}}</view>
</ad-interstitial>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
onadload(e) {
console.log('广告数据加载成功');
},
onadclose(e) {
console.log("onadclose",e);
},
onaderror(e) {
// 广告加载失败
console.log("onaderror: ", e.detail);
}
}
}
</script>
```
API示例
```html
<template>
<view>
<ad-interstitial ref="adInterstitial" adpid="1111111113" :loadnext="false" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
<view v-if="error">{{error}}</view>
</ad-interstitial>
<button type="primary" :disabled="isLoading" :loading="isLoading" @click="showAd">显示广告</button>
</view>
</template>
<script>
export default {
data() {
return {
isLoading: false
}
},
methods: {
showAd() {
this.isLoading = true;
this.$refs.adInterstitial.show();
},
onadload(e) {
this.isLoading = false;
console.log('广告数据加载成功');
},
onadclose(e) {
// 用户点击了关闭广告
console.log("onadclose",e);
},
onaderror(e) {
// 广告加载失败
console.log("onaderror: ", e.detail);
}
}
}
</script>
```
**注意**
- 微信小程序插屏广告触发频率限制：
- 小程序启动一定时间内不允许展示插屏广告
- 距离小程序插屏广告或者激励视频广告上次播放时间间隔不足，不允许展示插屏广告
- 当前正在播放激励视频广告或者插屏广告，不允许再次展示插屏广告
**错误码**
[错误码相关问题排查](https://uniapp.dcloud.net.cn/component/ad-error-code.html)
文档已迁移至 [插屏视频](https://uniapp.dcloud.net.cn/uni-ad/ad-interstitial.html)
docs/component/ad-rewarded-video.md
浏览文件 @ 9fb51bb9
此差异已折叠。
docs/component/ad-video.md
浏览文件 @ 9fb51bb9
......@@ -17,42 +17,4 @@
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|adpid|String||uni-AD 广告位id，在[uni-AD官网](https://uniad.dcloud.net.cn/)申请广告位|
|@load|EventHandle||广告加载成功的回调|
|@error|EventHandle||广告加载失败的回调，event.detail = {errCode: xxx}|
### 广告事件监听
视频广告在创建后会自动拉取广告。开发者可以通过 ad 组件的 load 和 error 事件监听广告拉取成功或失败。
```html
<template>
<view class="adContainer">
<ad adpid="xxxx" @load="adLoad" @error="adError"></ad>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
}
},
methods: {
adLoad() {
console.log("adLoad");
},
adError(e) {
console.log("adError", e);
}
}
}
</script>
```
文档已迁移至 [视频广告](https://uniapp.dcloud.net.cn/uni-ad/ad-video.html)
docs/component/ad.md
浏览文件 @ 9fb51bb9
......@@ -21,295 +21,9 @@ Banner或信息流广告展现场景非常灵活，常见的展现场景为：
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√（2.5.2+）|3.4.8+|√|x|√|√|√|x|x|√|x|
**`vue3 H5暂不支持`**
**开通配置广告**
[开通广告步骤详情](https://uniapp.dcloud.net.cn/uni-ad.html#start)
**属性说明**
|属性名|类型|默认值|说明|平台差异|
|:-|:-|:-|:-|:-|
|adpid|String||uni-AD App广告位id，在[uni-AD官网](https://uniad.dcloud.net.cn/)申请广告位|App，微信小程序3.4.8+|
|unit-id|String||广告单元id，可在小程序管理后台的流量主模块新建|微信小程序、字节跳动小程序(最低版本1.19.0+)、QQ小程序、快手小程序|
|ad-intervals|number||广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新）|微信小程序(基础库2.3.1+)|
|data|Object|可选|广告数据，通过 plus.ad.getAds (参考示例代码)，优先级高于adpid|App|
|appid|String||小程序应用 ID|百度小程序|
|apid|String||小程序广告位 ID|百度小程序|
|ad-left|Number||type为feeds时广告左边距（px），必须大于0|QQ小程序|
|ad-top|Number||type为feeds时广告上边距（px），必须大于0|QQ小程序|
|ad-width|Number||type为feeds时广告宽度（px），默认100%，最大值为屏幕宽度，最小值为265|QQ小程序|
|ad-height|Number||type为feeds时广告高度（px），最小85，最大160|QQ小程序|
|type|String|feed||QQ小程序、百度小程序、字节跳动小程序、快手小程序|
|@load|EventHandle||广告加载成功的回调||
|@error|EventHandle||广告加载失败的回调，event.detail = {errCode: }||
|@close|EventHandle||广告关闭的回调||
**type属性 百度**
广告类型：banner/feed，需和百青藤平台上的代码位类型相匹配。
**type属性 头条**
广告的类型，默认 banner，具体类型有：banner、video（视频）、large（大图）、lImg（左图右文）、rImg（右图左文），默认值为 banner
**type属性 QQ**
|值|说明|
|:-|:-|
|banner|banner广告 分 1 图和 3 图 1 文。3 图 1 文广告的背景色、文字颜色会根据祖先节点的背景色调整，分三种情况深色背景、浅色背景和白色背景|
|swip|翻页广告，1 图 1 文，会覆盖整个小程序，显示、隐藏逻辑需开发者自行控制|
|card|卡片广告，1 图，可关闭|
|feeds|自定义广告，可灵活控制广告上、左边距和宽高，以适应界面其他内容。可监听size事件获取实际宽高|
App和微信小程序的ad组件没有type属性，可以用于banner，也可以用于信息流。
## 微信小程序@weixin
微信小程序平台支持信息流(Banner)广告组件 `<ad unit-id=""></ad>`，由微信提供
uniAD 也支持信息流(Banner)广告组件 `<ad adpid=""></ad>`，由uniAD提供
3.4.10 之前的版本`ad`组件运行到微信小程序使用微信提供的广告组件
3.4.10+ 以后的版本调整如下
1. 组件仅设置 `unit-id`，使用微信提供的ad组件，逻辑不变
2. 组件设置了 `adpid` 属性，被编译为 `uniad`，见下文的介绍
3. 组件设置了 `adpid` 和 `unit-id` 属性，被编译为 `uniad`，见下文的介绍
`uniad`是`uni-app`框架的内置的组件，`uniad`组件同时支持`uniAD`广告和微信原生广告，先请求uniAD，如果已开通直接使用否则切换为微信的广告，这个过程会有3秒的延时
`uniad`组件依赖uniAD提供的微信小程序插件和腾讯提供的珊瑚广告插件
如果想在微信上仅使用微信的广告，App 或 Web 使用 uniAD 可使用条件编译
条件编译示例
```html
<!-- #ifdef MP-WEIXIN -->
<ad unit-id=""></ad>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<ad adpid=""></ad>
<!-- #endif -->
```
**注意**
- `<ad>` 组件是原生组件，在webview页面会有层级问题，同时无法在`<swiper>` 、`<scroll-view>` 组件中使用。但app-nvue、微信小程序新版和头条小程序新版支持同层渲染，所以没有层级问题。而app-vue、QQ小程序等平台则有层级问题。详见：[原生组件](https://uniapp.dcloud.io/component/native-component)
- 无广告时没有高度，关闭广告时释放高度，宽度由父容器决定
- App 平台，因广告组件内部获得广告数据计算后设置组件大小，会出现界面抖动问题，可以提前通过 plus.ad.getAds 获得广告数据，设置 data 后 adpid 将无效
- 微信小程序 `<ad>` 组件不支持触发 tap 等触摸相关事件
- Android 平台 nvue的 `<list>` 组件中使用 `<ad>` 时，必须指定宽度属性`<ad width="750rpx" />`，因为 `<list>` 有自动的内存回收机制，不在屏幕范围的组件不被创建，组件内部无法获取大小
- app-nvue 的 `<recycle-list>` 组件内不支持嵌套 `<ad>`
- 广点通概率出现重复广告，可根据需求请求广告数据，推荐单次大于1条(plus.ad.getAds) 来降低重复率
- HBuilderX2.8+版本Android平台更新穿山甲（今日头条）广告SDK后不再支持x86类型CPU，无法运行到x86类型cpu的模拟器。
- `<ad>` 组件测试广告位是上图下文，uniAD后台申请的广告位默认左图右文
- HBuilderX标准基座真机运行测试信息流广告位标识（adpid）为：1111111111，微信小程序和H5平台暂不提供测试广告位
**示例：**
```html
<template>
<view class="content">
<!-- adpid="1111111111" 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试 -->
<!-- 广告后台申请的广告位(adpid)需要自定义基座/云打包/本地打包后生效 -->
<view class="ad-view">
<ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror"></ad>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'ad'
}
},
methods: {
onload(e) {
console.log("onload");
},
onclose(e) {
console.log("onclose: " + e.detail);
},
onerror(e) {
console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
}
}
}
</script>
<style>
.content {
background-color: #DBDBDB;
padding: 10px;
}
.ad-view {
background-color: #FFFFFF;
margin-bottom: 10px;
}
</style>
```
api的方式(仅App平台支持)，不推荐使用这种调用方式，调用比较复杂，且不跨平台，开发者还需要手动处理缓存逻辑
``` html
<template>
<view class="content">
<view class="ad-view">
<ad :data="adData"></ad>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'ad',
adData: {}
}
},
onReady: function (e) {
this.getAdData()
},
methods: {
getAdData: function (e) {
// 仅APP平台支持
plus.ad.getAds({
adpid: '1111111111', // 替换为自己申请获取的广告位标识，此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
count: 1, // 广告数量，默认 3
width: 300 // 根据宽度获取合适的广告(单位px)
},
(res) => {
// 注意: 广告数据只能使用一次
this.adData = res.ads[0];
console.log(this.adData);
},
(err) => {
console.log(err);
}
)
}
}
}
</script>
<style>
.content {
background-color: #DBDBDB;
padding: 10px;
}
.ad-view {
background-color: #FFFFFF;
margin-bottom: 10px;
}
</style>
```
使用 ad/ad-draw 模拟插屏广告效果@Interstitial
```html
<template>
<view>
<!-- 使用 ad/ad-draw 模拟插屏广告效果 -->
<view>
<button @click="showInterstitialAd">显示插屏广告</button>
</view>
<view class="ad-interstitial" v-if="isShowInterstitialAd">
<view class="ad-view">
<ad class="ad" adpid="1111111111" @error="onerror"></ad>
<!-- ad-draw 仅在nvue页面生效 -->
<!-- <ad-draw class="ad-draw" adpid="1507000690"></ad-draw> -->
</view>
<view class="close-area">
<!-- 根据z自己页面风格设置关闭按钮的样式 -->
<button @click="hideInterstitialAd">X</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShowInterstitialAd: false
}
},
methods: {
showInterstitialAd() {
this.isShowInterstitialAd = true
},
hideInterstitialAd() {
this.isShowInterstitialAd = false
},
onerror(e) {
console.log(e);
}
}
}
</script>
<style>
.ad-interstitial {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
/* #ifndef APP-NVUE */
display: flex;
z-index: 1000;
/* #endif */
flex-direction: column;
justify-content: center;
}
.ad-draw {
width: 700rpx;
height: 400px;
}
</style>
```
**激励视频广告**
文档地址：[https://uniapp.dcloud.io/component/ad-rewarded-video](https://uniapp.dcloud.io/component/ad-rewarded-video)
**全屏视频广告**
文档地址：[https://uniapp.dcloud.io/component/ad-fullscreen-video](https://uniapp.dcloud.io/component/ad-fullscreen-video)
**插屏广告**
文档地址：[https://uniapp.dcloud.io/component/ad-interstitial](https://uniapp.dcloud.io/component/ad-interstitial)
**注意**
- iOS平台配置应用使用广告标识（IDFA）详见：[https://ask.dcloud.net.cn/article/36107](https://ask.dcloud.net.cn/article/36107)
- App端广告开通指南和收益相关问题：[https://ask.dcloud.net.cn/article/36769](https://ask.dcloud.net.cn/article/36769)
- App端除了ad组件，还支持开屏、激励视频等多种广告形式。详见[uni-AD官网](https://uniad.dcloud.net.cn/)
- App端uni-AD聚合了腾讯广点通、头条穿山甲、360广告联盟等服务，打包时必须勾选相应的sdk，详见：[https://ask.dcloud.net.cn/article/36718](https://ask.dcloud.net.cn/article/36718)
![](https://web-assets.dcloud.net.cn/unidoc/zh/ad.jpg)
**错误码**
[错误码相关问题排查](https://uniapp.dcloud.net.cn/component/ad-error-code.html)
文档已迁移至 [信息流(Banner)广告](https://uniapp.dcloud.net.cn/uni-ad/ad-component.html)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或