开发者可以调用 创建 Banner 广告组件。Banner 广告组件在创建后会自动拉取广告数据并进行渲染,开发者只需要控制 Banner 广告组件的位置和显示/隐藏即可。

    Banner 广告组件默认是隐藏的,需要调用 BannerAd.show() 进行显示。

    当切换到没有 Banner 广告组件的场景或页面时,调用 隐藏 Banner 广告组件。

    1. bannerAd.hide()

    BannerAd 在创建后会拉取广告。如果拉取失败,通过 BannerAd.onError() 注册的回调函数会执行,回调函数的参数是一个包含错误信息的对象。

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

    反之,如果拉取成功。BannerAd.onLoad() 会执行, 返回的 Promise 也会是一个 resolved Promise。两者的回调函数中都没有参数传递。

    1. bannerAd.onLoad(() => {
    2. console.log('banner 广告加载成功')
    3. })
    4. bannerAd.show()
    5. .then(() => console.log('banner 广告显示'))

    开发者在创建 BannerAd 时设置宽高,也可以在创建后设置。

    1. let bannerAd = wx.createBannerAd({
    2. adUnitId: 'xxxx',
    3. style: {
    4. left: 10,
    5. width: 320
    6. }
    7. })
    8. bannerAd.show()
    9. bannerAd.style.width = 400

    Banner 广告组件的尺寸会根据开发者设置的宽度,即 style.width 进行等比缩放,缩放的范围是 300 到 屏幕宽度。屏幕宽度是以逻辑像素为单位的宽度,通过 wx.getSystemInfoSync() 可以获取到。

      style.width 小于 300 时,会取作 300。当 style.width 大于屏幕宽度时,会取作屏幕宽度。在组件内部会以此值为基准,根据 Banner 广告的标准尺寸,进行缩放。

      如果在 onResize 的回调函数中重设 width 且总是与上一次缩放后的 width 不同,那么可能会导致 onResize 的回调函数一直触发,并卡死在 onResize 的回调函数中。

      1. bannerAd.onResize(res => {
      2. })

      每个 BannerAd 实例在创建后会去拉取一次广告数据并进行渲染,在此之后不再更新。如果想要展示其他内容的 BannerAd,需要创建新的 BannerAd 并将之前的 BannerAd 进行销毁。

      如果不对废弃的 BannerAd 进行销毁,则会导致其上的事件监听器无法释放。当没有释放的 BannerAd 积累过多时,将会产生性能问题。

      1. oldBannerAd.destroy()
      2. let newBannerAd = wx.createBannerAd({
      3. // ...
      4. })
      5. newBannerAd.show()

      开发者可以在创建 Banner 广告时传入 adIntervals 参数实现广告的定时刷新,adIntervals 参数为数字类型,单位为秒。注意:自动刷新的间隔不能低于30秒,因此 adIntervals 的参数值必须大于或等于30。

      1. let bannerAd = wx.createBannerAd({
      2. adUnitId: 'xxxx',
      3. adIntervals: 30, // 自动刷新频率不能小于30秒
      4. // ...
      5. })
      6. bannerAd.show()