如何在JavaScript中实现Minecraft用户名转UUID并生成皮肤渲染？

要实现用户名转UUID再获取皮肤渲染，只需要在原有逻辑中加入用户名转UUID的API请求步骤，以下是修改后的完整代码和关键说明：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/minecraftia" type="text/css"/>
    <title>查看Minecraft皮肤!</title>
    <script src="https://kit.fontawesome.com/c0ac5a1789.js" crossorigin="anonymous"></script>
</head>
<body>
    <main>
        <input type="text" id="skinname" placeholder="输入你的Minecraft用户名" />
        <button class="button">搜索</button>
    
        <div class="output">
          <img id="image"/>
        </div>
    
        <script>
            const skinname = document.getElementById("skinname");
            const button = document.querySelector("button");
            const image = document.getElementById("image");
            
            button.addEventListener("click", async () => {
                const username = skinname.value.trim();
                if (!username) {
                    alert("请输入有效的用户名");
                    return;
                }
                
                try {
                    // 第一步：调用API将用户名转换为UUID
                    const uuidRes = await fetch(`https://api.mojang.com/users/profiles/minecraft/${username}`);
                    if (!uuidRes.ok) {
                        throw new Error("用户名不存在或无效");
                    }
                    const userData = await uuidRes.json();
                    const uuid = userData.id;
                    
                    // 第二步：用UUID调用皮肤渲染API
                    const skinRes = await fetch(`https://visage.surgeplay.com/full/500/${uuid}`);
                    image.src = skinRes.url;
                } catch (err) {
                    alert(err.message);
                    image.src = ""; // 清空错误时的图片
                }
            }); 
        </script>
    </main>
</body>
</html>

关键逻辑说明 #

• 输入提示优化：把输入框的占位文本改成了更贴合需求的“输入你的Minecraft用户名”，引导用户正确输入
• 用户名转UUID：使用官方API获取用户名对应的UUID，请求成功后会返回包含UUID的JSON数据
• 错误处理：加入了空输入校验、API请求失败的捕获，避免页面无响应或显示错误内容
• 皮肤渲染调用：拿到UUID后，再调用你原本使用的皮肤渲染API，流程和之前一致

内容的提问来源于stack exchange，提问作者UZUZI