微信小游戲好友排行榜快速開發(fā)教程
要做這個(gè)好友排行榜.必然要有好友的戰(zhàn)績比分,然后再做排序,最后將數(shù)據(jù)呈現(xiàn)在UI上 , 可以分為下面幾個(gè)步驟:
- 保存每個(gè)用戶的分?jǐn)?shù)
- 獲取好友列表,并獲取好友的分?jǐn)?shù)
- 渲染排行榜
保存每個(gè)用戶的分?jǐn)?shù)
保存每個(gè)用戶的分?jǐn)?shù),需要調(diào)用微信的云存儲(chǔ)API,將用戶的分?jǐn)?shù)持久化的存起來 .
// 保存用戶數(shù)據(jù),注意限制單條數(shù)據(jù)容量不得超過1024字節(jié),
// 單個(gè)用戶數(shù)據(jù)總條數(shù)不得超過128條
wx.setUserCloudStroage(Object)復(fù)制代碼
//存儲(chǔ)最高分
var score = 100;
var kvScore = {"key":"score","value":score};
wx.setUserCloudStroage({"KVDataList":[kvScore]},"success":function(){
//
});復(fù)制代碼
獲取好友列表,并獲取好友的分?jǐn)?shù)
? 游戲中將玩家的分?jǐn)?shù)保存起來以后,需要調(diào)用微信的云存儲(chǔ)API wx.getFirendCloudStorage
, 獲取玩家的微信好友數(shù)據(jù),這樣就拿到了每個(gè)好友的最高分.
值得一提的是,微信的這個(gè)接口在內(nèi)部隱蔽的使用其微信的社交關(guān)系鏈 .
返回列表中的包含的 調(diào)用過wx.setUserCloudStroage
這個(gè)接口的用戶.
渲染排行榜
對(duì)分?jǐn)?shù)進(jìn)行排序 , 得到一個(gè)排行榜
let sharedCanvas = wx.getSharedCanvas()
function drawRankList (data) {
data.forEach((item, index) => {
// ...
})
}
wx.getFriendCloudStorage({
success: res => {
let data = res.data
drawRankList(data)
}
})復(fù)制代碼
注意這個(gè) sharedCanvas
, 這是獨(dú)有的畫布 ,與小游戲中的畫布不是同一個(gè)東東.
使用sharedCanvas來自定義顯示玩家的用戶排行榜
重要說明
? 上述所涉及的微信接口 , 都只能在微信小游戲的 子域
使用 , 微信官網(wǎng)也稱之為開放數(shù)據(jù)域
, 其實(shí)應(yīng)該稱之為 封閉數(shù)據(jù)域
.
? 為什么這么說呢?
? 因?yàn)樽佑虻膉s代碼執(zhí)行環(huán)境和小游戲本身的代碼執(zhí)行環(huán)境是隔離的. 兩者之間不能相通 , 子域只能接收外部的消息(如游戲的最高分),不能往外發(fā)消息(不能把用戶的好友關(guān)系鏈數(shù)據(jù)發(fā)給開發(fā)者服務(wù)器) , 內(nèi)存不共享,也就意味著,開發(fā)者拿不到微信的社交關(guān)系鏈數(shù)據(jù) . 在這樣的封閉條件下,開發(fā)者能做的只能是在子域的畫布上將排行榜數(shù)據(jù)以個(gè)性化的UI元素展示出來 。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看:小程序商店