Cocos 3.x 微信广告接入

 

一、接广告要先开通流量主

登录 https://mp.weixin.qq.com 管理后台，点击“推广”-“流量主”板块

想要接入广告，你的小游戏必须有"量"。微信给出的条件是游戏累计注册用户达到1000，也就是说要有1000个人玩过你的游戏，这其实是有一定难度的。除了让朋友帮忙，或者在相关论坛上推广外，我们其实可以使用微信给我们的"量"。

登录小程序后台后，点击设置->游戏设置，再点击红框中的申请公测即可。之后微信就会给你一些量，好让你的游戏快速累积到1000个用户。以下是一些注意点：

• 现在申请公测后是否给量好像是需要根据游戏质量来看。所以我建议大家刚开始可以自己推广，有点量之后再点击公测申请。
• 请确保游戏正常运行后再申请公测，不要让别人玩全是bug的游戏，流失率很大。
• 首次发布后90天内可以申请，尽量别浪费这次机会。
• 如果发现微信没有给量，大家可以去微信开发社区https://developers.weixin.qq.com/community/minigame发帖问下管理员(有很多人都在问)。

开通流量主之后，就可以新建广告位了

二、banner广告

参考https://developers.weixin.qq.com/minigame/dev/guide/open-ability/ad/banner-ad.html

1.创建

拿到广告位ID就可以用代码创建banner广告了

let bannerAd = wx.createBannerAd({
  adUnitId: 'xxxx',
  style: {
    left: 10,
    top: 76,
    width: 320
  }
})

bannerAd.show()

在cocos中可以这样使用

onLoad () {
    this.bannerAd = null;
    this.initBannerAd();
},

initBannerAd () {
    if (typeof wx === 'undefined') {
        return;
    }
 
    let { screenWidth } = wx.getSystemInfoSync();
    let { screenHeight } = wx.getSystemInfoSync();
 
    this.bannerAd = wx.createBannerAd({
        adUnitId: '这里放你的广告ID',
        adIntervals: 30, // 自动刷新频率不能小于30秒
        style: {
            left: (screenWidth-300)/2,
            top: screenHeight-screenHeight/5,
            width: 300,
        }
    })
    
    this.bannerAd.onError(err => {
        console.log('广告显示失败')
        console.log(err)
    })
}

注意以下几点：

a. 微信要求不能让广告挡住小程序界面自带的按钮，否则会造成玩家误点。也就是说，像我这款竖屏的游戏，如果将广告放在顶上(也就是style中的top设置为0)， 那么就一定会挡住小程序按钮：

由于style没有bottom属性，所以我们必须获取当前机型的宽高并进行计算，从而将广告放在底部位置。另外广告的宽度最小为300(就算是最小也会挡住)。

b. 一定要编写onError方法，如果没有编写，广告是不会显示的。你可以就简单的在里面打印一些日志，但该方法主要用来自适应UI。官方要求显示的广告不能阻碍玩家玩游戏，所以我们难免需要调整一些UI的位置好腾出空间来用于广告显示。而当广告显示失败时，我们最好将UI位置进行还原，好让界面看起来不那么别扭。

c.广告要显示全，不能放在屏幕外

2.显示隐藏

广告实例创建完毕后，我们只需要调用show和hide方法在想要的时刻显示或隐藏广告即可：

onLoad () {
    this.bannerAd = null;
    this.initBannerAd();
 
    // 这里可能做了些什么
    ....
 
    // 再显示广告
    if (this.bannerAd)
        this.bannerAd.show();
},
 
changeScene () {
    // 场景跳转
    if (this.bannerAd)
        this.bannerAd.hide();
    cc.director.loadScene('其他场景');
},

3.提前加载

参考Cocos Creator微信小游戏添加banner广告
在我们加载广告的时候，并不是直接onload出来的，是需要等待一段的加载时间。因此，如果直接创建的话，你将会等一段时间才能看到广告，特别是你需要在需要的地方才显示【.show()】，或者在不需要的时候【.hide()】，而销毁广告也是可以直接使用的，不过并不推荐在使用destroy方法的时候之前一段时间才onload广告，会造成广告还未生成但是还没destroy导致后面广告会一直出现在屏幕上方永远消不掉了。

创建广告this._bannerAd = wx.createBannerAd的时候，实际上我们最好是在创建一个common脚本然后在里面写一个bannerAd的参数并且赋值为null

export = {
    bannerAd : null,
    bannerAd2 : null,
    windowWidth : null,
    windowHeight : null,
}

接下来是加载广告，一般可以写在loading界面的onload()事件里，代码如下

var comm = require("./Common");

