微信小程序如何實現(xiàn)手機號登錄

這篇文章主要講解了“微信小程序如何實現(xiàn)手機號登錄”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序如何實現(xiàn)手機號登錄”吧！

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:"發(fā)送驗證碼",
            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秒內只能發(fā)送一次
        $send_time = Cache::get('time_key');
        //判斷是否發(fā)送過
        if (time() - $send_time < 30){
            return json(['code' => 500,'msg'=> '30秒內只能發(fā)送一次','data' => []]);
        }
        if (empty($send_time)){
            $time = time();
            Cache::set('time_key',$time,30);
        }
 
        //調用驗證碼接口
        $res = Cond::sendCode($phone);//封裝的邏輯層
        if (!$res){
            return json(['code' => 200,'msg' => '發(fā)送成功','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]);
    }

感謝各位的閱讀，以上就是“微信小程序如何實現(xiàn)手機號登錄”的內容了，經過本文的學習后，相信大家對微信小程序如何實現(xiàn)手機號登錄這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！