新手小白福音：CocosCreator微信小游戏排行榜保姆级教程，它来了~

做游戏，那就避免不了整个排行榜功能，因为对于一个游戏来说，排行榜绝对是必不可少的一个功能，它在一定程度上能给增加玩家的活跃度，从而大大的提高游戏自身的曝光量。
那么今天，就让小威带大家一起走进“怎样给微信小游戏加入排行榜功能”的茶话会吧。不是自夸，绝对干货，新手入门开发者的福音。不接受任何反驳，你要反驳那就算你赢！hahaha~
其他的前置内容就不用我多说了嘛，自行解决，今天重点只说排行榜，为了用户隐私和数据安全，微信的好友数据只能在开放数据域中使用，那么这个时候就会有客官会问：神马是开放数据域？很好，给你一个小心心。
对于微信开放数据域，Cocos官方有相关文档进行解释，如图：

对于如何整合，Cocos官方也有详细说明，如图：

好了，直接进入主题吧，首先我们需要在主项目（以下称主域）中增加显示排行榜的触发按钮，以及搭建要显示排行榜（以下称子域）的窗口UI结构（这里我们尽可能的将除了数据部分之外的功能都放在主域中展示，不要问为什么，因为问了我也不会说，哈哈哈！还有就是今天重点只说好友榜，其他的暂时无视~）

重点来了，有注意到topContent这个节点了波（这个名字根据你喜欢随意），这个节点上有个SubContextView组件，要有这个属性，这个节点才会成为子域的容器窗口，子域的内容也才会显示在主域上，所以这个节点的大小要跟子域大小保持一致，不然嘛，你懂得~
接下来就是今天的重头戏咯，竖起你的小耳朵仔细听，当我们在主域中点击排行榜按钮的时候，我们除了要显示主域中显示排行榜的窗口外，还需要通过wx.postMessage向子域发送指令信息，以此来获取排行榜数据或者设置玩家成绩（因为获取开放数据域数据的api只能在子域中调用，所以主域只能发送相关指令，子域根据对应指令执行相关api）。

cc.Class({
   
    extends: cc.Component,
    properties: {
   
        FriendcontentBg:cc.Node,
        FriendBtn:cc.Node,
    },
	//关闭排行榜
    hide() {
   
        this.node.active = false;
        wx.postMessage({
    type: 'close_rank' });
    },
	//上一页
    prePage(userInfo) {
   
        if (window.wx) {
   
            if(this.FriendcontentBg.active){
   
                wx.postMessage({
    type: 'pre_page', userinfo: {
    openid: userInfo.openid, avatar: userInfo.avatar, nickName: userInfo.nickname, score: userInfo.MaxScor } });
            }  
        }
    },
	//下一页
    nextPage(userInfo) {
   
        if (window.wx) {
   
            if(this.FriendcontentBg.active){
   
                wx.postMessage({
    type: 'next_page', userinfo: {
    openid: userInfo.openid, avatar: userInfo.avatar, nickName: userInfo.nickname, score: userInfo.MaxScor } });
            }
        }
    },
	//发送数据给私域
    postMsg(top_name,userinfo) {
   
        window.sharedCanvas.width = 658;
        window.sharedCanvas.height = 810;
        window.wx.postMessage({
   
            type: top_name,
            name: "",
            size: {
    width: 658, height: 810 },
            userinfo: {
   
                openid: userinfo.openid,
                avatar: userinfo.avatar,
                nickName: userinfo.nickname,
                score: userinfo.MaxScore
            }
        });
    },
	//展示排行榜
    show() {
   
        this.node.active = true;
        this.scheduleOnce(() => {
   
            this.postMsg("show_rank");
        }, 1);
        this.FriendcontentBg.active = true
        this.FriendBtn.active = true
    },
});

下面我们新建一个子域项目，需要注意的是子域中的Canvas节点组件的大小要设置成与主域的容器节点大小一致，否则运行效果会与预期有所出入。

然后将子域的Main Camera节点中Camera组件的Background Color属性的不透明度设为0，不然可能会出现子域内容是黑屏~

接着，我们就制作排行榜的布局，并将写好的列表制作成预制体rankitem，这里跟普通页面布局一样，就不一一赘述了。
编写rankitem脚本，并添加到预制体rankitem上，主要是设置头像、昵称、分数、地址等信息。

const {
    get } = require('http');
var util = require('util');
cc.Class({
   
    extends: cc.Component,
    properties: {
   
        secondSpr: {
   
            default: null,
            type: cc.SpriteFrame
        },
        thirdSpr: {
   
            default: null,
            type: cc.SpriteFrame
        },
        _number: 0,
        _avatar: '',
        _nickName: '',
        _score: 0,
        _city:'',
        number: {
   
            get() {
   
                return this._number;
            },
            set(value) {
   
                var spr = this.node.getChildByName('art'