微信小遊戲好友排行榜快速開發教程

Matchvs發表於2019-03-02
遊戲

要做這個好友排行榜.必然要有好友的戰績比分,然後再做排序,最後將資料呈現在UI上 , 可以分為下面幾個步驟:

  1. 儲存每個使用者的分數
  2. 獲取好友列表,並獲取好友的分數
  3. 渲染排行榜

圖片描述

儲存每個使用者的分數

儲存每個使用者的分數,需要呼叫微信的雲端儲存API,將使用者的分數持久化的存起來 .

// 儲存使用者資料,注意限制單條資料容量不得超過1024位元組,
// 單個使用者資料總條數不得超過128條
wx.setUserCloudStorage(Object)複製程式碼

圖片描述

//儲存最高分
var score = 100;
var kvScore = {"key":"score","value":score};
wx.setUserCloudStroage({"KVDataList":[kvScore]},"success":function(){
    //
});複製程式碼

獲取好友列表,並獲取好友的分數

​ 遊戲中將玩家的分數儲存起來以後,需要呼叫微信的雲端儲存API wx.getFirendCloudStorage, 獲取玩家的微信好友資料,這樣就拿到了每個好友的最高分.

值得一提的是,微信的這個介面在內部隱蔽的使用其微信的社交關係鏈 .

返回列表中的包含的 呼叫過wx.setUserCloudStroage 這個介面的使用者.

圖片描述

渲染排行榜

對分數進行排序 , 得到一個排行榜

let sharedCanvas = wx.getSharedCanvas()

function drawRankList (data) {
  data.forEach((item, index) => {
    // ...
  })
}

wx.getFriendCloudStorage({
  success: res => {
    let data = res.data
    drawRankList(data)
  }
})複製程式碼

注意這個 sharedCanvas , 這是獨有的畫布 ,與小遊戲中的畫布不是同一個東東.
圖片描述

使用sharedCanvas來自定義顯示玩家的使用者排行榜

重要說明

​ 上述所涉及的微信介面 , 都只能在微信小遊戲的 子域 使用 , 微信官網也稱之為開放資料域 , 其實應該稱之為 封閉資料域 .
​ 為什麼這麼說呢?
​ 因為子域的js程式碼執行環境和小遊戲本身的程式碼執行環境是隔離的. 兩者之間不能相通 , 子域只能接收外部的訊息(如遊戲的最高分),不能往外發訊息(不能把使用者的好友關係鏈資料發給開發者伺服器) , 記憶體不共享,也就意味著,開發者拿不到微信的社交關係鏈資料 . 在這樣的封閉條件下,開發者能做的只能是在子域的畫布上將排行榜資料以個性化的UI元素展示出來 .

相關文章