微信小程序实现手机验证码登录

我们的微信小程序里面，手机验证码登录已经成为不可缺少的一部门，为此，我写的这个手机验证码登录，这里我结合thinkphp6+微信小程序实现

首先我们进入小程序页面：

wxml页面：

<!--pages/phone/phone.wxml-->
<view class="container">
 <view class="title" style='height:{{statusBarHeight+100}}rpx;padding-top:{{statusBarHeight}}rpx;'>登录</view>
 <form catchsubmit="login">
  <view class="inputView">
   <input class="inputText" value="{{phone}}" placeholder="请输入手机号" name="phone" bindblur="phone" />
  </view>
  <view class="inputView">
   <input class="inputText" value="{[code]}" placeholder="请输入验证码" name="code" />
   <button class="line" disabled="{{disabled}}" size="mini" bindtap="sendcode">{{codebtn}}</button>
   </view>
  <view class="loginBtnView">
   <button class="loginBtn" type="primary" formType="submit">登录</button>
  </view>
 </form>
</view>

<button type="primary" open-type="contact">在线咨询</button>

js页面：

Page({

 /**
 * 页面的初始数据
 */
 data: {
  windowHeight:0,
  phone:'',
  code:'',
  codebtn:'发送验证码',
  disabled:false,

 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },
 // 获取输入账号
 phone: function (e) {
  let phone = e.detail.value;
  let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
  if (!reg.test(phone)) {
   wx.showToast({
    title: '手机号码格式不正确',
    icon:"none",
    duration:2000
   })
   return false;
  }
  this.setData({
   phone: e.detail.value
  })
 },
 //发送验证码
 sendcode(res){
  var phone=this.data.phone;
  var time = 60;
  var that=this;
  wx.request({
   url: 'http://www.easyadmin.com/api/phone',
   data:{
    phone:phone
   },
   success:res=>{
    if(res.data.code==200){
     wx.showToast({
      title: '验证码已发送.请注意接收',
      icon:"success"
     }) 
   
     var timers=setInterval(function () {
      time--;
      if (time>0){
       that.setData({
        codebtn:time,
        disabled:true
       });
      }else{
       that.setData({
        codebtn:'发送验证码',
        disabled:false
       });
       clearInterval(timers)
      }
     },1000)
    }else{
     wx.showToast({
      title: res.data.msg,
      icon:"none",
      duration:2000
     })
    }
    this.setData({
     code:res.data.data,
   
    })
   }
  })
 
 },
 // 登录处理
 login(e){
  var phone=this.data.phone
  var code=this.data.code
  wx.request({
   url: 'http://www.easyadmin.com/api/loginDo',
   method:'POST',
   data:{
    phone,
    code
   },
   success:res=>{
    if(res.data.code==200){
      wx.redirectTo({
       url: '/pages/my/my',
      })
    }
    console.log(res.data)
   }
  })
 },


})

wxss页面:

/* pages/phone/phone.wxss */
.container {
 display: flex; 
 flex-direction: column;
 padding: 0;
}
.inputView {
 line-height: 45px;
 border-bottom:1px solid #999999;
}
.title{
 width: 80%;
 font-weight: bold;
 font-size: 30px;
}
.inputText {
 display: inline-block;
 line-height: 45px;
 padding-left: 10px;
 margin-top: 11px;
 color: #cccccc;
 font-size: 14px;
}

.line {
 border: 1px solid #ccc;
 border-radius: 20px;
 float: right;
 margin-top: 9px;
 color: #cccccc;
}
.loginBtn {
 margin-top: 40px;
 border-radius:10px;
}

后端php接口：这里我用的是短信宝的平台

public function phone(Request $request)
  {
    $data=$request->get('phone');
    $statusStr = array(
      "0" => "短信发送成功",
      "-1" => "参数不全",
      "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
      "30" => "密码错误",
      "40" => "账号不存在",
      "41" => "余额不足",
      "42" => "帐户已过期",
      "43" => "IP地址限制",
      "50" => "内容含有敏感词"
    );
    $yzm=rand(1111,9999);
    $smsapi = "http://api.smsbao.com/";
    $user = "账号"; //短信平台帐号
    $pass = md5("密码"); //短信平台密码
    $content="您的验证码是$yzm,请不要告诉任何人";//要发送的短信内容
//    $phone = $data;//要发送短信的手机号码
//    $sendurl = $smsapi."smsu=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
//    $result =file_get_contents($sendurl) ;
//    echo $statusStr[$result];
    $code=Cache::set($data,$yzm);
    return json(['code'=>'200','data'=>$yzm,'msg'=>'短信发送成功']);
  }

public function loginDo()
  {
    $data=\request()->post();
    $code=Cache::get($data['phone']);

    if($code!==$data['code']){
      return json(['code'=>'400','data'=>'','msg'=>'短信验证码错误']);
    }
    $res=User::where('phone',$data['phone'])->find();
    if (empty($res)){
      $user = User::create([
        'phone'=>$data['phone']
      ]);
      return json(['code'=>'200','注册成功','data'=>$user]);
    }else{
      $user=User::where('phone',$data['phone'])->find();
      return json(['code'=>'300','登录成功','data'=>$user]);
    }

  }

这样一个短信验证码功能就完成啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。