前言

微信小遊戲屬於微信小程式的一個類目，小遊戲對比於普通的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 沒有實時繪製，不清楚原因，但是分享回來黑屏，解決辦法：1、監聽分享回撥，重新繪製當前canvas；2、實時繪製當前canvas

排行榜排名的問題？

託管在微信後臺的資料，微信是沒有給你排序的，排名需要自己處理。