详解微信小程序开发用户授权登陆

微信小程序开发用户授权登陆是小程序中常见的功能之一，允许用户授权登录并获取用户信息。本攻略将详细介绍如何实现微信小程序用户授权登录，并提供示例代码供参考。

1. 开发者配置

在微信公众平台中注册小程序，并在开发者工具中创建小程序项目。在小程序管理后台中，开启“用户信息”权限，同时设置授权回调页面路径。

2. 获取用户权限

在小程序页面中，通过 wx.getSetting() 函数获取用户授权信息。

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      // 用户已授权，可以直接获取用户信息
      wx.getUserInfo({
        success: res => {
          console.log(res.userInfo)
        }
      })
    } else {
      // 用户未授权，需要点击按钮进行授权
    }
  }
})

如果用户已授权，可以使用 wx.getUserInfo() 直接获取用户信息。如果用户未授权，需要引导用户授权。

3. 引导用户授权

在小程序中，可以使用 button 组件实现授权按钮，并使用 wx.getUserProfile() 函数引导用户授权。

<button open-type="getUserProfile" bindgetuserprofile="getUserInfo">授权登录</button>

Page({
  getUserInfo(e) {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: res => {
        console.log(res.userInfo)
      }
    })
  }
})

在点击授权按钮后，页面会弹出授权对话框，其中包含授权的提示语和授权确认按钮。用户点击确认按钮后，会授权小程序获取用户信息。

示例1：获取用户头像

Page({
  data: {
    userInfo: {}
  },
  getUserInfo(e) {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: res => {
        this.setData({
          userInfo: res.userInfo
        })
      },
      fail: err => {
        console.log(err)
      }
    })
  }
})

在页面中，使用 button 组件实现“获取头像”按钮，同时通过 {{}} 模板语法显示用户头像。

<view class="container">
  <button open-type="getUserProfile" bindgetuserprofile="getUserInfo">获取头像</button>
  <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
</view>

示例2：授权登陆

在页面中，使用 button 组件实现“授权登陆”按钮。在点击授权登陆按钮后，如果用户已授权，可以直接获取用户信息并完成登陆；如果用户未授权，需要引导用户授权。

Page({
  data: {
    userInfo: {}
  },
  getUserInfo(e) {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: res => {
        this.setData({
          userInfo: res.userInfo
        })
        // 登陆逻辑
        wx.login({
          success: res => {
            console.log(res.code)
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
          }
        })
      },
      fail: err => {
        console.log(err)
      }
    })
  }
})

<view class="container">
  <button open-type="getUserProfile" bindgetuserprofile="getUserInfo">授权登陆</button>
  <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
  <view>昵称：{{userInfo.nickName}}</view>
  <view>性别：{{userInfo.gender == 1 ? '男' : (userInfo.gender == 2 ? '女' : '未知')}}</view>
  <view>城市：{{userInfo.city}}</view>
</view>

以上就是微信小程序开发用户授权登陆的详细攻略，包含了获取用户权限、引导用户授权等内容，并提供了两条示例供参考。