微信小程序?qū)崿F(xiàn)手機(jī)驗證碼登錄
我們的微信小程序里面,手機(jī)驗證碼登錄已經(jīng)成為不可缺少的一部門,為此,我寫的這個手機(jī)驗證碼登錄,這里我結(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ī)號" 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({ ? ? /** ? ?* 頁面的初始數(shù)據(jù) ? ?*/ ? data: { ? ? windowHeight:0, ? ? phone:'', ? ? code:'', ? ? codebtn:'發(fā)送驗證碼', ? ? disabled:false, ? ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁面加載 ? ?*/ ? 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: '手機(jī)號碼格式不正確', ? ? ? ? icon:"none", ? ? ? ? duration:2000 ? ? ? }) ? ? ? return false; ? ? } ? ? this.setData({ ? ? ? phone: e.detail.value ? ? }) ? }, ? //發(fā)送驗證碼 ? 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: '驗證碼已發(fā)送.請注意接收', ? ? ? ? ? ? icon:"success" ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? var timers=setInterval(function () { ? ? ? ? ? ? time--; ? ? ? ? ? ? if (time>0){ ? ? ? ? ? ? ? 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){ ? ? 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" => "短信發(fā)送成功", ? ? ? ? ? ? "-1" => "參數(shù)不全", ? ? ? ? ? ? "-2" => "服務(wù)器空間不支持,請確認(rèn)支持curl或者fsocket,聯(lián)系您的空間商解決或者更換空間!", ? ? ? ? ? ? "30" => "密碼錯誤", ? ? ? ? ? ? "40" => "賬號不存在", ? ? ? ? ? ? "41" => "余額不足", ? ? ? ? ? ? "42" => "帳戶已過期", ? ? ? ? ? ? "43" => "IP地址限制", ? ? ? ? ? ? "50" => "內(nèi)容含有敏感詞" ? ? ? ? ); ? ? ? ? $yzm=rand(1111,9999); ? ? ? ? $smsapi = "http://api.smsbao.com/"; ? ? ? ? $user = "賬號"; //短信平臺帳號 ? ? ? ? $pass = md5("密碼"); //短信平臺密碼 ? ? ? ? $content="您的驗證碼是$yzm,請不要告訴任何人";//要發(fā)送的短信內(nèi)容 // ? ? ? ?$phone = $data;//要發(fā)送短信的手機(jī)號碼 // ? ? ? ?$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'=>'短信驗證碼錯誤']); ? ? ? ? } ? ? ? ? $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]); ? ? ? ? } ? ? ? }
這樣一個短信驗證碼功能就完成啦。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript返回網(wǎng)頁中錨點數(shù)目的方法
這篇文章主要介紹了JavaScript返回網(wǎng)頁中錨點數(shù)目的方法,涉及javascript使用document.anchors獲取錨點數(shù)目的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04JavaScript通過attachEvent和detachEvent方法處理帶參數(shù)的函數(shù)
通過 attachEvent 和 detachEvent 方法處理帶參數(shù)的函數(shù)(示例代碼)2010-03-03關(guān)閉瀏覽器輸入框自動補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器
這篇文章主要介紹了關(guān)閉瀏覽器輸入框自動補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器,需要的朋友可以參考下。希望對大家有所幫助2014-02-02JS中使用new Option()實現(xiàn)時間聯(lián)動效果
這篇文章主要介紹了JS中使用new Option()實現(xiàn)時間聯(lián)動效果,需要的朋友可以參考下2018-12-12