uniapp nickname 获取微信昵称

在uniapp中获取微信昵称可以通过以下步骤：

1. 在 `manifest.json` 文件中添加 `permission` 权限：

{
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序定位"
      },
      "scope.userInfo": {
        "desc": "你的昵称、头像及性别信息将用于小程序用户信息展示"
      }
    }
  }
}

2. 在需要获取微信昵称的页面中，在 `onLoad` 或 `onShow` 方法中调用 `uni.getUserInfo()` 方法：

onLoad: function() {
  uni.getUserInfo({
    success: function(res) {
      console.log(res.userInfo.nickName); // 获取微信昵称
    }
  });
}

注意：需要用户授权才能获取到微信昵称，如果用户未授权则无法获取。同时，需要在微信开发者工具中进行设置，开启“获取用户信息”选项。

相关问题

uniapp获取微信头像昵称

### 实现 UniApp 中微信登录并获取用户头像和昵称

由于 `wx.getUserProfile` 接口在2022年10月25日后被收回，现在推荐的方式是通过手动引导用户提供个人信息来获取头像和昵称[^1]。

#### 代码实现

为了实现这一功能，在页面上放置一个按钮用于触发用户授权操作：

<button open-type="getUserInfo" @getuserinfo="onGetUserInfo">点击授权</button>

接着定义处理函数 `onGetUserInfo` 来接收用户同意后的回调信息，并从中提取所需的数据：

export default {
  methods: {
    onGetUserInfo(e) {
      const userInfo = e.detail.userInfo;
      
      console.log('用户头像:', userInfo.avatarUrl);
      console.log('用户昵称:', userInfo.nickName);

      // 可在此处继续执行其他逻辑，比如上传至服务器等
    }
  }
}

需要注意的是，上述方法适用于旧版API。对于新版 API 的使用，则应先调用 `login` 方法获得临时登录凭证 code 后再请求用户信息。这通常涉及到服务端配合完成 openid 和 session_key 的交换过程[^2]。

另外一种更简便的方法是在特定场景下利用 `<input>` 组件特性直接捕获用户输入作为昵称，不过这种方式仅限于某些特殊情况下适用[^3]。

最后提醒开发者注意保护好用户的隐私安全，确保按照官方文档指引正确实施各项权限申请流程[^4]。

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，以便后续使用。