原生模板广告接入
技术可直接理解的组件接入逻辑:广告位 ID、组件代码、事件监听、无填充兼容和验收要点。
原生模板广告接入思路
原生模板广告适配场景较多,适合首页、用户中心、内容列表、流程完成页等位置。接入重点不是只写一行组件,而是同时处理加载成功、加载失败、关闭、无填充和样式兼容。
<view class="jjw-ad-card" wx:if="{{showAd}}">
<ad-custom
unit-id="adunit-xxxxxxxxxxxx"
bindload="onAdLoad"
binderror="onAdError"
bindclose="onAdClose">
</ad-custom>
</view>
JS 事件监听示例
Page({
data: { showAd: true },
onAdLoad() {
console.log('广告加载成功')
},
onAdError(e) {
console.log('广告加载失败', e.detail)
this.setData({ showAd: false }) // 无填充或异常时隐藏容器,不留空白
},
onAdClose() {
this.setData({ showAd: false })
}
})
核心原则:广告不是每次都一定展示。无填充、审核中、关闭、ID错误都需要兼容,页面不能因为广告加载失败出现大块空白。
上线前技术自查
基础库版本满足组件要求
adUnitId 与后台广告位一致
广告容器在不同机型不遮挡核心按钮
binderror 后自动隐藏广告容器
用户关闭后页面布局正常
体验版可截图/录屏留存