Banner 广告样式升级

亲爱的开发者你好，为进一步提升开发者小游戏的 banner 广告收益及体验，小游戏即将对 banner 广告样式进升级。

• 升级后样式：

• 版本要求：头条端双端 742 版本及以上
• 注意：由于 banner 广告增加了转化按钮，因此会更改原 banner 广告比例。
• 因功能仍在灰度测试中，届时线上会有新旧版本样式同时存在情况。
• 测试包：【安卓】测试包 /【iOS】测试包为 testflight 7.4.2.3 版本

实现方法

banner 广告定位

BannerAd.style 上的属性的值仅为开发者设置的值，banner 广告会根据开发者设置的宽度进行等比缩放，缩放后的真实尺寸需要通过 BannerAd.onResize() 事件获得。

开发者需要在 onResize 设置正确的定位（left 和 top）以确保 banner 广告的定位是准确的。

代码示例

1. 获取设备尺寸

const systemInfo = tt.getSystemInfoSync();
const screenWidth = systemInfo.windowWidth;
const screenHeight = systemInfo.windowHeight;

2. 创建 bannerAd

// 创建一个 banner 广告_
const bannerAd = tt.createBannerAd({
  adUnitId: "YOUR_AD_UNIT_ID",
  style: {
    width: 200
  }
});

3. 在 onResize 事件触发时设置所需的定位

定位在左上角

bannerAd.onResize(res => {
  bannerAd.style.top = 0;
  bannerAd.style.left = 0;
});

定位右上角

bannerAd.onResize(res => {
  bannerAd.style.top = 0;
  bannerAd.style.left = screenWidth - res.width;
});

定位左下角

bannerAd.onResize(res => {
  bannerAd.style.top = screenHeight - res.height;
  bannerAd.style.left = 0;
});

定位右下角

bannerAd.onResize(res => {
  bannerAd.style.top = screenHeight - res.height;
  bannerAd.style.left = screenWidth - res.width;
});

垂直水平居中

bannerAd.onResize(res => {
  bannerAd.style.top = (screenHeight - res.height) / 2; // 垂直居中
  bannerAd.style.left = (screenWidth - res.width) / 2; // 水平居中
});

底部居中

bannerAd.onResize(res => {
  bannerAd.style.top = screenHeight - res.height;
  bannerAd.style.left = (screenWidth - res.width) / 2; // 水平居中
});

顶部居中

bannerAd.onResize(res => {
  bannerAd.style.top = 0;
  bannerAd.style.left = (screenWidth - res.width) / 2; // 水平居中
});