小程序：登录（获取用户信息、登录）

2023-10-18 18:05:52

1、相关函数

（1）点击头像获取用户信息：getUserInfo

  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

控制台打印e的信息：

显示性别、城市、微信名、微信头像等用户信息

 app.globalData.userInfo = e.detail.userInfo

将获取的用户信息给了全局

  this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })

将用户信息赋给了userinfo，并且hasUserInfo变为true

（2）用户信息的获取

 onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },

第一个判断是：全局的userinfo不为空的话，就把全局的userinfo的值赋给该变量，并将hasuserinfo变为true，代表已经拥有用户的信息

第二个判断是：如果没有用户信息，先判断是否存在获取用户信息的按钮，则点击按钮获取用户的信息

第三个判断是：没有全聚德userinfo，并且没有按钮就直接进入页面，不再进行获取用户的身份信息

2、获取用户信息

（1）设置登录授权按钮

早期版本直接调用getUserInfo获取用户信息，现在必须在得到用户允许的情况下才能获得用户信息，提供的有一个按钮让用户选择是否能获得该用户的信息

  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">  </button>

（2）获取用户信息

 getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

e.detail.userInfo就是用户的信息，给全局让其他的页面也能获取到

（3）切换页面后判断用户信息是否存在

 onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },

分为全局有用户信息、没有用户信息但是有按钮、没有用户信息没有按钮三种情况

（4）概述

如果当前版本支持按钮授权，就点击按钮获取用户的信息；如果不支持授权的话就直接使用getUserInfo获取用户信息。当我们获取到授权之后将获取到的用户的相关信息赋给全局，再次登录小程序的时候分为全局有用户信息、没有用户信息但是有按钮、没有用户信息没有按钮三种情况进行处理

3、小程序的登录流程

（1）登录流程

（2）登录函数

调用接口获取临时登录凭证code，通过该凭证获取小程序的登录状态信息，包括用户的唯一标识openid、本次登录的会话密匙(用于用户数据的加密通讯)session_key

   wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log(res)
      }
    })

res的信息：

（3）小程序登录过程

wx.login获取到code
wx.request通过code发送请求，将code发送给开发者服务器
通过登录凭证（appid、code）判断接口能否使用，并返回openid、session_key给开发者服务器
开发者服务器自定义登录状态并与openid、session_key关联，将登录态返回给微信小程序
小程序登录后获取业务，发起业务请求（携带登录态），会在开发者服务器查询是否存在，存在的话有权利操作其他业务

小程序：登录（获取用户信息、登录）

码农公寓

相关文章