微信小程序手机号绑定功能（登录后绑定）

老轩头€

已于 2022-02-16 09:38:16 修改

4373

文章标签：微信 php 微信小程序小程序

于 2022-02-16 09:36:55 首次发布

本文链接：https://blog.csdn.net/qq_54721207/article/details/122955803

版权

1.手机号绑定并不是手机号登录所以他其实就是一个添加

主要是他有一个短信发送接收验证码验证的过程

首先是小程序端

HTML

给你一个按钮绑定点击 bindtap 事件跳转至手机号绑定页面

<l-button type="default" bindtap="phonePage">绑定手机号</l-button>

小程序 JS 页面跳转（这是没有tabBar 的页面，有tabBar的页面需换另外wx函数）

 //跳转至手机号绑定页面
    phonePage(){
      wx.navigateTo({
        url: '/pages/phone/phone',
      })
    },

手机号绑定页面

HTML

<!-- 手机号码 -->
<form bindsubmit="onSubmit">
<text class="text1">手机号码</text>
<view class="phoneNum">
<input type="text" placeholder="请输入手机号码" bindinput="phone" name="phone"></input>
</view>
<!-- 验证码 -->
<text class="text1">验证码</text>
<view class="phoneCode">
<input type="text" placeholder="请输入验证码" name="code" ></input>
<button type="primary" size="mini" bind:tap="setCode" disabled="{{button}}">{{text}}</button>
</view>

<view class="loadButton">
<button type="primary" form-type="submit">绑定手机号</button>
</view>
</form>

CSS页面

.text1{
  margin:20rpx;
}
.phoneNum input{
  margin: 20rpx;
  padding-left: 10rpx;
  height: 80rpx;
  border: 1rpx solid #c3c3c3;
}
.phoneCode{
  display: flex;
  align-items: center;
}
.phoneCode input{
  width: 60%;
  margin: 20rpx;
  border: 1rpx solid #c3c3c3;
  padding-left: 10rpx;
  height: 80rpx;
}
.phoneCode button{
  height: 80rpx;
  vertical-align: middle;
}
 
.loadButton button{
  margin-top: 50rpx;
  width: 94% !important;
}

data部分

data: {
      //手机号

      phone:'',
      //手机号防止多次点击

      button:false,
       //发送验证码按钮初始内容

      text:'发送验证码'

    },

输入框获取手机号

/**
     * 手机号
     * @param {*} e 
     */
    phone(e){
      let phone = e.detail.value;
      this.setData({
        phone:phone
      })
    },

获取验证码并给按钮设置防止连续点击

/**
     * 验证码
     * @param {*} e 
     */
    setCode(e){
      let that = this;
      //data里取出之前存入的手机号
      let phone = that.data.phone;
      
      //验证手机号格式是否正确
      var phone_reg = /^1[35789]\d{9}$/;
      if(!phone_reg.test(phone)){
        wx.showToast({
          title: '手机号格式错误',
          icon:"none"
        })
        return ;
      };
      //发送接口
      wx.request({
        url: 'http://www.essou.com/index.php/api/wxNote',
        header:{ 
          'token':wx.getStorageSync('token')
        },
        data:{
          phone:phone
        },
        dataType:'json',
        method:"POST",
        success (res) {
          //获取返回来的验证码
          console.log(res.data)
          let time = 60;
          setInterval(function(){
            time--;
            if(time > 0){
              that.setData({
                text:time,
                button:true
              })
            }else{
              that.setData({
                text:'发送验证码',
                button:false
              })
            }
          },1000);
        }
      })
    },

后端PHP

首先验证是否登陆过

这里是创建中间件使用中间件验证token

1.创建中间件

php artisan make:middleware CheckLogin

2.在app/http/Middleware/kernel.php 文件中的 $routeMiddleware 加入一个

'checklogin' => \App\Http\Middleware\CheckLogin::class

这里的checklogin 是自己定义

3.在路由加入这里的checklogin 是上面定义的

如果写的是接口路由最好写进api.php中

Route::group(['middleware' => ['checklogin']], function () {
//
});

4.中间件中判断

public function handle(Request $request, Closure $next)
{
    //判断是否登录
    if (empty($request->header('token'))){
        echo json_encode(['code'=>500,'msg'=>'请先登录','data'=>[]]);die();
    }

    //判断token是否正确
    if(!BaseController::verifyToken($request->header('token')))
    {
       echo json_encode(['code'=>500,'msg'=>'token令牌','data'=>[]]);die();
    }

//用户接口访问次数限制数据库新添一个字段

$user = ApiUser::where('id','=',BaseController::verifyToken($request->header('token')))->first();
$user->increment('click');
if($user['click'] > env('APINUM'))
{
    echo $base->fail([],'已达今日访问上限');die;
}

    return $next($request);//不可删除
}

