微信小程序之获取手机号码登录

微信小程序的获取用户手机号码并登录
如图，点击登录并获取手机号按钮，弹出手机号授权按钮，点击允许，登录成功跳到首页。


1.html代码如下，首先要在wxml里写一个点击按钮

<!--pages/user/login/login.wxml-->
<button class='wx-login'   open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录并获取手机号</button>

2.css代码如下，

/* pages/user/login/login.wxss */
.wx-login{
  margin: 40rpx auto;
  width:590rpx;
  height:88rpx;
  line-height: 88rpx;
  text-align: center;
  background:rgba(68,137,247,1);
  border-radius:44rpx;
  font-weight:500;
  font-size:32rpx;
  color:rgba(255,255,255,1);
}

3.js代码如下，我这里后台是写了两个接口，一个传code，返回用户标识的接口；一个传用户标识和加密数据获取用户解密数据的接口。在后台返回用户标识成功的回调函数里再调用传用户标识和加密数据获取用户解密数据的接口；如果你的后台是只有一个接口的话，可以把code和加密数据一起给后台传过去就好。

// pages/user/login/index.js
var base = getApp();
data: {
	//初始化数据
	code:"",
    //获取电话号码时取得的加密数据
    encryptedData: "",
    iv: ""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
  //调用wx.login来取得code，并存到data中
    wx.login({
      success: res => {
        this.data.code = res.code
        console.log(res.code)
      }
    })
  },

  //点击获取用户手机号，弹出手机号码授权窗口
  getPhoneNumber: function(e) {
  //若用户点击了拒绝就return掉
    if (e.detail.errMsg !== "getPhoneNumber:ok") {
      return;
    }
    //用户点击了允许后拿到用户加密数据
    var iv = e.detail.iv;
    var encryptedData = e.detail.encryptedData;
    this.setData({
      iv: iv,
      encryptedData: encryptedData
    })
    //检查登录
    wx.checkSession({
      success: (res) => {
        //session_key 未过期，并且在本生命周期一直有效
        //请求后台接口把code传给后台 ，拿到用户标识sKey
        wx.request({
          url: base.path.www + '/api/sysUser/authorizedLogin',
          data: {
            'code': this.data.code,
          },
          method: 'POST', 
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }, // 设置请求的 header
          success: res => {
            console.log(res)
            //将后台传过来的用户标识保存到storage里
            let sKey = res.data.data.sKey;
            wx.setStorageSync('sKey', sKey);
            //请求用户数据接口,传给后台加密数据和用户标识skey，取到后台解密后的用户数据
            wx.request({
              url: base.path.www + '/api/sysUser/getUserPhone',
              data: {
                'encrypteData': this.data.encryptedData,
                'iv': this.data.iv,
                'sKey': sKey,
              },
              method: 'POST', 
              header: {
                'content-type': 'application/json',
                'Cookie': 'JSESSIONID=' + wx.getStorageSync('sKey')
              }, // 设置请求的 header
              success: res => {
                console.log(res)
                //把从后台请求回来的用户数据（包含电话号码）存到storage中
                let userInfo = res.data.data.userInfo;
                wx.setStorageSync('USER_INFO', userInfo);
                //转为登录状态
                base.isLogin = true;
                //跳转到首页
                wx.navigateBack({
                  delta: 6
                })
              }
            })
          },
          fail: function(err) {
            console.log(err);
          }
        })
      },
      fail() {
        // session_key 已经失效，需要重新执行登录流程
        //重新登录
        wx.login({
          success: res => {
            this.data.code = res.code
          }
        })
      }
    })
  },

自己在实现获取用户手机号登录踩了很多坑，比如在在点击了获取手机号按钮后才调用wx.login接口，会产生手机号解密失败问题，经多次代码修改才实现了登录功能。
以上代码仅供参考。