微信小程序授权获取用户信息并登录

微信小程序授权获取用户信息并登录

index.wxml

<view class='content'>
      <button type="primary" bindtap="onWechatLogin" wx:if="{{ifAuth}}">已授权直接登陆</button>
      <view wx:else>
        <button type="primary"  wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">未授权，先授权后登陆</button>
        <view wx:else>请升级微信版本</view>
      </view>
  </view>

index.js

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    ifAuth: false,//是否授权
    code: ''
  },
   onShow: function () {
      var _this = this;
      wx.getSetting({//获取用户的当前设置。返回值为小程序已经向用户请求过的权限。
        success(res) {
          if (res.authSetting['scope.userInfo']) { //已经授权过
            _this.setData({ ifAuth: true })
          } else {
            _this.setData({ ifAuth: false})
          }
        }
      })
  },
  //已授权直接登陆
  async onWechatLogin() {
    var _this = this;
    try {
      var code = await util.login();//调用wx.login，获取登录凭证（code），调用
    } catch (err) {
      return;
    }
    
    //wx.getUserInfo获取用户信息，要求此前有调用过 wx.login 且登录态尚未过期，
    //根据code和wx.getUserInfo返回信息进行登陆校验，loginApi接口为后台接口
    
    util.getUserInfo().then(res => {
      _this.loginApi(code, res);
    }).catch(err => {})
  },

  //未授权登陆,使用button点击获取用户信息并弹出授权，但点击按钮前需先获取code
  bindGetUserInfo(e) {
    this.loginApi(this.data.code, e.detail);
  },
})