Developers can use component ad to create Banner ad components, which will automatically pull the advertising data and display it after being created.

Banner ad does not allow the style properties to be set directly. The default width is 100% (width: 100%), and the height is automatically scaled. Therefore, developers can set the width of the ad’s outer component to adjust the size of the ad. The width of the ad’s outer component is not allowed to be less than 300px, and when the width is less than 300px, the width of the Banner ad is forced to adjust to 300px.

/* The width of the outer component can be set to 100% or a specific value */
.adContainer {
  width: 100%;
}
<view class="adContainer">
  <ad unit-id="xxxx"></ad>
</view>

Listening of Advertisement Events

Banner ad pulls the ads automatically after they are created. Developers can listen success or failure to pull ads through the onload and onerror events of component ad. Ad monitoring can be closed through the onclose event.

<view class="adContainer">
  <ad unit-id="xxxx" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>
Page({
  adLoad() {
    console.log('Banner Successful ad loading')
  },
  adError(err) {
    console.log('Banner Ad failed to load', err)
  },
  adClose() {
    console.log('Banner Ad closed')
  }
})