- 在
index.wxml
点击的 button
按钮中,去进行判断和获取。在button
中,设置 open-type
的值 为 getUserInfo
, open-type
是微信的开放能力,getUserInfo
可以 获取用户信息和可以从bindgetuserinfo
回调中获取到用户信息。给 button
去绑定 bindgetuserinfo
, bindgetuserinfo
去绑定 handleGetUserInfo
事件,代码如下:
<button open-type="getUserInfo" style="display: {{ isShow?'block':'none'}}" bindgetuserinfo="handleGetUserInfo">获取用户登录信息</button>
- 在
index.js
,定义 handleGetUserInfo
方法,传入 data
, 判断用户点击是否允许。如果 data.detail.rawData
的值为 true
,说明用户点击的是允许,那么调用 getUserInfo()
方法,去进行登录授权和获取用户信息,代码如下:
handleGetUserInfo (data) {
if (data.detail.rawData) {
this.getUserInfo()
}
}
- 在
data
中 定义 页面的初始数据, 设置 userInfo
的值 为 {}
, 设置 isShow
的值为 false
, 代码如下:
data: {
userInfo: {},
isShow: false
}
- 在
index.js
中, 定义 getUserInfo()
方法,第一步先进行判断用户是否授权,可以调用 wx.getSetting
的API
方法,当 success
接口调用成功的回调函数,传入 data
。AuthSetting
是 用户授权设置信息,boolean scope.userInfo
是 AuthSetting
的属性,是否授权用户信息,对应接口 wx.getUserInfo
。 如果 data.authSetting['scope.userInfo']
的值 true, 说明用户是授权的,可以进行更改data
中的 isShow
的值,通过 this.setData
方法,设置 isShow
为 false
,反之则是未授权,设置 isShow
为 true
。第二步, 获取用户的登录信息,可以调用 wx.getUserInfo()
,当 success
接口调用成功的回调函数,传入 data
, 更新data
中的userInfo
的信息,通过 this.setData
方法,设置userInfo
的值 为 data.userInfo
。在fail
中, 接口调用失败的回调函数,可以打印一下失败的信息,代码如下:
getUserInfo () {
wx.getSetting({
success: (data) => {
if (data.authSetting['scope.userInfo']) {
this.setData({
isShow: false
})
} else {
this.setData({
isShow: true
})
}
}
})
wx.getUserInfo({
success: (data) => {
console.log(data)
this.setData({
userInfo: data.userInfo
})
},
fail: () => {
console.log('获取用户数据失败')
}
})
}
- 在
onLoad
生命周期钩子函数中,onLoad
是监听页面的加载,初始化操作,调用 getUserInfo
方法,代码如下:
onLoad: function (options) {
this.getUserInfo()
}
userInfo.avatarUrl
是用户的头像地址,userInfo.nickName
是用户的昵称