实现效果
为了观看效果先行设置为10s，正常一般都是60s
功能版
- wxml
-
这里我没有采用view、text等标签，而是采用了button，主要原因是用到了disabled的属性，作用于发送验证码后事件失效，倒计时完毕之后事件继续生效；
所遇问题：因为前期使用view、text标签没有找到类型disabled的属性，所以在发送验证码后依旧可以进行点击，从而导致开启多个计时器，计时速度加快、计时器覆盖
//点击属性：sendCode 点击状态：smsFlag 字体颜色：sendColor 显示文字：sendTime <button bindtap="sendCode" disabled="{ {smsFlag}}" style='margin-top:50px; margin-right:10rpx;color:{ {sendColor}};font-size:28rpx'>{ {sendTime}}</button> - js
注意： wxml中声明的smsFlag 代表 disabled的状态 ；disabled： true代表不可点击；false代表可点击(这点对于我而言有点别扭 - - ！)
Page({
data: {
//设置初始的状态、包含字体、颜色、还有等待事件 > <
sendTime: '获取验证码',
sendColor: '#363636',
snsMsgWait: 60
},
// 获取验证码
sendCode: function() {
// 60秒后重新获取验证码
var inter = setInterval(function() {
this.setData({
smsFlag: true,
sendColor: '#cccccc',
sendTime: this.data.snsMsgWait + 's后重发',
snsMsgWait: this.data.snsMsgWait - 1
});
if (this.data.snsMsgWait < 0) {
clearInterval(inter)
this.setData({
sendColor: '#363636',
sendTime: '获取验证码',
snsMsgWait: 60,
smsFlag: false
});
}
}.bind(this), 1000);
},
})
项目完整版
- forget.js
-
var md5Utils = require('../../utils/utilMd5.js'); var ptserviceUrl = getApp().globalData.ptserviceUrl; Page({ /** * 页面的初始数据 */ data: { tel: "", code: "", newPassword: "", sendTime: '发送验证码', sendColor: '#363636', snsMsgWait: 60 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, inputTel: function(e) { this.setData({ tel: e.detail.value }) }, inputCode: function(e) { this.setData({ code: e.detail.value }) }, inputNewpassword: function(e) { this.setData({ newPassword: e.detail.value }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, // 获取验证码 sendCode: function() { var that = this; if (this.data.tel == "") { this.toast('请输入手机号'); return; } if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(this.data.tel))) { this.toast('手机号输入错误'); return; } // 60秒后重新获取验证码 var inter = setInterval(function() { this.setData({ smsFlag: true, sendColor: '#cccccc', sendTime: this.data.snsMsgWait + 's后重发', snsMsgWait: this.data.snsMsgWait - 1 }); if (this.data.snsMsgWait < 0) { clearInterval(inter) this.setData({ sendColor: '#363636', sendTime: '发送验证码', snsMsgWait: 60, smsFlag: false }); } }.bind(this), 1000); // 写自己的服务器和接口- - wx.request({ url: ptserviceUrl + 'sendCode', data: { mobiles: this.data.tel, }, method: "POST", header: { 'content-type': "application/x-www-form-urlencoded" }, success(res) { console.log(res); if (res.data.success) { that.toast('短信验证码发送成功，请注意查收'); } } }) }, // 提交信息 saveClick: function() { var that = this; if (that.data.tel == "") { that.toast("手机号不可为空"); return; } if (that.data.code == "") { that.toast("验证码不可为空"); return; } if (that.data.newPassword == "") { that.toast("新密码不可为空"); return; } var md5psd = md5Utils.hexMD5(that.data.newPassword); // 写自己的服务器和接口- - wx.request({ url: ptserviceUrl + 'forget', data: { mobile: this.data.tel, phcode: this.data.code, npwd: md5psd, }, method: "POST", header: { 'content-type': "application/x-www-form-urlencoded" }, success(res) { console.log(res); if (res.data.success) { wx.navigateBack({ delta: 1, }) } else { that.toast(res.data.msg); } } }) }, // toast方法抽取 toast: function(msg) { wx.showToast({ title: msg, icon: 'none', duration: 2000, mask: true }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } }) - forget.wxml (为了方便查看，并没有抽取class，可直接copy使用 > , <)
-
<view class='container'> <view style='width:100%;height:100%;flex-direction:column'> <view style='margin-left:38rpx;margin-top:15px;margin-right:38rpx'> <view style=';display:flex;align-items:center; justify-content:space-between;'> <input bindinput="inputTel" maxlength="11" name="account" placeholder="请输入手机号" style='margin-top:50px;font-size:34rpx'></input> <button bindtap="sendCode" disabled="{ {smsFlag}}" style='margin-top:50px;margin-right:10rpx;color:{ {sendColor}};font-size:28rpx'>{ {sendTime}}</button> </view> <view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view> </view> <view style='margin-left:38rpx;margin-top:20px;margin-right:38rpx'> <view style='display:flex;align-items:center; justify-content:space-between;'> <input bindinput="inputCode" name="account" maxlength="8" placeholder="请输入验证码" style='font-size:34rpx'></input> </view> <view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view> </view> <view style='margin-left:38rpx;margin-top:20px;margin-right:38rpx'> <view style='display:flex;align-items:center; justify-content:space-between;'> <input bindinput="inputNewpassword" name="account" type='password' placeholder="请输入新密码" style='font-size:34rpx'></input> </view> <view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view> </view> <view style='margin-right:38rpx;margin-left:38rpx;margin-top:30px;background:#fff;display:flex;height:45px;align-items:center;justify-content:center' bindtap='saveClick'> <text style='font-size:15px'>确定</text> </view> </view> </view>