一、引言：为什么排行榜是小游戏的「社交核武器」？

微信小游戏集成好友排行榜/群友排行榜，能在玩家社交圈产生强力粘性：

• 看到熟人玩得比你好 👉 你会不会偷偷熬夜刷分？
• 发现好友玩得比你菜 👉 怎能忍住不截图嘲讽？
• 游戏热度就像野火，在小圈子里瞬间点燃！

排行榜类型	社交场景	独特优势
好友排行榜	熟人朋友圈	精准激发攀比心理
群友排行榜	微信吹水群	突破好友限制，陌生人也能Battle！

🔐 微信的「用户域」安全机制
为防止好友数据滥用，微信设计了双域隔离：

• 主域：运行游戏逻辑（可上传成绩，不能读取好友数据）
• 开放域（用户域）：专门处理排行榜（可读取数据，不能操作主域）

📚 官方文档：开放域能力说明
💡 核心规则：主域Canvas无法渲染开放域内容，必须通过专用通道交互！

---

二、前提准备

确保满足以下条件再上车：

• cocos3.8.0开发小游戏，并集成发布到微信小游戏。
• 微信公众平台，备案，微信认证等做完。
• 默认您已经掌握了从cocos做了一些游戏内容，点击过构建微信小游戏，并在微信小游戏开发工具中运行过。

三、效果图预览

好友排行榜实战效果

场景	效果图
结算界面排行榜入口
排行榜详情页

群友排行榜实战效果

场景	效果图
分享到群邀请
双榜单并列展示
群排行榜详情

---

四、微信好友排行榜集成指南

🔧 步骤一：生成开放域工程模板

1. 打开构建面板：
   项目设置 → 构建发布 → 编辑微信小游戏构建配置
   

2. 关键操作：
   ✅ 勾选 生成开放数据域工程模板 → 点击构建
   

3. 生成目录确认：
   构建后查看：build/wechatgame/openDataContext
   

📤 步骤二：上传玩家分数

在游戏结算逻辑中加入代码：

if (typeof window['wx'] !== 'undefined') {
    const wx = window['wx'];
    const kvDataList = [];
    kvDataList.push({
        key: `你的分数的key，随便你取名，取的时候对应着取就行`,
        value: '你的分数的value'
    });
    wx.setUserCloudStorage({
        KVDataList: kvDataList,
        success: () => {
            console.log('成功上传所有游戏分数到微信开放域');
        },
        fail: (err) => {
            console.error('上传游戏分数到微信开放域失败:', err);
        }
    });
}

📥 步骤三：读取并渲染排行榜

在 openDataContext/index.js 中处理数据：

const style = require('./render/style')
const template = require('./render/template')
const Layout = require('./engine').default;

let __env = GameGlobal.wx || GameGlobal.tt || GameGlobal.swan;
let sharedCanvas  = __env.getSharedCanvas();
let sharedContext = sharedCanvas.getContext('2d');

let friendsData = [];

function getFriendsData() {
    if (GameGlobal.wx) {
        let keyList = ['你的分数key，与前面设置值的时候的key保持一致'];//可以是一个list
        wx.getFriendCloudStorage({
            keyList: keyList, 
            success: res => {
                setDataRandRender(res)
            },
            fail: err => {
                console.error('获取好友数据失败：', err);
            }
        });
        
    }
}

function setDataRandRender( res) {
    console.log('获取好友数据成功：', res.data);
    // 处理好友数据
    friendsData = res.data.map(friend => ({
        avatarUrl: friend.avatarUrl,
        nickname: friend.nickname,
        rankScore: friend.KVDataList.find(data => data.key === (gameName + 'Score'))?.value || '0'
    }));

    // 按分数排序（从高到低）
     friendsData.sort((a, b) => parseFloat(a.rankScore) - parseFloat(b.rankScore));
    
    // 重新渲染排行榜
    draw({data: friendsData});
}

function draw(dataList) {
    Layout.clear();
    Layout.init(template(dataList), style);
    Layout.layout(sharedContext);
}

function updateViewPort(data) { 
    Layout.updateViewPort({
        x: data.x,
        y: data.y,
        width: data.width,
        height: data.height,
    });
}

__env.onMessage(data => {
    console.log(data);
    if ( data.type === 'engine' && data.event === 'viewport' ) {
        updateViewPort(data);
    }else {
        // 当需要更新排行榜时获取好友数据
        getFriendsData(data.type,data.rankType);
    }
});

---

五、群友排行榜集成指南

⚠️ 重要声明：

1. 步骤一/二与第四章完全相同（已操作可跳过）

2. 步骤三仅需替换一个API：

getFriendsData中的wx.getFriendCloudStorage换成wx.getGroupCloudStorage

🚨 血泪教训：
群数据获取必须通过分享卡片进入！直接打开游戏会获取失败！
相当于进群需要「邀请函」（shareTicket），硬闯会被微信保安丢出去！

---

六、自定义排行榜样式

打开关键文件进行深度美颜,想要什么界面效果自己去改：

openDataContext/
  └── render/
        └── template.js  // 排行榜UI核心文件

---

七、效果体验 & 反馈

🎮 实机体验

微信搜索：游戏玩家天赋检测
或扫码试玩：

📮 反馈通道

反馈方式	响应速度	推荐指数
邮箱	24小时内	⭐⭐⭐⭐
私信/评论	随缘	⭐⭐

📧 高效联系：1030833228@qq.com