原生模板广告

原生模板广告是一种更灵活的广告形式，开发者可以选择不同的模板样式，使广告更好地融入游戏界面。与 Banner 广告相比，原生模板广告提供了更多的定制化选项和更丰富的展示形式。

开发者可以调用 tap.createCustomAd 创建原生模板广告组件。

一、创建原生模板广告

let customAd = tap.createCustomAd({
  adUnitId: 'xxxx',
  style: {
    left: 10,
    top: 76,
    width: 300
  }
})

原生模板广告组件在创建后会自动拉取广告数据并进行渲染。

二、显示/隐藏

原生模板广告组件默认是隐藏的，需要调用 CustomAd.show() 进行显示。

customAd.show()

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

customAd.hide()

三、广告拉取成功与失败

原生模板广告组件在创建后会自动拉取广告数据。如果拉取成功，CustomAd.onLoad() 注册的回调函数会执行。

customAd.onLoad(() => {
  console.log('原生模板广告加载成功')
})

如果拉取失败，通过 CustomAd.onError() 注册的回调函数会执行，回调函数的参数是一个包含错误信息的对象。

customAd.onError(err => {
  console.log('原生模板广告加载失败', err)
})

CustomAd.show() 返回一个 Promise。

customAd.show()
  .then(() => console.log('原生模板广告显示成功'))
  .catch(err => console.log('原生模板广告显示失败', err))

四、广告尺寸

原生模板广告的尺寸由模板决定。开发者可以设置广告组件的位置和宽度，高度会根据模板自动计算。

let customAd = tap.createCustomAd({
  adUnitId: 'xxxx',
  style: {
    left: 10,
    top: 76,
    width: 300  // 设置宽度，高度自动计算
  }
})

当广告尺寸变化时，可以通过 CustomAd.onResize() 监听。

customAd.onResize(res => {
  console.log('广告尺寸变化', res.width, res.height)
})

五、广告定时刷新

开发者可以在创建原生模板广告时传入 adIntervals 参数实现广告的定时刷新，adIntervals 参数为数字类型，单位为秒。

注意：自动刷新的间隔不能低于 30 秒，因此 adIntervals 的参数值必须大于或等于 30。

let customAd = tap.createCustomAd({
  adUnitId: 'xxxx',
  adIntervals: 30, // 自动刷新频率不能小于30秒
  style: {
    left: 10,
    top: 76,
    width: 300
  }
})

六、销毁广告

如果不再需要使用某个原生模板广告实例，可以调用 destroy() 方法销毁它，以释放资源。

customAd.destroy()

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

七、完整示例

// 创建原生模板广告实例
const customAd = tap.createCustomAd({
  adUnitId: 'your-ad-unit-id',
  adIntervals: 60, // 每60秒刷新一次
  style: {
    left: 10,
    top: 100,
    width: 300
  }
})

// 监听广告加载成功
customAd.onLoad(() => {
  console.log('原生模板广告加载成功')
  // 加载成功后显示广告
  customAd.show()
})

// 监听广告加载失败
customAd.onError(err => {
  console.log('原生模板广告加载失败', err)
})

// 监听广告尺寸变化
customAd.onResize(res => {
  console.log('广告尺寸:', res.width, 'x', res.height)
})

// 在场景切换时隐藏广告
function onSceneChange() {
  customAd.hide()
}

// 在返回主界面时显示广告
function onBackToMain() {
  customAd.show()
}

// 在游戏结束时销毁广告
function onGameEnd() {
  customAd.destroy()
}