微信小游戏排行榜

子域index.js代码如下：

import * as Consts from './consts'

const PAGE_SIZE = 6;
const ITEM_HEIGHT = 125;

const dataSorter = (gameDatas, field = Consts.OpenDataKeys.Grade) => {
    return gameDatas.sort((a, b) => {
        const kvDataA = a.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.Grade);
        const kvDataB = b.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.Grade);
        const gradeA = kvDataA ? parseInt(kvDataA.value || 0) : 0;
        const gradeB = kvDataB ? parseInt(kvDataB.value || 0) : 0;
        return gradeA > gradeB ? -1 : gradeA < gradeB ? 1 : 0;
    });
}

class RankListRenderer
{
    constructor()
    {
        this.totalPage = 0;
        this.currPage = 0;
        this.gameDatas = [];    //https://developers.weixin.qq.com/minigame/dev/document/open-api/data/UserGameData.html
        this.init();
    }

    init()
    {
        this.canvas = wx.getSharedCanvas();
        this.ctx = this.canvas.getContext('2d');
        this.ctx.imageSmoothingEnabled = true;
        this.ctx.imageSmoothingQuality = "high";
    }

    listen()
    {
        //msg -> {action, data}
        wx.onMessage(msg => {
            console.log("ranklist wx.onMessage", msg);
            switch(msg.action)
            {
                case Consts.DomainAction.FetchFriend:
                    this.fetchFriendData();
                    break;

                case Consts.DomainAction.FetchGroup:
                    if(!msg.data)
                    {
                        return;
                    }
                    this.fetchGroupData(msg.data);
                    break;

                case Consts.DomainAction.Paging:
                    if(!this.gameDatas.length)
                    {
                        return;
                    }
                    const delta = msg.data;
                    const newPage = this.currPage + delta;
                    if(newPage < 0)
                    {
                        console.log("已经是第一页了");
                        return;
                    }
                    if(newPage + 1 > this.totalPage)
                    {
                        console.log("没有更多了");
                        return;
                    }
                    this.currPage = newPage;
                    this.showPagedRanks(newPage);
                    break;

                default:
                    console.log(`未知消息类型:msg.action=${msg.action}`);
                    break;
            }
        });
    }

    fetchGroupData(shareTicket)
    {
        //取出群同玩成员数据
        wx.getGroupCloudStorage({
            shareTicket,
            keyList:[
                Consts.OpenDataKeys.Grade,
            ],
            success:res => {
                console.log("wx.getGroupCloudStorage success", res);
                const dataLen = res.data.length;
                this.gameDatas = dataSorter(res.data);
                this.currPage = 0;
                this.totalPage = Math.ceil(dataLen / PAGE_SIZE);
                if(dataLen)
                {
                    this.showPagedRanks(0);
                }
            },
            fail:res => {
                console.log("wx.getGroupCloudStorage fail", res);
            },
        });
    }

    fetchFriendData()
    {
        //取出所有好友数据
        wx.getFriendCloudStorage({
            keyList:[
                Consts.OpenDataKeys.Grade,
            ],
            success:res => {
                console.log("wx.getFriendCloudStorage success", res);
                const dataLen = res.data.length;
                this.gameDatas = dataSorter(res.data);
                this.currPage = 0;
                this.totalPage = Math.ceil(dataLen / PAGE_SIZE);
                if(dataLen)
                {
                    this.showPagedRanks(0);
                }
            },
            fail:res => {
                console.log("wx.getFriendCloudStorage fail", res);
            },
        });
    }

    showPagedRanks(page)
    {
        const pageStart = page * PAGE_SIZE;
        const pagedData = this.gameDatas.slice(pageStart, pageStart + PAGE_SIZE);
        const pageLen = pagedData.length;

        this.ctx.clearRect(0, 0, 1000, 1000);
        for(let i = 0, len = pagedData.length; i < len; i++)
        {
            this.drawRankItem(this.ctx, i, pageStart + i + 1, pagedData[i], pageLen);
        }
    }

