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

本篇内容介绍了“微信小程序如何实现手机验证码登录”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

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."sms?u=".$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]);
        }
 
    }

“微信小程序如何实现手机验证码登录”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！