微信小游戏授权排行榜教程

在微信小游戏中，通过用户授权获取用户头像和昵称，可以提升排行榜功能的个性化体验。本文将介绍如何结合微信提供的 wx.getSetting 和 wx.getUserProfile 方法实现用户授权功能，并将数据应用到排行榜中。

一、功能概述

1. 检查用户是否已授权获取个人信息。

2. 引导未授权的用户进行授权。

3. 获取用户头像和昵称，并将其保存。

4. 在排行榜中使用用户信息。

二、实现步骤

1. 检查用户授权状态

使用 wx.getSetting 检查用户是否已经授权 scope.userInfo 权限。

export function isScopeUserInfo() {
    return new Promise((resolve, reject) => {
        wx.getSetting({
            success: (res) => {
                console.log(res.authSetting);
                if (res.authSetting["scope.userInfo"] === true) {
                    console.log('用户已经授权');
                    resolve(true);
                } else {
                    console.log('用户没有授权');
                    resolve(false);
                }
            },
            fail: (err) => {
                console.error('获取设置失败', err);
                reject(err);
            }
        });
    });
}

2. 获取用户授权并保存信息

通过 wx.getUserProfile 方法引导用户授权，并获取其头像和昵称。若用户拒绝授权，则使用默认头像和随机昵称。

export function getUserProfile() {
    return new Promise((resolve, reject) => {
        wx.getUserProfile({
            desc: '用于排行榜资料', // 获取用户信息的说明
            success: (res) => {
                const userInfo = res.userInfo;
                const { avatarUrl, nickName } = userInfo;
                console.log('用户信息获取成功:', userInfo);

                // 保存用户信息
                // 将头像、昵称发送到后端保存
                updateDataInServer(avatarUrl, nickName);//根据自己的接口储存获取到的头像和昵称
                resolve(true);
            },
            fail: (err) => {
                wx.showToast({
                    title: '未授权',
                    icon: 'none',
                    duration: 2000
                });
                console.log('获取用户信息失败，使用默认头像和随机昵称', err);

                // 用户没有点击同意授权时，使用默认头像和随机昵称
                const defaultAvatar = 'testUrl';
                const randomNickName = generateCuteNickname(); // 随机生成的昵称
                updateDataInServer(avatarUrl, nickName);//根据自己的接口储存获取到的头像和昵称
                reject(false);
            }
        });
    });
}

3. 结合两个方法的完整逻辑

实现完整的逻辑，先检查授权状态，未授权时引导用户授权。

async function handleUserAuthorization() {
    try {
        const isAuthorized = await isScopeUserInfo();

        if (isAuthorized) {
            console.log('用户已授权，直接获取用户信息');
        } else {
            console.log('用户未授权，尝试获取用户授权');
            await getUserProfile();
        }

        console.log('用户信息已处理完毕');
    } catch (error) {
        console.error('用户授权流程中出现错误:', error);
    }
}

三、完整流程

1. 初始化时调用 handleUserAuthorization 检查并处理用户授权。

2. 授权后保存用户信息到后端。

3. 加载排行榜数据并更新前端界面。

四、优化建议

• 缓存用户信息：避免每次打开游戏都重复授权请求。

• 错误处理：完善错误提示，提升用户体验。

• 多端同步：确保用户信息在不同设备间同步。

通过以上步骤，您可以轻松实现一个支持用户授权的微信小游戏排行榜功能。