微信小程序登录授权详解

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

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 发送给后台解码出 unio