Egret白鹭引擎实例开发之密室逃生RoomRun(七)微信小游戏排行榜

微信小游戏的排行榜用到了开放数据域,具体原理查看http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/openDataContext/index.html

官方模版已经弄好了一个简易的排行榜

image.png

类似于使用分享功能,现在我们在platfrom.ts中使用这个openDataContext

image.png


我们将排行榜实现在开始界面,打开StartGameLayer.ts

在init()方法最后加入

    this.btnClose = new eui.Button();
        this.btnClose.label = "btnClose!";
        this.btnClose.y = 35;
        this.btnClose.horizontalCenter = 0;
        this.addChild(this.btnClose);
        this.btnClose.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, this);
        //加载资源
        const platform:any = window.platform;
        platform.openDataContext.postMessage({
            command:'loadRes'
        });

点击事件

      private bitmap: egret.Bitmap;
    private isdisplay = false;
    /**
     * 排行榜遮罩,为了避免点击开放数据域影响到主域,在主域中建立一个遮罩层级来屏蔽点击事件.</br>
     * 根据自己的需求来设置遮罩的 alpha 值 0~1.</br>
     * 
     */
    private rankingListMask: egret.Shape;
    /**
     * 点击按钮
     * Click the button
     */
    private onButtonClick(e: egret.TouchEvent) {
        // let openDataContext = wx.getOpenDataContext();
        console.log('点击btnClose按钮');
        let platform: any = window.platform;
        if (this.isdisplay) {
            this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap);
            this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask);
            this.isdisplay = false;
            platform.openDataContext.postMessage({
                isDisplay: this.isdisplay,
                text: 'hello',
                year: (new Date()).getFullYear(),
                command: "close"
            });
        } else {
            //处理遮罩,避免开放数据域事件影响主域。
            this.rankingListMask = new egret.Shape();
            this.rankingListMask.graphics.beginFill(0x000000, 1);
            this.rankingListMask.graphics.drawRect(0, 0, this.stage.width, this.stage.height);
            this.rankingListMask.graphics.endFill();
            this.rankingListMask.alpha = 0.5;
            this.rankingListMask.touchEnabled = true;
            this.addChild(this.rankingListMask);
            //简单实现,打开这关闭使用一个按钮。
            this.addChild(this.btnClose);
            //主要示例代码开始
            this.bitmap = platform.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight);
            this.addChild(this.bitmap);
            //主域向子域发送自定义消息
            platform.openDataContext.postMessage({
                isDisplay: this.isdisplay,
                text: 'hello',
                year: (new Date()).getFullYear(),
                command: "open"
            });
            //主要示例代码结束            
            this.isdisplay = true;
        }
 
    }

重新发布为微信小游戏,用微信开发者工具打开项目,点击btnClose!按钮弹出排行榜

image.png

这里面的数据是写死的,实际应用还需要做修改

image.png

项目代码: https://github.com/smiger/RoomRun


发表评论

(必填)

(必填)

(以便回访)

博客已稳定运行: 访问量:115,575 views 网站备案号:闽ICP备17026396号-1