    //canvas原点在左上角
    drawRankItem(ctx, index, rank, data, pageLen)
    {
        const avatarUrl = data.avatarUrl.substr(0, data.avatarUrl.length - 1) + "132";
        const nick = data.nickname.length <= 10 ? data.nickname : data.nickname.substr(0, 10) + "...";
        const kvData = data.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.Grade);
        const grade = kvData ? kvData.value : 0;
        const itemGapY = ITEM_HEIGHT * index;
        //名次
        ctx.fillStyle = "#D8AD51";
        ctx.textAlign = "right";
        ctx.baseLine = "middle";
        ctx.font = "70px Helvetica";
        ctx.fillText(`${rank}`, 90, 80 + itemGapY);

        //头像
        const avatarImg = wx.createImage();
        avatarImg.src = avatarUrl;
        avatarImg.onload = () => {
            if(index + 1 > pageLen)
            {
                return;
            }
            ctx.drawImage(avatarImg, 120, 10 + itemGapY, 100, 100);
        };

        //名字
        ctx.fillStyle = "#777063";
        ctx.textAlign = "left";
        ctx.baseLine = "middle";
        ctx.font = "30px Helvetica";
        ctx.fillText(nick, 235, 80 + itemGapY);

        //分数
        ctx.fillStyle = "#777063";
        ctx.textAlign = "left";
        ctx.baseLine = "middle";
        ctx.font = "30px Helvetica";
        ctx.fillText(`${grade}分`, 620, 80 + itemGapY);

        //分隔线
        const lineImg = wx.createImage();
        lineImg.src = 'subdomain/images/llk_x.png';
        lineImg.onload = () => {
            if(index + 1 > pageLen)
            {
                return;
            }
            ctx.drawImage(lineImg, 14, 120 + itemGapY, 720, 1);
        };
    }
}

const rankList = new RankListRenderer();
rankList.listen();

主域：

import {appdata} from './appdata'
import {POP_UI_BASE} from './common/ui/pop_ui_base'
import {pop_mgr, UI_CONFIG} from "./common/ui/pop_mgr"
import {TimerMgr} from "./common/timer/timer_mgr"
import * as utils from "./common/util"
import * as wxapi from "./common/wxapi"
import * as Audio from "./common/audio/audioplayer"

const {ccclass, property} = cc._decorator;
@ccclass
export class RankView2 extends POP_UI_BASE {

    @property(cc.Sprite)
    img_head: cc.Sprite = null;

    @property(cc.Label)
    txt_name: cc.Label = null;

    @property(cc.Sprite)
    img_rank: cc.Sprite = null;

    timerId:number;
    isDirty:boolean;
    rankTexture:cc.Texture2D;
    rankSpriteFrame:cc.SpriteFrame;

    on_show(...params)
    {
        const appUserInfo = appdata.appUserInfo;
        const wxUserInfo = appdata.wxUserInfo;
        const avatarUrl = wxUserInfo.avatarUrl132;
        if(avatarUrl.length > 0)
        {
            this.txt_name.string = wxUserInfo.nickName;
            utils.load_external_img(this.img_head, avatarUrl, "png");
        }

        //只能在主域设置大小, 且要先于赋值到sprite才起作用
        const sharedCanvas = wxapi.wxOpenData.wxGetSharedCanvas();
        sharedCanvas.width = this.img_rank.node.width;
        sharedCanvas.height = this.img_rank.node.height;

        this.rankTexture = new cc.Texture2D();
        this.rankSpriteFrame = new cc.SpriteFrame();
        
        //拿好友排行榜
        this.isDirty = true;
        wxapi.wxOpenData.wxPostMessageToSubDomain({
            action:wxapi.WxDomainAction.FetchFriend,
        });
        this.timerId = TimerMgr.getInst().loop(0.1, utils.gen_handler(this.updateRankList, this));
    }

