微信小程序如何实现手机号登录

这篇文章主要讲解了“微信小程序如何实现手机号登录”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序如何实现手机号登录”吧！

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

感谢各位的阅读，以上就是“微信小程序如何实现手机号登录”的内容了，经过本文的学习后，相信大家对微信小程序如何实现手机号登录这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是蜗牛博客，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。