因项目中经常用到发送短信验证码的操作,所以把简单的实现方式分享出来,有需要优化的地方希望大家指点,谢谢!

wxml:
... 主要是这块
<input value="{{code}}" placeholder="请输入短信验证码" />
<view wx:if="{{isSend}}" bindtap="onSendCode">发送验证码</view>
<view wx:else>{{count}}s重新获取</view>
...
js:
data:{
code: "",
count: "",
isSend: true
},
onSandCode(){
//要先判断哦
// if('手机号 && 图形验证码')
const TIME_COUNT = 60;
var timer = null;
if (!timer) {
this.setData({
isSend: false,
count: TIME_COUNT
});
timer = setInterval(() => {
if (
this.data.count > 1 &&
this.data.count <= TIME_COUNT
) {
this.setData({
count: this.data.count - 1
});
} else {
this.setData({
isSend: true
});
clearInterval(timer);
timer = null;
}
}, 1000);
}
//TODO: API...
}