微信小游戏Banner广告适配

BannerAd的创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export namespace wxUtils {
export function creatorBannerAd() {
if (cc.sys.platform !== cc.sys.WECHAT_GAME && !isShow) {
return true
}

const { screenWidth, screenHeight } = wx.getSystemInfoSync()

let banner = wx.createBannerAd({
adUnitId: 'adunit-xxx',
style: {
left: (screenWidth * 0.25) / 2,
top: 80,
width: screenWidth * 0.75
}
})

banner.onError(() => {})

banner.onResize(res => {
banner.style.left = (screenWidth - res.width) / 2
banner.style.top = screenHeight - res.height
})

banner.show()
}
}

// 调用
wxUtils.creatorBannerAd()

遇到的问题

  • iPhone X(刘海屏手机)上广告位置问题。

在微信小游戏论坛上搜索了下,发现很多朋友都有类似的问题。

https://developers.weixin.qq.com/community/search?query=iphonex%20banner&page=1

都是关于banner广告在iPhone X上位置问题

iPhone X上的效果

安卓刘海屏手机

解决方案(不一定对)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export namespace wxUtils {
export function creatorBannerAd() {
if (cc.sys.platform !== cc.sys.WECHAT_GAME && !isShow) {
return true
}

const { screenWidth, screenHeight } = wx.getSystemInfoSync()

let banner = wx.createBannerAd({
adUnitId: 'adunit-xxx',
style: {
left: (screenWidth * 0.25) / 2,
top: 80,
width: screenWidth * 0.75
}
})

banner.onError(() => {})

banner.onResize(res => {
banner.style.left = (screenWidth - res.width) / 2
banner.style.top = screenHeight - Math.floor(res.height)
})

banner.show()
}
}

// 调用
wxUtils.creatorBannerAd()

这里主要是在onResize函数中 使用Math.floor()函数取整获得改变尺寸后banner的高度。

1
2
3
4
banner.onResize(res => {
banner.style.left = (screenWidth - res.width) / 2
banner.style.top = screenHeight - Math.floor(res.height)
})

修复后iPhone X的效果

如果大家有什么好的方法可以 邮件一起讨论下。ithresh#ithresh.me(#替换为@)