微信小程序短信验证登录

首先小程序wxml页面

<!--pages/logins/logins.wxml-->
<view class="container"><view class="title">登录</view><form catchsubmit="login"><view class="inputView"><input class="inputText" placeholder="请输入手机号" name="phone" bindblur="phone" /></view><view class="inputView"><input class="inputText" placeholder="请输入验证码" name="code" bindblur="sms" /><button class="line" disabled="{{disabled}}" size="mini" bindtap="sendcode">{{codebtn}}</button></view><view class="loginBtnView"><button class="loginBtn" type="primary" formType="submit">登录</button></view></form>
</view>

wxss样式

.container { display: flex;  flex-direction: column; padding: 0; } .inputView { line-height: 45px; border-bottom:1px solid #999999;}
.title{width: 80%;font-weight: bold;font-size: 30px;
}.inputText { display: inline-block; line-height: 45px; padding-left: 10px; margin-top: 11px;color: #cccccc; font-size: 14px;} .line {border: 1px solid #ccc;border-radius: 20px; float: right; margin-top: 9px;color: #cccccc;} .loginBtn { margin-top: 40px; border-radius:10px;}

js页面书写

// pages/my/my.js
Page({/*** 页面的初始数据*/data: {phone:'',code: '',codebtn:'发送验证码',disabled:false,},/*** 获取手机号并验证*/phone(e){let phone =e.detail.valuelet reg = /^[1][3,4,5,7,8][0-9]{9}$/;if(!reg.test(phone)){// 弹窗提示wx.showToast({title: '手机号码格式不正确',icon:"none",duration:2000})return false;}this.setData({phone:phone})},/*** 发送验证码*/sendcode(){let phone = this.data.phonewx.request({url: 'http://www.exercise.com/login.php/phone', //仅为示例，并非真实的接口地址data: {phone:phone},header: {'content-type': 'application/json' // 默认值},success (res) {console.log(res)// 发送验证码错误信息if(res.data.code==100){let info = res.data.msgwx.showToast({title: info,icon:"error"})}// 验证码发送成功提示if(res.code==200){wx.showToast({title: '验证码已发送，请注意接收',icon:"success"})}// 频繁点击提示if(res.code==100){wx.showToast({title: '点击频繁',icon:"error"})}}})
},
/*** 登录点击事件*/
login(e){console.log(e.detail.value.code)let sms=e.detail.value.codelet phone = e.detail.value.phoneif(phone==""){wx.showToast({title: '手机号不能为空',icon:"error"})}if(sms==""){wx.showToast({title: '验证码不能为空',icon:"error"})}wx.request({url: 'http://www.exercise.com/login.php/sms', //仅为示例，并非真实的接口地址data: {sms:sms,phone:phone},header: {'content-type': 'application/json' // 默认值},success:(e)=>{// 登录失败返回错误提示if(e.data.code==100){let info = e.data.msgwx.showToast({title: info,icon:"error"})}// 登陆成功跳转页面if(e.data.code==200){wx.switchTab({url: '/pages/list/list',})}}})
},
})

后端代码

发送短信验证码见(1条消息) 腾讯云短信发送php_呀哈的博客-CSDN博客_php发送腾讯云短信https://blog.csdn.net/weixin_43321108/article/details/122139533?spm=1001.2014.3001.5501

控制器层

/*** 发送短信验证码* @param Request $request* @return \think\response\Json|void*/public function sendSms(Request $request){$phone=$request->get('phone');// 生成随机验证码$code=rand(00000,9999);if (Cache::get("$phone"."_time")){return fail('发送次数频繁');}
//        $res=SendSms::sendInfo($code,$phone);// 将验证码放入缓存Cache::set("$phone"."_code","$code",300);// 缓存验证码发送时间Cache::set("$phone"."_time",time(),60);return success($code);}/*** 验证短信* @param Request $request* @return \think\response\Json|void*/public function smsLogin(Request $request){$sms=$request->get('sms');$phone=$request->get('phone');$code=Cache::get("$phone"."_code");$info=LoginBusiness::sms($code,$sms);if (!empty($info)){return fail($info);}Login::addUserByPhone($phone);return success($phone);}

business逻辑层

<?phpnamespace app\login\business;class SendSms
{public static function sendInfo($code,$phone){$app_id = config('sms.app_id');$app_key = config('sms.app_key');$template_id = config('sms.template_id');$sms_sign = config('sms.sms_sign');try {$sender = new \Qcloud\Sms\SmsSingleSender($app_id, $app_key);$params = [$code];$result = $sender->sendWithParam("86", $phone, $template_id,$params, $sms_sign, "", "");  // 签名参数未提供或者为空时，会使用默认签名发送短信$rsp = json_decode($result);if ($rsp->result == 0) {//0代表成功return '发送成功';}\think\facade\Log::error('发送短信验证码失败：' . $result);} catch (\Exception $e) {}return '发送失败';}}

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

微信小程序短信验证码登录demo
自己记录学习使用 html <view class="wrap"><view class="tel"><input type=&q ...
小程序短信验证码登录，1分钟实现小程序发短信功能，借助云开发10行代码实现短信验证码登录小程序
老规矩先看效果图普通短信验证码短信今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜. 进入官方文档一看,云开发给咱们开发者的福利还真不小. 不仅仅可以很方便的使用短信功能, ...
微信小程序短信验证码 php,微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录,使用榛子云短信(smsow.zhenzikj.com) 效果: 我是java开发者,后端使用了springMvc 短信验证码实现流程 1.构造手机验证码,生成一个 ...
微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录免费注册账号: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html 完整demo下载: ...
微信小程序-短信验证码
效果: 源码地址:链接:https://pan.baidu.com/s/17fbWUS1jrBLbPXyEgHKVcg 密码:ot16 参考:https://blog.csdn.net/Beijiya ...
秒滴云短信验证登录小demo
短信验证登录demo <a class="click_login_head" data-href="/member" data-method=" ...
工厂如何实现无线wifi短信验证登录？工厂上网实名认证系统
工厂如何实现无线wifi短信验证登录?工厂上网实名认证系统工厂提供公共的无线wifi上网服务,需对用户进行实名认证.手机短信实名认证以其用户体验.综合成本等优势,成为工厂无线上网认证的首选方案. 一 ...
微信小程序开发之——用户登录-登录流程(1)
一概述新建微信小程序自带用户登录简化小程序登录流程时序二新建微信小程序自带用户登录简化新建的微信小程序默认有用户登录功能,将多余功能去除后,简化如下 2.1 index.wxml < ...
微信小程序+SpringBoot实现用户登录
微信小程序+SpringBoot实现用户登录前言微信小程序越来越吃香了(前话就这么多,嘿嘿) 前端那就开始吧,登录界面就如此了 wxml内容如下,这是格式化后粘贴过来的,emmm,怪像那回事. ...

微信小程序短信验证登录

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

最新文章

热门文章