微信小程序手机短信登录

微信小程序短信登录

虽然微信有自动获取手机号，但是依然还是有一些公司使用短信登录

并没有全部取消

wxml

<view>
    <view class='content'>
        <view class='phone-box'>
        <text class='phone'>手机号</text>
        <input bindinput="phone" type='number' bindinput='phone' placeholder="请输入手机号" maxlength='11' class='number' /> 
        </view>
        <view class='phone-box'>
        <text class='phone'>验证码</text>
        <input bindinput="code" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' />
        <view bindtap='yanLoveBtn' class='getNum' bindtap="sendCode">发送验证码</view>
        </view>
        <button bindtap="login"  type="primary" class='login'>绑定</button>
  </view>
</view>

wxss

.content {
  width: 100%;
  height: auto;
  padding: 0 50rpx;
  box-sizing: border-box;
 }
 .phone-box {
  width: 100%;
  height: 89rpx;
  border-bottom: 1rpx solid #efefef;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
 }
 .phone {
  color: #333;
  margin-right: 60rpx;
  font-size: 28rpx;
 }
 .number {
  color: #333;
  font-size: 28rpx;
  width: 200rpx;
 }
 .getNum {
  width:210rpx;
  height:48rpx;
  background:rgba(248, 112, 57, 1);
  border-radius:8rpx;
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  color:rgba(255, 255, 255, 1);
  line-height:48rpx;
  margin-right:36rpx;
  text-align:center;
 }
 .submit {
  width: 480rpx;
  height: 80rpx;
  background: rgba(248, 112, 57, 1);
  border-radius: 8rpx;
  margin-top: 80rpx;
  color: #fff;
  font-size: 32rpx;
 }

js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    phone:[],
    code:[]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let token = wx.getStorageSync('token')
    if(token){
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
  },
  phone(e){
    let phone = e.detail.value
    this.setData({
      phone:phone
    })
  },
  sendCode(){
    let phone = this.data.phone   
    if(phone==''){
      wx.showToast({
        title: '请输入手机号',
        icon:'error'
      })
      return 
    }
    wx.request({
      url: 'http://www.vocalconcert.com/api/phone',
      method:"POST",
      data:{phone},
      success:res=>{
        console.log(res)
      }
    })
  },
  code(e){
    let code = e.detail.value
    this.setData({
      code:code
    })
  },
 
  login(){
    let code = this.data.code
    let phone = this.data.phone
    if(phone==''){
      wx.showToast({
        title: '请输入手机号',
        icon:'error'
      })
      return 
    }
    if(code==''){
      wx.showToast({
        title: '请输入验证码',
        icon:'error'
      })
      return 
    }
    wx.request({
      url: 'http://www.vocalconcert.com/api/login',
      method:"POST",
      data:{phone:phone,code:code},
      success:res=>{  
        wx.setStorageSync('token', res.data.data)
        if(res.data.code==3000){
          wx.switchTab({
            url: '/pages/index/index',
          })
        }
      }
    })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }