微信小程序实现微信登录

• 本文将简单介绍如何实现小程序的微信登陆
• 将要使用的api：
  1. wx.checkSession(Object object)
  2. wx.login(Object object)
  3. wx.getStorageSync(string key)
  4. wx.setStorageSync(string key, any data)
  5. wx.request(Object object)

首先我们可以看看官方文档的流程图。官网文档相应链接

流程图大概讲的是，小程序端调用wx.login获取code，然后调用wx.request进行网络请求，携带参数：code，appid，appsecret，后端用这三个参数向微信接口服务请求，得到session_key和openid等数据。紧接着，后端对参数进行处理，返回自定义登录状态，比如说：后端对session_key进行加密，返回加密数据给小程序端。接着，小程序端通过wx.setStorageSync对返回来的处理过的数据存入storage。之后，每当发起业务请求时，如需session_key，小程序端可以向后端传入storage中的登录态，从而获取业务数据。

为了进一步优化用户体验，我们使用wx.checkSession对用户的session_key有效期进行检验，如图。

如图，在用户点击微信登录的按钮时，我们先从storage中取自定义的登录态，如果取到了，那么就检查session_key的有效期，如若有效，则可以做其他事情，如业务请求；如若无效，那么用户调用wx.login重新登录。如果没取到自定义登录态，他么用户调用wx.login登录。

代码如下：

    //点击微信登录按钮触发事件
      onLoginButton(event){
        var that = this;
        let thirdSession = wx.getStorageSync('thirdSession');
        if (thirdSession) {//如果之前有存过thirdSession
          //检查session_key是否在有效期
          wx.checkSession({
            //在有效期
            success(res) {//存储中有有自定义登录状态且在有效期
              //用自定义登录状态进行一些业务请求
              wx.request({
                url: '',
                data:{
                  thirdSession,
                }
              })
            },
            //不在在有效期,则需重新登录
            fail(err){
              //调用微信登录请求函数
              that.wechatLogin()
            }
          })
        } else {//如果之前没存过thirdSession，则需登录
          //调用微信登录请求函数
          that.wechatLogin();
        }
      },
      //微信登录请求函数
      wechatLogin(){
       wx.login({
         success(res) {
           let code = res.code;
           wx.request({
             url: '',
             data: {
               //三个登录所需参数
               appid,
               appsecret,
               code,
             },
             success(res) {
               //后端返回自定义登录状态，比如说加密过的session_key，其返回值的参数名为thirdSession
               wx.setStorageSync('thirdSession', res.data.thirdSession)
               //and do something
             }
           })
         }
       })
      }

以上就是全部内容，如有不足还望大家多多指正。