微信小程序（uniapp）获取微信昵称和头像

微信小程序（uniapp）获取微信昵称和头像

在开发基于 uni-app 的微信小程序时，获取用户的微信昵称和头像是一个常见的需求。通过微信提供的用户授权机制，我们可以安全地获取用户的公开信息。本文将详细介绍如何在 uni-app 中实现这一功能，并提供完整的代码示例。

---

一、前置知识

1. 用户授权机制
   微信小程序中，获取用户信息需要通过用户授权。用户授权后，我们可以通过 wx.getUserProfile 接口获取用户的昵称和头像。

2. uni-app 与微信小程序的兼容性
   uni-app 是一个跨平台框架，但在微信小程序中，底层仍然依赖微信小程序的 API。因此，我们可以直接使用微信小程序的授权接口。

3. 注意事项

   • 从 2021 年 4 月起，微信要求开发者使用 wx.getUserProfile 接口获取用户信息，wx.getUserInfo 已被废弃。
   • 必须在用户触发的事件（如按钮点击）中调用授权接口。

---

二、实现步骤

1. 配置用户信息权限

在 manifest.json 文件中，确保已勾选微信小程序的用户信息权限。

"mp-weixin": {
  "permission": {
    "scope.userInfo": {
      "desc": "用于完善用户资料"
    }
  }
}

2. 页面布局

在页面中添加一个按钮，用于触发获取用户信息的操作。

<template>
  <view class="container">
    <button open-type="getUserProfile" @tap="getUserProfile">获取微信昵称和头像</button>
    <view v-if="userInfo">
      <image :src="userInfo.avatarUrl" class="avatar"></image>
      <text>{{ userInfo.nickName }}</text>
    </view>
  </view>
</template>

3. 样式设计

简单设计一下样式，让头像和文字显示得更美观。

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}
</style>

4. 逻辑实现

在 script 部分，编写获取用户信息的逻辑。

export default {
  data() {
    return {
      userInfo: null // 用于存储用户信息
    };
  },
  methods: {
    getUserProfile() {
      // 调用微信小程序的 getUserProfile 接口
      uni.getUserProfile({
        desc: '用于完善用户资料', // 声明用途
        success: (res) => {
          console.log('用户信息获取成功', res);
          this.userInfo = res.userInfo; // 保存用户信息
        },
        fail: (err) => {
          console.error('用户信息获取失败', err);
        }
      });
    }
  }
};

三、完整代码示例

以下是完整的代码示例，包含模板、样式和逻辑。

<template>
  <view class="container">
    <button open-type="getUserProfile" @tap="getUserProfile">获取微信昵称和头像</button>
    <view v-if="userInfo">
      <image :src="userInfo.avatarUrl" class="avatar"></image>
      <text>{{ userInfo.nickName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null // 用于存储用户信息
    };
  },
  methods: {
    getUserProfile() {
      // 调用微信小程序的 getUserProfile 接口
      uni.getUserProfile({
        desc: '用于完善用户资料', // 声明用途
        success: (res) => {
          console.log('用户信息获取成功', res);
          this.userInfo = res.userInfo; // 保存用户信息
        },
        fail: (err) => {
          console.error('用户信息获取失败', err);
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}
</style>

四、注意事项

1. 用户拒绝授权
   如果用户拒绝授权，需要在 fail 回调中处理，例如提示用户授权的重要性。
2. 接口调用限制
   wx.getUserProfile 必须在用户触发的事件中调用，不能在页面加载时直接调用。
3. 数据存储
   如果需要长期保存用户信息，可以将数据存储在本地或上传到服务器。
4. 隐私合规
   在获取用户信息时，必须明确告知用户用途，并遵守相关法律法规。

五、总结

通过本文的介绍，我们学会了如何在 uni-app 中获取微信用户的昵称和头像。核心步骤包括：

1. 配置权限描述。
2. 使用 uni.getUserProfile 接口获取用户信息。
3. 在页面中展示用户信息。

希望本文能帮助你快速实现这一功能。如果你还有其他问题，欢迎在评论区留言！