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