微信小程序获取用户头像昵称等信息
发布:2022-03-15 17:06浏览:
次来源: 作者:
调用微信小程序封住的 wx.getUserInfo({ })
微信新创建的项目中自带获取功能的代码,但是代码量太多,所以给简化了一下方便以后在别的项目中使用
直接上代码>>>
先在app.js中声明一个全局变量userInfo
globalData: {
userInfo: null
} |
在需要现显示的wxml中
//头像{{userInfo.nickName}}//昵称 |
在需要现显示页面的wxss中定义一下显示的样式
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
} |
在需要现显示的js中
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
onLoad: function () { //页面加载监听函数
wx.getUserInfo({
success: res => {
console.log(res) //获取的用户信息还有很多,都在res中,看打印结果
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
以上代码就可实现微信小程序获取用户信息
注意:微信小程序获取用户信息需用户授权,以上代码是用户已授权节省代码量,若需授权请在app.js加入如下代码:
onLaunch: function () {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
}, |
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。