微信小游戏 —— 关系链数据使用(排行榜的显示)

前言

微信小游戏属于微信小程序的一个类目，小游戏对比于普通的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

排行榜排名的问题？

托管在微信后台的数据，微信是没有给你排序的，排名需要自己处理。