小程序短信倒计时写法
小程序短信倒计时写法
费话不多说，直接上代码
wxml部分代码
wxml部分先讲解一下大致写功能和写法
<view class="login-top">
<input class="phonecode" placeholder="手机号码" bindinput="phoneinput" type="number" bindinput="phoneinput" maxlength="11" />
<view class="login-top1">
<input type="number" placeholder="验证码" bindinput="codeinput" maxlength="6" />
<button bindtap="changeCode" disabled="{{codeDis}}"><text hidden="{{flag != true || phoneCode == '获取验证码'}}">重发</text>{{phoneCode}}<text hidden="{{phoneCode == '获取验证码'}}">S</text></button>
</view>
</view>
一.
1.bindinput="phoneinput" 给手机输入框绑定一个phoneinput事件名
二.
bindinput="codeinput" 给输入短信码证码输入一个codeinput事件名
三.
1.bindtap="changeCode" 给发送短信按钮codeinput事件名
2.disabled="{{codeDis}}" 给发送短信按钮绑定一个点击状态
3.<text hidden="{{flag != true || phoneCode == '获取验证码'}}">重发</text> 如果第二次发送要牵扯到重发这两个字，data定义数据里的flag！=true 或者 phoneCode == '获取验证码'的时候隐藏掉重发两个字
4.{{phoneCode}} //定义在发送短信按钮上的文字对应的数据
5<text hidden="{{phoneCode == '获取验证码'}}">S</text>当发送短信时，data值里定义的数据里phoneCode == '获取验证码'隐藏掉这个s字
js部分
Page({
data:{
flag : false,
codeDis : false,
phoneCode : "获取验证码",
telephone : "",
codePhone : ""
},
changeCode () {
var _this = this
let telephone = this.data.telephone
if(telephone.length!= 11 || isNaN(telephone)){
wx.showToast({
title: '请输入有效的手机号码',
icon : "loading"
})
setTimeout(function(){
wx.hideToast()
},2000)
return
}
this.setData({
codeDis : true
})
//发送短信验证码
RQ.request({
url:"******************",
data :{
phone : this.data.telephone
},
success : function(res){
let data = res.data
if(data.respCode != "000"){
_this.setData({
codeDis : false
})
wx.showToast({
title: data.respMessage,
icon : "loading"
})
setTimeout(function(){
wx.hideToast()
},2000)
}else{
_this.setData({
phoneCode : 60
})
let time = setInterval(()=>{
let phoneCode = _this.data.phoneCode
phoneCode --
_this.setData({
phoneCode : phoneCode
})
if(phoneCode == 0){
clearInterval(time)
_this.setData({
phoneCode : "获取验证码",
flag : true
})
}
},1000)
}
}
})
},
phoneinput (e) {
console.log(e)
let value = e.detail.value
console.log(value)
this.setData({
telephone : value
})
},
codeinput (e) {
let value = e.detail.value
console.log(value)
this.setData({
codePhone : value
})
}
})
一.data这个选项定义的参数解释一下
1 flag : false, //是否是第二次发送短信验证码的标识
2 codeDis : false, //点击状态
3 phoneCode : "获取验证码", //短信验证按钮上显示的文案
4 telephone : "", //手机输入框的值
5 codePhone : "" //短信值入框的值
二.phoneinput这个方法解释一下
phoneinput (e) {
console.log(e)
let value = e.detail.value
//把输入框内的值变动时把值给value这个变量
console.log(value)
this.setData({
telephone : value
})
//同时改变data定义的机号码值 = 这个value变量名
//所以每次改动就会跟着改动这个telephone值
},
三、 codeinput 这个方法以上面同理
四、点击按钮改变按钮上的文字和60秒倒计时效果
changeCode () {
var _this = this
// 把这个_this指向从新指向
let telephone = this.data.telephone
//拿到telephone数据
if(telephone.length!= 11 || isNaN(telephone)){
//先进行基本的11位和数字校验
wx.showToast({
title: '请输入有效的手机号码',
icon : "loading"
})
setTimeout(function(){
wx.hideToast()
},2000)
return
}
//如果以上校验不成功就弹提示
this.setData({
codeDis : true
})
//成功的话我们把codeDis这个数据状态改成不可点击，点击无效
//发送短信验证码
RQ.request({ //这里的写法是封装的发送请求，用官方的api一个样
url:"******************", //请求地址
data :{
phone : this.data.telephone
//把手机号码传给后台
},
success : function(res){
let data = res.data
//成功之后拿到返回的数据
if(data.respCode != "000"){
//表示返回不成功 000
_this.setData({
codeDis : false
})
//不成功的话把这个点击按钮的状态再变成可点击的
wx.showToast({
title: data.respMessage,
icon : "loading"
})
setTimeout(function(){
wx.hideToast()
},2000)
//提示错误信息
}else{
//这里表示返回成功的话
_this.setData({
phoneCode : 60
})
//先把按钮上的值变成60,
//<text hidden="{{phoneCode == '获取验证码'}}">S</text>经过判断会显示60s
let time = setInterval(()=>{
let phoneCode = _this.data.phoneCode
//把phoneCode这个数据赋值给phoneCode这个变量
phoneCode --
//每秒进行减1
_this.setData({
phoneCode : phoneCode
})
//每一秒减一的时候同时再改变phoneCode这个数据
if(phoneCode == 0){
//当phoneCode这个数据变成0的时候
clearInterval(time)
//停掉计时
_this.setData({
phoneCode : "获取验证码",
flag : true
})
//再把phoneCode这个数据改成 "获取验证码"
//同时再把 flag这个数据变成true此时就代表已经发送过一次
//<text hidden="{{flag != true || phoneCode == '获取验证码'}}">重发
//如果再点击发送的话上面的这个重发就会生效显示
}
},1000)
}
}
})
//总体就是这样子，给大家大致了解小程序数据驱动的写法，以后我还会写很多例子，多多关注，谢谢，没时间多写一些费话了，写的详细能看的懂才是最关键
