请问大家在微信小游戏里如何避免banner广告和IPHONEX底部操作条重合？

Creator 2.x
#1

微信小游戏审核广告时是审核banner广告和IPHONEX底部操作条是否重合的，如果重合，是不能过审的。请问大家用wx.createBannerAd创建banner广告后，通常怎样设置避免与IPHONEX底部操作条重合呢？估计应该用到了safeArea，希望各位老师能给个具体代码指点一下（比如onResize里具体怎样设置style.top属性），万分感谢！

#2

我都上了六七款小游戏了，从来没有注意过这个问题啊。真的有这个限制吗？

#3

肯定有这个限制，有人还因为这个广告被封禁了。
以前我开发小程序的时候倒好办，因为小程序页面是滚动的，所以也不太在乎空间。因此，我为了省事，就把所有的banner广告下面统一留出50px的padding空间，这样就可以避免和iphonex的底部小黑条重合了。
但小游戏不能这样啊。。。。

#4

你用你的iphoneX 上微信搜一搜《糖豆人跑酷》这款游戏看看。游戏里的Banner出现的时候会和底下的黑条重合吗？

#5

wx都自动适配好了呀，我的手机就不会出现banner和底部操作条重合

#6

俺没有iphonex啊，不然也就不在这里发帖了，直接测试了。
下面是我自己琢磨的方法，心里没底，希望大家指教。就是说自己先计算出一个底部不安全区域的高度，最后设置banner的top时，减去这个高度。

const systemInfo = wx.getSystemInfoSync();
var notSafeAreaBottomHeight = systemInfo.windowHeight - systemInfo.safeArea.bottom;

this.bannerAd.onResize(size => {

    this.bannerAd.style.top = systemInfo.windowHeight - size.height -  notSafeAreaBottomHeight; // 我自己琢磨的方法，最后面减去一个不安全区域高度
    this.bannerAd.style.left = (systemInfo.windowWidth - size.width) / 2;

});
#7

微信图片_20210816105834
微信图片_202108161058341125×535 41.9 KB

自动适配了呀，wx会帮我们预留那个横条位置的，你那边不会吗

#8

而且你在微信开发者工具里面调试的时候选iPhone X不就可以看了吗

#9

不太可能吧，微信怎么可能适配到这步呢？您看这个被驳回的例子
https://developers.weixin.qq.com/community/develop/doc/0000e4b505ce587d70696f6af51800?highLine=iponex%20%20%E5%BA%95%E9%83%A8%E6%93%8D%E4%BD%9C%E6%9D%A1

#10

开发者工具里面的iphonex 应该和真机是不一样的。
况且，在开发者工具里面的iphonex里面，如果自己不调节，banner就和底部紧紧贴合，这样肯定被驳回

#11

哦，明白了，我这边的sdk处理了，你判断下如果是ios并且是全面屏，就多预留20的位置就可以了

#12

判断IOS，全面屏之类的太麻烦了，wx.getSystemInfoSync()里面有那个安全区域(safeArea)，理论上这个最方便。所以我是用它来判断了，请看我上面的例子。就是心里没底。。。。

#13

你在开发者工具里面调试没问题应该就ok了，工具里面我看跟我手机真机看的都是一样的

#14

开发者工具里面的IPONEX和真机好像不太一样，它只是屏幕大小比例和真机一样，safeArea这种参数，有可能和真机不一样的。。。。

#15

…我没用过safeArea，所以不太清楚 :joy:

#16

嗯嗯，没事没事。唉，就是手头没iphonex，真麻烦。。。。