微信小程序开发用户信息获取和授权代码教程
我们在使用微信小程序开发工具的时候，我们需要先创建一个项目，看微信官网给我们自动生成的代码。
首先我们看一下app.js代码：
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)
// 登录
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)
}
},
fail:res=>{
wx.showToast({
title: ‘getUserInfo failed’,
icon: ‘none’,
duration: 2000
})
}
})
}else{
wx.showToast({
title: ‘没有授权’,
icon: ‘success’,
duration: 2000
})
}
}
})
},
globalData: {
userInfo: null
}
})
上面的代码共发三部分，分别是本地存储能力展示，微信登录展示和用户信息获取功能展示。由上可知通过wx.login方法得到res.code，然后将其发到后台调用微信接口可以获取openid等信息。
wx.getSetting方法
该方法是获取用户设置信息，通过此方法得到用户对当前程序的授权设置情况，如是否有获取头像权限。
用户权限配置检查
if (res.authSetting[‘scope.userInfo’])
这个意思是用户是否设置了用户授权，如果没有，我们会弹出一个 “没有授权”提示。如果已经授权了，我们就使用wx.getUserInfo方法获取资料。注意的是，因为这个方法是访问网络远程的数据，因为在访问等待结果之前，可能我们的默认页面（小程序第一个页面也是就我们常说的首页）已经加载完了。那么怎么判断我们的页面加载早于这个方法的结果返回之前呢？这里有一个巧妙的方法。我们先看一下index页面的js文件内容：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: ‘Hello World’,
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse(‘button.open-type.getUserInfo’)
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs’
})
},
onLoad: function () {
console.log(‘page onload’);
if (app.globalData.userInfo) {
console.log(‘set data’);
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
console.log(‘canIUse’);
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
console.log(‘get call back’);
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
console.log(‘兼容处理’);
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
console.log(‘get user info success’)
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(‘do get user info’+e);
if(e){
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}else{
console.log(‘用户选择了拒绝’);
}
}
})
上面代码，我们重点看onLoad这个方法里，这里做了三个判断，第一种情况判断app.globalData.userInfo是否有值 ，如果有那就直接给页面的数据赋值。
第二种情况判断当前微信是否支持button.open-type.getUserInfo这个版本属性，如果有，那么重点来了：我们给app页面增加一个方法userInfoReadyCallback，这个方法作用就是接收wx.getUserInfo的结果，然后赋值给index页面中的数据。
本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
