微信小游戏排行榜设计技术梳理

要制作排行榜，我们需要使用一个数组totalGroup来存储同玩好友的数据，totalGroup中同玩好友数据格式如下:

const totalGroup = [
{
    key: 1,//用户排名
    name: "xiaoming",//用户昵称
    url: avatarUrl,//用户头像地址
    img:image,//用户头像，根据头像地址生成image
    scroes: 95//用户得分
},

{
    key: 2,
    name: "xiaohua",
    url: avatarUrl,
    img:image,
    scroes: 90
},
//...
]

 当游戏完成时，玩家得分会上传至用户托管数据，totalGroup根据用户同玩好友托管数据进行更新，排行榜根据totalGroup中的数据进行渲染。

游戏各阶段实现的功能总结如下：

1.游戏初始化时

根据同玩好友数据更新totalGroup；

2.游戏完成时

将玩家得分上传至用户托管数据

3.玩家打开排行榜时

根据同玩好友数据更新totalGroup，然后根据totalGroup渲染排行榜；

本文不会详解排行榜的渲染，主要分析下面两个问题：

1.上传玩家得分至用户托管数据

2.根据同玩好友数据更新totalGroup

一、上传玩家得分至用户托管数据

由于游戏逻辑是在主域中编写的，所以需要在主域中把得分等数据传入开方数据域（关于主域和开放数据域的概念请参考官方文档，这里不详述），接口如下：

//主域中编写
function setScore(score){
    var openDataContext = new WxgameOpenDataContext();

    var info={
        command:"setScore",
        score:score,
        timeStamp:new Date().getTime()
    };

    openDataContext.postMessage(info);
}

这里的timeStamp属性是得分时的时间戳，为了实现只对本周同玩好友进行排行的功能。然后在开方数据域中接受并处理信息：

//在开方数据域中编写
wx.onMessage((data) => {
    if (data.command == 'setScore'){
        setScore(data);//处理得分
    }else if(data.command == 'preload'){
        //游戏初始化时预加载资源和根据同玩好友数据更新totalGroup；
    }else if(data.command == 'open'){
        //根据同玩好友数据更新totalGroup及渲染排行榜；
    }
});    

在setStore中先判断分数是否是本周最高分，若是则将分数上传至用户托管数据：

//在开方数据域中编写
function setScore(data){
    var score=data.score;
    var timestamp=data.timeStamp;

    /*
    判断totalGroup是否存在当前用户，若不存在则更新分数，若存在则判    断其中的分数是否大于score，若大于则退出，否则更新分数。
    */
    for(var i=0;i<totalGroup.length;i++){
        var name=totalGroup[i].name;
        var lastScore=totalGroup[i].scroes;
        var username=userData[0].nickname;//userData中存储用户数据信息，在游戏加载时初始化，代码附在后面
        if (username == name && lastScore >= score){
            return;
        }
    }

    //更新用户托管数据
    return new Promise((resolve, reject) => {
        wx.setUserCloudStorage({
            KVDataList: [{
                key: "score",
                value: JSON.stringify(score),
            }, {
                key: "timestamp",
                value: JSON.stringify(timestamp),
            }, ],

            success: function (res) {
                resolve();
            },
        })
    })
}            

获取用户数据userData,游戏初始化时执行

//在开方数据域中编写
wx.getUserInfo({
    openIdList: ['selfOpenId'],
    lang: '',
    success: function(res) {
        userData=res.data;
    },
})

二、根据同玩好友数据更新totalGroup

为了实现只对本周玩家分数进行排行的功能，totalGroup中只存储本周玩家的数据；

function updateTotalGroup (){
    
    //按分数大小进行排序的排序函数
    function compare(obj1, obj2) {
        var score1 = parseInt(obj1.scroes);
        var score2 = parseInt(obj2.scroes);
        if (score1 > score2) {
            return -1;
        } else {
            return 1;
        }
    }

    wx.getFriendCloudStorage({
        keyList: ["score","timestamp"],
        success: function (res) {
        //先清空totolGroup
        totalGroup.splice(0,totalGroup.length);
        var data = res.data;

        for (let i = 0; i < data.length; i++) {
            if (data[i].KVDataList.length<2){
                continue;
            }
            //获取得分的时间戳并判断是否是本周，如果是则将数据存入totalGroup
            var timestamp=data[i].KVDataList[1].value;
            if (isCurrentWeek(timestamp)){
                var obj = {
                    key: i,
                    openid:data[i].openid,
                    name: data[i].nickname,
                    url: data[i].avatarUrl,
                    img: null,
                    scroes: data[i].KVDataList[0].value
                }
                totalGroup.push(obj);
            }
        }
        //排序及设置头像
        totalGroup.sort(compare);
        for (let i = 0; i < totalGroup.length; i++) {
            const img = wx.createImage();
            img.src = totalGroup[i].url;
            totalGroup[i].img = img;
            totalGroup[i].key = i + 1;
        } 
        //渲染排行榜
        renderRank(totalGroup)//实现过程省略

    })
}

通过时间戳判断分数是否是本周更新：

function isCurrentWeek(timestamp){
    if(timestamp==undefined){
        return false;
    }
    var date=new Date()，
    day=date.getDay()==0?7:date.getDate()，
    hours=date.getHours()，
    minutes=date.getMinutes()，
    seconds = date.getSeconds()，
    timefromSunday=(day*24*3600+hours*3600+minutes*60+seconds)*1000，//星期日凌晨0点到此时的毫秒数
    time=date.getTime()-timefromSunday;//1970年1月1人至上周日凌晨的毫秒数；

    return parseInt(timestamp)>time//若时间戳大于周日，则时间戳标志的事件发生在本周；
}

三、显示排行榜

在开方数据中渲染完排行榜后，在主域中可通过下面接口获取在开方数据域中创建的canvas;

const openDataContext = wx.getOpenDataContext();
const sharedCanvas = openDataContext.canvas;