小程序发送短信倒计时功能

先看显示效果

界面很简单，就是两个输入框，一个发送验证码按钮，一个确认按钮，发送短信后发送验证码的框内显示倒计时，同时限制点击。

看看代码

• HTML

<view class="input-container">
    <view class="input-button-container row-center">
        <view class="input-hint">手机号</view>
        <input class="input flex1" model:value="{{ phoneNumber }}"  type="number" maxlength="11" placeholder="请输入手机号" bindinput="inputChange" />
    </view>
    <view class="divider"></view>
    <view class="input-button-container row-center">
        <view class="input-hint">短信验证码</view>
        <input class="input flex1" model:value="{{ messageCode }}" type="number" maxlength="6" placeholder="请输入验证码"
            bindinput="inputChange" />
        <view class="code-button" bindtap="sendMessage">{{waitingCode?waiteTime:'发送验证码'}}{{waitingCode?'s':''}}
        </view>
    </view>
    <view class="divider"></view>
</view>

<button class="login-button" disabled="{{!confirmable}}"
    style="background:{{confirmable?'#0B7BFBFF':'#D8D8D8'}};color:white"
    bindtap="onConfirm">确认</button>

• CSS

/* 横向布局，垂直居中 */
.row-center{
  display:flex; 
  flex-direction:row;
  align-items: center;
}

.flex1{
  flex: 1;
}

.input-container {
    width: 100%;
    box-sizing: border-box;
}

.input {
    height: 104rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 44rpx;
    border: 0rpx;
}

.input-hint{
    width: 160rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2E2E2E;
    line-height: 44rpx;

    margin: 0 32rpx;
}

.input-button-container {
    height: 106rpx;
    overflow: hidden;
    padding-right: 32rpx;
}

.divider {
    height: 2rpx;
    background: #E5E5E5;
    margin-left: 32rpx;
}

.code-button {
    height: 56rpx;
    width: 168rpx;
    border-radius: 28rpx;
    background: white;
    border: 2rpx solid #0B7BFBFF;

    text-align: center;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0B7BFBFF;
    line-height: 56rpx;
}

.login-button {
    height: 96rpx;
    color: white;
    border-radius: 48rpx;

    margin-top: 48rpx;
    margin: 64rpx 32rpx;
}

/* 去除按钮毛刺 */
.login-button::after {
    border-radius: 48rpx;
    border: 0;
}

• Page.js

Page({

    data: {
        //按钮是否可用
        confirmable: false,
        //发送短信等待中
        waitingCode: false,
        waiteTime: 0,
        interval: -1, //计时器

        phoneNumber: "",
        messageCode: "",
    },

    // inputChange还有一个作用就是解决双向绑定的恶心警告
    inputChange() {
        this.setData({
            confirmable: !this.isEmpty(this.data.phoneNumber) && !this.isEmpty(this.data.messageCode)
        })
    },

    isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    },

    sendMessage() {
        //正在等待
        if(this.data.waitingCode) {
            return
        }
        
        if (this.data.phoneNumber == '') {
            wx.showToast({
                title: '请先填写手机号',
            })
            return
        }

        wx.showLoading({
            title: '正在发送短信',
        })
        
        let that = this
        app.request({
            url: 'you/url/to/get/code',
            data: {
                mobile: this.data.phoneNumber,
            },
            success: function(res) {
				wx.hideLoading()
				wx.showToast({
    				title: '发送短信成功',
				})
				that.setData({
    				waitingCode: true,
    				waiteTime: 60,
                    //设置倒计时60秒，每秒触发一次，拿到interval用于关闭
    				interval: setInterval(function (res) {
        				if (that.data.waiteTime > 0) {
            				that.setData({
                				waiteTime: --that.data.waiteTime
            				})
        				} else {
                            //注意关闭定时器
                			that.clearMessage()
           					that.setData({
                				waitingCode: false,
                				waiteTime: 0
            				})
        				}
    				}, 1000)
				})
            }
        })
    },

    //关闭定时器
    clearMessage() {
        clearInterval(this.data.interval)
        this.setData({
            waitingCode: false,
            waiteTime: 0,
            interval: -1
        })
    },
    
    onConfirm(e) {
        let that = this
        app.request({
            url: 'you/url/to/do/something',
            data: {
                mobile: this.data.phoneNumber,
                code: this.data.messageCode
            },
            success: function(res) {
                wx.showToast({
                  title: '绑定成功',
                })
                wx.navigateBack({
                  delta: 1,
                })
            }
        })
    },
})

判定按钮可点击

这里通过 disabled 限制点击，使用 style 设置背景颜色

<button class="login-button" disabled="{{!confirmable}}"
    style="background:{{confirmable?'#0B7BFBFF':'#D8D8D8'}};color:white"
    bindtap="onConfirm">确认</button>

在 CSS 中需要去除一下毛刺

.login-button {
    height: 96rpx;
    color: white;
    border-radius: 48rpx;

    margin-top: 48rpx;
    margin: 64rpx 32rpx;
}

/* 去除按钮毛刺 */
.login-button::after {
    border-radius: 48rpx;
    border: 0;
}

使用 bindtap 在每次输入的时候判断是否可用点击

    inputChange() {
        this.setData({
            confirmable: !strUtil.isEmpty(this.data.phoneNumber) && !strUtil.isEmpty(this.data.messageCode)
        })
    },

    isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    },

发送短信倒计时

在发送短信成功后回调，设置等待短信的标志位，重置等待倒计时，启动定时器，定时器详细使用看官方文档

https://developers.weixin.qq.com/miniprogram/dev/api/base/timer/setInterval.html

that.setData({
    waitingCode: true,
    waiteTime: 60,
    interval: setInterval(function (res) {
        if (that.data.waiteTime > 0) {
            that.setData({
                waiteTime: --that.data.waiteTime
            })
        } else {
            that.setData({
                waitingCode: false,
                waiteTime: 0
            })
        }
    }, 1000)
})

关闭定时器

关闭定时器是一个习惯问题，释放资源，还是挺有必要的，可以在倒计时结束的时候关闭

clearMessage() {
    clearInterval(this.data.interval)
    this.setData({
        waitingCode: false,
        waiteTime: 0,
        interval: -1
    })
}

结语

说的不多，代码挺详细

end

完美撒花