小程序(三):授权登录
转载自https://www.cnblogs.com/xinchenhui/p/10421901.html
1、登录按钮:
open-type='getUserInfo' 打开授权页面
bindgetuserinfo="getUserInfo" 打开授权页面点击确定,执行getUserInfo方法,回调时产生的detail数据和wx.getUserInfo一致。
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
2、登录方法
//index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'),//检查这个方法或组件是否可用,返回boolean }, onLoad: function() { if (app.globalData.userInfo) { //console.log('每次进入页面,查询是否已经授权过用户信息,如果有用户信息,那么久储存到本页面'); this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 //console.log('canIUse是判断button.open-type.getUserInfo是否可用,这里是可用'); app.userInfoReadyCallback = res => { console.log(res); this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 //console.log('这里是不可用'); wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function(e) { //console.log('open-type="getUserInfo"展开获取用户信息后,点击确认按钮的回调,储存用户信息'); app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } })
//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 => {
// wx.getSetting返回值只有一个,判断是否已授权:res.authSetting['scope.userInfo'](true or false) 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)//到这里之后再去index.js页面执行userInfoReadyCallback的回调函数 } } }) } } }) }, globalData: { userInfo: null,//储存用户信息专用 } })