微信小程序使用微信授权登录流程

官方文档我就不贴了，写那么多我也看不下去，直接说一下流程，第一步用户触发js方法，跳转到下面的授权登录界面，用户点击授权之后就会弹出图二，用户和点击拒绝或应许之后就看下面的js流程就好，代码中每一步都有注释，看一看因该就明白了

WXML

<!--授权页面-->
<view wx:if="{{canIUse}}">
    <view class='header'>
        <image class="my-img" src='../../image/icon/3.jpg'></image>
    </view>
 
    <view class='content'>
        <view>申请获取以下权限</view>
        <text>获得你的公开信息(昵称，头像等)</text>
    </view>
 
    <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
        点击授权
    </button>
</view>
 
<view wx:else>请升级微信版本</view>

wxss

/* pages/authorize/authorize.wxss */
.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}


.my-img {
  width: 120rpx;
  height: 120rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

JS

// pages/authorize/authorize.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo') //获取用户信息是否在当前版本可用
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  bindGetUserInfo: function (e) { //点击的“拒绝”或者“允许
    if (e.detail.userInfo) { //点击了“允许”按钮，
      wx.login({ // 调用微信登录api
        success: function (res) { // 这一步是获取用户在小程序里的临时code码
          app.http.getOpenId({ // 请求后台接口，用code码换取用户信息openid或者token
            js_code: res.code,
          }).then(res => {
            wx.setStorageSync('openid', res.data.openid)
            wx.setStorageSync('Token', res.data.Token)
          })
        },
        fail: function (res) { // 获取code码失败的方法
          return app.ShowToast('授权失败' + res.Msg)
        }
      })
    } else {
    	//用户点击拒绝逻辑
    }
  }
})