在微信中banner广告的调用,并没有在微信官方文档中解释得比较明白,也没有简单明了的示例。
所以我们在这里讨论一下banner广告的实现。
微信中的banner广告的位置属性只有:
left、top,意味着只有左对齐和上对齐。
而且,微信中的这个left、top、width、height不是按照项目中的像素来作为单位的,是按设备的尺寸来作为显示单位。
这样,就意味着:
当我们需要右对齐和底对齐的时候,可能和我们项目中的元素不能对齐,遮挡住项目中的元素。
所幸,微信有给我们提供位置变化的监听:
/**
调用广告方法类
*/
window.monet = window.monet || {};
(function () {
var MiniGameCtrl = {};
MiniGameCtrl.bannerAd = null;
MiniGameCtrl.bannerAdUnitId = "adunit-test"; //测试,要换成自己微信小游戏后台的广告id
MiniGameCtrl.createBannerAd = function() {
if (typeof (wx) != "undefined" && wx != null && wx.createBannerAd && MiniGameCtrl.bannerAdUnitId){
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var targetBannerAdWidth = Math.min(windowWidth, 300);
MiniGameCtrl.bannerAd = wx.createBannerAd({
adUnitId: MiniGameCtrl.bannerAdUnitId,
adIntervals: 30,
style: {
left: 0,
top: windowHeight - targetBannerAdWidth,
width: targetBannerAdWidth,
}
});
// 在banner广告首次显示的时候会触发
// 注意:如果在回调里再次调整尺寸,要确保不要触发死循环!!!
MiniGameCtrl.bannerAd.onResize(size => {
console.log("onResize", size.width, size.height);
// 如果一开始设置的 banner 宽度超过了系统限制,可以在此处加以调整
MiniGameCtrl.bannerAd.style.left = (windowWidth - size.width)/2;
MiniGameCtrl.bannerAd.style.top = windowHeight - size.height;
//这行是为了在QQ小游戏中能正确显示位置.如果是微信则不需要这句
setTimeout(function () {
MiniGameCtrl.bannerAd.style.left = (windowWidth - size.width)/2;
MiniGameCtrl.bannerAd.style.top = windowHeight - size.height;
}, 0.5);
});
MiniGameCtrl.bannerAd.onLoad(() => {
console.log('banner广告加载成功!!!!');
})
MiniGameCtrl.bannerAd.onError((errMsg, errCode) => {
console.log('banner广告加载失败!!!!', errMsg, errCode);
})
}
}
MiniGameCtrl.showBannerAd = function() {
if (typeof (wx) != "undefined" && wx != null && MiniGameCtrl.bannerAd){
MiniGameCtrl.bannerAd.show();
}
}
MiniGameCtrl.hideBannerAd = function() {
if (typeof (wx) != "undefined" && wx != null && MiniGameCtrl.bannerAd){
MiniGameCtrl.bannerAd.hide();
}
}
window.monet.MiniGameCtrl = MiniGameCtrl;
})();