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

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

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

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页面:

.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]);        }     }

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