微信小程序非跳转式组件授权登录的方法示例攻略

前言

微信小程序在发布初期只提供了跳转式授权登录的方法，需要跳转到微信官方的授权登录页面进行登录。随着微信小程序开发的不断深入和发展，现在提供了非跳转式授权登录的方法。本文将详解微信小程序的非跳转式授权登录的方法，同时提供两个示例说明。

方法

获取用户信息

获取小程序用户信息有两种方法：

<1> 使用`<button open-type="getUserInfo">`按钮

可以在小程序中使用<button>标签并设置open-type属性的值为getUserInfo，这样当用户点击该按钮时即可触发微信客户端提示用户授权并返回用户信息。可使用如下代码片段实现：

<button open-type="getUserInfo"  bindgetuserinfo="getUserInfo">获取用户信息</button>

在bindgetuserinfo回调函数中，可以通过event.detail.userInfo来获取用户信息数据。

Page({
  getUserInfo: function (e) {
    console.log(e.detail.userInfo)
  }
})

<2> 通过方法wx.getUserInfo()获取

可以在小程序中使用wx.getUserInfo()方法获取用户信息。该方法需要在小程序启动时执行，调用该方法时会触发微信客户端提示用户授权并返回用户信息。如果用户已经授权，则会直接返回用户信息。可以使用如下代码片段实现：

wx.getUserInfo({
  success(res) {
    console.log(res.userInfo)
  }
})

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

这个例子展示了如何将用户从微信登录到你的自定义服务器。用户登录后的令牌可以存储在微信小程序中。

示例说明

示例1：微信小程序授权登录示例

可以使用如下代码片段实现微信小程序的授权登录：

<button open-type="getUserInfo"  bindgetuserinfo="login">微信授权登录</button>

Page({
  login: function (e) {
    console.log(e.detail.userInfo);
    wx.login({
      success(res) {
        console.log(res)
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  }
})

此示例展示了如何使用微信授权登录来获取微信用户的userInfo和code，并将code发送到服务器以获取openId。

示例2：小程序获取授权登录状态码的示例

<button open-type="getUserInfo"  bindgetuserinfo="getUserInfo">获取用户信息</button>  
<button bindtap="wxlogin">获取登录状态码</button>

Page({
  getUserInfo: function (e) {
    console.log(e.detail.userInfo)
  },
  wxlogin:function(){
    wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://yourserver.com/login',
            data: {
              code: res.code
            },
            success:function(res){
              console.log(res.data.status)
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  }
})

此示例展示了当用户授权后，如何获取微信小程序登录状态码和将状态码发送到后端以进行验证并返回相应信息。