一、引言：為什么排行榜是小游戲的「社交核武器」？
微信小游戲集成好友排行榜/群友排行榜，能在玩家社交圈產(chǎn)生強(qiáng)力粘性：
- 看到熟人玩得比你好 ?? 你會(huì)不會(huì)偷偷熬夜刷分？
- 發(fā)現(xiàn)好友玩得比你菜 ?? 怎能忍住不截圖嘲諷？
- 游戲熱度就像野火，在小圈子里瞬間點(diǎn)燃！
| 排行榜類型 | 社交場(chǎng)景 | 獨(dú)特優(yōu)勢(shì) |
|---|---|---|
| 好友排行榜 | 熟人朋友圈 | 精準(zhǔn)激發(fā)攀比心理 |
| 群友排行榜 | 微信吹水群 | 突破好友限制，陌生人也能Battle！ |
?? 微信的「用戶域」安全機(jī)制
為防止好友數(shù)據(jù)濫用，微信設(shè)計(jì)了雙域隔離：
- 主域：運(yùn)行游戲邏輯（可上傳成績(jī)，不能讀取好友數(shù)據(jù)）
- 開放域（用戶域）：專門處理排行榜（可讀取數(shù)據(jù)，不能操作主域）
?? 官方文檔：開放域能力說(shuō)明
?? 核心規(guī)則：主域Canvas無(wú)法渲染開放域內(nèi)容，必須通過(guò)專用通道交互！
二、前提準(zhǔn)備
確保滿足以下條件再上車：
- cocos3.8.0開發(fā)小游戲，并集成發(fā)布到微信小游戲。
- 微信公眾平臺(tái)，備案，微信認(rèn)證等做完。
- 默認(rèn)您已經(jīng)掌握了從cocos做了一些游戲內(nèi)容，點(diǎn)擊過(guò)構(gòu)建微信小游戲，并在微信小游戲開發(fā)工具中運(yùn)行過(guò)。
三、效果圖預(yù)覽
好友排行榜實(shí)戰(zhàn)效果
| 場(chǎng)景 | 效果圖 |
|---|---|
| 結(jié)算界面排行榜入口 |  image.png
|
| 排行榜詳情頁(yè) |  image.png
|
群友排行榜實(shí)戰(zhàn)效果
| 場(chǎng)景 | 效果圖 |
|---|---|
| 分享到群邀請(qǐng) |  image.png
|
| 雙榜單并列展示 |  image.png
|
| 群排行榜詳情 | image.png
|
四、微信好友排行榜集成指南
?? 步驟一：生成開放域工程模板
-
打開構(gòu)建面板：
項(xiàng)目設(shè)置→構(gòu)建發(fā)布→ 編輯微信小游戲構(gòu)建配置
image.png
-
關(guān)鍵操作：
? 勾選生成開放數(shù)據(jù)域工程模板→ 點(diǎn)擊構(gòu)建
image.png
-
生成目錄確認(rèn)：
構(gòu)建后查看：build/wechatgame/openDataContext
image.png
?? 步驟二：上傳玩家分?jǐn)?shù)
在游戲結(jié)算邏輯中加入代碼：
if (typeof window['wx'] !== 'undefined') {
const wx = window['wx'];
const kvDataList = [];
kvDataList.push({
key: `你的分?jǐn)?shù)的key，隨便你取名，取的時(shí)候?qū)?yīng)著取就行`,
value: '你的分?jǐn)?shù)的value'
});
wx.setUserCloudStorage({
KVDataList: kvDataList,
success: () => {
console.log('成功上傳所有游戲分?jǐn)?shù)到微信開放域');
},
fail: (err) => {
console.error('上傳游戲分?jǐn)?shù)到微信開放域失敗:', err);
}
});
}
?? 步驟三：讀取并渲染排行榜
在 openDataContext/index.js 中處理數(shù)據(jù)：
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 = ['你的分?jǐn)?shù)key，與前面設(shè)置值的時(shí)候的key保持一致'];//可以是一個(gè)list
wx.getFriendCloudStorage({
keyList: keyList,
success: res => {
setDataRandRender(res)
},
fail: err => {
console.error('獲取好友數(shù)據(jù)失敗：', err);
}
});
}
}
function setDataRandRender( res) {
console.log('獲取好友數(shù)據(jù)成功：', res.data);
// 處理好友數(shù)據(jù)
friendsData = res.data.map(friend => ({
avatarUrl: friend.avatarUrl,
nickname: friend.nickname,
rankScore: friend.KVDataList.find(data => data.key === (gameName + 'Score'))?.value || '0'
}));
// 按分?jǐn)?shù)排序（從高到低）
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 {
// 當(dāng)需要更新排行榜時(shí)獲取好友數(shù)據(jù)
getFriendsData(data.type,data.rankType);
}
});
五、群友排行榜集成指南
?? 重要聲明：
步驟一/二與第四章完全相同（已操作可跳過(guò)）
步驟三僅需替換一個(gè)API：
getFriendsData中的wx.getFriendCloudStorage換成wx.getGroupCloudStorage
?? 血淚教訓(xùn)：
群數(shù)據(jù)獲取必須通過(guò)分享卡片進(jìn)入！直接打開游戲會(huì)獲取失?。?br> 相當(dāng)于進(jìn)群需要「邀請(qǐng)函」（shareTicket），硬闖會(huì)被微信保安丟出去！
六、自定義排行榜樣式
打開關(guān)鍵文件進(jìn)行深度美顏,想要什么界面效果自己去改：
openDataContext/
└── render/
└── template.js // 排行榜UI核心文件
七、效果體驗(yàn) & 反饋
?? 實(shí)機(jī)體驗(yàn)
搜：游戲玩家天賦檢測(cè)
