应用内展示的广告组件，可用于banner或信息流。

  • app端的广告源由腾讯广点通、头条穿山甲、快手广告联盟、360广告联盟以及部分DCloud直投广告聚合提供，在DCloud的uni-AD后台注册：https://uniad.dcloud.net.cn/
  • 小程序端的广告由小程序平台提供

    平台差异说明

    | App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ小程序 | 快应用 | 360小程序 | | :—-: | :—-: | :—-: | :—-: | :—-: | :—-: | :—-: | :—-: | :—-: | | √（2.5.2+） | x | √ | x | √ | √ | √ | x | x |

开通配置广告

开通广告步骤：

  1. 开通广告 需在广告平台后台操作：
  2. 申请广告位id 在各位后台申请广告位id
  3. 在页面合适位置编写代码，放置ad组件，配上广告位id（app是adpid，微信、头条、qq小程序是unit-id，百度小程序是apid）
  4. App端打包后生效，打包时必须选择要集成的广告SDK（穿山甲、广点通、360联盟、快手）。

    属性说明

    | 属性名 | 类型 | 默认值 | 说明 | 平台差异 | | :—- | :—- | :—- | :—- | :—- | | data | Object | 可选 | 广告数据，通过 plus.ad.getAds (参考示例代码)，设置后adpid将无效 | App | | adpid | String | | uni-AD App广告位id，在uni-AD官网申请广告位 | App | | unit-id | String | | 广告单元id，可在小程序管理后台的流量主模块新建 | 微信小程序、字节跳动小程序(最低版本1.19.0+)、QQ小程序 | | ad-intervals | number | | 广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新） | 微信小程序(基础库2.3.1+) | | 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属性 头条

广告的类型，默认 bannner，具体类型有：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，也可以用于信息流。

注意

  • <ad> 组件是原生组件，在webview页面会有层级问题，同时无法在<swiper> 、<scroll-view> 组件中使用。但app-nvue、微信小程序新版和头条小程序新版支持同层渲染，所以没有层级问题。而app-vue、QQ小程序等平台则有层级问题。详见：原生组件
  • 无广告时没有高度，关闭广告时释放高度，宽度由父容器决定
  • 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的模拟器。
  • app-vue 页面使用 <ad> 必须使用v3编译器。如果使用HBuilderX 2.7以下版本，需注意开启v3编译模式。2.7以上版本已经淘汰了其他模式，无需关心本条。
  • <ad> 组件测试广告位是上图下文，uniAD后台申请的广告位默认左图右文

  • HBuilderX标准基座真机运行测试信息流广告位标识（adpid）为：1111111111

    @error 错误码

  • App端聚合的穿山甲(iOS)：错误码

  • App端聚合的穿山甲(Android)：错误码
  • App端聚合的广点通(iOS)：错误码

  • App端聚合的广点通(Android)：错误码

    示例：

    1. <template>
    2. <view class="content">
    3.   <!-- App平台 示例 1 -->
    4.   <!-- adpid="1111111111" 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试，替换为自己申请获取的广告位标识 -->
    5.   <view class="ad-view">
    6.     <ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror"></ad>
    7.   </view>
    8.   <!-- App平台 示例 2 -->
    9.   <!-- 需要时可自定义属性，监听到 error 回调后(e.target可以取到)，开发者可以针对性的处理，比如隐藏广告组件的父容器，以保证用户体验 -->
    10.   <view class="ad-view" v-for="adItem in adList" :key="adItem.id">
    11.     <ad :adpid="adItem.adpid" :data-xx="adItem.id"></ad>
    12.   </view>
    13.   <!-- App平台 示例 3 (手动请求广告数据 仅App平台支持) -->
    14.   <view>
    15.     <button @click="getAdData">Get ad data</button>
    16.   </view>
    17.   <view class="ad-view">
    18.     <ad :data="adData"></ad>
    19.   </view>
    20.   <!-- 微信小程序 -->
    21.   <view class="ad-view">
    22.     <ad unit-id="" ad-intervals="100"></ad>
    23.   </view>
    24.   <!-- 百度小程序 -->
    25.   <view class="ad-view">
    26.     <ad appid="" apid="" type="feed"></ad>
    27.   </view>
    28.   <!-- 多平台兼容 -->
    29.   <view class="ad-view">
    30.     <ad adpid="1111111111" unit-id="" appid="" apid="" type="feed"></ad>
    31.   </view>
    32. </view>
    33. </template>
    1. export default {
    2. data() {
    3.   return {
    4.     title: 'uni-app ad',
    5.     adList: [],
    6.     adData: {}
    7.   }
    8. },
    9. onReady: function (e) {
    10.   // 显示 4 个广告
    11.   for (let i = 0; i < 4; i++) {
    12.     this.adList.push({
    13.       id: i,
    14.       adpid: "1111111111"
    15.     })
    16.   }
    17. },
    18. methods: {
    19.   getAdData: function (e) {
    20.     // 仅APP平台支持
    21.     plus.ad.getAds({
    22.         adpid: '1111111111',  // 替换为自己申请获取的广告位标识，此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
    23.         count: 1,   // 广告数量，默认 3
    24.         width: 300  // 根据宽度获取合适的广告(单位px)
    25.       },
    26.       (res) => {
    27.         this.adData = res.ads[0];
    28.         console.log(this.adData);
    29.       },
    30.       (err) => {
    31.         console.log(err);
    32.       }
    33.     )
    34.   },
    35.   onload(e) {
    36.     console.log("onload");
    37.   },
    38.   onclose(e) {
    39.     console.log("onclose: " + e.detail);
    40.   },
    41.   onerror(e) {
    42.     console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
    43.   }
    44. }
    45. }
    1. <style>
    2. .content {
    3.   background-color: #DBDBDB;
    4.   padding: 10px;
    5. }
    6. .ad-view {
    7.   background-color: #FFFFFF;
    8.   margin-bottom: 10px;
    9. }
    10. </style>


    激励视频广告 文档地址：https://uniapp.dcloud.io/api/a-d/rewarded-video

    注意

  • App端广告开通指南和收益相关问题：https://ask.dcloud.net.cn/article/36769

  • App端除了ad组件，还支持开屏、激励视频等多种广告形式。详见uni-AD官网
  • App端uni-AD聚合了腾讯广点通、头条穿山甲、360广告联盟等服务，打包时必须勾选相应的sdk，详见：https://ask.dcloud.net.cn/article/36718 ad - 图1