微信小程序登录短信倒计时简单实现【Daily share code】

1,069 阅读1分钟

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

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...
}