微信小程序實現手機號登錄
本文實例為大傢分享瞭微信小程序實現手機號登錄的具體代碼,供大傢參考,具體內容如下
1.wxml
<form bindsubmit="formsubmit"> <view>手機號<input type="text" placeholder="請輸入手機號" bindinput="getphone" name="phone"/></view> <view> 驗證碼<input type="text" placeholder="請輸入驗證碼" name="code"/> <button disabled="{{disabled}}" bindtap="click">{{message}}</button> </view> <button form-type="submit">登錄</button> </form>
2.js(正則驗證、倒計時、驗證碼)
/** * 頁面的初始數據 */ data: { phone:'', message:"獲取驗證碼", disabled:false }, getphone:function(e){ this.setData({ phone:e.detail.value }) }, click(){ var that = this let phone = this.data.phone; console.log(phone) if(!(/^(13|15|17|18|19)\d{9}$/.test(phone))){ wx.showToast({ title: '手機號不正確', icon:'none' }) } if((/^(13|15|17|18|19)\d{9}$/.test(phone))){ //定時任務 var souse = 30 var timer = setInterval(function(){ that.setData({ message:souse + "秒後重試", disabled:true }) souse -- if(souse == 0){ that.setData({ message:"發送驗證碼", disabled:false }) clearInterval(timer) } },1000) wx.request({ url: 'http://www.wenk.com/index.php/admin/sendCode', //僅為示例,並非真實的接口地址 data: { phone }, success (res) { console.log(res) } }) } },
3.提交表單
formsubmit(e){ console.log(e) let phone = e.detail.value.phone let code = e.detail.value.code wx.request({ url: 'http://www.wenk.com/admin/login', //僅為示例,並非真實的接口地址 method:'post', data: { code, phone }, success (res) { let id = res.data.data.id wx.setStorageSync('id',id) wx.navigateTo({ url: '/pages/list/list', }) } }) },
4.驗證碼API接口
public function sendCode() { $phone = input('phone'); //限制用戶30秒內隻能發送一次 $send_time = Cache::get('time_key'); //判斷是否發送過 if (time() - $send_time < 30){ return json(['code' => 500,'msg'=> '30秒內隻能發送一次','data' => []]); } if (empty($send_time)){ $time = time(); Cache::set('time_key',$time,30); } //調用驗證碼接口 $res = Cond::sendCode($phone);//封裝的邏輯層 if (!$res){ return json(['code' => 200,'msg' => '發送成功','data' => $res]); } }
5.登錄API接口
public function login() { $data = input(); $user = (new \app\admin\model\Login())->where('phone',$data['phone'])->find(); if ($user == null){ //如果第一次登錄,這裡則改為添加入庫 return json(['code' => 2001,'msg' => '賬號不存在','data' => []]); } $code = Cache::get('code'); if ($code != $data['code']){ return json(['code' => 2001,'msg' => '驗證碼錯誤','data' => []]); } // $id = $user['id']; // $token = Jwt::jwt(); return json(['code' => 200,'msg' => '登陸成功','data' => $user]); }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 微信小程序實現手機驗證碼登錄
- 微信小程序獲取手機驗證碼的方法
- 微信小程序登錄方法之授權登陸及獲取微信用戶手機號
- 微信小程序實現授權登錄之獲取用戶信息
- 微信小程序用戶授權獲取手機號(getPhoneNumber)