onload(){
  if (typeof (wx) !== "undefined") {
           // 手机屏幕信息
            let winSize = wx.getSystemInfoSync({
                success(res) {
                    comm.windowWidth = res.windowWidth;
                    comm.windowHeight = res.windowHeight;
                }
            });
            console.log(comm.windowWidth,comm.windowHeight);
            // 广告1和2
            if(comm.bannerAd == null) {
                // 广告
                comm.bannerAd = window.wx.createBannerAd({
                    adUnitId: '**********************************',
                    style: {
                        left: comm.windowWidth/2 - 150,
                        top: comm.windowHeight - 90,
                        width:  300,
                    }
                })
                comm.bannerAd.onResize(()=>{
                    comm.bannerAd.style.left = comm.windowWidth/2 - 150 + 0.1;
                    comm.bannerAd.style.top = comm.windowHeight - comm.bannerAd.style.realHeight + 0.1;
                });
                comm.bannerAd.onError(function(res){
                    console.log(res);
                })
            }
     }
}

这里有几点要说明，微信的广告是固定的大小比例，最小300的宽，宽度确定高度，所以不需要去管高度。第二点，微信的广告位置是以左上角为坐标系的，因此在计算位置的时候需要进行相对应的判断，如上代码我是让他显示在屏幕之下，+0.1则是为了考虑到苹果机型的底边条。

三、广告组件审核

当你开通流量主并接入广告组件代码后，每次上传版本审核都会触发广告组件审核：

注：此时版本审核包括代码审核和广告组件审核。如果广告组件审核失败不会影响代码审核和发布，微信只是会把你的广告给暂停显示了而已。代码审核失败的话只是不能发布新版本，之前发布的旧版本中的广告组件不会受影响，还是会正常显示。另外微信不会在审核广告组件过程中把你的广告给停了的，只有审核失败时才会。

如果广告组件审核失败，请大家去小程序后台的流量主页面查看失败原因(笔者截图的是审核通过时的样子)：

如果你觉得官方审核结果不合理，可以通过"微信广告助手"将你的异议发送到后台，之后会有人工和你对接的

四、激励视频

https://developers.weixin.qq.com/minigame/dev/guide/open-ability/ad/rewarded-video-ad.html

激励视频广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告，用户点击 关闭广告 后会去拉取下一条广告。

cc.Class({
    extends: cc.Component,
 
    properties: {
        bgAudio: {
            default: null,
            type: cc.AudioClip
        },
 
        adResult: cc.Label
    },
 
    // LIFE-CYCLE CALLBACKS:
 
    onLoad () {
        this.videoAd = null;                // 激励视频广告
        this.initVideoAd();                 // 初始化
        this.playMusic();                   // 播放背景音乐
    },
 
    playMusic () {
        // 循环播放背景音乐
        cc.audioEngine.playMusic(this.bgAudio, true);
        cc.audioEngine.setMusicVolume(0.6);
    },
 
    initVideoAd() {
        if (typeof wx === 'undefined') {
            return;
        }
 
        // 创建激励视频广告实例，提前初始化
        this.videoAd = wx.createRewardedVideoAd({
            adUnitId: '这里放你自己的广告位ID'
        });
 
        this.videoAd .onError(err => {
            console.log('激励视频展示失败');
            console.log(err);
 
            this.adResult.string = '激励视频展示失败';
            this.adResult.node.parent.active = true;
        });
 
        this.videoAd.onClose(res => {
            // 用户点击了【关闭广告】按钮
            // 小于 2.1.0 的基础库版本，res 是一个 undefined
            if (res && res.isEnded || res === undefined) {
                // 正常播放结束，可以下发游戏奖励
                console.log('奖励已经发放');
                this.videoAd.offClose();
 
                this.adResult.string = '奖励已经发放';
                this.adResult.node.parent.active = true;
            }
            else {
                // 提前关闭广告，不发放奖励
                console.log('因播放中途退出，所以不下发游戏奖励');
                this.videoAd.offClose();
 
                this.adResult.string = '因播放中途退出，所以不下发游戏奖励';
                this.adResult.node.parent.active = true;
            }
 
            cc.audioEngine.pauseMusic();            // 先强制暂停
            cc.audioEngine.resumeMusic();           // 再恢复播放音乐
        });
    },
 
    showVideoAd() {
        if (!this.videoAd) {
            return;
        }
 
        // 用户触发广告后，显示激励视频广告
        this.videoAd.show().catch(() => {
            // 失败重试
            this.videoAd.load()
            .then(() => videoAd.show())
            .catch(err => {
                console.log(err);
                console.log('激励视频 广告显示失败');
 
                this.adResult.string = '激励视频 广告显示失败';
                this.adResult.node.parent.active = true;
            })
        });
    },
 
    closeBtn () {
        // 关掉广告结果提示板
        this.adResult.node.parent.active = false;
    }
});

激励视频广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。