微信小程序-授权页获取session3d登录2.0

由于微信小程序不断地更新迭代，本文只要介绍前端如何实现微信登录获取session3d。由于又前一篇文章做精准的讲述，本文就不再一一讲解了。

login.wxml

<image class='logo' src='/images/logo.png'></image>
<button class='save-btn' open-type="getUserInfo" class='getbtn' bindgetuserinfo="getUserInfo"> 
  登录
</button>

login.js

const app = getApp()
const SUCCEED_CODE = 1005;
Page(app.$CREATE_PAGE({
  data: {
    tel: "",
    backUrl: "",
    code:""
  },

  onLoad: function () {
  },
  tel: function (e) {
    this.setData({
      tel: e.detail.value
    })
  },
  getUserInfo(e) {
    if (this.data.tel.length !== 11) {
      wx.showModal({
        title: '请输入正确的手机号码'
      });
      return;
    }
    let Success = "getUserInfo:ok",
      info,
      that = this;
    if (e.detail.errMsg == Success) { // 授权成功
      info = e.detail;
      // console.log(res)
      info.code = this.data.code;
      info.appId = app.globalData.appId;
      // console.log(info); // 获取session3d的参数
      that.wxlogin(info);
    } else { //授权失败，请重新授权
      wx.showModal({
        title: '授权失败，请重新授权'
      });
    }
  },
  wxlogin: function (info) {
    var that = this;
    app.$GET('/index/login/doWxLogin', {
      "code": info.code,
      "rawData": info.rawData,
      "signature": info.signature,
      'iv': info.iv,
      'encryptedData': info.encryptedData,
      'mobile': this.data.tel
    }).then(res => {
      if (res.code == 1003) {
        app.globalData.token = res.userData.session3rd; //全局缓存
        app.globalData.userInfo = res.userData;
        console.log(app.globalData)
        let backUrl = wx.getStorageSync("backUrl") || '/pages/tabindex/tabindex'; //特殊页面的跳转
        wx.redirectTo({
          url: backUrl,
        })
      } else {
        wx.showModal({
          title: '授权失败，请重新授权'
        });
      }
    })
  },
  onShow: function () {
    let that = this;
    wx.login({ // 获取code
      success(res) {
        that.setData({
          code: res.code // 必须先获取code否则会出现签名已过期，需要第二次点击才能生效
        })
      }
    })
  },
}))

login.wxss

.logo{
  width: 166rpx;
  height: 166rpx;
  margin: 46rpx auto;
  display: block;
  
}
.tel{
  font-size: 24rpx;
  width: 100%;
  border-bottom: 1rpx solid rgb(206, 206 , 206);
  line-height: 100rpx;
  height: 100rpx;
}
.getbtn{
  width: 600rpx;
  height: 88rpx;
  background-color: rgb(68, 153, 255);
  font-size: 33rpx;
  color: #fff;
  margin: 60rpx auto 0;
  border-radius: 10rpx;
  text-align: center;
  line-height: 88rpx;
}
page{
  width: 100%;
  padding: 50rpx;
  box-sizing: border-box;
}