小程序 - 驗(yàn)證碼倒計(jì)時(shí)組件
發(fā)布時(shí)間：2018-12-28 08:43 所屬欄目：小程序開(kāi)發(fā)教程
發(fā)送驗(yàn)證碼倒計(jì)時(shí)的方法很常見(jiàn)，在項(xiàng)目里面也經(jīng)常會(huì)多次用到，這時(shí)就要把倒計(jì)時(shí)封裝為組件，需要用到的時(shí)候方便使用。
自定義組件
需要封裝一個(gè)組件，首先要熟悉小程序自定義組件的文檔。官方文檔在這里
倒計(jì)時(shí)組件
為了方便描述，我把頁(yè)面定義為父組件，把倒計(jì)時(shí)組件定義為子組件吧。
首先需要清楚子組件與父組件之間事件的響應(yīng)方法，例如：子組件響應(yīng)父組件的事件，子組件修改父組件的data屬性等。
小程序沒(méi)有像Vue里面的watch模式也沒(méi)有computed計(jì)算屬性，但是還好小程序properties里有observer，官方文檔說(shuō)observer表示屬性值被更改時(shí)的響應(yīng)函數(shù)，那這樣就好辦了。
當(dāng)子組件倒計(jì)時(shí)完成之后，需要告訴父組件，子組件已經(jīng)完成了倒計(jì)時(shí)，這里可以用到方法傳遞的e.detail來(lái)處理。
子組件代碼
countdown.js
Component({
/**
* 組件的屬性列表
*/
properties: {
// 是否開(kāi)始倒計(jì)時(shí)
start: {
type: Boolean,
value: false,
observer(newVal){
if (newVal === true) {
this.countdownFunc()
}
}
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
timerText: '獲取驗(yàn)證碼'
},
/**
* 組件的方法列表
*/
methods: {
/**
* 觸發(fā)頁(yè)面點(diǎn)擊事件
*/
_getCountdownEvent(){
this.triggerEvent("getCountdownEvent")
},
/**
* 觸發(fā)頁(yè)面修改data事件
*/
_setStartDataEvent() {
this.triggerEvent("setStartDataEvent", this.data.start)
},
/**
* 倒計(jì)時(shí)
*/
countdownFunc() {
this.setData({
timerText: 60
})
let target = this
let countdownNum = target.data.timerText
let timer = setInterval(() => {
countdownNum--
target.setData({
timerText: countdownNum
})
if (countdownNum == 0) {
target.setData({
timerText: '重新發(fā)送',
start: false
})
this._setStartDataEvent() //倒計(jì)時(shí)為0時(shí)，讓父組件的start重新設(shè)置為false
clearInterval(timer) //清除定時(shí)器
}
}, 1000)
}
}
})
復(fù)制代碼
顯示的倒計(jì)時(shí)（timerText）可以根據(jù)自己需求重新修改。
countdown.wxml
<view bindtap="_getCountdownEvent">{{timerText}}{{start?'s后重試':''}}</view>
復(fù)制代碼
頁(yè)面使用
調(diào)用組件需要在相應(yīng)的json文件里面注冊(cè)，這個(gè)我就不說(shuō)了。
父組件代碼
sendRandom.wxml
<countdown id="sendRandom"
start="{{start}}"
bind:getCountdownEvent="_getCountdownEvent"
bind:setStartDataEvent="_setStartDataEvent"
>
</countdown>
復(fù)制代碼
sendRandom.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
start: false
},
/**
* 點(diǎn)擊獲取驗(yàn)證碼
*/
_getCountdownEvent(e) {
// todo: 點(diǎn)擊獲取驗(yàn)證碼之后，可以根據(jù)自己的需求，通知子組件可以開(kāi)始倒計(jì)時(shí)了
// 如： 向后臺(tái)請(qǐng)求發(fā)送驗(yàn)證碼的方法，請(qǐng)求成功之后將start設(shè)置為true，表示倒計(jì)時(shí)開(kāi)始了。
if (this.data.start === true) {
return
}
this.setData({
start: true
})
},
/**
* 倒計(jì)時(shí)結(jié)束 設(shè)置setData為false
*/
_setStartDataEvent(e){
if (e.detail === false) {
this.setData({
start: false
})
}
}
})
復(fù)制代碼
結(jié)語(yǔ)
以上是根據(jù)自己公司的需求封裝的倒計(jì)時(shí)組件，寫(xiě)得不夠優(yōu)雅，只是想記錄一下小程序自定義組件的互相傳值和事件響應(yīng)。如有更好的方法可以提供下思路。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://www.kknew.com.cn/wxmini/doc/course/25051.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)： 點(diǎn)擊咨詢(xún)
