微信小程序登陆篇

冷不防 2023-07-13 13:53 22阅读 0赞

**1. 登录流程图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70]

*  小程序端通过wx.login()获取到code后发送给后台服务器
 *  后台服务器使用小程序的appid、appsecret和code，调用微信接口服务换取session\_key和openid（openid可以理解为是每个用户在该小程序的唯一识别号）
 *  后台服务器自定义生成一个3rd\_session，用作openid和session\_key的key值，后者作为value值，保存一份在后台服务器或者redis或者mysql，同时向小程序端传递3rd\_session  
    小程序端收到3rd\_session后将其保存到本地缓存，如wx.setStorageSync(KEY,DATA)
 *  后续小程序端发送请求至后台服务器时均携带3rd\_session，可将其放在header头部或者body里
 *  后台服务器以3rd\_session为key，在保证3rd\_session未过期的情况下读取出value值（即openid和session\_key的组合值），通过openid判断是哪个用户发送的请求，再和发送过来的body值做对比（如有），无误后调用后台逻辑处理
 *  返回业务数据至小程序端

**注：**  
**- openid为小程序用户唯一标识，需存入数据库**  
**- 在微信小程序开发中，由wx.request()发起的每次请求对于服务端来说都是不同的一次会话。啥意思呢？就是说区别于浏览器，小程序每一次请求都相当于用不同的浏览器发的。即不同的请求之间的sessionId不一样（实际上小程序cookie没有携带sessionId）**  
**- 前后端分离开发一般使用token做自定义登录态**

## 2.微信小程序获取用户信息 ##

**自从微信接口有了新的调整之后 这个wx.getUserInfo（）便不再出现授权弹窗了，需要使用button做引导~**

*  wxml如下：

<button wx:if="{ {canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
    <view wx:else>请升级微信版本</view>

*  js如下：

//js
    Page({ 
      data: { 
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      onLoad: function() { 
        // 查看是否授权
        wx.getSetting({ 
          success: function(res){ 
            if (res.authSetting['scope.userInfo']) { 
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({ 
                success: function(res) { 
                  console.log(res.userInfo)
                }
              })
            }
          }
        })
      },
      bindGetUserInfo: function(e) { 
        console.log(e.detail.userInfo)
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70]: /images/20230529/71e7dee8456b4c2cb1f4cb211ce3df49.png