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

原文链接：https://mp.weixin.qq.com/s/kYIdnHv-C5KuR9snekPNBg

原文虽然是菜鸟教程，但是有几个地方没有说清楚，补充如下。

你可以先看原文，看不懂时，再来这里看看补充内容。

我这里主要是补充一些细节。略去原文的图片和代码。

尤其是代码，原文的拷贝效果非常恶心，你试试看。

介绍微信小游戏好友排行榜的制作过程，包括创建项目并发布、微信开发者平台添加小游戏、打开开放域功能、主域和开放域通讯，以及ShareCanvas与原生Canvas的布局。
微信好友排行榜利用微信关系链数据实现一个简单的排行榜，此文档包含关系链数据、Egret平台数据接口、ShareCanvas 离屏画布、原生Canvas布局。

创建项目并发布

创建 Egret 项目，使用Launcher发布，建议使用您个人AppID（测试用的id限制很多功能，例如分享）。

这里太粗略了，略去了2000字，详细教程如下：
1. 安装与部署
2. Hello World
3. 小游戏新手教程
4. 小游戏进阶教程
由于白鹭引擎版本更新频率很高，这些教程更新不及时，凑合看吧。

添加小游戏

设置 > 基本设置 > 添加小程序（能够通过审核即可）

这里也很粗略，略去2000字， 详细内容参见
微信开发者文档

打开开放域功能

只有前面都搞明白了，做成了，你才能明白下面说的是什么，才能找到文件 game.json

使用微信开发者工具打开发布的微信小游戏，或在终端运行 egret run–target wxgame ，找到游戏配置文件 game.json，配置如下，其中 openDataContext使小游戏支持了微信开放域功能。

这里的代码，略去，原文的代码复制功能太闹心，你一试便知！！！
而且这个代码不用修改，系统自动生成的。

ShareCanvas 介绍

开放数据域的绘制文件中已经拥有一个通过Canvas API绘制的排行榜 ，SharedCanvas 是主域和开放数据域都可以访问的一个离屏画布。
index.js文件中，官方已经为我们绘制了一个简单的排行榜demo。

这个 index.js 文件在 openDataContext 目录下。
仔细分析里面的代码，你会发现，排行榜数据是写死的假数据：const totalGroup

主域和开放域通讯

开放域已经为我们绘制好了虚拟排行榜，现在只需要让主域打开开放域的排行榜就可以展示在Canvas上了。
首先，创建开放数据域显示对象，离屏画布的显示对象可直接在主域中通过以下的方式进行创建，创建的显示对象为 egre.Bitmap 类型，可直接添加到舞台上。

这里确实内容很多：
1. 在哪里写这个代码？ 源项目的 Main.ts
这里补充一下，源项目就是在白鹭引擎创建的那个项目。
目标项目就是自动生成的wxgame 项目。你会发现 wxgame 中的 js 目录是不能自己添加代码的，会被自动清空。详细内容参见：如何使用Egret插件压缩代码包体积，减少请求数量

1. 直接写这些代码是不行的，报错！！！
   platform 对象根本没有 openDataContext 属性，需要在 Platform.ts 添加。

declare interface Platform {
    getUserInfo(): Promise<any>;
    login(): Promise<any>;
    openDataContext
}

class DebugPlatform implements Platform {
    async getUserInfo() {
        return { nickName: "username" }
    }
    async login() {
    }
    openDataContext
}

其次，通过主域与开放数据域的单向数据接口进行通讯，主域可向开放数据域单方向发送消息。
最后，开发者便可以在主域中发送数据，请求开放域打开排行榜，子域接收到数据打开排行榜。

这里略去了一个关键步骤：加载资源！
按照上面的做法打开排行榜，你会发现报错了：

VM2582:1 gameSubContextThirdScriptError
Cannot read property 'width' of undefined;at requestAnimationFrame callback function
TypeError: Cannot read property 'width' of undefined
    at context_drawImage (http://127.0.0.1:40658/game/openDataContext/index.js:497:12)
    at drawRankPanel (http://127.0.0.1:40658/game/openDataContext/index.js:131:3)
    at Function.loop (http://127.0.0.1:40658/game/openDataContext/index.js:487:5)
    at http://127.0.0.1:40658/game/__subdev__/WAGameSubContext.js:4:14063

那么，在哪里加载资源呢？如何加载呢？
在 Main.ts 中
private async loadResource() 方法里面，添加一行代码：

    private async loadResource() {
        try {
            const loadingView = new LoadingUI();
            this.stage.addChild(loadingView);
            await RES.loadConfig("resource/default.res.json", "resource/");
            await this.loadTheme();
            await RES.loadGroup("preload", 0, loadingView);
            this.stage.removeChild(loadingView);
            //添加一行代码：加载排行榜资源
            platform.openDataContext.postMessage({command:'loadRes'});
        }
        catch (e) {
            console.error(e);
        }
    }

本文关键代码参考

这里才给了比较完整的代码。但是还是没有告诉你写在什么地方。
白鹭引擎项目的 Main.ts 中
这个教程就像一个迷宫，有一定经验的大佬，才能看明白。
最后才给了一个彩蛋，我没看。不知道代码质量怎样。

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