php 后端控制器代码

public function wxNote(Request $request)
    {

        $phone = $request->post('phone');

        //验证手机号
        if (!preg_match("/^1[3456789]\d{9}$/",$phone)){
            //手机号格式错误
            return ['status'=>500,'msg'=>'手机号格式错误','data'=>[]];
        }

        //判断请求频率
        if (Cache::store('redis')->has('time_'.$phone)){
            //判断当前请求时间和上次请求时间的间隔
            if (time() - Cache::store('redis')->get('time_'.$phone) < 60){
                //小于60秒 表示请求次数频繁
                return ['status'=>500,'msg'=>'请求次数频繁','data'=>[]];
            }else{
                //大于60 表示时间可以再次请求 将上次的时间 和 验证码删除
                Cache::store('redis')->forget('time_'.$phone);
                Cache::store('redis')->forget('code_'.$phone);
            }
        }

        $code = mt_rand(1000,9999);//验证码

        //短信内容
        $content = "您的验证码为{$code},三分钟内有效"; //要发送的短信内容
        $statusStr = array(
            "0" => "短信发送成功",
            "-1" => "参数不全",
            "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
            "30" => "密码错误",
            "40" => "账号不存在",
            "41" => "余额不足",
            "42" => "帐户已过期",
            "43" => "IP地址限制",
            "50" => "内容含有敏感词"
        );
        $smsapi = "http://api.smsbao.com/";
        $user = "2152403800"; //短信平台帐号
        $pass = md5("51791046"); //短信平台密码
        $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
        $result =file_get_contents($sendurl) ;
        //发送验证码

        if ($result == 0){
            //发送成功
            //将验证码 当前发送时间 存入redis 
            Redis::setex($phone.'_code',120,$code);
//            Cache::put("code_".$phone,$code,180);
            Redis::set($phone."_time",time());
            return ['status'=>200,'msg'=>$statusStr[$result],'data'=>[]];
        }
            return ['status'=>500,'msg'=>$statusStr[$result],'data'=>[]];

    }

小程序端

//绑定验证码表单提交
    onSubmit:function(e){
      //表单数据
      let params = e.detail.value;
      // console.log(params);
      wx.request({
        url: 'http://www.essou.com/index.php/api/wxphone',
        data:params,
        method:'POST',
        header:{
          'token':wx.getStorageSync('token')
        },
        success:function(res)
        {
          // console.log(res.data);
          wx.showToast({
            title: res.data.msg,
          })
          wx.switchTab({
//跳转至列表页 正常逻辑没有这步
            url: '/pages/list/list',
          })
        }
      })
    },

后端接收手机号以及验证码进行验证

public function wxPhone(Request $request)
    {
        //接收手机号以及验证码
        $phone = $request->post('phone');
        $code = $request->post('code');
        $base = new BaseController();
        //接收token
        $token = $request->header('token');
        //从redis取出之前存入的验证码
        $redisCode = Redis::get($phone.'_code');
        try {
            if (empty($redisCode))
            {
                return json_encode(['code'=>403,'msg'=>'验证码已过期，请重新获取','data'=>'']);
            }elseif (!$code == $redisCode){

                return json_encode(['code'=>500,'msg'=>'验证码有误，请重新输入','data'=>'']);

            } else{

                $result = Rentings::where('id','=',$base::verifyToken($token))->update(['phone'=>$phone]);
                if ($result){
                    return json_encode(['code'=>200,'msg'=>'绑定成功','data'=>'']);
                }else{
                    return json_encode(['code'=>500,'msg'=>'绑定失败','data'=>'']);
                }
            }
        }catch (\Exception $e){
            return json_encode(['code'=>500,'msg'=>$e->getMessage(),'data'=>'']);
        }

    }

老轩头€

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序手机号绑定功能（登录后绑定）

1.手机号绑定并不是手机号登录所以他其实就是一个添加主要是他有一个短信发送接收验证码验证的过程首先是小程序端HTML给你一个按钮绑定点击 bindtap 事件跳转至手机号绑定页面<l-button type="default" bindtap="phonePage">绑定手机号</l-button>小程序 JS 页面跳转（这是没有tabBar 的页面，有tabBar的页面需换另外wx函数） //跳转至手机号绑定页面 phonePage()
复制链接

扫一扫