# Grid 广告

Grid 广告组件是由客户端原生的图片、文本控件组成的原生组件,层级最高,会覆盖在上屏 Canvas 上。

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

let GridAd = wx.createGridAd({
  adUnitId: 'xxxx',
  adTheme: 'white',
  gridCount: 5,
  style: {
    left: 10,
    top: 76,
    width: 330,
    opacity: 0.8
  }
})

GridAd.show()

# 显示/隐藏

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

GridAd.show()

当切换到没有 Grid 广告组件的场景或页面时,调用 GridAd.hide() 隐藏 Grid 广告组件。

GridAd.hide()

# 广告拉取成功与失败

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

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

GridAd.show() 返回的 Promise 也会是一个 rejected Promise。

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

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

GridAd.onLoad(() => {
  console.log('Grid 广告加载成功')
})

GridAd.show()
.then(() => console.log('Grid 广告显示'))

# onResize

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

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

GridAd.show()
GridAd.style.width = 400

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

let { screenWidth } = wx.getSystemInfoSync()

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

每当缩放发生且缩放后的尺寸不同时,通过 GridAd.onResize() 注册的回调函数就会执行。回调函数的参数是一个包含 GridAd 缩放后的宽和高的对象。GridAd 的 style.realWidthstyle.realHeight 到经过缩放后的宽和高。

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

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

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

# 创建新的 GridAd,销毁旧的 GridAd

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

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

oldGridAd.destroy()
let newGridAd = wx.createGridAd({
  // ...
})
newGridAd.show()

# 广告定时刷新

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

let GridAd = wx.createGridAd({
  adUnitId: 'xxxx',
  adIntervals: 30, // 自动刷新频率不能小于30秒
  // ...
})

GridAd.show()