Egret做微信好友排行榜

直接进入正题，下图是一个很常见的小游戏排行榜，包含玩家排名、头像、微信名字、分数等等

那么这种排行榜该怎么做呢

首先你要了解关系链数据，这里是微信的文档，建议先了解，没必要深究，等做完这个项目再去看一遍，会有不一样的收获

https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html

为了方便理解关系链数据思想，我们今天做个简单的demo。

1，创建一个egret项目，使用Launcher发布,最好用自己的AppID，（听说这个测试用的id限制很多功能，例如分享..）

      注册AppID

2.设置->基本设置->添加小程序（类型选择小游戏）（能够通过审核即可）

3.使用微信开发者工具打开发布的微信小游戏，找到游戏配置文件game.json，配置如下，其中openDataContext让这个游戏支持了微信开放域功能

{
	"deviceOrientation": "portrait",
	"networkTimeout": {
		"request": 5000,
		"connectSocket": 5000,
		"uploadFile": 5000,
		"downloadFile": 5000
	},
	"openDataContext": "openDataContext"
}

index.js是这个游戏的shareCanvas，sharedCanvas 是主域和开放数据域都可以访问的一个离屏画布

这个js文件中官方已经为我们绘制了一个简单的排行榜demo，那么问题来了，我们怎么去调用这一块的东西呢?

4.调用shareCanvas开放域数据

笔者给调用排行榜数据设置了一个按钮触发事件，调用的方法如下

/*本文章关键

    //是否点击按钮
    private isRankClick:boolean = false;
    private bitmap: egret.Bitmap;
     /**
     * 排行榜遮罩，为了避免点击开放数据域影响到主域，在主域中建立一个遮罩层级来屏蔽点击事件.</br>
     * 根据自己的需求来设置遮罩的 alpha 值 0~1.</br>
     */
    private rankingListMask: egret.Shape;
    //点击排行榜事件
    public obBtnRankingClick(e:egret.TouchEvent) {
        console.log("点击排行榜");
        let plathform:any = window.platform;
        if(!this.isRankClick) {
             //处理遮罩,避免开放域数据影响主域
            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.4;
            this.rankingListMask.touchEnabled = true;
            this.addChild(this.rankingListMask);

            //让排行榜按钮显示在容器内
            this.addChild(UI_Panel.Instance.btn_ranking);
            
            //显示开放域数据
            this.bitmap = plathform.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight);
            this.addChild(this.bitmap);
            //主域向子域发送数据
            plathform.openDataContext.postMessage({
                isRanking: this.isRankClick,
                text: "egret",
                year: (new Date()).getFullYear(),
                command: "close"
            });

            this.isRankClick = true;
        }
        else {
            this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap);
            this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask);
            this.isRankClick = false;
            plathform.openDataContext.postMessage({
                isRanking: this.isRankClick,
                text: "egret",
                year: (new Date()).getFullYear(),
                command: "close"
            });
        }
    }

本文章关键结束*/

当你做完了这一步，再去看一遍微信的关系链数据使用也许会有不一样的收获哦！

https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html