uniapp 获取微信授权头像
时间: 2024-09-21 14:04:43 浏览: 61
uniapp - 微信小程序 - 自定义底部tabbar
在uni-app中获取微信授权的用户头像,你需要使用微信的JSSDK(JavaScript SDK)。首先,在uni-app项目的`config.js`文件中配置微信小程序的相关信息,包括AppID:
```javascript
// config.js
export default {
wxOptions: {
debug: false, // 开启调试模式, 生产环境不开启
appId: 'your.wx.app.id', // 必填,公众号、小程序的唯一标识
timestamp: '', // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '', // 必填,签名
jsApiList: ['getSetting', 'getUserInfo'] // 需要使用的JSAPI列表
}
}
```
然后在需要获取头像的地方,可以使用`getUserInfo`这个API,并提供一个回调函数处理授权成功后的用户信息:
```javascript
Page({
getUserInfo: function (e) {
var that = this;
if (!this.globalData.userInfo) {
// 用户未授权,提示授权
that.globalData.userInfo = {};
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权,直接调用 getUserInfo 获取头像
wx.getUserInfo({
success(res) {
// 用户同意授权后,服务器才收到用户真实信息
that.globalData.userInfo = res.userInfo;
// 这里可以将用户头像赋值给页面的某个变量或者存储到本地
let avatarUrl = res.userInfo.avatarUrl; // 微信返回的头像URL
// ...处理头像展示或保存逻辑
},
fail(err) {
console.log('获取用户信息失败', err);
}
});
} else {
// 用户不允许获取位置信息,提示用户打开设置授权
wx.authorize({
scope: 'scope.userInfo',
success() {
wx.getUserInfo(...);
},
fail() {
console.log('授权失败');
}
})
}
}
});
} else {
// 已有用户信息可以直接使用,不需要再次弹窗
let avatarUrl = that.globalData.userInfo.avatarUrl;
}
}
})
```
在这个例子中,`avatarUrl`就是获取到的微信头像链接。注意,实际使用时,你需要处理好用户的授权状态以及网络请求的情况。
阅读全文