好友排行榜是社交类小游戏的“灵魂”之一。今天分享一套基于微信开放数据域的高性能排行榜实现方案，支持击败榜/塔防榜一键切换，代码可直接复用。
💡左侧展示当前玩家的排名、战绩摘要以及榜单切换按钮；右侧展示好友排行榜列表（前10位），底部固定显示玩家自己的排名行。整体采用深蓝色半透明磨砂玻璃风格，圆角卡片设计，支持滚动查看。微信小游戏的开放数据域是一个独立的 JavaScript 环境，用于获取好友关系链数据并渲染排行榜。但原生 Canvas 绘制布局复杂、维护困难。我们基于 doT 模板 + 样式对象，实现了声明式 UI 构建，大幅提升开发效率。- index.js：监听主域消息，调用WX的接口，获取数据
- template.js：排行榜Layout页面布局文件
- style.js：排行榜Layout页面布局样式文件
const style = require('./render/style.js');const template = require('./render/template.js');//const Layout = require('./engine.js').default; // 微信官方 Canvas 引擎const Layout = requirePlugin('Layout').default;const sharedCanvas = wx.getSharedCanvas();const sharedContext = sharedCanvas.getContext('2d');let friendListGlobal = [];// 监听主域消息wx.onMessage((data) => { console.log('开放域收到消息：', data); handleMessageType(data);}); function handleMessageType(data) { if(!data){ console.log('未知消息类型'); } switch (data.command) { case 'killsBtn_click': getRenderData(data,friendListGlobal); break; case 'towerBtn_click': getRenderData(data,friendListGlobal); break; case 'load_frend_data': getFrendData(data); break; default: console.log('未知消息类型'); }}function getFrendData(data){}function getRenderData(data,friendList){ }// 渲染函数function renderRanking(data,comand) {}
<!-- 排名差值区域 --><textvalue="距离前一名还差"></text>{{? it.selfRank.command === 'killsBtn_click' }} <textvalue="{{= it.selfRank.preKills}}"></text>{{?}}{{? it.selfRank.command === 'towerBtn_click' }} <textvalue="{{= it.selfRank.preTowers}}"></text>{{?}}<textvalue="分"></text><!-- 榜单列表循环 -->{{~it.rankList :item}} <viewclass='rank_item'> <textvalue="{{= item.rank}}"></text> <imagesrc="{{= item.avatarUrl}}"></image> <textvalue="{{= item.nickname}}"></text> {{? it.selfRank.command === 'killsBtn_click' }} <textvalue="{{= item.kills}}"></text> {{?}} {{? it.selfRank.command === 'towerBtn_click' }} <textvalue="{{= item.towers}}"></text> {{?}} </view>{{~}}
以上代码为排行榜精简代码，包含如何在开放域名监听主域消息调用微信接口获取用户数据。注意：想要获取完整代码的同学，请私信 ，后续会挨个下发完整代码好友排行榜不仅能提升用户粘性，还能刺激社交传播。如果你正在开发微信小游戏，不妨直接复用这套高颜值、易扩展的排行榜模块。
结构小贴士：有任何问题欢迎留言交流，也欢迎分享给你的游戏开发伙伴。
