uniapp如何获取微信头像和昵称

在uni-app中如何获取微信用户的头像和昵称？需要调用哪些API或者配置哪些权限？有没有具体的代码示例可以参考？

2 回复

在uni-app中，可通过uni.getUserProfile获取微信头像和昵称。需在按钮点击事件中调用，用户授权后返回用户信息。注意：微信小程序已调整接口，需用户主动触发。


在 UniApp 中获取微信头像和昵称，主要通过微信开放能力实现。以下是详细步骤和代码示例：

1. 配置微信开放平台和AppID

  • 在微信开放平台注册应用，获取 AppID。
  • 在 UniApp 项目的 manifest.json 中配置微信 AppID：
    "mp-weixin": {
  "appid": "你的微信AppID"
}

2. 使用 <button> 组件授权

通过微信的 open-type 获取用户信息，需用户主动触发授权。

代码示例：

<template>
  <view>
    <!-- 获取用户头像和昵称 -->
    <button open-type="getUserInfo" @getuserinfo="onGetUserInfo">
      获取微信头像和昵称
    </button>
    <view v-if="userInfo">
      <image :src="userInfo.avatarUrl"></image>
      <text>{{ userInfo.nickName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null
    };
  },
  methods: {
    onGetUserInfo(e) {
      if (e.detail.userInfo) {
        // 用户同意授权
        this.userInfo = e.detail.userInfo;
        console.log("昵称:", this.userInfo.nickName);
        console.log("头像:", this.userInfo.avatarUrl);
      } else {
        // 用户拒绝授权
        uni.showToast({ title: "授权失败", icon: "none" });
      }
    }
  }
};
</script>

3. 注意事项

  • 授权限制：微信调整了用户信息获取策略，需通过按钮触发，且每次需用户确认。
  • 头像和昵称：avatarUrl 为头像 URL，nickName 为昵称。
  • 平台兼容：仅支持微信小程序平台，H5 或 App 需使用其他登录方式（如微信登录插件）。

4. 扩展：使用 uni.login 获取 openid（可选）

如果需要关联用户身份，可结合 uni.login 获取 code，再通过后端交换 openid：

uni.login({
  provider: 'weixin',
  success: (res) => {
    console.log("微信登录code:", res.code);
    // 将 code 发送到后端，换取 openid 和 session_key
  }
});

总结

  • 核心方法是利用 button 组件的 open-type="getUserInfo" 和 @getuserinfo 事件。
  • 确保已正确配置微信 AppID。
  • 遵循微信的授权规则，避免频繁弹窗。

以上方法简单有效，适用于大多数 UniApp 微信小程序场景。

回到顶部