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

╰+攻爆jí腚メ 2022-04-18 05:11 741阅读 0赞

## 前言 ##

微信小游戏属于微信小程序的一个类目，小游戏对比于普通的h5游戏，其很大的一个特点是微信提供的关系链数据的使用，你可以获得同玩这个游戏的微信好友的数据，或者你在某个群的用户数据

## 概念 ##

具体概念请前往-》[关系链数据使用指南][Link 1]

需要了解关系链api和开放域，主域等概念。以下着重介绍具体的api使用

### wx.setUserCloudStorage() 托管用户数据 ###

ps: wx.setUserCloudStorage()接口在主域和开放数据域都可以使用  
![clipboard.png][]

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类型，否则会报错

![clipboard.png][clipboard.png 1]

托管数据的限制  
每个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);
        }
    });

获取到的数据如下：  
![clipboard.png][clipboard.png 2]

## 绘制好友排行榜 ##

没错，用你的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][demo]

### wx.getGroupCloudStorage（）获取群同玩成员游戏数据 ###

在小游戏是通过群分享卡片打开的情况下，可以通过调用该接口获取群同玩成员的游戏数据。  
获取群成员数据和获取好友数据有些不同，多了一个shareTicket

![clipboard.png][clipboard.png 3]

这个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

排行榜排名的问题？

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

[Link 1]: https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html
[clipboard.png]: /images/20220418/8301eabe855c4beda0f732429274bd0c.png
[clipboard.png 1]: /images/20220418/c8e3595902594c0dbb899cd3a9478da6.png
[clipboard.png 2]: /images/20220418/27b4b81f4a7a41d6acab49b548a6627b.png
[demo]: https://github.com/Surongbin/wxgame-canvas
[clipboard.png 3]: /images/20220418/651a77094559487fbbd6061bc734d719.png