小程序手机号注册登录

本文主要是介绍小程序手机号注册登录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

用户注册需要获取手机号然后调用第三方接口获取验证码，然后进行验证手机验证码

手机号注册页面

<!-- 绑定手机号 -->
<view class='content'>
 <form bindsubmit="formSubmit">
  <view class='phone-box'>
   <text class='phone'>手机号</text>
   <input name="phone" type='number' placeholder="请输入手机号" maxlength='11' name="phone" class='number' bindinput='lovePhone' />
  </view>
  <view class='phone-box'>
   <text class='phone'>验证码</text>
   <input name="phoneCode" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' bindinput="yanLoveInput" />
   <view bindtap='yanLoveBtn' class='getNum'>{{getText2}}</view>
  </view>
  <button formType="submit" class='submit'>绑定</button>
 </form>
</view>

css样式页面

.content {
  width: 100%;
  height: auto;
  padding: 0 50rpx;
  box-sizing: border-box;
 }
 .phone-box {
  width: 100%;
  height: 89rpx;
  border-bottom: 1rpx solid #efefef;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
 }
 .phone {
  color: #333;
  margin-right: 60rpx;
  font-size: 28rpx;
 }
 .number {
  color: #333;
  font-size: 28rpx;
  width: 200rpx;
 }
 .getNum {
  width:210rpx;
  height:48rpx;
  background:rgba(248, 112, 57, 1);
  border-radius:8rpx;
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  color:rgba(255, 255, 255, 1);
  line-height:48rpx;
  margin-right:36rpx;
  text-align:center;
 }
 .submit {
  width: 480rpx;
  height: 80rpx;
  background: rgba(248, 112, 57, 1);
  border-radius: 8rpx;
  margin-top: 80rpx;
  color: #fff;
  font-size: 32rpx;
 }

js代码块儿

const app = getApp();
Page({
 data: {
  // 验证手机号
  loginPhone: false,
  loginPwd: false,
  loveChange: true,
  hongyzphone: '',
  // 验证码是否正确
  zhengLove: true,
  huoLove: '',
  getText2: '获取验证码',
 },
 // 手机验证
 lovePhone: function (e) {
  let phone = e.detail.value;
  this.setData({ hongyzphone: phone })
  if (!(/^1[34578]\d{9}$/.test(phone))) {
   this.setData({
    lovePhone: false
   })
   //console.log(phone.length)
   if (phone.length >= 11) {
    wx.showToast({
     title: '手机号有误',
     icon: 'none',
     duration: 1000
    })
   }
  } else {
   this.setData({
    lovePhone: true
   })
  }
 },
 // 验证码输入
 yanLoveInput: function (e) {
  let that = this;
  let yanLove = e.detail.value;
  //console.log(yanLove)
  let huoLove = this.data.huoLove;
  //console.log(huoLove)
  that.setData({
   yanLove: yanLove,
   zhengLove: false,
  })
  if (yanLove.length > 4) {
   if (yanLove == huoLove) {
    that.setData({
     zhengLove: true,
    })
   } else {
    that.setData({
     zhengLove: false,
    })
    wx.showModal({
     content: '输入验证码有误',
     showCancel: false,
     success: function (res) { }
    })
   }
  }
 },
 // 验证码按钮
 yanLoveBtn: function () {
  let loveChange = this.data.loveChange;
  //console.log(loveChange)
  let lovePhone = this.data.lovePhone;
  //console.log(lovePhone)
  let phone = this.data.hongyzphone;
  console.log(phone)
  let n = 59;
  let that = this;
  if (!lovePhone) {
   wx.showToast({
    title: '手机号有误',
    icon:"none",
    duration: 1000
   })
  } else {
   if (loveChange) {
    this.setData({
     loveChange: false
    })
    let lovetime = setInterval(function () {
     let str = '(' + n + ')' + '重新获取'
     that.setData({
      getText2: str
     })
     if (n <= 0) {
      that.setData({
       loveChange: true,
       getText2: '重新获取'
      })
      clearInterval(lovetime);
     }
     n--;
    }, 1000);
    //获取验证码接口写在这里
    //例子 并非真实接口
    // app.agriknow.sendMsg(phone).then(res => {
    //  console.log('请求获取验证码.res =>', res)
    // }).catch(err => {
    //  console.log(err)
    // })
    wx.request({
      url: 'http://day528.exam9.com/getCode',
      data:{phone:phone},
      success:function(res){
         //console.log(res.data)
        // var code = res.data.data;
        if(res.data.data==500){
           console.log(res.data)
          wx.showToast({
            title: '一分钟后点击发送',
          })
          return false;
        };
        if(res.data.code==200){
         wx.showToast({
           title: '发送成功',
         })
       };
      }
    })
   }
  }
 },
 //form表单提交
 formSubmit(e){
  let val = e.detail.value 
  console.log('val', val)
  var phone = val.phone //电话
  var phoneCode = val.phoneCode //验证码
  wx.request({
    url: 'http://day528.exam9.com/login',
    data:{
      phone:phone,
      phoneCode:phoneCode
    },
    success:function(res){
      if(res.data.code == 500){
        wx.showToast({
          title: '验证码错误',
          icon:"none",
        })
        return false;
      }
      if(res.data.code == 200){
         wx.navigateTo({
        url: '/pages/list/list',
      })
      }
    }
  })
 },
})

