微信小程序如何获取用户头像和昵称

想要获取微信小程序用户的头像和昵称，需要借助微信提供的用户信息接口以及登录态生成的Openid。下面，我们来一步步讲解微信小程序如何获取用户头像和昵称。

步骤一：获取Openid

用户的Openid是每个小程序独立的，需要根据微信提供的API进行获取。具体的获取步骤如下：

1. 在小程序中引入wx.login()函数，以获取登录的的Code：

wx.login({
  success: function (res) {
    if (res.code) {
      // 将res.code发送到后台通过登录凭证校验接口换取openid。
    } else {
      console.log('获取用户登录态失败！' + res.errMsg)
    }
  }
});

1. 后台服务器收到Code后，调用微信提供的API换取用户的Openid：

// 请根据你的实际 AppID 和 AppSecret 进行替换
https://api.weixin.qq.com/sns/jscode2session?appid=wxAPPID&secret=wxAPPSECRET&js_code=JSCODE&grant_type=authorization_code

请求成功后，微信会返回用户的Openid，后台可将其存储供小程序访问。

步骤二：获取用户信息

1. 首先，在微信开发者工具中勾选“开发设置”中的“获取用户信息”。

2. 然后，在小程序中调用wx.getUserInfo()可以获得用户的信息，包括昵称和头像，示例如下：

wx.getUserInfo({
  success: res => {
    const userInfo = res.userInfo
    const nickName = userInfo.nickName // 昵称
    const avatarUrl = userInfo.avatarUrl // 头像
  }
})

需要注意的是，如果开启了“获取用户信息”选项，则wx.getUserInfo()只会返回用户的头像和昵称等基本信息，如需获取更多信息（如国家、省份、城市等），需要用户授权才能获得。

示例一：获取用户头像和昵称并展示

<!-- index.wxml -->
<view class='userInfo'>
  <image class='avatar' src='{{avatarUrl}}' />
  <text class='nickName'>{{nickName}}</text>
</view>

// index.js
Page({
  data: {
    nickName: "",
    avatarUrl: "",
  },
  onLoad: function () {
    wx.getUserInfo({
      success: res => {
        const userInfo = res.userInfo
        const nickName = userInfo.nickName
        const avatarUrl = userInfo.avatarUrl
        this.setData({
          nickName: nickName
          avatarUrl: avatarUrl
        })
      }
    })
  }
})

示例二：自定义用户信息按钮，点击后获取用户信息

<!-- index.wxml -->
<button class='btn' bindtap='onUserInfoClick'>获取用户信息</button>
<view class='userInfo'>
  <image class='avatar' src='{{avatarUrl}}' />
  <text class='nickName'>{{nickName}}</text>
</view>

// index.js
Page({
  data: {
    nickName: "",
    avatarUrl: "",
  },
  onUserInfoClick: function (e) {
    if (e.detail.userInfo) {
      const userInfo = e.detail.userInfo
      const nickName = userInfo.nickName
      const avatarUrl = userInfo.avatarUrl
      this.setData({
        nickName: nickName
        avatarUrl: avatarUrl
      })
    }
  }
})

通过自定义“获取用户信息”按钮，用户主动点击后才触发获取用户信息，避免了用户在进入小程序就直接授权获取用户信息的情况。同时，由于用户有可能不授权小程序获取信息，所以需要在onUserInfoClick函数中判断e.detail.userInfo，确保用户允许获取信息后再进行数据处理。