微信小程序实现发送验证码按钮效果

本文实例为大家分享了微信小程序发送验证码按钮效果展示的具体代码，供大家参考，具体内容如下

首先上图，最终效果如下：

实现关键点

获取验证码按钮无边框：可以用{边框：无}后的按钮：after}来去除边框，或者直接用视角绑定点击事件。本例子中没有使用按钮点击发送后，60秒内按钮处于使残废状态点击发送后，文本分为剩余秒数和后缀两部分。表单组使用弯曲布局代码。页面结构

视图类='form_group '输入类型=“文本”占位符='手机号码placeholder-class=' placeholder _ style ' data-name=' data _ phone ' value=' { { data _ phone } } ' bind input=' getInputKey '/view view class=' form _ group ' input type=' text ' class=' send msg _ input ' placeholder='短信验证码数据名称=' data _ code '值=' { { data _ code } } placeholder-class=' placeholder _ style ' bind input=' getInputKey '/view class=' verticate ' bind tap=' getVerificationCode ' { time } } text { }后缀}}/text /view /view.wxss。form _ group { display : flex flex-direction : row；正义-内容：空格；}.表单组输入，form _ group picker { width : 676 rpx；边框-底部： 1px实心# dddheight: 121rpx左填充left : 20 rpx font-family : Pingfangsc-正则；font-size : 32 rpx字母间距： 0;线高： 121像素；}.表单_组发送msg _ input { width : 370 rpx}.表单_组垂直{宽度： 326 rpx border-底部： 1px实心# dddheight: 121rpx左填充left : 20 rpx font-family : Pingfangsc-正则；font-size : 32 rpx字母间距： 0;线高： 121像素；文本对齐：中心；颜色： # 34c 9 c 3；}.验证文本{ color: gray}。placeholder _ style { font-family : PingFangSC-Regular；font-size : 32 rpxcolor: # dbdbdb字母间距： 0;}.射流研究…

从""导入签名服务./服务/注册。服务。js '；从""导入超文本传送协议./././utils/http。js '；从导入跑龙套./././utils/util。js '；let _ signingupservice=new signingupservice()；let _ HTTP=new HTTP()；let _ Util=new Util()；页面({数据： {时间： }获取验证码，currentTime: 61，disabled:false，后缀： ' '，data_phone: ' '，data_code: ' '，}，//获取输入框的值getInputKey(e){ let key=e . CurrentTarget。数据集。姓名；让值细节。价值；这个。setdata({[key]: value })}，//获取验证码getVerificationCode(){ let _ this=this；if(！_这个。数据。已禁用){ _ this。GetCode()；} }，getCode(){ let _ this=this；让phone=_ this。数据。data _ phoneif (_util.isPhoneAvailable(电话)){ _signupService.getCode(电话)。然后(res={ //调用后端原料药，获取手机验证码_util.showToast('成功','已发送');_这个。setdata({ disabled : true })}，err={ _util.showToast('none '，'发送失败') });//设置发送验证码按钮样式让间隔=空让当前时间=_ this。数据。当前时间；interval=setInterval(function(){ current time-；_这个。setdata({ time : Currettime，后缀： '秒后可重新获取})if(当前时间=0){ clearInterval(interval)_ this。setdata({ time : '重新发送，后缀： ' '，currentTime: 61，disabled: false }) }，1000)} else { _ util。showToast(' none '，'请输入正确的手机号码。');} },注册。service.js

//获取手机验证码getCode(phone){ return _ http。请求({ type : ' post '，URL : '/account/validate-codes '，数据： { phone : phone } })http。js :封装请求为承诺

类HTTP { request(param){ let _ this=this；让baseUrl=" . "；返回新的承诺(解析，拒绝)={ let access _ token=wx。getstorage ync(' access _ token ')；wx。请求({ method : param。类型| | ' get '，url: baseUrl param.url || '，data: param.data || null，header: access_token？{ ' content-type ' : ' application/x-www-form-URL编码'，' Authorization ' : ` beater $ { access _ token } ` } : { ' content-type ' : ' application/x-www-form-URL编码'，}，success 3360(RES={ if(RES . status code===200 | | RES . status code====201){//200333:服务端业务处理正常结束resolve(res.data) } else { //其它错误，提示用户错误信息/*** * 需要根据接口文档改！*/reject(res) })，fail :(err={ if(err。responsejson){ reject(err。回应杰森。message)} else { reject(err)；} }) });});} }导出默认HTTPutil.js

//验证手机号码是否有效isPhoneAvailable(电话){ var myreg=/^[1][3,4,5,7,8][0-9]{9}$/；if(！迈勒格。test(phone)){返回false} else { return true} } //小程序弹框提示showToast(图标，消息，持续时间=2000){ wx。显示吐司({ title :消息，持续时间：图标：图标}) }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。