后台调用第三方接口

  //小程序手机验证码
    public function getCode(Request $request)
    {
        //当用户点击手机号时先去缓存中查询，当前时间-缓存时间如果大于60s，允许用户继续获取验证码，否则给出提示
        //获取手机号
        $phone=$request->input('phone');
        //print_r($phone);die();
        //设置当前时间戳
        $time=time();
        if (Cache::has($phone)){
           // Cache::pull($phone,)
            if ($time - Cache::get($phone) > 60){
                //print_r(Cache::get('time'));die();
                $content="【创信】你的验证码是：5873，3分钟有效！";
                $res=$this->sendmsg($phone,$content);
                if ($res) return json_encode(['code'=>200,'data'=>'','msg'=>'发送成功']);
                return json_encode(['code'=>201,'data'=>'','msg'=>'发送失败']);
            }else{
                return ['code'=>500,'data'=>'','msg'=>'一分钟后点击发送'];
            }
        }else{
            $content="【创信】你的验证码是：5873，3分钟有效！";
            $res=$this->sendmsg($phone,$content);
            //发送验证码成功后将当前时间存入缓存，以便下次再次点击的时候进行时间的判断
            Cache::set($phone,time());
            if ($res) return json_encode(['code'=>200,'data'=>'','msg'=>'发送成功']);
            return json_encode(['code'=>201,'data'=>'','msg'=>'发送失败']);
        }

    }

    //使用curl函数库发送请求
    public function curl_request($url, $post = true, $params = [], $https = true)
    {
        //初始化请求
        $ch = curl_init($url);
        //默认是get请求。如果是post请求 设置请求方式和请求参数
        if ($post) {
            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
        }
        //如果是https协议，禁止从服务器验证本地证书
        if ($https) {
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        }
        //发送请求，获取返回结果
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $res = curl_exec($ch);
        //关闭请求
        curl_close($ch);
        return $res;
    }
    //使用curl_request函数调用短信接口发送短信
    public function sendmsg($phone, $content)
    {
        // 请求地址、appkey
        $gateway = '你的接口请求地址';
        $appkey = '你的appkey';
        // https://way.jd.com/chuangxin/dxjk?mobile=*********&content=【创信】你的验证码是：5873，3分钟内有效！&appkey=您申请的APPKEY
        $url = $gateway . '?appkey=' . $appkey . "&content=" . $content . "&mobile=" . $phone ;

        $res = $this->curl_request($url, false, [], true);
        //处理结果
        if (!$res) {
            return '请求发送失败';
        }
        //解析结果
        $arr = json_decode($res, true);
        if (isset($arr['code']) && $arr['code'] == 10000) {
            //短信接口调用成功
            return true;
        } else {
            /*if(isset($arr['msg'])){
                return $arr['msg'];
            }*/
            return '短信发送失败';
        }
    }

小程序登录

 //当用户获取到code验证码之后然后再次发到后台进行验证验证码执行登录
    public function login(Request $request)
    {
        //获取验证码和手机号
        $phone=$request->input('phone');
        $data=['phone'=>$phone];
        $phoneCode=$request->input('phoneCode');
        //查询前台发送过来的code的一致性
        if ($phoneCode == 5873){
            //判断数据表是否有当前手机号
            $res=\App\Models\Login::where('phone',$phone)->first();
            if($res){
                return ['code'=>200,'data'=>$res,'msg'=>'登录成功'];
            }else{
                //记录手机号
                \App\Models\Login::create($data);
                return ['code'=>200,'data'=>$res,'msg'=>'登录成功'];
            }
        }else{
            return ['code'=>500,'data'=>'','msg'=>'验证码错误'];
        }
    }

这篇关于小程序手机号注册登录的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！