微信小程序?qū)崿F(xiàn)手機(jī)驗(yàn)證碼登錄

更新時(shí)間：2022年05月24日 11:12:09 作者：錒豪513

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)驗(yàn)證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我們的微信小程序里面，手機(jī)驗(yàn)證碼登錄已經(jīng)成為不可缺少的一部門，為此，我寫的這個(gè)手機(jī)驗(yàn)證碼登錄，這里我結(jié)合thinkphp6+微信小程序?qū)崿F(xiàn)

首先我們進(jìn)入小程序頁面：

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="請輸入手機(jī)號(hào)" name="phone" bindblur="phone" />
? ? </view>
? ? <view class="inputView">
? ? ? <input class="inputText" value="{[code]}" placeholder="請輸入驗(yàn)證碼" 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({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? windowHeight:0,
? ? phone:'',
? ? code:'',
? ? codebtn:'發(fā)送驗(yàn)證碼',
? ? disabled:false,
?
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
??
? },
? // 獲取輸入賬號(hào)?
? 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: '手機(jī)號(hào)碼格式不正確',
? ? ? ? icon:"none",
? ? ? ? duration:2000
? ? ? })
? ? ? return false;
? ? }
? ? this.setData({
? ? ? phone: e.detail.value
? ? })
? },
? //發(fā)送驗(yàn)證碼
? 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: '驗(yàn)證碼已發(fā)送.請注意接收',
? ? ? ? ? ? icon:"success"
? ? ? ? ? }) ?
? ? ? ?
? ? ? ? ? var timers=setInterval(function () {
? ? ? ? ? ? time--;
? ? ? ? ? ? if (time>0){
? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? codebtn:time,
? ? ? ? ? ? ? ? disabled:true
? ? ? ? ? ? ? });
? ? ? ? ? ? }else{
? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? codebtn:'發(fā)送驗(yàn)證碼',
? ? ? ? ? ? ? ? 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接口：這里我用的是短信寶的平臺(tái)

public function phone(Request ?$request)
? ? {
? ? ? ? $data=$request->get('phone');
? ? ? ? $statusStr = array(
? ? ? ? ? ? "0" => "短信發(fā)送成功",
? ? ? ? ? ? "-1" => "參數(shù)不全",
? ? ? ? ? ? "-2" => "服務(wù)器空間不支持,請確認(rèn)支持curl或者fsocket，聯(lián)系您的空間商解決或者更換空間！",
? ? ? ? ? ? "30" => "密碼錯(cuò)誤",
? ? ? ? ? ? "40" => "賬號(hào)不存在",
? ? ? ? ? ? "41" => "余額不足",
? ? ? ? ? ? "42" => "帳戶已過期",
? ? ? ? ? ? "43" => "IP地址限制",
? ? ? ? ? ? "50" => "內(nèi)容含有敏感詞"
? ? ? ? );
? ? ? ? $yzm=rand(1111,9999);
? ? ? ? $smsapi = "http://api.smsbao.com/";
? ? ? ? $user = "賬號(hào)"; //短信平臺(tái)帳號(hào)
? ? ? ? $pass = md5("密碼"); //短信平臺(tái)密碼
? ? ? ? $content="您的驗(yàn)證碼是$yzm,請不要告訴任何人";//要發(fā)送的短信內(nèi)容
// ? ? ? ?$phone = $data;//要發(fā)送短信的手機(jī)號(hào)碼
// ? ? ? ?$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'=>'短信發(fā)送成功']);
? ? }

public function loginDo()
? ? {
? ? ? ? $data=\request()->post();
? ? ? ? $code=Cache::get($data['phone']);
?
? ? ? ? if($code!==$data['code']){
? ? ? ? ? ? return json(['code'=>'400','data'=>'','msg'=>'短信驗(yàn)證碼錯(cuò)誤']);
? ? ? ? }
? ? ? ? $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]);
? ? ? ? }
?
? ? }

這樣一個(gè)短信驗(yàn)證碼功能就完成啦。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: