小程序授权登陆流程

由上图可看出：

1.  当需要登录时，前端需先调用微信方法wx.login()方法，此方法会返回一个临时的登录code
2.  前端调用微信方法wx.request()方法将上一步生成的临时code传给开发者服务器
3.  开发者服务器将前端传入的code以及appid和appsecret发给微信服务器
4.  微信服务器回根据开发者服务传入的参数，返回seesin_key和openid
5.  开发者服务器收到微信服务器的session_key和openid生成自己的登录态,发回给前端

到这里登录流程结束。但此时并不是用户登录的行为，因此，开发者会继续要求用户授权，拿到用户信息。

此时，需要弹起用户授权的按钮，当前小程序的授权是必须要用户点击，有用户行为的，点击按钮，调用wx.getUserInfo()方法，获取到用户信息。

将之前生成的登录太信息，和用户信息一并回传开发者服务端，生成用户登录信息。
 

具体步骤

首先拉取用户信息，绑定事件

<button type="primary" bindtap="login"> 登录 </button>

在js中写方法

login() {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    wx.getUserProfile({
      desc: '用于登录',
      success: (res) => {
        console.log(res);//所有的用户信息
        const { userInfo } = res;
        console.log(userInfo);//用户信息
      }
    })
  },

登录成功后获取code

 wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: '',
            data: {
              code: res.code
            }
          })
          console.log(res.data);
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })