unity转微信小游戏：微信好友排行榜
前期准备
1、配置微信小游戏排行榜唯一标识
进入微信小游戏网页左边找到 功能：游戏能力地图 点击进入——向下滑动调到 最下面 窗口找到 微信排行榜配置 点击进入会跳到下一个窗口
在这个窗口点击右上角 添加 配置排行榜唯一标识
配置排行榜界面如下
排行榜唯一标识按要求随便填，全英文字母不超过8个字符
各字段官方说明如下
2、unity创建好友排行榜场景
unity显示好友排行榜逻辑：创建一个按钮点击显示好友排行榜（实际是显示一个添加了Raw Image组件的空对象，让微信小游戏排行榜显示在这里面）
按照上面逻辑我们需要创建一个 画布 ，里面创建一个 按钮 和一个 添加了Raw Image组件的空对象
按钮 绑定 点击时显示添加了Raw Image组件的空对象
添加了Raw Image组件的空对象旋转X轴必须是180，不然转换显示的排行榜是颠倒的
3、创建代码实现排行榜逻辑
方法一：直接使用官方提供的Demo场景里的代码进行修改
下方我上传的官方排行榜Demo下载链接
unity转微信小游戏排行榜Demo-202501
排行榜Demo需要安装完unity转微信小游戏插件后才能正常测试使用
unity转微信小游戏插件20250114版本
方法二：自己编写代码实现排行榜功能
本文是通过使用官方Demo部分代码实现排行榜功能的
代码如下
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
using WeChatWASM;
[System.Serializable]
public class OpenDataMessage
{
// type 用于表明时间类型
public string type;
public string shareTicket;
public int score;
}
public class Ranking : MonoBehaviour
{
public Button ShareButton;
public Button ReportButton;
public RawImage RankBody;
public GameObject RankMask;
public GameObject RankingBox;
private int currentLevel;
void Start()
{
currentLevel = PlayerPrefs.GetInt("currentLevel"); // 从PlayerPrefs中加载关卡，开方域传入的参数
OnShareAppMessage();
WX.InitSDK(
(code) =>
{
Init();
}
);
/**
* 使用群排行功能需要特殊设置分享功能，详情可见链接
* https://developers.weixin.qq.com/minigame/dev/guide/open-ability/share/share.html
*/
WX.UpdateShareMenu(
new UpdateShareMenuOption() {
withShareTicket = true, isPrivateMessage = true, }
);
/**
* 群排行榜功能需要配合 WX.OnShow 来使用，整体流程为：
* 1. WX.UpdateShareMenu 分享功能；
* 2. 监听 WX.OnShow 回调，如果存在 shareTicket 且 query 里面带有启动特定 query 参数则为需要展示群排行的场景
* 3. 调用 WX.ShowOpenData 和 WX.GetOpenDataContext().PostMessage 告知开放数据域侧需要展示群排行信息
* 4. 开放数据域调用 wx.getGroupCloudStorage 接口拉取获取群同玩成员的游戏数据
* 5. 将群同玩成员数据绘制到 sharedCanvas
*/
WX.OnShow(
(res) =>
{
string shareTicket = res.shareTicket;
Dictionary<string, string> query = res.query;
if (
!string.IsNullOrEmpty(shareTicket)
&& query != null
&& query["minigame_action"] == "show_group_list"
)
{
OpenDataMessage msgData = new OpenDataMessage();
msgData.type = "showGroupFriendsRank";
msgData.shareTicket = shareTicket;
string msg = JsonUtility.ToJson(msgData);
ShowOpenData();
WX.GetOpenDataContext().PostMessage(msg);
}
}
);
}
void ShowOpenData()
{
RankMask.SetActive(true);
RankingBox.SetActive(true);
//
// 注意这里传x,y,width,height是为了点击区域能正确点击，x,y 是距离屏幕左上角的距离，宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的。
/**
* 如果父元素占满整个窗口的话，pivot 设置为（0，0），rotation设置为180，则左上角就是离屏幕的距离
* 注意这里传x,y,width,height是为了点击区域能正确点击，因为开放数据域并不是使用 Unity 进行渲染而是可以选择任意第三方渲染引擎
* 所以开放数据域名要正确处理好事件处理，就需要明确告诉开放数据域，排行榜所在的纹理绘制在屏幕中的物理坐标系
* 比如 iPhone Xs Max 的物理尺寸是 414 * 896，如果排行榜被绘制在屏幕中央且物理尺寸为 200 * 200，那么这里的 x,y,width,height应当是 107,348,200,200
* x,y 是距离屏幕左上角的距离，宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的
* 如果是Scale With Screen Size，且设置为以宽度作为缩放，则要这要做一下换算，比如canavs宽度为960，rawImage设置为200 则需要根据 referenceResolution 做一些换算
* 不过不管是什么屏幕适配模式，这里的目的就是为了算出 RawImage 在屏幕中绝对的位置和尺寸
*/
CanvasScaler scaler = gameObject.GetComponent<CanvasScaler>();
var referenceResolution = scaler.referenceResolution;
var p = RankBody.transform.position;
WX.ShowOpenData(
RankBody.texture,
(int)p.x,
Screen.height - (int)p.y,
(int)((Screen.width / referenceResolution.x) * RankBody.rectTransform.rect.width),
(int)((Screen.width / referenceResolution.x) * RankBody.rectTransform.rect.height)
);
}
void Init()
{
ShowButton.onClick.AddListener(() =>
{
ShowOpenData();
OpenDataMessage msgData = new OpenDataMessage();
msgData.type = "showFriendsRank";
string msg = JsonUtility.ToJson(msgData);
WX.GetOpenDataContext().PostMessage(msg);
});
RankMask
.GetComponent<Button>()
.onClick.AddListener(() =>
{
RankMask.SetActive(false);
RankingBox.SetActive(false);
WX.HideOpenData();
});
ShareButton.onClick.AddListener(() =>
{
WX.ShareAppMessage(
new ShareAppMessageOption()
{
title = "这里写分享标题",
query = "action=show_group_rank",
imageUrl =
"这里写分享地址",
}
);
});
ReportButton.onClick.AddListener(() =>
{
OpenDataMessage msgData = new OpenDataMessage();
msgData.type = "setUserRecord";
msgData.score = currentLevel;//开方域传入的参数
string msg = JsonUtility.ToJson(msgData);
Debug.Log(msg);
WX.GetOpenDataContext().PostMessage(msg);
});
}
上面代码在unity使用的场景按钮如下
ShowButtonhy是显示排行榜按钮
RankMask为空对象添加了Button组件点击会隐藏排行榜，RankMask下面的RankMask是透明的Image图片用于设置RankMask按钮大小范围
RankingBox2为空对象，下面sharedCanvas为显示排行榜的Raw Image图像和ShareButton分享按钮
代码逻辑当点击showButtonhy按钮时，隐藏按钮RankMask和隐藏对象RankingBox2全都显示，经过微信开放域转换排序数据最后在sharedCanvas显示出来排行榜
几乎全是官方Demo的代码，我们需要添加的就是把排行榜需要显示的数据传到开放域就可以了
代码里面我们的数据是：currentLevel = PlayerPrefs.GetInt(“currentLevel”); // 从PlayerPrefs中加载关卡，开方域传入的参数
传入开放域方法就是让开放域的 msgData.score = currentLevel;//开方域传入的参数
微信开发者工具设置并实现好友排行榜
前期准备做完后我们就可以转换成微信小游戏导入微信开发者工具了
导入微信开发者工具后我们还需要做最后一个操作，就是找到 排行榜唯一标识的代码 修改成前期准备里我们 自己设置的排行榜唯一标识
在资源管理器里找到 open-data 点开找到 index.js 打开
把 第9行 代码的RANK_KEY修改成 自己设置的排行榜唯一标识
第13行 代码是一个生成排行榜时随机显示一个数据的代码用于测试排行榜的代码，如果用自己的数据测试就把这行代码用//注释掉再保存
修改完成后就可以开始测试微信小游戏好友排行榜了
注意：unity下也能找到index.js代码页在WX-WASM-SDK-V2\Runtime\wechat-default\open-data\下，不建议在这里修改数据，如果修改有问题导出的微信小游戏在开发者工具也会出问题，建议导出后直接在微信开发者工具里修改
