Make a little progress every day ~
目录
- 实现效果
- 功能版
- 项目完整版
实现效果 （为了观看效果先行设置为10s，正常一般都是60s）
功能版
- wxml
描述：这里我没有采用view、text等标签，而是采用了button，主要原因是用到了disabled的属性，作用于发送验证码后事件失效，倒计时完毕之后事件继续生效；
我遇到的问题：因为前期使用view、text标签没有找到类型disabled的属性，所以在发送验证码后依旧可以进行点击，从而导致开启多个计时器，计时速度加快、计时器覆盖
//点击属性：sendCode 点击状态：smsFlag 字体颜色：sendColor 显示文字：sendTimebutton 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"
