【微信小游戏】CocosCreator 微信小游戏排行榜

参考：

cocos文档-发布到微信小游戏

微信开放文档

cocos版本：2.4.4 

微信开发者工具版本：1.05.2103190

demo下载地址：cocos2_4_4_wx_rank.zip

一般微信小游戏排行榜分为世界排行榜和好友排行榜，现在来实现排行榜功能。

原理

为了保护数据，微信好友数据只能在开放域使用，所以除了游戏主项目以外，需要再创建一个项目作为开放域项目。

开放域项目要显示在主域中，需要组件subContextView，这个组件就像小电视，播放开放域的界面。

当显示世界排行榜时，关闭小电视。当显示好友排行榜时，打开小电视。

一 创建主项目

创建一个普通的ts项目

主场景只放一个排行榜按钮

点击排行榜按钮，打开排行榜面板

点击世界排行榜时，隐藏subContextView；点击好友排行榜时，显示subContextView，并使用微信接口postMessage通知开放域我要显示好友排行榜。

RankPanel.ts代码如下：

const { ccclass, property } = cc._decorator;

/**
 * 排行榜
 * @author chenkai 2021.3.2
 */
@ccclass
export default class RankPanel extends cc.Component {

    @property(cc.Toggle)  //世界排行榜按钮
    worldToggle: cc.Toggle = null;

    @property(cc.Toggle)  //好友排行榜按钮
    friendToggle: cc.Toggle = null;

    @property(cc.Node)    //世界排行榜
    worldRank: cc.Node = null;

    @property(cc.Node)    //好友排行榜
    friendRank: cc.Node = null;

    @property(cc.Button)  //关闭按钮
    closeBtn: cc.Button = null;

    @property(cc.SubContextView)  //开放域容器
    subContextView: cc.SubContextView = null;

    onLoad() {
        //按钮事件
        this.worldToggle.node.on("toggle", this.onToggleTap, this);
        this.friendToggle.node.on("toggle", this.onToggleTap, this);
        this.closeBtn.node.on(cc.Node.EventType.TOUCH_END, this.onCloseTap, this);

        //默认显示世界排行榜
        this.showWorldRank();
    }

    /**关闭排行榜 */
    private onCloseTap() {
        this.node.removeFromParent(false);
        this.node.destroy();
    }

    /**点击切换排行榜 */
    private onToggleTap(e: cc.Toggle) {
        switch (e) {
            case this.worldToggle:
                this.showWorldRank();
                break;
            case this.friendToggle:
                this.showFriendRank();
                break;
        }
    }

    /**显示世界排行榜 */
    private showWorldRank() {
        this.worldRank.active = true;
        this.friendRank.active = false;
        this.subContextView.node.active = false;
    }

    /**显示好友排行榜 */
    private showFriendRank() {
        this.worldRank.active = false;
        this.friendRank.active = true;
        this.subContextView.node.active = true;
        window["wx"].getOpenDataContext().postMessage({ cmd: "ShowFriendRank", data: null });
    }
}

因为好友数据里是空的，所以每次进入排行榜，我们就使用setUserCloudStorage保存一个测试数据，托管数据的key值是score，获取托管数据是根据这个key值来获取的。

玩家的分数score=999，这个保存函数可以在Main.ts里或者RankPanel.ts里调用。

    /**保存用户数据 */
    public setUserCloudStorage() {
        return new Promise((resolve, reject) => {
            //测试数据
            let value = {
                "wxgame": {
                    "score": 999,
                    "update_time": 1513080573
                },
                "cost_ms": 36500
            }
            let key = "score";
            let KVData = { key: key, value: JSON.stringify(value) };
            let KVDataList = [KVData];

            window["wx"].setUserCloudStorage({
                KVDataList: KVDataList,
                success(res) {
                    console.log("[WxPlatform] 保存用户数据成功:", KVDataList);
                    resolve(true);
                },
                fail(res) {
                    console.log("[WxPlatform] 保存用户数据失败:", KVDataList);
                    reject(false);
                }
            })
        });
    }

构建发布平台选择微信小游戏，设置开放域代码目录为wxOpenData，这个名称必须和开放域项目构建发布时的游戏名称一致。开放域游戏名称后面会讲到。

发布的项目用微信小游戏工具打开，没有appid，可以选择工具提供的测试号。

二 创建开放域项目

同样创建一个ts项目，设置场景和主项目的subContextView一样大小，例如500x500。

在开放域项目中创建好友排行榜面板

当主项目点击好友排行榜，使用微信接口postMessage向开放域发送消息，开放域用window["wx"].onMessage来接收消息

       //接收主域来的消息
        window["wx"].onMessage((obj)=>{
            switch (obj.cmd) {
                case "ShowFriendRank":   //显示好友排行榜
                    
                    break;
                case "HideFriendRank":   //隐藏好友排行榜
                    
                    break;
            }
        });

当收到显示好友排行榜的消息时，开放域使用getFriendCloudStorage获取好友数据，KVDataList就是之前保存的托管数据，key值是socre，因为只有一条数据，所以取KVDataList[0]也可以

根据好友数据创建排行榜列表Item

        window["wx"].getFriendCloudStorage({
            keyList: keyList,
            success:(res)=>{
                console.log("[openData] 获取所有好友数据成功:", res);
                let data = res.data;
                for (var i = 0; i < data.length; i++) {
                    //解析数据
                    let userInfo: any = data[i];
                    let openid = userInfo.openid;         //微信好友openid
                    let nickname = userInfo.nickname;     //微信好友昵称
                    let avatarUrl = userInfo.avatarUrl;   //微信好友头像
                    let KVDataList = userInfo.KVDataList; //微信好友托管数据
                    let score = 0;                        //从托管数据中解析出分数
                    if (KVDataList[0] != null) {
                        score = JSON.parse(KVDataList[0].value).wxgame.score;
                    }
                    //to do 创建item
                  
                }
            }, fail(res) {
                //to do
            }
        });

　　

微信的头像加载，使用远程加载loadRemote。

    /**加载微信头像 */
    public setSprite(icon: cc.Sprite, avatarUrl: string) {
        if (avatarUrl == null || avatarUrl.length == 0) {
            icon.spriteFrame = null
        } else {
            cc.assetManager.loadRemote(avatarUrl, { ext: '.png' }, (err, texture: any) => {
                icon.spriteFrame = new cc.SpriteFrame(texture);
            });
        }
    }

构建发布开放域

游戏名称wxOpenData，必须和主项目的构建发布时配置的开放域代码目录一致。

发布平台选择微信小游戏开放数据域

发布路径是主项目微信小游戏的发布目录：  C:UserslexunDesktopcocos2_4_4_wx_rankclientuildwechatgame

到这里，基本完成了。每次修改主项目或者开放域项目，都必须重新构建发布一次，微信开放者工具会自动更新编译。