微信小程序登录获取头像的代码
时间: 2023-12-21 17:05:29 浏览: 41
实现微信小程序登录获取头像的代码如下所示:
1. 在小程序的 app.js 文件内定义全局变量 userInfo:
```
App({
globalData: {
userInfo: null
}
})
```
2. 在小程序的 login 页面内,通过调用微信登录接口 wx.login(),获取用户登录凭证 code:
```
wx.login({
success: res => {
if (res.code) {
// 发起网络请求,获取用户信息
wx.request({
url: 'https://example.com/login',
data: {
code: res.code
},
success: res => {
// 将用户信息存储到全局变量 userInfo 中
getApp().globalData.userInfo = res.data.userInfo
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
```
3. 在小程序的个人信息页面内,通过调用微信用户信息接口 wx.getUserInfo(),获取用户信息:
```
wx.getUserInfo({
success: res => {
// 将用户信息存储到全局变量 userInfo 中
getApp().globalData.userInfo = res.userInfo
}
})
```
4. 在小程序的个人信息页面内,通过调用 wx:if 条件渲染,判断用户是否已经授权:
```
<view wx:if="{{userInfo}}">
<image src="{{userInfo.avatarUrl}}" />
<text>{{userInfo.nickName}}</text>
</view>
<view wx:else>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像</button>
</view>
```
5. 在小程序的个人信息页面内,通过调用 bindgetuserinfo 事件,获取用户头像:
```
getUserInfo: function (e) {
// 将用户信息存储到全局变量 userInfo 中
getApp().globalData.userInfo = e.detail.userInfo
}
```
6. 最后,在小程序的个人信息页面内,通过调用全局变量 userInfo 的 avatarUrl 属性,显示用户头像:
```
<image src="{{userInfo.avatarUrl}}" />
```