tencent cloud

腾讯云超级应用服务

动态与公告
【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告
控制台更新动态
Android SDK 更新动态
iOS SDK 更新动态
Flutter 更新动态
IDE 更新动态
基础库更新动态
产品简介
产品概述
产品优势
应用场景
购买指南
计费概述
按量计费(后付费)
续费指引
停服说明
快速入门
套餐管理
概述
控制台账号管理
存储配置
加速配置
品牌化配置
平台功能
控制台登录
用户和权限体系
小程序管理
小游戏管理
应用管理
商业化
平台管理
用户管理
团队管理
运营管理
安全中心
代码接入指引
Demo 及 SDK 获取
Android
iOS
Flutter
App 服务端接入指南
GUID 生成规则
小程序开发指南
小程序介绍与开发环境
小程序代码组成
指南
框架
组件
API
服务端
JS SDK
基础库
IDE 使用指南
小游戏开发指南
指南
API
服务端
实践教程
小程序登录实践教程
小程序订阅消息实践教程
支付相关实践教程
广告接入实践教程
小游戏订阅消息实践教程
相关协议
数据处理和安全协议

Banner广告

PDF
聚焦模式
字号
最后更新时间: 2025-03-19 18:55:33
Banner 广告组件是由客户端原生的图片、文本控件组成的原生组件,层级最高,会覆盖在上屏 Canvas 上。
开发者可以调用 wx.createBannerAd 创建 Banner 广告组件。Banner 广告组件在创建后会自动拉取广告数据并进行渲染,开发者只需要控制 Banner 广告组件的位置和显示/隐藏即可。
let bannerAd = wx.createBannerAd({
adUnitId: 'xxxx',
style: {
left: 10,
top: 76,
width: 320
}
})

bannerAd.show()

显示/隐藏

Banner 广告组件默认是隐藏的,需要调用 BannerAd.show() 进行显示。
bannerAd.show()
当切换到没有 Banner 广告组件的场景或页面时,调用 BannerAd.hide() 隐藏 Banner 广告组件。
bannerAd.hide()

广告拉取成功与失败

BannerAd 在创建后会拉取广告。如果拉取失败,通过 BannerAd.onError() 注册的回调函数会执行,回调函数的参数是一个包含错误信息的对象。常见异常错误参考
bannerAd.onError(err => {
console.log(err)
})
BannerAd.show() 返回的 Promise 也会是一个 rejected Promise。
bannerAd.show()
.catch(err => console.log(err))
反之,如果拉取成功。BannerAd.onLoad() 会执行,BannerAd.show() 返回的 Promise 也会是一个 resolved Promise。两者的回调函数中都没有参数传递。
bannerAd.onLoad(() => {
console.log('banner 广告加载成功')
})

bannerAd.show()
.then(() => console.log('banner 广告显示'))

onResize

开发者在创建 BannerAd 时设置宽高,也可以在创建后设置。
let bannerAd = wx.createBannerAd({
adUnitId: 'xxxx',
style: {
left: 10,
top: 76,
width: 320
}
})

bannerAd.show()
bannerAd.style.width = 400
Banner 广告组件的尺寸会根据开发者设置的宽度,即style.width进行等比缩放,缩放的范围是 300 到屏幕宽度。屏幕宽度是以逻辑像素为单位的宽度,通过 wx.getSystemInfoSync() 可以获取到。
let { screenWidth } = wx.getSystemInfoSync()
style.width小于 300 时,会取作 300。 当style.width大于屏幕宽度时,会取作屏幕宽度。 在组件内部会以此值为基准,根据 Banner 广告的标准尺寸,进行缩放。
每当缩放发生且缩放后的尺寸不同时,通过 BannerAd.onResize() 注册的回调函数就会执行。回调函数的参数是一个包含 BannerAd 缩放后的宽和高的对象。BannerAd 的style.realWidthstyle.realHeight到经过缩放后的宽和高。
bannerAd.onResize(res => {
console.log(res.width, res.height)
console.log(bannerAd.style.realWidth, bannerAd.style.realHeight)
})
如果在 onResize 的回调函数中重设 width 且总是与上一次缩放后的 width 不同,那么可能会导致 onResize 的回调函数一直触发,并卡死在 onResize 的回调函数中。
bannerAd.onResize(res => {
bannerAd.style.width = res.width + Math.random() * 10
})

创建新的 BannerAd,销毁旧的 BannerAd

每个 BannerAd 实例在创建后会去拉取一次广告数据并进行渲染,在此之后不再更新。如果想要展示其他内容的 BannerAd,需要创建新的 BannerAd 并将之前的 BannerAd 进行销毁。
如果不对废弃的 BannerAd 进行销毁,则会导致其上的事件监听器无法释放。当没有释放的 BannerAd 积累过多时,将会产生性能问题。
oldBannerAd.destroy()
let newBannerAd = wx.createBannerAd({
// ...
})
newBannerAd.show()





帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