微信小程序短信验证码登录demo

自己记录学习使用

html

<view class="wrap"><view class="tel"><input type="number" bindblur="bindTelInput" maxlength="11"placeholder="请输入手机号"placeholder-style="color:#C3C6C4;"/></view><view class="ver-code"><view class="code"><input type="number" bindblur="bindCodeInput" maxlength="6"placeholder="请输入验证码"placeholder-style="color:#C3C6C4;"/></view><view class="getCode"><button type="primary" plain="true" disabled="{{disable}}" bindtap="sendCode">{{countDownNum}}</button></view></view><view class="btn-login" bindtap="login">登录</view>
</view>

 data: {disable:false,countDownNum:'获取验证码',phone:'',code:''}

获取验手机号和验证码信息

//手机号bindTelInput(e){//console.log(e)this.setData({phone:e.detail.value})},//验证码bindCodeInput(e){this.setData({code:e.detail.value})},//获取验证码sendCode(){var phone = this.data.phone;if (!(/^1[34578]\d{9}$/.test(phone))) {wx.showToast({title: "请输入正确的手机号",icon: "none",duration: 1500})return false;}var currentTime = 60var that=thisvar interval = setInterval(function () {currentTime--;that.setData({countDownNum: currentTime+'重新发送',disable: true  })if (currentTime <= 0) {clearInterval(interval)that.setData({countDownNum: '发送验证码',disable: false   })}}, 1000)  //return false;wx.request({url: 'http://www.mytest.com/api/code?phone='+phone,success:res=>{if(res.data.code==200){console.log(res)var msg = res.data.msgwx.showToast({title: res.data.msg,icon:'none'})}else{wx.showToast({title: res.data.msg,icon:'none'})return false;}}})},//登录login(){var phone = this.data.phone;var code = this.data.code;wx.request({url: 'http://www.mytest.com/api/login',method:'POST',data:{phone,code,},success:res=>{if(res.data.code==200){//console.log(res)var token = res.data.datawx.setStorageSync('token', token)wx.showToast({title: res.data.msg,icon:'none'})wx.setStorageSync('is_login', true);wx.switchTab({url: '/pages/user/user',})}else{wx.showToast({title: res.data.msg,icon:'none'})return false;}},fail:res=>{wx.showToast({title: '请求失败',icon:'none'})}})},

css

