我们的微信小程序里面，手机验证码登录已经成为不可缺少的一部门，为此，我写的这个手机验证码登录，这里我结合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]);
}
}
这样一个短信验证码功能就完成啦。
