Laya商业级教程-对接QQ小游戏sdk(5分钟掌握)

视频演讲稿:

Laya商业教程

LAYA版本2.5,开发语言ts

我们以官方的2d案例为模板，对接QQSDK

QQ平台案例功能点：
banner，激励视频，插屏，游戏盒子，积木广告,分享功能

我们在模板上添加了2个按钮，开始游戏和分数翻倍

并且订阅了点击事件

导入TS类库到scirpt目录

打开banner广告

扫描二维码关注公众号，回复： 12046311 查看本文章

GameControl.ts

onEnable方法增加以下代码

BannerAndVideo1.OpenBanner(this, null);

真机运行结果

点击更多游戏，显示游戏盒子
GameUI.ts

moregameClcik() {
//qqsdk
BannerAndVideo1.createAppBox();
}
真机运行结果

游戏结束时打开积木盒子和banner
stopGame()
BannerAndVideo1.OpenBanner(this);
BannerAndVideo1.CreateBlockAd();

游戏开始时清除广告组件
startGame()
//qqsdk
BannerAndVideo1.Clear();
BannerAndVideo1.ClearBlockAd();

设置分享页面，预加载激励视频
在游戏的初始化方法里
GameControl.ts
constructor（）
//预加载激励视频
BannerAndVideo1.InitVideo();
设置点击右上角三个点出现分享菜单
if (Laya.Browser.onQQMiniGame)
Laya.Browser.window.qq.showShareMenu({
showShareItems: [‘qq’, ‘qzone’, ‘wechatFriends’, ‘wechatMoment’]
})

插屏

激励视频，分数翻倍
gameui.ts
scoreMul2Click()
BannerAndVideo1.ShowVideo(this, this.onvideoEnd)

onvideoEnd(isok) {
    console.log(this);
    if (isok) {
        Platform.ShowToast('奖励X2');
        this._score *= 2;
        this.scoreLbl.changeText("分数：" + this._score);
    }
    else
        Platform.ShowToast('看完视频才有奖励');
}

插屏广告

进行视频演示最后结果

QQ小游戏开发者文档
https://q.qq.com/wiki/develop/game/API/

现在进行广告组件的讲解，广告组件的全部代码在文章末尾

为了能在真机能成功测试，开发者务必准备好广告ID和APPID

在API调用前都会先做兼容处理，防止空指针异常，比如低版本的QQ是不支持游戏盒子和积木广告的

在打开banner时，因为广告组件异步加载的，用了canshowbanner来约束是否显示
主要是为了避免关闭广告之后还进行显示

插屏广告的调用结果会有调用失败的可能，因为平台底层限制了调用频率且在游戏开始1分钟后才能调用
本期讲解完毕；
课程资料可在进Q群下载


QQ广告类
import { EventMgr } from “…/JFrameWork/EventMgr”;
import { EventType } from “…/JFrameWork/EventType”;
import { Platform } from “./plaftform”;

