費話不多說，直接上代碼
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)
}
}
})
//總體就是這樣子，給大家大致了解小程序數據驅動的寫法，以后我還會寫很多例子，多多關注，謝謝，沒時間多寫一些費話了，寫的詳細能看的懂才是最關鍵
