微信小程序登录获取头像的代码
时间: 2023-12-21 09:05:21 浏览: 84
以下是微信小程序登录获取头像的代码:
```javascript
// 在需要获取头像的页面中引入以下代码
const app = getApp();
Page({
data: {
avatarUrl: "", // 用于存储头像地址
},
// 获取头像按钮点击事件
getAvatar() {
wx.getUserProfile({
desc: "获取你的头像", // 弹框提示语
success: (res) => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
});
// 将头像地址存储到全局变量中
app.globalData.avatarUrl = this.data.avatarUrl;
},
fail: (res) => {
console.log(res);
},
});
},
});
// 在 app.js 中添加以下代码
App({
globalData: {
avatarUrl: "", // 用于存储头像地址
},
});
```
在页面中,可以通过 `wx:if` 判断是否已经获取到了头像地址,如果获取到了就显示头像,否则显示一个按钮来触发获取头像的操作。例如:
```html
<view wx:if="{{avatarUrl}}">
<image src="{{avatarUrl}}" />
</view>
<view wx:else>
<button bindtap="getAvatar">获取头像</button>
</view>
```