写在前面：跟着越来越多的新人最先打仗白鹭引擎，创作属于本身的游戏。考虑到初学者会碰到一些实际操作题目，我们近期整顿推出“菜鸟”系列手艺文档，以便更好的让这些开发者们疾速上手，Egret大神们可以自动疏忽此类内容。
本日我们分享的菜鸟文档将引见微信小游戏挚友排行榜的制造历程，包括竖立项目并宣布、微信开发者平台增加小游戏、翻开开放域功用、主域和开放域通信，以及ShareCanvas与原生Canvas的规划。
微信挚友排行榜应用微信关系链数据完成一个简朴的排行榜，此文档包括关系链数据、Egret平台数据接口、ShareCanvas离屏画布、原生Canvas规划。
竖立项目并宣布
竖立Egret项目，运用Launcher宣布，发起运用您个人AppID（测试用的id限定许多功用，比方分享）
增加小游戏
设置 > 基础设置 > 增加小顺序（可以经由过程考核即可）
翻开开放域功用
运用微信开发者东西翻开宣布的微信小游戏，或在终端运转 egret run –target wxgame ，找到游戏设置文件game.json，设置以下，个中openDataContext使小游戏支撑了微信开放域功用。
{
"deviceOrientation": "portrait",
"networkTimeout": {
"request": 5000,
"connectSocket": 5000,
"uploadFile": 5000,
"downloadFile": 5000
},
"openDataContext": "openDataContext"
}ShareCanvas引见
开放数据域的绘制文件中已具有一个经由过程Canvas API绘制的排行榜 ，SharedCanvas 是主域和开放数据域都可以接见的一个离屏画布，道理以下所示。
index.js文件中，官方已为我们绘制了一个简朴的排行榜demo，衬着出的结果以下图所示
主域和开放域通信
开放域已为我们绘制好了假造排行榜，如今只需要让主域翻开开放域的排行榜就可以展现在Canvas上了。
起首，竖立开放数据域显现对象，离屏画布的显现对象可直接在主域中经由过程以下的体式格局举行竖立，竖立的显现对象为 egre.Bitmap 范例，可直接增加到舞台上。
//在主域中竖立开放数据域显现对象
var platform = window.platform;
this.bitmap = platform.openDataContext.createDisplayObject(null,this.stage.stageWidth, this.stage.stageHeight);其次，经由过程主域与开放数据域的单向数据接口举行通信。主域可向开放数据域单方向发送音讯。
//主域向子域发送数据
plathform.openDataContext.postMessage({
isRanking: this.isRankClick,
text: "egret",
year: (new Date()).getFullYear(),
command: "open"
});子域可经由过程监听事宜的体式格局猎取到主域发送过来的自定义信息。
1 //子域吸收信息
2 wx.onMessage((data) => {
3 if (data.command == 'open') {
4 //显现开放域
5 if (!hasCreateScene) {
6 //竖立并初始化
7 hasCreateScene = createScene();
8 ...
9 }
10 }末了，开发者便可以在主域中发送数据，要求开放域翻开排行榜，子域吸收到数据翻开排行榜。
扩大
您可以经由过程修正index.js文件内的参数转变排行榜款式到达目的结果，可以运用本身的图片放到对应的途径中（总文件大小不要凌驾4M）。规划发起不要运用牢固数字的数值，而是以 stageWidth stageHeight 舞台宽高作为基数，以只管削减差别手机涌现的适配题目。
1 /**
2 * 资本加载组，将所需资本地点以及援用名举行注册
3 * 以后可经由过程assets援用名体式格局举行猎取
4 */
5 var assets = {
6 icon: "openDataContext/assets/icon.png",
7 box: "openDataContext/assets/signIn.png",
8 panel: "openDataContext/assets/bg.png",
9 button: "openDataContext/assets/OK_button.png",
10 title: "openDataContext/assets/rankingtitle.png"
11 };
注重：安卓偶然有不显现数据的BUG，在index.js中给字体加一个色彩即可
1 //设置字体
2 context.font = fontSize + "px Arial";
3 context.fillStyle = "#fff"小结
经由过程本文您可以对以下题目有更深切的相识
对微信的关系链数据有更深切的明白
平台数据接口的作用和运用
熟习主域与开放域数据通信划定规矩
对原生Canvas的规划有所相识
本文症结代码参考
1 private isRankClick:boolean = false;
2 private bitmap: egret.Bitmap;
3 /**
4 * 排行榜遮罩，为了防止点击开放数据域影响到主域，在主域中竖立一个遮罩层级来屏障点击事宜.</br>
5 * 依据本身的需求来设置遮罩的 alpha 值 0~1.</br>
6 */
7 private rankingListMask: egret.Shape;
8
9 //显现微信排行榜
10 public obBtnRankingClick(e:egret.TouchEvent) {
11 console.log("点击排行榜");
12 let plathform:any = window.platform;
13 if(!this.isRankClick) {
14 //处置惩罚遮罩,防止开放域数据影响主域
15 this.rankingListMask = new egret.Shape();
16 this.rankingListMask.graphics.beginFill(0x000000,1);
17 this.rankingListMask.graphics.drawRect(0,0,this.stage.width,this.stage.height);
18 this.rankingListMask.graphics.endFill();
19 this.rankingListMask.alpha = 0.4;
20 //设置为true,以避免触摸到下面的按钮
21 this.rankingListMask.touchEnabled = true;
22 this.addChildAt(this.rankingListMask,999);
23
24 //让排行榜按钮显现在容器内
25 this.addChild(this.btn_ranking);
26
27 //显现开放域数据
28 this.bitmap = plathform.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight);
29 this.addChild(this.bitmap);
30 //主域向子域发送数据
31 plathform.openDataContext.postMessage({
32 isRanking: this.isRankClick,
33 text: "egret",
34 year: (new Date()).getFullYear(),
35 command: "open"
36 });
37
38 this.isRankClick = true;
39 }
40 else {
41 this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap);
42 this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask);
43 this.isRankClick = false;
44 plathform.openDataContext.postMessage({
45 isRanking: this.isRankClick,
46 text: "egret",
47 year: (new Date()).getFullYear(),
48 command: "close"
49 });
50 }
51 }