# Banner Ad

The banner ad component is a native component composed of the client's native image and text controls. It has the highest level and will cover the on-screen canvas.

The developer can call wx.createBannerAd to create a banner ad component, which will automatically fetch the ad data and perform rendering. The developer only have to control the position and show/hide setting of the banner ad component.

let bannerAd = wx.createBannerAd({
  adUnitId: 'xxxx',
  style: {
    left: 10,
    top: 76,
    width: 320
  }
})

bannerAd.show()

# Show/Hide

The banner ad component is hidden by default. BannerAd.show() should be called to display the component.

bannerAd.show()

In a scenario or screen that does not have a banner component, BannerAd.hide() is called to hide the banner component.

bannerAd.hide()

# Success and Failure of Advertisement Pulls

After creation, the BannerAd pulls the relevant ad. If the pull fails, the callback function registered via BannerAd.onError() is executed, and the parameter of the callback function is an object containing the error message. For common errors, see the relevant documentation.

bannerAd.onError(err => {
  console.log(err)
})

Promise returned by BannerAd.show() will be a rejected Promise.

bannerAd.show()
.catch(err => console.log(err))

If the pull is successful, BannerAd.onLoad() is executed, and the Promise returned by BannerAd.show() will be a resolved Promise. No parameters are passed for both callback functions.

bannerAd.onLoad(() => {
  console.log('banner Ad loaded successfully')
})

bannerAd.show()
.then(() => console.log('banner Ad is displayed'))

# onResize

The developer can set the width and height when creating a BannerAd, or set these properties 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 is proportionally zoomed based on the width set by the developer, i.e. style.width. The zoom range is from 300 to the screen height. The screen width is in logical pixels and can be obtained via wx.getSystemInfoSync().

let { screenWidth } = wx.getSystemInfoSync()

When style.width is less than 300, it will be assumed to be 300. When style.width is larger than the screen width, it will be assumed to be the screen width. In the component, this value is used as the benchmark, and zoom is performed based on the standard size of the banner ad.

Each time a banner ad is zoomed in/out and the size changes, the callback function registered via BannerAd.onResize() is executed. The callback function parameter is an object containing the width and height of the zoomed BannerAd which are the BannerAd's style.realWidth and style.realHeight, respectively.

bannerAd.onResize(res => {
  console.log(res.width, res.height)
  console.log(bannerAd.style.realWidth, bannerAd.style.realHeight)
})

If the width is reset in the onResize callback function and is different from the width after the last zoom operation, this may cause the onResize function to be continuously triggered, therefore leading to program crash.

bannerAd.onResize(res => {
  bannerAd.style.width = res.width + Math.random()*10
})

# Creating New BannerAd and Deleting Old BannerAd

After creation, each BannerAd instance fetches ad data one time and renders the ad. No data update is performed subsequently. To display other BannerAd content, you must create a new BannerAd and delete the previous BannerAd.

If obsolete BannerAds are not deleted, their event listeners will not be released. The accumulation of too many BannerAds with unreleased listeners will impact performance.

oldBannerAd.destroy()
let newBannerAd = wx.createBannerAd({
  // ...
})
newBannerAd.show()