微信Banner广告位置设置

冷不防 2024-04-20 08:41 38阅读 0赞

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