Tencent Cloud Super App as a Service
- Release Notes and Announcements
- Purchasing Guide
- Plan Management
- Branded Configurations
- Introduction to Platform Functions
- Commercialization
- Virtual Payment
- Guidelines for Code Integration
- Android
- Android SDK Description
- Android API
- Mini Program Management APIs
- Custom Mini Program Capabilities
- Custom SDK Capabilities
- iOS
- iOS SDK Description
- iOS API
- Mini Program Management APIs
- Customize Mini Program Capabilities
- Customised SDK Capabilities
- Flutter
- Flutter SDK Description
- Flutter API
- Mini Program Management API
- Mini Program Capabilities Customization
- Plugin Customization
- App Server
- Payment Development Notes
- Mini Program Payment: Parameter Application and Configuration
- Mini Game Payment: Parameter Application and Configuration
- Mini Program Payment: Signature and Verification
- Guildlines for Mini Program Development
- Mini Program Code Composition
- Guidance
- Learn About Mini Programs
- Configuring Mini Program
- Mini Program Framework
- Basic Competencies
- Open Capabilities
- Framework
- Mini Program Configuration
- Framework Interface
- WXML Syntax Reference
- WXS Syntax Reference
- Components
- API
- Interface
- Media
- Device
- JS SDK
- IDE Operation Instructions
- Guildlines for Mini Game Development
- Guide
- Game Engine
- Basic Capability
- Open Capabilities
- API
- Interface
- Rendering
- Device
- Practice Tutorial
- API Documentation
- Making API Requests
- User Management APIs
- Team Management APIs
- Sensitive API-Related APIs
- Role Management APIs
- Platform Management APIs
- Other Console APIs
- Mini Program APIs
- Management-Sensitive APIs
- Global Domain Management APIs
- Application APIs
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Game DevelopmentGuideOpen CapabilitiesAdBanner Ad
Banner Ad
Last updated: 2025-04-10 17:00:55
The banner ad component is composed of native image, text, and video controls from the client. It has the highest layer level and will cover regular components.
Developers can call wx.createBannerAd to create a banner ad component. Once created, the component will automatically fetch ad data and render it. Developers only need to control the position and visibility (show/hide) of the banner ad component.
let bannerAd = wx.createBannerAd({adUnitId: 'xxxx',style: {left: 10,top: 76,width: 320}})bannerAd.show()
Show/Hide
bannerAd.show()
When switching to a scene or page without a banner ad component, call BannerAd.hide() to hide the banner ad component.
bannerAd.hide()
Fetch success and failure
After creation, the banner ad will be automatically fetched. If the ad fails to fetch, the callback function registered with BannerAd.onError() will be executed, and the parameter of the callback function is an object containing failure information.Common error codes.
bannerAd.onError(err => {console.log(err)})
bannerAd.show().catch(err => console.log(err))
If the ad was fetched successfully, BannerAd.onLoad() will be executed.The Promise returned by BannerAd.show() will also be a resolved Promise. Neither of these callback functions receives any parameters.
bannerAd.onLoad(() => {console.log('Banner ad loaded successfully')})bannerAd.show().then(() => console.log('Banner ad displayed'))
onResize
The width and height set by developers when creating a banner ad can also be adjusted after creation.
let bannerAd = wx.createBannerAd({adUnitId: 'xxxx',style: {left: 10,top: 76,width: 320}})bannerAd.show()bannerAd.style.width = 400
The size of the banner ad component will be proportionally scaled based on the width set by the developer, i.e.,
style.width, within a range of 300 px to the screen width. The screen width is measured in logical pixels and can be obtained using wx.getSystemInfoSync() .let { screenWidth } = wx.getSystemInfoSync()
When
style.width is less than 300 px, it will be set to 300 px. When style.width exceeds the screen width, it will be set to the screen width. Internally, the component will use this value as a baseline and scale it according to the standard dimensions of the banner ad.Whenever scaling occurs and the scaled dimensions are different, the callback function registered with BannerAd.onResize() will be executed. The parameter of the callback function is an object containing the scaled width and height of the banner ad. The
style.realWidth and style.realHeight of the banner ad represent the scaled width and height respectively.bannerAd.onResize(res => {console.log(res.width, res.height)console.log(bannerAd.style.realWidth, bannerAd.style.realHeight)})
If the width is reset within the onResize callback function and it always differs from the previously scaled width, it may cause the onResize callback function to be triggered continuously, potentially resulting in the callback function being stuck in an infinite loop.
bannerAd.onResize(res => {bannerAd.style.width = res.width + Math.random() * 10})
Create a new banner ad and destroy the old one
Each banner ad instance fetches ad data and renders it once upon creation, and it does not update thereafter. If you want to display a banner ad with different content, you need to create a new banner ad and destroy the previous one.
Failing to destroy obsolete banner ad instances can result in their event listeners not being released Performance issues may occur when too many unreleased banner ads accumulate.
oldBannerAd.destroy()let newBannerAd = wx.createBannerAd({// ...})newBannerAd.show()
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No