夜雨聆风
微信小游戏排行榜有多难写?看完这份源码你就懂了
玩过《魔卡塔防》的朋友都知道，微信小游戏里那个好友排行榜简直是社交裂变的灵魂——看着好友名次比自己高，恨不得再肝十局。但作为开发者，当你兴冲冲准备撸一个排行榜时，微信甩给你一个神秘概念：开放数据域。
今天，我直接把自己的生产环境源码拆开揉碎，一步步带你实现一个可切换击杀榜/防御塔榜、带高亮自己排名的完整排行榜。
💡
主域点击“排行榜”按钮 → 发消息给开放域 → 开放域拉取好友数据 + 自己信息 → 排序 → 用 Layout 引擎渲染 → 显示在主域的 sharedCanvas 上。
openDataContext/├── index.js # 主逻辑（本文代码）├── render/│ ├── style.js # 布局样式定义│ └── template.js # XML模板
wx.onMessage((data) => {switch (data.command) {case 'killsBtn_click': // 点击击杀榜case 'towerBtn_click': // 点击塔榜case 'load_frend_data': // 初次加载getFrendData(data);break;}});
wx.getUserInfo({openIdList: ['selfOpenId'], // 魔法字符串，专拿自己success: (res) => {const myInfo = res.data[0];// 再拉取好友数据，并用昵称+头像匹配标记 isSelfwx.getFriendCloudStorage({keyList: ['kills','towers','victoryNum'], // 托管数据keysuccess: (friendRes) => {// 遍历标记自己，并解析 KVDataList}});}});
-
openIdList: [‘selfOpenId’] 是固定写法，不是变量。 -
好友数据中的 KVDataList 是存储游戏自定义数值的地方，需要手动解析。
friendList.forEach(item => {// 先给默认值const demoKeArr = [{"key":"kills","value":"0"},{"key":"towers","value":"0"},{"key":"victoryNum","value":"0"},{"key":"maxLevel","value":"0"},{"key":"grade","value":"1"}]demoKeArr.forEach(openitem =>{const keyName = openitem.key;const keyValue = openitem.value;item[keyName] = keyValue;})// 再用实际数据覆盖if (item.KVDataList) {item.KVDataList.forEach(kv => {item[kv.key] = kv.value;});}});
const Layout = requirePlugin('Layout').default;Layout.init(template(rankData), style);Layout.layout(sharedContext);
-
主域发指令 → 开放域监听 -
开放域拉取好友数据（记得先拿自己） → 排序加工 -
用 Layout 引擎渲染 → 主域显示 sharedCanvas
