首先在我们主项目,场景新建一个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();
                }
            });
        });

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

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

(这里由于赶项目进度原因,占时不整理)

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