微信小程序登录，getPhoneNumber手机号授权登录

微信小程序最新授权登录

小程序可以通过getPhoneNumber来获取用户手机号，但是getPhoneNumber必须绑定在button组件里。详情官网：微信小程序获取手机号

如何实现页面进入小程序授权登录？

实现方法：写一个类似微信授权登录的页面，让用户通过按钮触发getPhoneNumber，实现登录授权。再用户进入小程序的时候加个判断，如果未授权，跳到这个登录页面，如果授权，跳到首页。

实现步骤：

1、登录页login

• wxml部分

  
    
  
  
    
    微信一键登录
  

请升级微信版本

• wxss部分

page{
  background: #fff;
  height: 100%; 
  overflow: hidden;
  border-top: 1rpx solid #E0E0E0;
}
.login-box{
  display: flex;
  flex-direction: column;
  align-items: center; 
  height: 100%;
  padding: 0 96rpx;
}
.login-header{
  flex: 1;  
  display: flex;
  align-items: center;
  margin-bottom: 100rpx;
}
.login-img{ 
  width: 436rpx;
  height: 296rpx;
}
.login-btn{
  width: 100%;
  background: #11BE84; 
  margin-bottom: 300rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}
.login-btn >image{
  width: 36rpx;
  height: 36rpx;
  margin-right: 30rpx;
}

• js部分

 //登陆
  onLogin() {
    let that = this
    wx.login({
      success(res) {
        if (res.code) {
          api.getXcxUserInfo({
            code: res.code
          }).then(res => {
            that.setData({
              sessionKey: res.data.data.sessionKey
            })
          }).catch(err => {
            console.log('获取sessionKey失败')
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  },
  // 获取手机号授权  
  getPhoneNumber(e) {
    let that = this
    wx.showLoading({
      title: '加载中',
      mask: true,
    })
    wx.checkSession({
      success: function() {
        api.phoneAES({
          encrypData: e.detail.encryptedData,
          ivData: e.detail.iv,
          sessionKey: that.data.sessionKey
        }).then(res => {
          console.log(JSON.parse(res.data.data).phoneNumber) 
          that.setData({
            phone: JSON.parse(res.data.data).phoneNumber
          })
          api.login({
            userName: that.data.phone
          }).then(res => {
            wx.setStorageSync('token', res.data.data)
            wx.reLaunch({
              url: '../index/index'
            })
          }).catch(err => {
            console.log("获取token失败");
          })
        }).catch(err => {
          console.log("拒绝登录");
          wx.hideLoading()
          wx.showModal({
            title: '提示',
            content: 'BD小助手需要微信授权登录才能正常使用，请授权！',
            showCancel: false
          }) 
        })
      },
      fail: function () {
        console.log("获取wx.checkSession接口失败");
      }
    })
  },

2、判断是否登录，在app.js

  onShow() {
    this.getToken()
  },
  //获取token
  getToken(){
    let token = wx.getStorageSync('token')
    if (!token) {
      wx.reLaunch({
        url: 'pages/login/login'		//无token跳转到登录页
      })
    } else {
      wx.reLaunch({
        url: "pages/index/index"		//有token跳转到首页
      })
    }
  }