小程序模板網(wǎng)

小程序 - 驗(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+前后代碼開源 碼云倉庫:starfork
本文地址:http://u-renovate.com/wxmini/doc/course/25051.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