    on_hide() 
    {
        this.rankTexture = null;
        this.rankSpriteFrame = null;
        this.isDirty = false;
        TimerMgr.getInst().remove(this.timerId);
    }

    updateRankList()
    {
        if(!this.isDirty)
        {
            return;
        }
        const sharedCanvas = wxapi.wxOpenData.wxGetSharedCanvas();
        this.rankTexture.initWithElement(sharedCanvas);
        this.rankTexture.handleLoadedTexture();
        this.rankSpriteFrame.setTexture(this.rankTexture);
        this.img_rank.spriteFrame = this.rankSpriteFrame;
    }

    onTouchPageBtn(event, delta)
    {
        this.isDirty = true;
        wxapi.wxOpenData.wxPostMessageToSubDomain({
            action:wxapi.WxDomainAction.Paging,
            data:parseInt(delta),
        });
    }

    onTouchGroupRank()
    {
        wxapi.wxShare.share({
            title:"分享文本", 
            imageUrl:"shareimg/bg02.png",
            query:`openID=${appdata.appUserInfo.openid}`,
        }, utils.gen_handler((shareTickets:string[]) => {
            if(!shareTickets || !shareTickets.length)
            {
                console.log('本次分享无shareTicket');
                return;
            }
            const shareTicket = shareTickets[0];
            this.isDirty = true;
            wxapi.wxOpenData.wxPostMessageToSubDomain({
                action:wxapi.WxDomainAction.FetchGroup,
                data:shareTicket,
            });
        }));
    }
}

排行榜滑动和翻页

主域:

import * as Consts from "./consts"
import {appdata} from './appdata'
import {POP_UI_BASE} from './common/ui/pop_ui_base'
import {pop_mgr, UI_CONFIG} from "./common/ui/pop_mgr"
import {TimerMgr} from "./common/timer/timer_mgr"
import * as utils from "./common/util"
import * as wxapi from "./common/wxapi"
import * as Audio from "./common/audio/audioplayer"

const {ccclass, property} = cc._decorator;
@ccclass
export class RankView2 extends POP_UI_BASE {
    @property(cc.Sprite)
    img_rank: cc.Sprite = null;

    timerId:number;
    isDirty:boolean;
    rankTexture:cc.Texture2D;
    rankSpriteFrame:cc.SpriteFrame;

    on_show(...params)
    {
        //只能在主域设置大小, 且要先于赋值到sprite才起作用
        const sharedCanvas = wxapi.wxOpenData.wxGetSharedCanvas();
        sharedCanvas.width = this.img_rank.node.width;
        sharedCanvas.height = this.img_rank.node.height;

        this.rankTexture = new cc.Texture2D();
        this.rankSpriteFrame = new cc.SpriteFrame();
        
        //拿好友排行榜
        this.isDirty = true;
        wxapi.wxOpenData.wxPostMessageToSubDomain({
            action:wxapi.WxDomainAction.FetchFriend,
        });
        this.timerId = TimerMgr.getInst().loop(0.1, utils.gen_handler(this.updateRankList, this));
        this.img_rank.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    }

