本文最后更新于：2020年5月14日凌晨

前言

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

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

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

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

正文

微信开放数据域

要让小游戏接入微信好友排行榜功能，我们必须先了解下什么是 开放数据域 ，来看看 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.

Cocos Creator 微信小游戏

#Cocos Creator #微信小游戏

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

https://chenpipi.cn/post/wechatgame-friends-rank/

作者

陈皮皮

发布于

2020年5月14日

更新于

2020年5月14日

许可协议

为什么选择 TypeScript 上一篇

Cocos Creator 开源代码混淆插件下一篇