微信小程序发送短信验证码后60秒倒计时功能,效果图:
完整代码
index.wxml
<!--index.wxml--> <view class= "container" > <view class= "section" > <text>手机号码:</text> <input placeholder= "请输入手机号码" type= "number" maxlength= "11" bindinput= "inputPhoneNum" auto-focus /> <text wx:if= "{{send}}" class= "sendMsg" bindtap= "sendMsg" >发送</text> <text wx:if= "{{alreadySend}}" class= "sendMsg" >{{second+ "s" }}</text> </view> </view> |
index.wxss
/**index.wxss**/ .userinfo { display : flex; flex- direction : column; align-items: center ; } .section { display : flex; margin : 16 rpx; padding : 16 rpx; border-bottom : 1 rpx solid #CFD8DC ; } text { width : 200 rpx; } button { margin : 16 rpx; } .sendMsg { font-size : 12 ; margin-right : 0 ; padding : 0 ; height : inherit; width : 80 rpx; } |
index.js
//index.js //获取应用实例 const app = getApp() Page({ data: { send: true, alreadySend: false, second: 60 , disabled: true, phoneNum: '' }, // 手机号部分 inputPhoneNum: function (e) { let phoneNum = e.detail.value this.setData({ phoneNum: phoneNum }) }, sendMsg: function () { var phoneNum = this.data.phoneNum; if(phoneNum == '' ){ wx.showToast({ title: '请输入手机号码' , icon: 'none' , duration: 2000 }) return ; } //此处省略发送短信验证码功能 this.setData({ alreadySend: true, send: false }) this.timer() }, showSendMsg: function () { if (!this.data.alreadySend) { this.setData({ send: true }) } }, hideSendMsg: function () { this.setData({ send: false, disabled: true, buttonType: 'default' }) }, timer: function () { let promise = new Promise((resolve, reject) => { let setTimer = setInterval( () => { this.setData({ second: this.data.second - 1 }) if (this.data.second <= 0 ) { this.setData({ second: 60 , alreadySend: false, send: true }) resolve(setTimer) } } , 1000 ) }) promise.then((setTimer) => { clearInterval(setTimer) }) }, }) |
完整的短信验证码登录实例参考: https://blog.csdn.net/zuoliangzhu/article/details/81219900
这个
{{second+
"s"
}}
改成这样也行吧
{{second}}s
一样的,最后渲染的时候就是把双大括号里面的值替换掉
不错
页面onUnload后记得回收setInterval返回的定时id。官方说页面销毁不会自动回收setTimeout或setInterval的句柄
多谢指正
那我出去一次再进来是不是可以重复发送验证码
这个可以通过服务器端控制,没有服务器的可以存储个起始时间用以计算再次获取
https://blog.csdn.net/zuoliangzhu/article/details/85927146 这是完整的倒计时、发送验证码实例
学习了。
希望对大家有用