微信小遊戲 —— 關係鏈數據使用(排行榜的顯示)

前言

微信小遊戲屬於微信小程序的一個類目，小遊戲對比於普通的h5遊戲，其很大的一個特色是微信提供的關係鏈數據的使用，你能夠得到同玩這個遊戲的微信好友的數據，或者你在某個羣的用戶數據

概念

具體概念請前往-》關係鏈數據使用指南

須要瞭解關係鏈api和開放域，主域等概念。如下着重介紹具體的api使用

wx.setUserCloudStorage() 託管用戶數據

ps: wx.setUserCloudStorage()接口在主域和開放數據域均可以使用

wx.setUserCloudStorage({
    KVDataList: [{ key: 'score', value: score }],
    success: res => {
        console.log(res);
        // 讓子域更新當前用戶的最高分，由於主域沒法獲得getUserCloadStorage;
        let openDataContext = wx.getOpenDataContext();
        openDataContext.postMessage({
            type: 'updateMaxScore',
        });
    },
    fail: res => {
        console.log(res);
    }
});

注意： KVDataList的value必須是字符串String類型，不然會報錯

託管數據的限制
每一個openid所標識的微信用戶在每一個遊戲上託管的數據不能超過128個key-value對。
上報的key-value列表當中每一項的key+value長度都不能超過1K(1024)字節。
上報的key-value列表當中每個key長度都不能超過128字節。

wx.getFriendCloudStorage（）拉取當前用戶全部同玩好友的託管數據（開放數據域使用）

ps: 這個接口只能在開放數據域使用，即主域沒法調用接口獲取好友數據

wx.getFriendCloudStorage({
    keyList: ['score', 'maxScore'], // 你要獲取的、託管在微信後臺都key
    success: res => {
        console.log(res.data);
    }
});

獲取到的數據以下：

繪製好友排行榜

沒錯，用你的canvas技術將獲取到的好友數據繪製到sharedCanvas上。sharedCanvas是微信默認提供的，不須要再次建立

// src/myOpenDataContext/index.js
let sharedCanvas = wx.getSharedCanvas()

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

wx.getFriendCloudStorage({
  success: res => {
    let data = res.data
    drawRankList(data)
  }
})

繪製後如何顯示以及會遇到的問題？

須要在上屏canvas上經過drawImage()方法把這個sharedCanvas繪製到上屏canvas
主域的js：

let openDataContext = wx.getOpenDataContext()
let sharedCanvas = openDataContext.canvas           canvas.getContext('2d').drawImage(sharedCanvas, 0, 0);

問題1:繪製了不顯示？

由於wx.getFriendCloudStorage() 接口是異步的，以及sharedCanvas的繪製也是異步的（涉及頭像等資源），若是在上屏canvas 只進行一次繪製，那麼確定是不顯示或者顯示不全的。可是開放數據域不能主動向主域進行通訊，主域沒法獲知什麼時候繪製完畢進行從新繪製，因此我建議在主域循環進行繪製。具體的其餘邏輯可根據自身狀況修改

loop(){
    // 主域繪製
    let openDataContext = wx.getOpenDataContext();
    let sharedCanvas = openDataContext.canvas;                           
    canvas.getContext('2d').drawImage(sharedCanvas, 0, 0);
    requestAnimationFrame(this.loop.bind(this));
}

問題2: 排行榜模糊的問題？

這個問題基本在每一個人初次繪製排行榜的時候都會遇到。canvas繪製模糊的問題，一般的解決辦法就是將內容放大設備像素比倍數，而後進行縮放。

const ratio = wx.getSystemInfoSync().pixelRatio;//獲取設備像素比
let openDataContext = wx.getOpenDataContext();
let sharedCanvas = openDataContext.canvas;
sharedCanvas.width = screenWidth * ratio; // 在主域將sharedCanvas寬高都按像素比放大
sharedCanvas.height = screenHeight * ratio;

繪製到上屏canvas到時候要把寬高設爲當前屏幕的寬高

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
canvas.getContext('2d').drawImage(sharedCanvas, 0, 0, screenWidth, screenHeight);

實際上到這裏你仍是模糊的。由於在sharedCanvas裏你仍是須要進行放大-縮放的操做。
開放域index.js

let sharedCanvas = wx.getSharedCanvas();
let context = sharedCanvas.getContext('2d');

const screenWidth = wx.getSystemInfoSync().screenWidth;
const screenHeight = wx.getSystemInfoSync().screenHeight;
const ratio = wx.getSystemInfoSync().pixelRatio;

……
//繪製元素的時候
context.scale(ratio, ratio);// 由於sharedCanvas在主域放大了ratio倍
//爲了便於計算尺寸，在將context 縮放到750寬的設計稿尺寸，
let scales = screenWidth / 750;
context.scale(scales, scales);
// 接下來你每繪製的一個元素的尺寸，都應該按鈕750寬的設計稿/
// 好比
// 畫標題
context.fillStyle = '#fff';
context.font = '50px Arial';
context.textAlign = 'center';
context.fillText('好友排行榜', 750 / 2, 220); // 750的尺寸

若是不明白，獻上github一份微信小遊戲demo

wx.getGroupCloudStorage（）獲取羣同玩成員遊戲數據

在小遊戲是經過羣分享卡片打開的狀況下，能夠經過調用該接口獲取羣同玩成員的遊戲數據。
獲取羣成員數據和獲取好友數據有些不一樣，多了一個shareTicket

這個shareTicket必須是你分享到一個羣，那麼經過這個分享出來的卡片打開的小遊戲就會有一個shareTicket,能夠在頁面打開的時候獲取
主域js

wx.onShow(res => {
    let shareTicket = res.shareTicket;
});

開放數據域index.js

wx.getGroupCloudStorage({
        shareTicket: ticket,  // 須要帶上shareTicket
        keyList: ['score', 'maxScore'],
        success: res => {
            console.log(res.data);
        },
        fail: res => {
            console.log(res.data);
        }
    });

問題1: 開放數據域如何拿到主域的shareTicket？

主域能夠經過postMessage通知開放域
主域js

let openDataContext = wx.getOpenDataContext();
openDataContext.postMessage({
    type: 'group',
    text: shareTicket,
});

在開放數據域經過onMessage獲取主域消息

wx.onMessage(data => {
    if (data.type === 'group') {
        let shareTicket = data.text; // 開放數據域順利拿到shareTicket
    } 
});

接下來的繪製與好友排行榜同。

問題2:分享接口報錯？

由於不少人剛開始開發微信小遊戲都是屬於無appid體驗開發的，這個模式下是沒法調用分享接口的，必需要有appid，能夠申請一個新的小程序帳號，設置類目的時候必須爲遊戲類型，一旦設置沒法更改，也不能將舊的小程序其餘類型改爲遊戲類型。

分享黑屏的問題

你可能會遇到小遊戲點擊右上角分享以後就黑屏了，並且是必現的，其實是由於你的canvas 沒有實時繪製，不清楚緣由，可是分享回來黑屏，解決辦法：一、監聽分享回調，從新繪製當前canvas；二、實時繪製當前canvas

排行榜排名的問題？

託管在微信後臺的數據，微信是沒有給你排序的，排名須要本身處理。