微信小游戏关系链的使用（排行榜的显示）
前言
微信小游戏属于微信小程序的一个类目，小游戏对比于普通的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
排行榜排名的问题？
托管在微信后台的数据，微信是没有给你排序的，排名需要自己处理。