export default class BannerAndVideo1 {

private static curVideo;

private static curbanner;
private static curBannerId = 0;


private static bannerAdUnitId = ["8f8220b835c41349f98a008150a3da91"];
private static videlAdUnitId = ["d59e4671547cd398036f971156a57458"];

private static InterstitialAdID = 'cab9d10be16322dd3f82c04b5f1aa75d';
private static adboxId = '5ba0a0206e90d902331b8926b5e06e39';

private static BlockAdId = '9b9fc1fb33ad3d3c1ed0063c1adf4e9c';
//banner：8f8220b835c41349f98a008150a3da91
// 视频：d59e4671547cd398036f971156a57458
//插屏：cab9d10be16322dd3f82c04b5f1aa75d
//盒子：5ba0a0206e90d902331b8926b5e06e39
//积木广告：9b9fc1fb33ad3d3c1ed0063c1adf4e9c
//视屏广告是否加载成功
private static videoLoadCom: boolean = false;

private static videoCallback: Function;
private static videoCallder;
//预先加载视屏广告
public static InitVideo() {


    if (Laya.Browser.onQQMiniGame != true)
        return;

    let videoId = BannerAndVideo1.videlAdUnitId[0];
    console.log('初始化视频', videoId);
    //激励视频广告组件。激励视频广告组件是一个原生组件，并且是一个全局单例
    //https://q.qq.com/wiki/develop/game/API/ad/RewardedVideoAd.html#load
    if (BannerAndVideo1.curVideo == null) {
        BannerAndVideo1.curVideo = Laya.Browser.window.qq.createRewardedVideoAd({ adUnitId: videoId });

        BannerAndVideo1.curVideo.onLoad(() => {
            console.log('激励视频 广告加载成功');
            this.videoLoadCom = true;
        });
        BannerAndVideo1.curVideo.onError(err => {
            console.log("激励视屏加载失败:" + err);
            this.videoLoadCom = false;
        });
        console.log('订阅失败关闭事件');
        BannerAndVideo1.curVideo.onClose(res => {
            console.log("激励视频关闭:" + res.isEnded);
            let isEnd = (res && res.isEnded || res === undefined);
            if (isEnd) {
                this.videoCallback && this.videoCallback.call(BannerAndVideo1.videoCallder, true)
            }
            else { this.videoCallback && this.videoCallback.call(BannerAndVideo1.videoCallder, false) }
            // this.curVideo.offClose();


            // EventMgr.instance.event(EventType.AD_VIDEO_CLOSE_EVENT);

        });
    }

    BannerAndVideo1.curVideo.load();
}

public static ShowVideo(callder, callback: Function) {

    //qq
    if (Laya.Browser.onQQMiniGame != true) {
        callback.call(callder, false);
        return;
    }
    BannerAndVideo1.videoCallder = callder;
    if (BannerAndVideo1.videoLoadCom) {
        console.log("showVideoAd:" + BannerAndVideo1.videoLoadCom);

        BannerAndVideo1.videoCallback = callback;


        BannerAndVideo1.curVideo.show().catch(err => {
            console.log(err);
            Platform.ShowToast('视频拉取失败，请重试');
            callback.call(callder, false);

        });
    }
    else {

        console.log("没能拉取激励视频");

        callback.call(callder, false);
        //WXSdk.Game_Share(callback);
    }

}


static canshowbanner = true;

static bannerOnLoadCount = 0;
static firstReigstBannerEvent = false;

static banner_errCb;
static banner_onloadCb;
static banner_onResizeCb;
/**打开banner 
 * https://q.qq.com/wiki/develop/game/API/ad/BannerAd.html
 */
public static OpenBanner(callder, callVack: Function = null, iswait: boolean = false) {

    if (Laya.Browser.onQQMiniGame != true) return;


    BannerAndVideo1.bannerOnLoadCount = 0;
    //估计banner也是全局单例,产生了冗余的回调事件
    if (this.curbanner) {


        this.curbanner.offResize(BannerAndVideo1.banner_onResizeCb);
        this.curbanner.offLoad(BannerAndVideo1.banner_onloadCb);
        this.curbanner.offError(BannerAndVideo1.banner_errCb);
        this.curbanner.destroy();
    }
    BannerAndVideo1.canshowbanner = true;
    //this.curBannerId++;

    //  if (this.curBannerId > 1) this.curBannerId = 0;

    let idd = BannerAndVideo1.bannerAdUnitId[0];
    let info = Laya.Browser.window.qq.getSystemInfoSync();
    let topvalue = info.windowHeight;
    //let widthvalue = info.windowWidth;

    console.log("baner adUnitId:" + idd);
    //750x160
    let newBanner = Laya.Browser.window.qq.createBannerAd({
        adUnitId: '8f8220b835c41349f98a008150a3da91',
        style: {
            width: 460,
            left: 0,
            top: 0

        }
    })

    BannerAndVideo1.banner_errCb = (err) => {
        console.log('banner err');
        console.log(err);
        callVack.call(null);
    };

    newBanner.onError(BannerAndVideo1.banner_errCb);

    BannerAndVideo1.banner_onloadCb = () => {
        BannerAndVideo1.bannerOnLoadCount += 1;
        console.log("新的", BannerAndVideo1.bannerOnLoadCount);

        this.curbanner = newBanner;
        if (this.canshowbanner && !iswait) {
            console.log("banner show");
            this.curbanner.show();
        }
        else {
            console.log("banner hide");
            this.curbanner.hide();
        }
    }

    newBanner.onLoad(BannerAndVideo1.banner_onloadCb);

    BannerAndVideo1.banner_onResizeCb = (size) => {

        let info = Laya.Browser.window.qq.getSystemInfoSync();
        // console.log(info);
        // 底部居中显示

        newBanner.style.top = info.windowHeight - size.height;
        // newBanner.style.width = info.windowWidth;

        // newBanner.style.top = info.windowHeight - this.curbanner.style.realHeight - 5;
        // console.log('style.top');
        // console.log(newBanner.style.top);
        // realHeight
        console.log(size);
        console.log(newBanner.style);
        console.log(Laya.stage.height, info.windowHeight, newBanner.style.realHeight);
        //var hight: number = Laya.stage.height / info.windowHeight * newBanner.style.realHeight;
        var hight: number = Laya.stage.height / info.windowHeight * size.height;
        if (callVack != null) {
            callVack.call(callder, hight);
        }
    }
    /**IOS下无法关闭 所以设置在顶端 */
    newBanner.onResize(BannerAndVideo1.banner_onResizeCb);

}

static Clear() {
    Laya.timer.clearAll(BannerAndVideo1);
    Laya.Tween.clearAll(BannerAndVideo1);
    BannerAndVideo1.canshowbanner = false;

    if (Laya.Browser.onQQMiniGame != true) return;

    //创建新的 BannerAd，销毁旧的 BannerAd
    //每个 BannerAd 实例在创建后会去拉取一次广告数据并进行渲染，
    //在此之后不再更新。如果想要展示其他内容的 BannerAd，
    //需要创建新的 BannerAd 并将之前的 BannerAd 进行销毁。
    if (BannerAndVideo1.curbanner) {
        console.log('banner hide');

        //BannerAndVideo1.curbanner.style.top = 3000;
        // if (GameSample.commonData.OnIOS) {
        //     this.ClearOpenBanner_OnIos();
        // }
        // else
        BannerAndVideo1.curbanner.hide();

    }



}
public static showbanner() {

    console.log('showbanner');
    //  if (!GameSetting.isWx) return;

    if (Laya.Browser.onQQMiniGame != true) return;


    BannerAndVideo1.canshowbanner = true;
    this.OpenBanner(this, null, false);

    // if (BannerAndVideo1.curbanner) BannerAndVideo1.curbanner.show();
}




static CheatBanner(btn: Laya.UIComponent, viewHeight: number, yposAdd: number, complete: Function = null) {

    let ischeat = false;
    if (ischeat == false) {
        console.log("ignorecheat");
        BannerAndVideo1.OpenBanner(this, null);
    }
    else {
        btn.bottom = NaN;
        btn.y = viewHeight - btn.height - 40;
        BannerAndVideo1.OpenBanner(this, (height) => {
            if (!height) {
                return;
            } else {
                //  btn.y = Laya.stage.height - btn.height - 100;
                console.log("cheatstart", "bottom:100");
                btn.mouseEnabled = false;
                var end = viewHeight - height - btn.height - 20 + yposAdd;
                // let end=yposAdd
                // console.log("y:" + end);
                //  console.log(UseModule.CurrentAccount.CurAccountData.cheattime);
                Laya.timer.once(1000, this, () => {

                    btn.mouseEnabled = true;
                    this.showbanner();
                    Laya.Tween.to(btn, { y: end }, 500, null, Laya.Handler.create(this, () => {
                        if (complete != null) {
                            complete();
                        }
                    }))
                })
            }

        }, true);
    }
}

// 广告盒子组件。广告盒子组件是一个原生组件，层级比普通组件高。
//广告盒子是一个单例（小游戏端是全局单例，小程序端是页面内单例，在小程序端的单例对象不允许跨页面使用）。
//默认是隐藏的调用 AppBox.load()加载数据，AppBox.show() 将其显示。 AppBox.destroy()销毁实例，销毁后需要重新调用qq.createAppBox()创建实例。

static curVideoadBox;
/**盒子组件 */
public static createAppBox() {

    if (Laya.Browser.onQQMiniGame != true) return;


    //兼容低版本QQ
    if (Laya.Browser.window.qq['createAppBox'] == null) {
        console.log('当前版本不支盒子组件');
        return;
    }

    BannerAndVideo1.curVideoadBox = Laya.Browser.window.qq.createAppBox({ adUnitId: BannerAndVideo1.adboxId })

    BannerAndVideo1.curVideoadBox.load().then(
        (res) => {
            console.log('appbox成功')    // resolved
            BannerAndVideo1.curVideoadBox.show()
        }
    )
        .catch(
            (res) => {
                console.log('appbox reject')        // reject
                console.log(res)
            }
        )



}


private static _InterstitialAdObj;
/**插屏 
 * 
 * 插屏广告组件默认是隐藏的，因此可以提前创建，
 * 以提前初始化组件。建议在小程序页面的 onReady 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。

    插屏广告组件是自动拉取广告并进行更新的，即在调用qq.createInterstitialAd
    之后会立马触发一次load。在组件创建后会拉取一次广告，用户关闭广告后会去拉取下一条广告，即在用户关闭广告之后，会立马触发一次load。

*/
public static CreateInterstitialAd() {

    if (Laya.Browser.onQQMiniGame != true) return;

    //兼容低版本QQ
    if (Laya.Browser.window.qq['createInterstitialAd'] == null) {

        console.log('当前QQ版本不支持插屏');
        return
    }


    BannerAndVideo1._InterstitialAdObj = Laya.Browser.window.qq.createInterstitialAd({
        adUnitId: 'cab9d10be16322dd3f82c04b5f1aa75d'
    });

    console.log('插屏创建成功');


    BannerAndVideo1._InterstitialAdObj.onLoad((res) => {
        console.log('m_InterstitialAd成功')    // resolved
        BannerAndVideo1._InterstitialAdObj.show()
    })

    BannerAndVideo1._InterstitialAdObj.onError((res) => {
        console.log('m_InterstitialAd erro')    // resolved
        console.log(res)
    })

}


private static _BlockAd;
/**积木盒子 */
public static CreateBlockAd() {

    if (Laya.Browser.onQQMiniGame != true) return;

    //兼容低版本QQ
    if (Laya.Browser.window.qq['createBlockAd'] == null) {

        console.log('当前QQ版本不支持积木');
        return
    }


    BannerAndVideo1._BlockAd = Laya.Browser.window.qq.createBlockAd({
        adUnitId: this.BlockAdId,
        size: 5,
        orientation: 'landscape',
        style: {
            left: 16,
            top: 16
        }
    })

    console.log('CreateBlockAd.show');
    BannerAndVideo1._BlockAd.show();

    BannerAndVideo1._BlockAd.onLoad((res) => {
        //console.log('CreateBlockAd onload show');
        console.log(res);
        BannerAndVideo1._BlockAd.show()

    });

    BannerAndVideo1._BlockAd.onError((res) => {
        console.log('_BlockAd error', res)
        console.log(res)

    });


    BannerAndVideo1._BlockAd.onResize(size => {
        console.log('_BlockAd onResize');
        console.log(size);
        let info = Laya.Browser.window.qq.getSystemInfoSync();
        // console.log(info);
        // 底部居中显示
        //  BannerAndVideo1._BlockAd.style.top = info.windowHeight - size.height;
        //中间显示
        let scale = 0.5;
        //top scale 0
        //
        //bottom 1
        //  console.log('windowHeight', info.windowHeight);
        //相对屏幕中间 上移动200


        //width	number	积木广告的真实宽度
        BannerAndVideo1._BlockAd.style.top = info.windowHeight * scale - 200;


        // console.log(BannerAndVideo1._BlockAd.style);
        //console.log(BannerAndVideo1._BlockAd);
        BannerAndVideo1._BlockAd.style.left = info.windowWidth * 0.5 - size.width * 0.5;

    })

    // BannerAndVideo1._BlockAd.load();
}

public static ClearBlockAd() {

    if (Laya.Browser.onQQMiniGame != true) return;
    console.log('ClearBlockAd 积木');

    if (BannerAndVideo1._BlockAd != null)
        BannerAndVideo1._BlockAd.hide();
}

}