微信小程序获取头像 微信小程序获取头像昵称失败

如何在微信小程序中获取用户头像

微信小程序是一种轻量级的应用程序，可以在微信内部直接运行，为用户提供各种功能和服务，在开发微信小程序时，获取用户头像是非常常见的需求之一，本文将详细介绍如何在微信小程序中获取用户头像的方法。

1. 使用微信官方提供的接口

微信小程序提供了一个官方接口wx.getUserInfo，用于获取用户的基本信息，包括头像、昵称、性别等，调用该接口需要用户授权，只有用户同意授权后，才能获取到用户的头像信息。

在小程序的页面中引入微信官方提供的API：

```

const app = getApp();

Page({

data: {

avatarUrl: '',

},

getUserInfo: function(e) {

console.log(e.detail.userInfo)

this.setData({

avatarUrl: e.detail.userInfo.avatarUrl

})

}

})

在小程序的页面中添加一个按钮，用于触发获取用户信息的事件：

获取用户信息

当用户点击按钮后，会弹出一个授权对话框，询问用户是否允许小程序获取头像等信息，用户同意后，可以在getUserInfo函数中获取到用户的头像信息，并将其保存到data中。

2. 使用微信登录接口获取用户信息

除了使用wx.getUserInfo接口获取用户头像外，还可以使用微信登录接口wx.login来获取用户的唯一标识openid，并结合微信开放平台的接口获取用户的头像信息。

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

if (res.code) {

// 发起网络请求

wx.request({

url: '',

data: {

appid: 'your appid',

secret: 'your secret',

js_code: res.code,

grant_type: 'authorization_code'

},

success: res => {

console.log(res.data)

this.setData({

avatarUrl: res.data.avatarUrl

})

}

})

} else {

console.log('登录失败！' + res.errMsg)

}

}

当用户点击按钮后，会触发getUserInfo函数，在该函数中，首先调用wx.login接口获取用户的code，然后将code发送到后台服务器，通过微信开放平台的接口换取用户的openid和sessionKey，从返回结果中获取到用户的头像信息，并将其保存到data中。

通过以上两种方法，我们可以在微信小程序中获取用户的头像信息，第一种方法使用wx.getUserInfo接口，需要用户授权，获取到的信息包括头像、昵称等，第二种方法使用微信登录接口wx.login和微信开放平台的接口，可以获取到用户的openid和sessionKey，进而获取到用户的头像信息。

通过获取用户头像，我们可以为用户提供个性化的服务和体验，例如在小程序中显示用户的头像，或者根据用户的头像信息进行个性化推荐等。