微信Banner广告位置设置

在微信中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;
})();