# Banner Advertisement

The banner advertisement component is a native component composed of native pictures and textual controls of the client, and has the highest hierarchical level and will be overlaid on the on-screen Canvas.

Developers can create a Banner advertisement component by calling wx.createBannerAd. After the banner advertisement component is created, the advertisement data is automatically fetched and rendered, and the developer only needs to control the position and display/hide of the Banner advertisement component.

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

bannerAd.show()

# Show/hide

The banner advertisement component is hidden by default and needs to be showed by calling BannerAd.show().

bannerAd.show()

When switching to a scene or page without a banner advertisement component, call BannerAd.hide() to hide the Banner advertisement component.

bannerAd.hide()

# Advertisement Fetching Success and Failure

BannerAd will fetch advertisement after it is created. If the fetching fails, the callback function registered with BannerAd.onError() will be executed, and the argument of the callback function is an object containing error information. [Common Abnormal Error Reference Document] ((BannerAd.onError))

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

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

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

On the contrary, if the fetching is successful. BannerAd.onLoad() will be executed and the Promise returned by BannerAd.show() will also be a resolved Promise. There is no argument passed in either callback functions.

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

bannerAd.show()
.then(() => console.log('banner advertisement display'))

# onResize

Developers set the width and height when creating BannerAd, or set them 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 advertisement component is scaled according to the width set by the developer, ie, style.width, with a range of 300 to the screen width. The screen width is the width in logical pixels and can be obtained by wx.getSystemInfoSync().

let { screenWidth } = wx.getSystemInfoSync()

When style.width is less than 300, it is taken as 300. When style.width is greater than the screen width, it is taken as the screen width.
This value is used as a benchmark inside the component to scale based on the standard size of the Banner ad.

The callback function registered with BannerAd.onResize() will be executed whenever zooming occurs and the scaled sizes are different. The argument of the callback function is an object that contains the scaled width and height of the BannerAd. BannerAd's style.realWidth and style.realHeight are scaled to width and height.

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

If you reset width in the onResize callback function and it is always different from the width of the previous zoom, it may cause constant trigger of the onResize callback function and get stuck in the onResize callback function.

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

# Create New BannerAd, Destroy Old BannerAd

After each BannerAd instance is created, the advertisement data is fetched and rendered, and will not be updated after that. If you want to display BannerAd with other content, you need to create a new BannerAd and destroy the previous BannerAd.

If the abandoned BannerAd is not destroyed, the event subscriber on it cannot be released. Performance problems arise when the accumulation of unreleased BannerAd is excessive.

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