微信小程序最新授权登录

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

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

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

实现步骤：

1、登录页login

• wxml部分

view wx:if="{{canIUse}}" class='login-box'  view class='login-header'    image class='login-img' mode="aspectFill" src='/images/login_pic.png'/image  /view  button class='login-btn' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"     image src='/images/icon/login_wx.png'/image    微信一键登录  /button/viewview wx:else请升级微信版本/view

• 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跳转到首页      })    }  }