2024最新uniapp_微信小程序_微信授权登录获取微信头像和微信昵称

UniApp 是一种基于 Vue.js 的跨平台框架，它可以方便地构建一次编写、多端运行的应用，包括微信小程序、H5、Android 和 iOS 等。关于微信小程序的授权登录获取用户信息，你可以按照以下步骤操作：

1. **引入依赖**：在 UniApp 中，你需要导入微信 SDK，通常是在项目启动文件（如 main.js）里完成，使用官方提供的 `uni.login` 方法。

import wx from '@ uniapp/core/util/wx'

2. **注册登录按钮**：在需要授权登录的地方添加一个按钮，并设置点击事件处理函数，发起登录请求。

<button @click="handleLogin">登录</button>

3. **登录方法** (`handleLogin` 函数)：

async handleLogin() {
  try {
    const result = await wx.login({
      success(res) {
        // 获取 code 后，向微信服务器请求 access_token
        uni.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session', // 微信开放平台接口
          data: { ...res.code, jsApiList: ['getProfile'] }, // 需要获取用户信息的接口列表
          method: 'POST',
          headers: {
            'content-type': 'application/json'
          },
          success(res) {
            if (res.data.errcode === 0) {
              // 登录成功，获取到用户信息
              const userInfo = res.data.userInfo;
              this.getAvatarAndNickName(userInfo);
            }
          },
          fail(err) {
            console.error('login fail:', err);
          }
        });
      }
    });
  } catch (err) {
    console.error('login error:', err);
  }
}

async getAvatarAndNickName(userInfo) {
  // 使用 access_token 调用获取头像和昵称的接口
  const userDetailRes = await wx.getSetting({
    success(res) => {
      if (res.authSetting['scope.userInfo']) {
        // 如果有权限，则获取用户详细信息
        await wx.getUserInfo({
          success(res) {
            let avatarUrl = res.userInfo.avatarUrl; // 头像URL
            let nickname = res.userInfo.nickName; // 昵称
            // 这里可以将头像和昵称用于显示或保存
          },
          fail(err) {
            console.error('getUserInfo fail:', err);
          }
        });
      } else {
        console.log('用户未授权，无法获取昵称');
      }
    },
    fail(err) {
      console.error('getSetting fail:', err);
    }
  });
}

4. **用户授权提示**：确保在调用 `wx.login` 之前告知用户他们需要授权应用访问他们的微信信息。

注意，这个流程是基于微信开放平台的 OAuth 授权机制，可能会随着微信接口变化而有所调整。此外，在实际项目中，你应该存储用户的 Access Token 和 Refresh Token，以便后续使用。