微信小游戏关系链能不能获取到服务器,微信小游戏 —— 关系链数据使用(排行榜的显示)...

前言

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

排行榜排名的问题？

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