获取用户信息
最早微信小程序开发者可以直接调用wx.getUserInfo方法在用户打开小程序的第一时间通知用户获取其信息,现在微信要求开发者必须在的到用户批准的情况下才能去拉起请求获取信息的操作。要求开发者必须提供一个按钮
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">按钮</button>
<!-- 当我们点击这个按钮后,用户就会收到获取信息的提示,授权之后开发者就可以获取到用户的昵称 头像以及其他信息 -->
const app = getApp()
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo') // 当前版本是否可以使用按钮获取用户信息
},
onload () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
}else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo (e) {
// e.detail.userInfo就是用户的信息,获取到信息后将信息设置给当前页面中的data里
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
如果当前版本库支持“按钮授权”,就点击按钮授权小程序获取用户信息,如果不支持,则直接使用wx.getUserInfo方法获取
当我们获取授权后,将相关信息交给app.globalData,下次再次进入该页面时,如果当前app中有相关数据,直接使用该数据即可,如果没有,则利用app中的wx.getUserInfo去获取信息并调用对应的回调函数的到用户信息并使用。
app.js
// 获取用户信息
// 获取设置
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)
} */
this.userInfoReadyCallback && this.userInfoReadyCallback(res)
}
})
}
}
})