小程序 - 验证码倒计时组件

栏目: JavaScript · 发布时间: 5年前

内容简介:发送验证码倒计时的方法很常见,在项目里面也经常会多次用到,这时就要把倒计时封装为组件,需要用到的时候方便使用。需要封装一个组件,首先要熟悉小程序自定义组件的文档。官方文档在这里为了方便描述,我把页面定义为父组件,把倒计时组件定义为子组件吧。

发送验证码倒计时的方法很常见,在项目里面也经常会多次用到,这时就要把倒计时封装为组件,需要用到的时候方便使用。

自定义组件

需要封装一个组件,首先要熟悉小程序自定义组件的文档。官方文档在这里

倒计时组件

为了方便描述,我把页面定义为父组件,把倒计时组件定义为子组件吧。

首先需要清楚子组件与父组件之间事件的响应方法,例如:子组件响应父组件的事件,子组件修改父组件的data属性等。

  1. 小程序没有像Vue里面的watch模式也没有computed计算属性,但是还好小程序properties里有observer,官方文档说observer表示属性值被更改时的响应函数,那这样就好办了。
  2. 当子组件倒计时完成之后,需要告诉父组件,子组件已经完成了倒计时,这里可以用到方法传递的e.detail来处理。

子组件代码

countdown.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否开始倒计时
    start: {
      type: Boolean,
      value: false,
      observer(newVal){
        if (newVal === true) {
          this.countdownFunc()
        }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    timerText: '获取验证码'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 触发页面点击事件
     */
    _getCountdownEvent(){
      this.triggerEvent("getCountdownEvent")
    },

    /**
     * 触发页面修改data事件
     */
    _setStartDataEvent() {
      this.triggerEvent("setStartDataEvent", this.data.start)
    },

    /**
     * 倒计时
     */
    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: '重新发送',
            start: false
          })

          this._setStartDataEvent() //倒计时为0时,让父组件的start重新设置为false
          
          clearInterval(timer) //清除定时器
        }

      }, 1000)
    }
  }
})
复制代码

显示的倒计时(timerText)可以根据自己需求重新修改。

countdown.wxml

<view bindtap="_getCountdownEvent">{{timerText}}{{start?'s后重试':''}}</view>
复制代码

页面使用

调用组件需要在相应的json文件里面注册,这个我就不说了。

父组件代码

sendRandom.wxml

<countdown id="sendRandom" 
    start="{{start}}"
    bind:getCountdownEvent="_getCountdownEvent"
    bind:setStartDataEvent="_setStartDataEvent"
    >
</countdown>
复制代码

sendRandom.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    start: false
  },

  /**
   * 点击获取验证码
   */
  _getCountdownEvent(e) {
  
  // todo: 点击获取验证码之后,可以根据自己的需求,通知子组件可以开始倒计时了
  // 如: 向后台请求发送验证码的方法,请求成功之后将start设置为true,表示倒计时开始了。
    
    if (this.data.start === true) {
      return
    }
    this.setData({
      start: true
    })
  },

  /**
   * 倒计时结束 设置setData为false
   */
  _setStartDataEvent(e){
    if (e.detail === false) {
      this.setData({
        start: false
      })
    }
  }
  
})
复制代码

结语

以上是根据自己公司的需求封装的倒计时组件,写得不够优雅,只是想记录一下小程序自定义组件的互相传值和事件响应。如有更好的方法可以提供下思路。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Eloquent JavaScript

Eloquent JavaScript

Marijn Haverbeke / No Starch Press / 2011-2-3 / USD 29.95

Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript's......一起来看看 《Eloquent JavaScript》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具