用户注册需要获取手机号然后调用第三方接口获取验证码,然后进行验证手机验证码
手机号注册页面
<!-- 绑定手机号 -->
<view class='content'>
<form bindsubmit="formSubmit">
<view class='phone-box'>
<text class='phone'>手机号</text>
<input name="phone" type='number' placeholder="请输入手机号" maxlength='11' name="phone" class='number' bindinput='lovePhone' />
</view>
<view class='phone-box'>
<text class='phone'>验证码</text>
<input name="phoneCode" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' bindinput="yanLoveInput" />
<view bindtap='yanLoveBtn' class='getNum'>{{getText2}}</view>
</view>
<button formType="submit" class='submit'>绑定</button>
</form>
</view>
css样式页面
.content {
width: 100%;
height: auto;
padding: 0 50rpx;
box-sizing: border-box;
}
.phone-box {
width: 100%;
height: 89rpx;
border-bottom: 1rpx solid #efefef;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.phone {
color: #333;
margin-right: 60rpx;
font-size: 28rpx;
}
.number {
color: #333;
font-size: 28rpx;
width: 200rpx;
}
.getNum {
width:210rpx;
height:48rpx;
background:rgba(248, 112, 57, 1);
border-radius:8rpx;
font-size:28rpx;
font-family:PingFang-SC-Medium;
color:rgba(255, 255, 255, 1);
line-height:48rpx;
margin-right:36rpx;
text-align:center;
}
.submit {
width: 480rpx;
height: 80rpx;
background: rgba(248, 112, 57, 1);
border-radius: 8rpx;
margin-top: 80rpx;
color: #fff;
font-size: 32rpx;
}
js代码块儿
const app = getApp();
Page({
data: {
// 验证手机号
loginPhone: false,
loginPwd: false,
loveChange: true,
hongyzphone: '',
// 验证码是否正确
zhengLove: true,
huoLove: '',
getText2: '获取验证码',
},
// 手机验证
lovePhone: function (e) {
let phone = e.detail.value;
this.setData({ hongyzphone: phone })
if (!(/^1[34578]\d{9}$/.test(phone))) {
this.setData({
lovePhone: false
})
//console.log(phone.length)
if (phone.length >= 11) {
wx.showToast({
title: '手机号有误',
icon: 'none',
duration: 1000
})
}
} else {
this.setData({
lovePhone: true
})
}
},
// 验证码输入
yanLoveInput: function (e) {
let that = this;
let yanLove = e.detail.value;
//console.log(yanLove)
let huoLove = this.data.huoLove;
//console.log(huoLove)
that.setData({
yanLove: yanLove,
zhengLove: false,
})
if (yanLove.length > 4) {
if (yanLove == huoLove) {
that.setData({
zhengLove: true,
})
} else {
that.setData({
zhengLove: false,
})
wx.showModal({
content: '输入验证码有误',
showCancel: false,
success: function (res) { }
})
}
}
},
// 验证码按钮
yanLoveBtn: function () {
let loveChange = this.data.loveChange;
//console.log(loveChange)
let lovePhone = this.data.lovePhone;
//console.log(lovePhone)
let phone = this.data.hongyzphone;
console.log(phone)
let n = 59;
let that = this;
if (!lovePhone) {
wx.showToast({
title: '手机号有误',
icon:"none",
duration: 1000
})
} else {
if (loveChange) {
this.setData({
loveChange: false
})
let lovetime = setInterval(function () {
let str = '(' + n + ')' + '重新获取'
that.setData({
getText2: str
})
if (n <= 0) {
that.setData({
loveChange: true,
getText2: '重新获取'
})
clearInterval(lovetime);
}
n--;
}, 1000);
//获取验证码接口写在这里
//例子 并非真实接口
// app.agriknow.sendMsg(phone).then(res => {
// console.log('请求获取验证码.res =>', res)
// }).catch(err => {
// console.log(err)
// })
wx.request({
url: 'http://day528.exam9.com/getCode',
data:{phone:phone},
success:function(res){
//console.log(res.data)
// var code = res.data.data;
if(res.data.data==500){
console.log(res.data)
wx.showToast({
title: '一分钟后点击发送',
})
return false;
};
if(res.data.code==200){
wx.showToast({
title: '发送成功',
})
};
}
})
}
}
},
//form表单提交
formSubmit(e){
let val = e.detail.value
console.log('val', val)
var phone = val.phone //电话
var phoneCode = val.phoneCode //验证码
wx.request({
url: 'http://day528.exam9.com/login',
data:{
phone:phone,
phoneCode:phoneCode
},
success:function(res){
if(res.data.code == 500){
wx.showToast({
title: '验证码错误',
icon:"none",
})
return false;
}
if(res.data.code == 200){
wx.navigateTo({
url: '/pages/list/list',
})
}
}
})
},
})
后台调用第三方接口
//小程序手机验证码
public function getCode(Request $request)
{
//当用户点击手机号时先去缓存中查询,当前时间-缓存时间如果大于60s,允许用户继续获取验证码,否则给出提示
//获取手机号
$phone=$request->input('phone');
//print_r($phone);die();
//设置当前时间戳
$time=time();
if (Cache::has($phone)){
// Cache::pull($phone,)
if ($time - Cache::get($phone) > 60){
//print_r(Cache::get('time'));die();
$content="【创信】你的验证码是:5873,3分钟有效!";
$res=$this->sendmsg($phone,$content);
if ($res) return json_encode(['code'=>200,'data'=>'','msg'=>'发送成功']);
return json_encode(['code'=>201,'data'=>'','msg'=>'发送失败']);
}else{
return ['code'=>500,'data'=>'','msg'=>'一分钟后点击发送'];
}
}else{
$content="【创信】你的验证码是:5873,3分钟有效!";
$res=$this->sendmsg($phone,$content);
//发送验证码成功后将当前时间存入缓存,以便下次再次点击的时候进行时间的判断
Cache::set($phone,time());
if ($res) return json_encode(['code'=>200,'data'=>'','msg'=>'发送成功']);
return json_encode(['code'=>201,'data'=>'','msg'=>'发送失败']);
}
}
//使用curl函数库发送请求
public function curl_request($url, $post = true, $params = [], $https = true)
{
//初始化请求
$ch = curl_init($url);
//默认是get请求。如果是post请求 设置请求方式和请求参数
if ($post) {
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
}
//如果是https协议,禁止从服务器验证本地证书
if ($https) {
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
}
//发送请求,获取返回结果
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$res = curl_exec($ch);
//关闭请求
curl_close($ch);
return $res;
}
//使用curl_request函数调用短信接口发送短信
public function sendmsg($phone, $content)
{
// 请求地址、appkey
$gateway = '你的接口请求地址';
$appkey = '你的appkey';
// https://way.jd.com/chuangxin/dxjk?mobile=*********&content=【创信】你的验证码是:5873,3分钟内有效!&appkey=您申请的APPKEY
$url = $gateway . '?appkey=' . $appkey . "&content=" . $content . "&mobile=" . $phone ;
$res = $this->curl_request($url, false, [], true);
//处理结果
if (!$res) {
return '请求发送失败';
}
//解析结果
$arr = json_decode($res, true);
if (isset($arr['code']) && $arr['code'] == 10000) {
//短信接口调用成功
return true;
} else {
/*if(isset($arr['msg'])){
return $arr['msg'];
}*/
return '短信发送失败';
}
}
小程序登录
//小程序登录
public function login(Request $request)
{
//接收手机号和验证码
$phone=$request->input('phone');
$data=['phone'=>$phone];
$phoneCode=$request->input('phoneCode');
//print_r($phoneCode);die();
if (empty($phone)){
return ['code'=>500,'data'=>'','msg'=>'手机号不能为空'];
}
//验证码验证
if ($phoneCode != 5873){
return ['code'=>501,'data'=>'','msg'=>'验证码有误'];
}else{
//判断数据表是否有当前手机号
$res=\App\Models\Login::where('phone',$phone)->first();
if ($res){
//如果登录成功将用户信息存入session,然后根据此信息生成token
session(['user'=>$res]);
//然后调用生成token的方法,将生成的token带到小程序当中
$jwt=$this->lssue($request);
return ['code'=>200,'data'=>$res,'jwt'=>$jwt,'msg'=>'登录成功'];
}else{
$add=\App\Models\Login::create($data);
//如果登录成功将用户信息存入session,然后根据此信息生成token
session(['user'=>$add]);
//然后调用生成token的方法,将生成的token带到小程序当中
$jwt=$this->lssue($request);
return ['code'=>200,'data'=>$add,'jwt'=>$jwt,'msg'=>'登录成功'];
}
}
}