Cocos Creator 微信小游戏排行榜

最新推荐文章于 2026-06-12 03:40:02 发布

原创最新推荐文章于 2026-06-12 03:40:02 发布 · 771 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

cocos creator

本文介绍如何在微信小游戏中实现排行榜功能，包括主域与子域的通信、数据传递及排行榜数据的获取与展示。

首先在我们主项目，场景新建一个node，然后添加组件-其他组件-WXSubContextView 大小就设为你想要显示的排行榜大小。随后在node上层父节点挂上脚本，脚本为主域和子域互相传递信息的接口。

    /**
     * 获取排行榜
     */
    public getRank() {
        wx.postMessage({
            event: 'getRank',
        });
    }
    /**
    *设置排行榜数据
    */
    public setScore(data) {
        wx.postMessage({
            event: 'setScore',
            data: {"name":"aaa","value":12345}
        });
    }

然后新建项目创建场景，场景大小为刚才主域设置的node的大小，如果不一样大，可能会出现不能显示的情况。

创建列表和主域一样，设置scrollview。

子域挂载脚本以响应主域发来的消息，来做响应的操作。

protected onLoad() {
        if (cc.sys.platform !== cc.sys.WECHAT_GAME_SUB) return;
        // 监听来自主域的消息
        wx.onMessage((msg: any) => this.onMessage(msg));
    }

    /**
     * 消息回调
     * @param msg 消息
     */
    private onMessage(msg: any) {
        switch (msg.event) {
            case 'setScore':
                this.setScore(msg.data);
                break;
            case 'getRank':
                this.getRank(msg.type);
                break;
        }
    }
private async setScore(data) {
        console.log('[setScore]', JSON.stringify(data));
        // let oldScore = await this.getScore(data.key);
        // if (oldScore === -1) return;
        // if (data.value > oldScore) {
        wx.setUserCloudStorage({
            KVDataList: data,
            success: (args) => {
                // console.log('[setScore]', 'success', args);
            },
            fail: (args) => {
                console.log('[setScore]', 'fail', args)
            }
        });
        // }
    }

    /**
     * 获取排行榜
     */
    private async getRank(type) {
        // console.log('[getRank]', type);
        // 显示加载动画
        this.showLoading();
        // 调用微信的函数
        let list = ["name", 'value'];
        await new Promise(resolve => {
            wx.getFriendCloudStorage({
                keyList: list,
                success: (res: any) => {
                    // console.log('[getRank]', 'success', res);
                    // 对数据进行排序
                    res.data.sort((a: UserGameData, b: UserGameData) => {
                            if (a.KVDataList.length === 0 && b.KVDataList.length === 0)                                                                                 
                                return 0;
                            if (a.KVDataList.length === 0) return 1;
                            if (b.KVDataList.length === 0) return -1;
                        });
                    // 排序之后进行展示
                    //this.updateRankList(res.data, type);
                    resolve();
                },
                fail: (res: any) => {
                    console.log('[getRank]', 'fail');
                    resolve();
                }
            });
        });

然后构建发布，发布平台填写微信小游戏开放数据域，发布路径填写主域构建的目录

构建主域开放数据域代码目录填写子域的包名

（这里由于赶项目进度原因，占时不整理）

标签

#cocos2d #creator #微信游戏