uni-app 无法获取微信用户的头像以及昵称

uni-app 无法获取微信用户的头像以及昵称

示例代码：

async getUserInfo() {
    if (this.nickName !== DEFAULT_NICKNAME && this.nickName !== '') {
        return
    }
    try {
        await authSetting('scope.userInfo', '用户授权失败，将为你打开授权设置', '打开', '请授权获取用户基本信息')
        const {
            userInfo: { nickName, avatarUrl },
        } = await new Promise((success, fail) =>
            uni.getUserInfo({
                success,
                fail,
            }),
        )
        this.nickName = nickName
        this.avatarUrl = avatarUrl
    } catch (error) {
        console.log(error)
        this.nickName = DEFAULT_NICKNAME
        this.avatarUrl = DEFAULT_AVATARURL
    }
}

操作步骤：

  • 点击微信头像页面无反应

预期结果：

  • 点击后唤起授权登录获取昵称与头像信息

实际结果：

  • 点击微信头像页面无反应

bug描述：

  • 微信小程序登录,无法获取微信用户的头像以及昵称,之前还有的,也无法唤起授权登录页面

Image

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 22H2
HBuilderX类型 正式
HBuilderX版本号 4.07
第三方开发者工具版本号 1.06
基础库版本号 3.3.4
项目创建方式 HBuilderX

更多关于uni-app 无法获取微信用户的头像以及昵称的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题发表3分钟后光速解决,应该是重新部署环境时动了基础库。降低基础库版本后本地调试能够成功获取。但是真机调试还是如图情况。

更多关于uni-app 无法获取微信用户的头像以及昵称的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni.getUserInfo已经不支持获取头像昵称了哦 2013年就修改了获取规则

是不是隐私政策没有设置？去开发者中心那边设置一下。

跟这个没关系，是因为微信官方吧需获取用户头像昵称，改成了使用「头像昵称填写能力」，头像昵称由最开始的uni.getUserInfo(OBJECT) 改成uni.getUserProfile(OBJECT)最后到「头像昵称填写能力」这个需要配合input和button标签去实现

在 uni-app 中，如果你想获取微信用户的头像和昵称，通常需要通过微信小程序或微信 H5 的接口来实现。以下是常见的解决方案：

1. 微信小程序中获取用户信息

在微信小程序中，你可以使用 uni.getUserProfile 或 uni.getUserInfo 来获取用户的头像和昵称。

示例代码：

uni.getUserProfile({
  desc: '获取用户信息', // 声明获取用户信息的目的
  success: (res) => {
    console.log('用户信息:', res.userInfo);
    const { nickName, avatarUrl } = res.userInfo; // 昵称和头像
    // 在这里处理获取到的用户信息
  },
  fail: (err) => {
    console.error('获取用户信息失败:', err);
  }
});

注意事项：

  • 从微信小程序基础库 2.10.4 开始，uni.getUserInfo 只能获取到匿名用户信息，必须使用 uni.getUserProfile 才能获取到真实用户信息。
  • 需要在小程序的 app.json 中配置 "requiredPrivateInfos": ["getUserInfo", "getUserProfile"]。

2. 微信 H5 中获取用户信息

在微信 H5 中，你需要通过微信的 OAuth2.0 授权流程来获取用户信息。具体步骤如下：

  1. 引导用户授权 通过 uni.navigateTo 跳转到微信的授权页面：

    const appId = '你的微信AppID';
const redirectUri = encodeURIComponent('你的回调地址');
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
window.location.href = url;

  2. 后端获取用户信息 微信会返回一个 code，你需要将 code 发送到后端，后端通过微信的接口获取用户信息（如昵称、头像等）。

  3. 前端接收用户信息 后端将用户信息返回给前端，前端再进行展示。

3. 通用解决方案

如果你同时支持小程序和 H5，可以通过判断运行环境来适配不同的逻辑：

if (uni.getSystemInfoSync().platform === 'mp-weixin') {
  // 小程序环境
  uni.getUserProfile({
    desc: '获取用户信息',
    success: (res) => {
      console.log('用户信息:', res.userInfo);
    }
  });
} else {
  // H5 环境
  // 跳转微信授权页面
  const appId = '你的微信AppID';
  const redirectUri = encodeURIComponent('你的回调地址');
  const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
  window.location.href = url;
}
回到顶部