微信小程序實現(xiàn)手機驗證碼登錄

第微信小程序實現(xiàn)手機驗證碼登錄我們的微信小程序里面，手機驗證碼登錄已經(jīng)成為不可缺少的一部門，為此，我寫的這個手機驗證碼登錄，這里我結合thinkphp6+微信小程序實現(xiàn)

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

wxml頁面：

!s/phone/phone.wxml--

view

view

登錄/view

formcatchsubmit="login"

view

inputvalue="{{phone}}"placeholder="請輸入手機號"name="phone"bindblur="phone"/

/view

view

inputvalue="{[code]}"placeholder="請輸入驗證碼"name="code"/

buttondisabled="{{disabled}}"size="mini"bindtap="sendcode"{{codebtn}}/button

/view

view

buttontype="primary"formType="submit"登錄/button

/view

/form

/view

buttontype="primary"open-type="contact"在線咨詢/button

js頁面：

Page({

/**

*頁面的初始數(shù)據(jù)

*/

data:{

windowHeight:0,

phone:'',

code:'',

codebtn:'發(fā)送驗證碼',

disabled:false,

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

//獲取輸入賬號

phone:function(e){

letphone=e.detail.value;

letreg=/^[1][3,4,5,7,8][0-9]{9}$/;

if(!reg.test(phone)){

wx.showToast({

title:'手機號碼格式不正確',

icon:"none",

duration:2000

})

returnfalse;

}

this.setData({

phone:e.detail.value

})

//發(fā)送驗證碼

sendcode(res){

varphone=this.data.phone;

vartime=60;

varthat=this;

wx.request({

url:'/api/phone',

data:{

phone:phone

},

success:res={

if(res.data.code==200){

wx.showToast({

title:'驗證碼已發(fā)送.請注意接收',

icon:"success"

})

vartimers=setInterval(function(){

time--;

if(time0){

that.setData({

codebtn:time,

disabled:true

});

}else{

that.setData({

codebtn:'發(fā)送驗證碼',

disabled:false

});

clearInterval(timers)

}

},1000)

}else{

wx.showToast({

title:res.data.msg,

icon:"none",

duration:2000

})

}

this.setData({

code:res.data.data,

})

}

})

//登錄處理

login(e){

varphone=this.data.phone

varcode=this.data.code

wx.request({

url:'/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:1pxsolid#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:1pxsolid#ccc;

border-radius:20px;

float:right;

margin-top:9px;

color:#cccccc;

.loginBtn{

margin-top:40px;

border-radius:10px;

}

后端php接口：這里我用的是短信寶的平臺

publicfunctionphone(Request

$request)

{

$data=$request-get('phone');

$statusStr=array(

"0"="短信發(fā)送成功",

"-1"="參數(shù)不全",

"-2"="服務器空間不支持,請確認支持curl或者fsocket，聯(lián)系您的空間商解決或者更換空間！",

"30"="密碼錯誤",

"40"="賬號不存在",

"41"="余額不足",

"42"="帳戶已過期",

"43"="IP地址限制",

"50"="內容含有敏感詞"

);

$yzm=rand(1111,9999);

$smsapi="/";

$user="賬號";//短信平臺帳號

$pass=md5("密碼");//短信平臺密碼

$content="您的驗證碼是$yzm,請不要告訴任何人";//要發(fā)送的短信內容

//

$phone=$data;//要發(fā)送短信的手機號碼

//

$sendurl=$smsapi."smsu=".$user."p=".$pass."m=".$phone."c=".urlencode($content);

//

$result=file_get_contents($sendurl);

//

echo$statusStr[$result];

$code=Cache::set($data,$yzm);

returnjson(['code'='200','data'=$yzm,'msg'='短信發(fā)送成功']);

}

publicfunctionloginDo()

{

$data=\request()-post();

$code=Cache::get($data['phone']);

if($code!==$data['code']){

returnjson(['code'='400','data'='','msg'='短信驗證碼錯誤']);

}

$res=User::where('phone',$data['phone'])-find();

if(empty($res)){

$user=User::create([

'phone'=$data['phone']

]);

returnjson(['code'='200','注冊成