    on_hide() 
    {
        this.rankTexture = null;
        this.rankSpriteFrame = null;
        this.isDirty = false;
        TimerMgr.getInst().remove(this.timerId);
        this.img_rank.node.off(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    }

    onTouchMove(event:cc.Event.EventTouch)
    {
        const deltaY = event.getDeltaY();
        // console.log("rank touchmove:", deltaY);
        this.isDirty = true;
        wxapi.wxOpenData.wxPostMessageToSubDomain({
            action:wxapi.WxDomainAction.Paging,
            data:deltaY,
        });
    }

    updateRankList()
    {
        if(!this.isDirty)
        {
            return;
        }
        const sharedCanvas = wxapi.wxOpenData.wxGetSharedCanvas();
        this.rankTexture.initWithElement(sharedCanvas);
        this.rankTexture.handleLoadedTexture();
        this.rankSpriteFrame.setTexture(this.rankTexture);
        this.img_rank.spriteFrame = this.rankSpriteFrame;
    }

    onTouchGroupRank()
    {
        wxapi.wxShare.share({
            title:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", 
            imageUrl:"shareimg/bg02.png",
            query:`openID=${appdata.appUserInfo.openid}`,
        }, utils.gen_handler((shareTickets:string[]) => {
            if(!shareTickets || !shareTickets.length)
            {
                console.log('本次分享无shareTicket');
                return;
            }
            const shareTicket = shareTickets[0];
            this.isDirty = true;
            wxapi.wxOpenData.wxPostMessageToSubDomain({
                action:wxapi.WxDomainAction.FetchGroup,
                data:shareTicket,
            });
        }));
    }
}

子域：

import * as Consts from './consts'

const PAGE_SIZE = 8;
const ITEM_WIDTH = 750;
const ITEM_HEIGHT = 125;

const dataSorter = (gameDatas, field = Consts.OpenDataKeys.Grade) => {
    return gameDatas.sort((a, b) => {
        const kvDataA = a.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.Grade);
        const kvDataB = b.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.Grade);
        const gradeA = kvDataA ? parseInt(kvDataA.value || 0) : 0;
        const gradeB = kvDataB ? parseInt(kvDataB.value || 0) : 0;
        return gradeA > gradeB ? -1 : gradeA < gradeB ? 1 : 0;
    });
}

class RankListRenderer {
    constructor() {
        this.offsetY = 0;
        this.maxOffsetY = 0;
        this.gameDatas = [];    //https://developers.weixin.qq.com/minigame/dev/document/open-api/data/UserGameData.html
        this.init();
    }

    init() {
        this.canvas = wx.getSharedCanvas();
        this.ctx = this.canvas.getContext('2d');
        this.ctx.imageSmoothingEnabled = true;
        this.ctx.imageSmoothingQuality = "high";
    }

    listen() {
        //msg -> {action, data}
        wx.onMessage(msg => {
            //console.log("ranklist wx.onMessage", msg);
            switch (msg.action) {
                case Consts.DomainAction.FetchFriend:
                    this.fetchFriendData();
                    break;

                case Consts.DomainAction.FetchGroup:
                    if (!msg.data) {
                        return;
                    }
                    this.fetchGroupData(msg.data);
                    break;

                case Consts.DomainAction.Paging:
                    if (!this.gameDatas.length) {
                        return;
                    }
                    const deltaY = msg.data;
                    const newOffsetY = this.offsetY + deltaY;
                    if (newOffsetY < 0) {
                        // console.log("前面没有更多了");
                        return;
                    }
                    if (newOffsetY + PAGE_SIZE * ITEM_HEIGHT > this.maxOffsetY) {
                        // console.log("后面没有更多了");
                        return;
                    }
                    this.offsetY = newOffsetY;
                    this.showRanks(newOffsetY);
                    break;

                default:
                    console.log(`未知消息类型:msg.action=${msg.action}`);
                    break;
            }
        });
    }

    fetchGroupData(shareTicket) {
        //取出群同玩成员数据
        wx.getGroupCloudStorage({
            shareTicket,
            keyList: [
                Consts.OpenDataKeys.Grade,
            ],
            success: res => {
                console.log("wx.getGroupCloudStorage success", res);
                const dataLen = res.data.length;
                this.gameDatas = dataSorter(res.data);
                this.offsetY = 0;
                this.maxOffsetY = dataLen * ITEM_HEIGHT;
                if (dataLen) {
                    this.showRanks(0);
                }
            },
            fail: res => {
                console.log("wx.getGroupCloudStorage fail", res);
            },
        });
    }

