微信小程序登录授权详解

       最近，由于公司需要研究了一下微信小程序的开发，特此记录一下小程序登录授权的流程，便于自己理解，也希望对他人有多帮助。如有错误，欢迎指正！！

1.实现思路

       由于微信官方修改了getUserInfo接口，现在一进入小程序无法自动弹出授权界面，所以需要我们自己写一个微信授权界面使用button按钮去触发该接口。

   ①  先调用wx.login获取登录凭证(code),然后通过code进而换取用户登录态信息，包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。
   ②  获取用户信息，先调用wx.getSetting获取用户当前的设置，判断用户是否授权过。如果已经授权，则直接调用getUserInfo获取头像、昵称等，不会弹框。需要的话设置全局变量。如果暂未授权，则需要跳转到我们写的授权界面并使用button按钮去触发来获取用户授权。
   ③  大致就是这么一个逻辑，如果其中有其他业务逻辑，还请另行添加修改。此外，如果对小程序开发不太熟悉，可以参照本篇博客和官方文档实现登录授权功能。

2.界面展示

3.逻辑代码

主要代码如下：

//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 var that = this; console.log(res) if(that.globalData.openId){ try{ wx.setStorageSync("open_id", that.globalData.openId)//**设置本地缓存**同步 }catch(e){} }else{ console.log(res.code); wx.request({ url: '',//**请求后台地址** data: {code: res.code }, success: (res) =>{ that.globalData.openId = res.data.openid //**给全局变量赋值** wx.setStorage({//**设置本地缓存**异步 key: "open_id", data: res.data.openid, }) if(res.data.nickname == null){} } }) } }, }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { var that = this // 可以将 res 发送给后台解码出 unionId that.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (that.userInfoReadyCallback) { that.userInfoReadyCallback(res) } } }) }else{ //获取用户信息失败后，跳转到授权页面 wx.navigateTo({ url: '/pages/login/login', }) } } }) }, globalData: { openId: null, userInfo: null } }) 

login.wxml

<!--pages/login/login.wxml --> <view wx:if="{{canIUse}}"> <view class="header"> <image src="../../pages/images/wechatico.png"></image> </view> <view class="content"> <view>申请获取以下权限</view> <text>获得你的公开信息(昵称、头像等)</text> </view> <button class="bottom" type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">授权登录</button> </view> <view wx:else>请升级微信版本</view> 

login.js

/* pages/login/login.js */ var app = getApp() //获取应用实例 Page({ data: { //判断小程序的API，回调，参数，组件等是否在当前版本可用。 canIUse: wx.canIUse("button.open-type.getUserInfo"), }, onLoad: function (options) { }, bindGetUserInfo: function (e) { var that = this; //此处授权得到userInfo console.log("授权得到userInfo ：" + e.detail.userInfo) var authUser = e.detail.userInfo; if (authUser == undefined) {//判断 console.log("用户点击 拒绝 按钮") return; } wx.request({ url: '',//请求后台地址授权后更新用户信息 data: { "openId": app.globalData.openId, "nickName": authUser.nickName, "avatarUrl": authUser.avatarUrl, }, success: function(res){ console.log(res); }, }) //最后，返回返回刚才的界面 wx.navigateBack({ delta: 1 }) } }) 

login.wxss

/* pages/login/login.wxss */ .header { margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 300rpx; } .header image { width: 90rpx; height: 120rpx; } .content { margin-left: 50rpx; margin-bottom: 90rpx; } .content text { display: block; color: #9d9d9d; margin-top: 40rpx; } .bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; } 

最后希望此篇博客对您有所帮助，如果有什么不太懂或者不对的地方，欢迎留言讨论，共同进步！！！