1.设置验证码按钮
//opacity是为了让用户点击一次获取验证码后让按钮颜色变淡，并倒计时显示60秒
//timer 一开始默认值为 '获取验证码'
<view style="opacity: {{opacity}}" bindtap='sendCodeClick'>{{timer}}</view>
2.调用验证码接口，并传入手机号
//获取验证码
getCode = function () {
//一般短信验证码获取主要是传入手机号，有不同需求还可以传不同值
var data={
mobile:that.data.mobile, //手机号
type:1,
}
//后端功能接口问公司后台人员要
//调用接口，我个人后台接口进行了Promise,这边主要是调用获取验证码接口，并通过res来判断是否发生成功
sendCode(data).then(res=>{
wx.showToast({
title: '发送成功',
icon: 'success',
duration: 1000
});
})
}
接口封装可以看请求相关封装
3.验证码按钮事件sendCodeClick
sendCodeClick: function () {
var that = this;
if (that.data.timer != '获取验证码') {
//判断有没有点击获取验证码按钮，有点击的话会把获取验证码按钮的文字变为还剩多少秒
//在倒计时结束前都不能再进行获取验证码操作
return false;
}
if (that.data.mobile == '') { //如果电话等于空提示请输入手机号
wx.showModal({
title: '提示',
confirmColor: '#0661F6',
content: '请输入手机号码',
showCancel: false
})
return;
}
if (!(/^1[3456789]\d{9}$/.test(that.data.mobile))) {
//对输入的手机号进行正则匹配，看是否符合格式，如果不符合进行弹窗提示
wx.showModal({
title: '提示',
content: '手机号码格式不正确',
confirmColor: '#0661F6',
showCancel: false
});
return;
}
getCode(); //如果都没以上问题就可以正确调用发送getCode()方法
var time = 60; //初始化一个倒计时时间
var setTime = function () { //设置倒计时方法
if (time > 0) { //如果时间还大于0就是倒计时还没结束
setTimeout(function () { //定时器
time--; //每次减一秒
that.setData({ //减完并设置按钮显示文字timer为还剩多少秒，并让按钮颜色变淡
timer: '还剩' + time + '秒',
opacity: 0.43
})
setTime(); //递归调用，重复执行定时器操作直到时间为0退出
}, 1000);
} else { //退出定时后，把按钮文字重新设置为获取验证码，按钮设置为完全显示
that.setData({
timer: '获取验证码',
opacity: 1
})
}
}
setTime(); //执行倒计时方法
},
