前言

对于一个微信小游戏来说，好友排行榜绝对是必不可少的功能，能一定程度上增加玩家的战斗力和活跃度，实实在在地增加小游戏的曝光量。

这篇文章皮皮将讲解如何给小游戏项目加入微信好友排行榜功能~

不吹不黑，这绝对是新手开发者的福音！不接受任何反驳！

前排提示：文章中的 排行榜子域项目 已经上传至我的开源主页，甚至 改都不用改，接上项目就能用 ，链接在底部传送门~

正文

微信开放数据域

要让小游戏接入微信好友排行榜功能，我们必须先了解下什么是 开放数据域 ，来看看 Cocos 官方文档中的解释：
也就是说，我们的小游戏项目想要加入好友排行榜功能，就需要 单独再创建一个子项目专门用来展示好友排行榜 ，并且 只有在子项目中才可以调用微信提供的数据操作 API 。

主域（主项目)

首先我们需要在主项目中 增加一个显示排行榜的按钮 并 搭建排行榜的 UI 框架 。
- 我们应该尽可能将 UI 部分放在主域中展示。
- 必要的细节部分才在子域（子项目）中展示，保证效果的前提下越少越好啦。

注意到 wxSubContextView （叫啥名随你啦）节点了吗？
- 这个节点上有一个 WXSubContentView 组件，有了它，这个节点就会成为子域的容器。也就是说，子域的内容会显示在这个节点上，所以 子域的大小必须和这个节点一致 。
- 另外需要注意的是，容器节点还需要一个空的 Sprite 组件来渲染子域的内容。

然后来写一下排行榜的控制脚本，在主域中我们可以通过 wx.postMessage 函数向子域发送信息，获取排行榜或者设置玩家的分数。

const { ccclass, property } = cc._decorator;

@ccclass
export default class RankPanel extends cc.Component {

    @property(cc.Node)
    private main: cc.Node = null;

    @property(cc.Node)
    private closeBtnNode: cc.Node = null;

    private static instance: RankPanel = null;

    protected onLoad() {
        RankPanel.instance = this;

        this.closeBtnNode.on('touchend', RankPanel.hide, this);
    }

    protected onDestroy() {
        this.closeBtnNode.off('touchend', RankPanel.hide, this);
    }

    public static show() {
        this.instance.main.active = true;
        this.getRank();
    }

    public static hide() {
        this.instance.main.active = false;
    }

    /**
     * 设置用户的分数
     * @param value
     */
    public static setScore(value: number) {
        wx.postMessage({
            event: 'setScore',
            score: value
        });
    }

    /**
     * 获取排行榜
     */
    public static getRank() {
        wx.postMessage({
            event: 'getRank'
        });
    }

}

子域（子项目）

新建一个项目作为我们的子域，关于子域我们需要注意以下两点：
- 将子域的 Canvas 节点的 Canvas 组件的设计分辨率调整为我们主域的容器节点的大小 ，否则子域内容会被缩放，导致运行效果与预期不一致！
- 这里还要提一点，子域的 分辨率越低性能越高 ，反之 分辨率越高性能越低但是显示效果更好 。

将子域的 Main Camera 节点的 Camera 组件的 Background Color 属性的不透明度（Alpha）设为 0 ，否则运行时子域内容就是一片漆黑！

接下来就是和普通场景一样制作我们需要的好友列表 UI：
- 用 ScrollView 组件来展示我们的排行榜，并制作展示好友信息的预制体 item 。
- 编写 RankItem 组件，添加到 item 预制体上，主要用来设置好友头像、昵称和分数。

编写 Rank 组件，包含主要的设置、获取数据和更新好友信息展示的逻辑；在子域中，我们使用 wx.onMessage 来监听主域发来的消息。

点击编辑器左上方工具栏的 [ 项目 –> 项目设置 –> 模块设置 ] ， 取消勾选我们子域中没有用到的组件并保存 ，这一步的目的是 减少子域的包体大小 。

打包运行

首先是我们的主域（主项目）：打开 构建发布 面板，设置好参数后填写你的微信小游戏 appid ，然后将下方的 开放数据域目录设置为你的子域项目名 ，然后进行构建。

然后是子域（子项目）：同样是打开 构建发布 面板，将 发布平台 设置为 微信小游戏开放数据域 ， 发布路径 设置为 **我们主项目的导出目录（一般为 ${ 你的项目目录/build/wechatgame/ }） **，然后进行构建。

最后，主项目和子项目都构建完成后，我们用 微信开发者工具运行我们的主项目 ，点击加载排行榜，可以看到我们已经成功加载了好友排行榜啦！
- 如果你那里没有显示任何东西的话，那说明你还没有上传过分数~
- 另外如果微信开发者工具报错“[GameOpenDataContext] 子域只支持使用 2D 渲染模式”，不用担心，这是正常情况，你的代码没问题，不必理会。

补充

最后再补充一点，wx 是微信的内置全局变量，而在 Cocos Creator 中不存在 wx 这个全局变量，所以在 VSCode 中调用 wx 的函数会报错。
所以我在主项目和子项目中都添加了一个 wx.d.ts 声明文件，来表明 wx 以及其函数的存在，VSCode 就不会再报错了，而且还有智能提示！
我的开源游戏脚手架 eazax-ccc 就包含此文件，另外我的开源主页中也有单独的 wx.d.ts 仓库，下面是 wx.d.ts 文件的内容：

传送门

开源主页：陈皮皮

Eazax Cocos 游戏开发工具包

微信好友排行榜通用模板

微信小游戏函数与类型声明（wx.d.ts）

公众号

菜鸟小栈

我是陈皮皮，这是我的个人公众号，专注但不仅限于游戏开发、前端和后端技术记录与分享。

每一篇原创都非常用心，你的关注就是我原创的动力！

Input and output.

菜鸟小栈

微信小游戏接入好友排行榜

前言

正文

微信开放数据域

主域（主项目)

子域（子项目）

打包运行

补充

传送门

更多分享

公众号

菜鸟小栈