微信小程序接收验证码实例-微信小程序验证码功能-小程序图形验证码-即速应用

微信小程序接收验证码实例-微信小程序验证码功能-小程序图形验证码

浏览量：3482 时间：2020-04-06 来源：weixin_43848571

1.
效果如下图：wxml部分如下：
!--验证码--viewclass"modt-name"style'position:relative'textclass"key"验证码:/textinputtype"digit"bindinput"bindKeyInput"data-inputname"phoneCode"value'{{phoneCode}}'class"input"maxlength"100"placeholder"请输入手机验证码"/textclass'logbook'/texttextclass'getkey'bindtap"clickGainCode"{{tipsCode}}/text/view2.
css部分代码如下：
.mod{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:100rpx;padding:020rpx;border-bottom:1rpxsolid#ccc;box-sizing:border-box;}.mod.key{font-size:28rpx;font-weight:bold;text-align:right;width:160rpx;}.t-name{background-color:rgb(254,254,254);box-sizing:border-box;}.t-name.input{width:540rpx;font-size:28rpx;margin-left:30rpx;}.logbook{font-size:24rpx;width:150rpx;text-align:right;font-weight:bold;}.getkey{width:200rpx;position:absolute;right:0rpx;text-align:center;color:rgb(31,45,210);font-size:24rpx;border-left:1pxsolid#f0f0f0;}3.
js的data里定义如下内容：
data:{tipsCode:"获取验证码",timeNum:60,clikType:false,phone:null,phoneCode:null,}4.
获取验证码方法如下：
bindKeyInput:function(e){this.data[e.currentTarget.dataset.inputname]e.detail.value;this.setData(this.data);},//获取验证码时的显示时间getTime(){varthatthis;vartimersetInterval(function(){that.data.timeNum--;if(that.data.timeNum0){that.setData({tipsCode:"重新获取验证码",timeNum:timeOut,clikType:false});clearInterval(timer);}else{that.setData({tipsCode:"重新发送"+that.data.timeNum+"秒",})}},1000)},//输入手机号获取验证码gainCode(){varthatthis;if(this.data.phone''||this.data.phonenull){wx.showToast({title:'手机号不能为空',icon:'none',})}else{that.setData({clikType:true})if(this.data.timeNumtimeOut){}else{wx.request({url:wxapp_api_url+'/common/getCode',header:{'content-type':'application/x-www-form-urlencoded'},method:"get",data:{phone:this.data.phone},success:function(res){that.getTime();}})}}},//点击获取手机验证码clickGainCode(e){if(!this.data.clikType){this.gainCode();}},