.userinfo {height: 240rpx;margin: 40rpx auto 0;display: flex;flex-direction: column;align-items: center;}.userinfo .userinfo-avatar {width: 140rpx;height: 140rpx;margin: 20rpx;border-radius: 50%;border: 1rpx solid #dad5d5;}.userinfo .userinfo-nickname {color: #aaa;}.wrap {width: 630rpx;font-size: 32rpx;margin: 80rpx auto 120rpx;}.wrap .tel {width: 100%;height: 68rpx;border-bottom: 1rpx solid #DDE3EC;margin-bottom: 60rpx;display: flex;flex-direction: column;justify-content: flex-start;}.wrap .ver-code {width: 100%;height: 68rpx;border-bottom: 1rpx solid #DDE3EC;display: flex;justify-content: space-between;}.wrap .ver-code .getCode {min-width: 190rpx;height: 40rpx;}.wrap .ver-code .getCode button {width: 100%;height: 100%;font-size: 28rpx;font-weight: normal;line-height: 40rpx;background: #fff;color: #ffaa7f;border: none;padding: 0;margin: 0;}.btn-login {width: 588rpx;height: 88rpx;background: #ffaa7f;border-radius: 10rpx;text-align: center;line-height: 88rpx;font-size: 36rpx;font-weight: 500;color: #fff;margin: 0 auto;}.clickClass {background: #ea986c;}

后台简单实现（laravel8 具体逻辑根据自己情况而定）

//获取验证码public function getCode(Request $request){$phone = $request->get('phone');if(empty($phone)){return $this->error('参数不正确');//验证参数}$timeKey = 'time_'.$phone;if(Cache::has($timeKey)){return $this->error('一分钟内请勿重复请求');//判断请求时间}else{Cache::put($timeKey,time(),60);//设置请求时间}$numKey = 'num_'.$phone;if(!Cache::has($numKey)){Cache::put($numKey,0,24*60*60);//设置请求次数}if(Cache::get($numKey)>10){return $this->error('今天请求已上限');//判断请求次数}$code = rand(999,9999);// dd($code);$res = $this->sendCode($phone,$code);//调用封装的短信接口if($res != 0){return $this->error(self::$statusStr[$res]);}$codeKey = 'code_'.$phone;Cache::increment($numKey);//更新请求次数Cache::put($codeKey,$code,60*10);//缓存验证码//dd($code);return $this->success(self::$statusStr[$res],$code);//返回信息}//验证码验证public function checkCode(Request $request){$phone = $request->get('phone');$code = $request->get('code');if(empty($phone) || empty($code)){return $this->error('参数不正确');//验证参数}$codeKey = 'code_'.$phone;$lastCode = Cache::get($codeKey);//取出验证码if(!$lastCode){return $this->error('验证码已失效');}if($lastCode != $code){return $this->error('验证码不正确');//验证}$user = Wxuser::where('phone',$phone)->first();//数据库逻辑if(!$user){$user = Wxuser::create(['phone'=>$phone]);}$token = Token::createToken($user['id']);return $this->success('登录成功',$token);}

前端样式参照：https://blog.csdn.net/buduoduoorg/article/details/119774932

微信小程序短信验证码登录demo相关推荐

小程序短信验证码登录，1分钟实现小程序发短信功能，借助云开发10行代码实现短信验证码登录小程序
老规矩先看效果图普通短信验证码短信今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜. 进入官方文档一看,云开发给咱们开发者的福利还真不小. 不仅仅可以很方便的使用短信功能, ...
微信小程序短信验证码 php,微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录,使用榛子云短信(smsow.zhenzikj.com) 效果: 我是java开发者,后端使用了springMvc 短信验证码实现流程 1.构造手机验证码,生成一个 ...
微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录免费注册账号: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html 完整demo下载: ...
微信小程序短信验证登录
首先小程序wxml页面  <view class="container"><view c ...
微信小程序-短信验证码
效果: 源码地址:链接:https://pan.baidu.com/s/17fbWUS1jrBLbPXyEgHKVcg 密码:ot16 参考:https://blog.csdn.net/Beijiya ...
微信小程序 + Java + Mysql（登录 Demo）
目录一.开发前准备二.设计登录页面(小程序) 三.创建 Maven 项目四.创建数据库与数据表五.后台代码(Java Servlet) 六.运行七.总结建议一.开发前准备 1.注册一个微 ...
【开发测试个人小微接入短信验证码】thinkphp5.1+小程序使用短信验证码登录
最近写一个小项目需要用到短信验证码登录,本来打算用阿里云的短信,但是各种审核什么的太麻烦,偶然间发现一个对个人开发测试比较友好的短信平台,注册就送100条验证码,测试用妥妥的够用.而且个人认证处理速度 ...
微信短信验证码登录教程
这个会登录的就不用看了这是给新手写的教程 ...... 第一步打开微信点击登录以后出现点击用短信验证码登录以后出现点击获取验证码之后出来一个对话框点击确定然后过一会手机会收到一条验 ...
【每日随笔】电子签名 ( 下载 “e 签保“ 应用 | 使用手机号 + 短信验证码登录 | 发起签署 | 签名 | 获取签名后的 PDF 文件及出证信息 )
文章目录一.下载 "e 签保" 应用二.使用手机号 + 短信验证码登录三.发起签署四.签名五.获取签名后的 PDF 文件及出证信息一.下载 "e 签保&q ...

微信小程序短信验证码登录demo

微信小程序短信验证码登录demo相关推荐

最新文章

热门文章