获取验证码界面
实现功能：
点击发送验证码，发送按钮进入倒计时状态。
具体实现：
要实现JS的倒计时功能，首先要了解两个JS的定时器方法。setTimeout 和 setInterval。两个方法都是延迟一段时间后执行某个操作。区别是setTimeout执行完后会停止，setInterval会一直执行。
两个方法的使用：setTimeout(code,millisec) setInterval(code,millisec)。其中code是执行的操作，可以是function，可以是个函数名。milisec是延迟的时间，单位是毫秒。如果想让setTimeout方法一直执行，可以在setTimeout的执行函数中继续调用setTimeout。而setInterval会一直执行，直到你调用了clearInterval（）方法，setInterval的返回值定时器id，可以作为clearInterval的参数。
然后就是倒计时小程序的实现：UI就不写了，大家根据自己的需求来做，至于布局，flex就完事了。
然后是获取验证码的fuction：
data: {
buttonDisable: false, //倒计时是否不可用
phone: null, //电话号码
buttonTitle: '获取验证码', //按钮标题
code: null //验证码
},
getVerifyCode() {
if (this.data.buttonDisable) return false; //倒计时状态不可点击
var phone = this.data.phone;
var regMobile = /^1\d{10}$/; //电话正则
if (!regMobile.test(phone)) {
wx.showToast({
title: '手机号有误',
icon: 'none'
})
return false;
}
var that = this;
wx.request({
url: '获取验证码url',
success（res）{
this.getCodeSuccess() //处理获取code成功
},
fail(error){
this.getCodeFail() //处理获取code失败
}
})
getCodeSuccess(){
var intervalId = setInterval(function () {
count -= 1;
that.setData({
buttonTitle: count + 's后重发',
buttonDisable: true
})
if (count == 0) {
clearInterval(intervalId); //倒计时结束，停止interval
that.setData({
buttonTitle: '获取验证码',
buttonDisable: false
})
}
}, 1000) //参数一是函数 参数二是间隔毫秒数
}
getCodeFail(){
wx.showToast({
title: e.errMsg,
icon: 'none'
})
that.setData({
buttonTitle: '获取验证码',
buttonDisable: false
})
}
以上就是小程序倒计时获取验证码的简单实现，具体的代码可以根据业务需求来修改。
网友评论