版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20451879/article/details/89475224
Make a little progress every day ~
目录
- 实现效果
- 功能版
- 项目完整版
实现效果 （为了观看效果先行设置为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>