微信小程序如何實現手機驗證碼登錄

本篇內容介紹了“微信小程序如何實現手機驗證碼登錄”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

首先我們進入小程序頁面：

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

“微信小程序如何實現手機驗證碼登錄”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！