菜鸟 | 微信小游戏好友排行榜教程

写在前面：随着愈来愈多的新人开始接触白鹭引擎，创做属于本身的游戏。考虑到初学者会遇到一些实际操做问题，咱们近期整理推出“菜鸟”系列技术文档，以便更好的让这些开发者们快速上手，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     }

本文源码连接：https://github.com/shenysun/FriendsList