微信小程序實現手機驗證碼登錄
我們的微信小程序裡面，手機驗證碼登錄已經成為不可缺少的一部門，為此，我寫的這個手機驗證碼登錄，這裡我結合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."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]);
}
}
這樣一個短信驗證碼功能就完成啦。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。