微信小程序如何實現手機號登錄

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

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]);
    }

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