微信小程序获取用户头像昵称等信息
发布时间：2021-07-05 08:49 所属栏目：小程序开发教程
调用微信小程序封住的 wx.getUserInfo({ })
微信新创建的项目中自带获取功能的代码，但是代码量太多，所以给简化了一下方便以后在别的项目中使用
直接上代码>>>
先在app.js中声明一个全局变量userInfo
globalData: {
userInfo: null
}
|
在需要现显示的wxml中
<view class="container">
<view class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> //头像
<text class="userinfo-nickname">{{userInfo.nickName}}</text>//昵称
</view>
</view>
|
在需要现显示页面的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)
}
}
})
}
}
})
},
|