    fetchFriendData() {
        //取出所有好友数据
        wx.getFriendCloudStorage({
            keyList: [
                Consts.OpenDataKeys.Grade,
            ],
            success: res => {
                console.log("wx.getFriendCloudStorage success", res);
                const dataLen = res.data.length;
                this.gameDatas = dataSorter(res.data);
                this.offsetY = 0;
                this.maxOffsetY = dataLen * ITEM_HEIGHT;
                if (dataLen) {
                    this.showRanks(0);
                }
            },
            fail: res => {
                console.log("wx.getFriendCloudStorage fail", res);
            },
        });
    }

    showRanks(offsetY) {
        const startY = offsetY % ITEM_HEIGHT;
        const startIndex = Math.floor(offsetY / ITEM_HEIGHT);
        const stopIndex = startIndex + PAGE_SIZE + (startY == 0 ? 0 : 1);
        const datas = this.gameDatas.slice(startIndex, stopIndex);

        this.ctx.clearRect(0, 0, 1000, 1000);
        for (let i = 0, len = datas.length; i < len; i++) {
            this.drawRankItem(this.ctx, i, startIndex + i + 1, datas[i], startY, this.offsetY);
        }
    }

    drawAvatar(ctx, avatarUrl, x, y, w, h, cb) {
        avatarUrl = avatarUrl.substr(0, avatarUrl.lastIndexOf('/')) + "/132";
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(x - 5, y - 5, w + 10, h + 10);

        const avatarImg = wx.createImage();
        avatarImg.src = avatarUrl;
        avatarImg.onload = () => {
            cb(avatarImg);
        };
    }

    //canvas原点在左上角
    drawRankItem(ctx, index, rank, data, startY, prevOffsetY) {
        const nick = data.nickname.length <= 10 ? data.nickname : data.nickname.substr(0, 10) + "...";
        const kvData = data.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.Grade);
        const grade = kvData ? kvData.value : 0;
        const itemGapY = ITEM_HEIGHT * index - startY;

        //背景颜色
        if (rank % 2 == 1) {
            ctx.fillStyle = "#FBF7E4";
            ctx.fillRect(0, itemGapY, ITEM_WIDTH, ITEM_HEIGHT);
        }

        //名次
        if (rank < 4) {
            const rankImg = wx.createImage();
            rankImg.src = `subdomain/images/llk_phb_icon${rank}.png`;
            rankImg.onload = () => {
                if(prevOffsetY == this.offsetY) {
                    ctx.drawImage(rankImg, 55, 30 + itemGapY, 78, 82);
                }
            };
        } else {
            ctx.fillStyle = "#BDBDBD";
            ctx.textAlign = "right";
            ctx.baseLine = "middle";
            ctx.font = "50px Helvetica";
            ctx.fillText(`${rank}`, 100, 80 + itemGapY);
        }

        //头像
        const avatarX = 125;
        const avatarY = 25 + itemGapY;
        const avatarW = 80;
        const avatarH = 80;
        this.drawAvatar(ctx, data.avatarUrl, avatarX, avatarY, avatarW, avatarH, (avatarImg) => {
            if(prevOffsetY == this.offsetY) {
                ctx.drawImage(avatarImg, avatarX, avatarY, avatarW, avatarH);
            }
        })

        //名字
        ctx.fillStyle = "#777063";
        ctx.textAlign = "left";
        ctx.baseLine = "middle";
        ctx.font = "30px Helvetica";
        ctx.fillText(nick, 220, 80 + itemGapY);

        //分数
        ctx.fillStyle = "#777063";
        ctx.textAlign = "left";
        ctx.baseLine = "middle";
        ctx.font = "30px Helvetica";
        ctx.fillText(`${grade}分`, 620, 80 + itemGapY);
    }
}

const rankList = new RankListRenderer();
rankList.listen();

上面都是在论坛上看到的,最近自己也是再写排行榜,所以整理一下,防止自己忘记