直接进入正题,下图是一个很常见的小游戏排行榜,包含玩家排名、头像、微信名字、分数等等
那么这种排行榜该怎么做呢
首先你要了解关系链数据,这里是微信的文档,建议先了解,没必要深究,等做完这个项目再去看一遍,会有不一样的收获
https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html
为了方便理解关系链数据思想,我们今天做个简单的demo。
1,创建一个egret项目,使用Launcher发布,最好用自己的AppID,(听说这个测试用的id限制很多功能,例如分享..)
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