微信小游戲排行榜設計技術梳理

要制作排行榜，我們需要使用一個數組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;