1.微信公眾平臺(tái)配置排行榜
設(shè)置時(shí)記住排行榜唯一標(biāo)識(shí)
2.微信公眾平臺(tái)配置獲取微信好友信息權(quán)限 同登錄篇第一步Unity微信小游戲——登錄 獲取用戶頭像名稱-CSDN博客
3.Unity搭建排行榜UI
此處建議使用官方案例的UI進(jìn)行修改
minigame-unity-webgl-transform: Unity WebGL 微信小游戲適配方案 (gitee.com)
Demo\Ranking這個(gè)項(xiàng)目就是
1.新建Canvas
此處要選擇Overlay 否則排行榜會(huì)無(wú)法拖動(dòng)
此處RankingBox默認(rèn)狀態(tài)為SetActive(false)
bg：排行榜背景 也可以把背景讓在RankingBox上
image：一般放排行榜標(biāo)題 可有可無(wú)
sharedCanvas：RawImage 旋轉(zhuǎn)X需要設(shè)置為180 否則排行榜會(huì)顛倒，排行榜數(shù)據(jù)就顯示范圍在這里設(shè)置
RankMask：當(dāng)成退出按鈕就好 可按照自己需求設(shè)置位置大小?
4.腳本
RankBody為sharedCanvas
RankingBox為RankingBox
using Game.Tools;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using WeChatWASM;
[System.Serializable]
public class OpenDataMessage
{
// type 用于表明時(shí)間類型
public string type;
public int score;
}
public class WXRank : MonoBehaviour
{
/// <summary>
/// 顯示排行榜數(shù)據(jù)內(nèi)容
/// </summary>
public RawImage RankBody;
/// <summary>
/// 排行榜
/// </summary>
public GameObject RankingBox;
private void Start()
{
}
/// <summary>
/// 渲染排行榜
/// </summary>
private void ShowOpenData()
{
Debug.Log("顯示排行榜");
RankingBox.SetActive(true);
// 注意這里傳x,y,width,height是為了點(diǎn)擊區(qū)域能正確點(diǎn)擊，x,y 是距離屏幕左上角的距離，寬度傳 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode為 Constant Pixel Size的情況下設(shè)置的。
/**
* 如果父元素占滿整個(gè)窗口的話，pivot 設(shè)置為（0，0），rotation設(shè)置為180，則左上角就是離屏幕的距離
* 注意這里傳x,y,width,height是為了點(diǎn)擊區(qū)域能正確點(diǎn)擊，因?yàn)殚_(kāi)放數(shù)據(jù)域并不是使用 Unity 進(jìn)行渲染而是可以選擇任意第三方渲染引擎
* 所以開(kāi)放數(shù)據(jù)域名要正確處理好事件處理，就需要明確告訴開(kāi)放數(shù)據(jù)域，排行榜所在的紋理繪制在屏幕中的物理坐標(biāo)系
* 比如 iPhone Xs Max 的物理尺寸是 414 * 896，如果排行榜被繪制在屏幕中央且物理尺寸為 200 * 200，那么這里的 x,y,width,height應(yīng)當(dāng)是 107,348,200,200
* x,y 是距離屏幕左上角的距離，寬度傳 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode為 Constant Pixel Size的情況下設(shè)置的
* 如果是Scale With Screen Size，且設(shè)置為以寬度作為縮放，則要這要做一下?lián)Q算，比如canavs寬度為960，rawImage設(shè)置為200 則需要根據(jù) referenceResolution 做一些換算
* 不過(guò)不管是什么屏幕適配模式，這里的目的就是為了算出 RawImage 在屏幕中絕對(duì)的位置和尺寸
*/
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));
}
/// <summary>
/// 顯示排行榜
/// </summary>
public void Show()
{
SetUserScore();
ShowOpenData();
//顯示排行榜
OpenDataMessage msgData = new OpenDataMessage();
msgData.type = "showFriendsRank";
string msg = JsonUtility.ToJson(msgData);
WX.GetOpenDataContext().PostMessage(msg);
}
/// <summary>
/// 設(shè)置開(kāi)放域數(shù)據(jù) （要排行的數(shù)據(jù)）
/// </summary>
/// <param name="msgData"></param>
public void SetUserScore()
{
OpenDataMessage message = new OpenDataMessage();
message.type = "setUserRecord";
message.score = 123;
string msg = JsonUtility.ToJson(message);
WX.GetOpenDataContext().PostMessage(msg);
Debug.Log("每日殺敵數(shù)：" + message.score);
}
/// <summary>
/// 隱藏排行榜
/// </summary>
public void Hide()
{
RankingBox.SetActive(false);
WX.HideOpenData();
}
}
5.其他配置
1.WX-WASM-SDK-V2\Runtime\wechat-default\open-data\index.js
RANK_KEY修改為在微信公眾配置的唯一標(biāo)識(shí)
setUserRecord會(huì)隨機(jī)為自己生成一條數(shù)據(jù) 如不需要?jiǎng)h掉就可以了
2.WX-WASM-SDK-V2\Runtime\wechat-default\open-data\render\styles\friendRank.js
此處為設(shè)置排行榜內(nèi)每條數(shù)據(jù)位置 大小 等信息
可以直接在微信開(kāi)發(fā)者工具里修改該腳本來(lái)看查看效果
3.WX-WASM-SDK-V2\Runtime\wechat-default\open-data\render\tpls\friendRank.js
此處為設(shè)置排行榜顯示條數(shù)?UI圖片和文本內(nèi)容等相關(guān)內(nèi)容 按照自己需求配置即可
4.轉(zhuǎn)微信小游戲時(shí)需要勾選使用好友關(guān)系鏈
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-781227.html
5.后續(xù)微信開(kāi)發(fā)者工具打開(kāi)時(shí)可能會(huì)報(bào)錯(cuò) 提醒應(yīng)該是需要配置一個(gè)相關(guān)插件 按照官方指導(dǎo)安裝就可以了文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-781227.html
到了這里，關(guān)于unity微信小游戲——排行榜的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
