The method of sending a captcha countdown is very common, and is often used multiple times in the project. At this time, it is necessary to package the countdown as a component, which is easy to use when needed.

Custom Components

To encapsulate a component, familiarize yourself with the documentation for the applets’ custom components. The official documentation is here

Countdown module

For the sake of description, I’ll define the page as the parent and the countdown component as the child.

First, we need to know the response method of the event between the child component and the parent component. For example, the child component responds to the event of the parent component, and the child component modifies the data property of the parent component.

  1. Applet doesn’t have watch mode or computed properties like Vue, but it’s good that applet Properties has an Observer, and the official documentation says that the observer represents a function that responds to changes in property values.
  2. When the child has finished counting down, the parent needs to be told that the child has finished counting down. This can be handled using the method passed by e.date.

Subcomponent code

countdown.js

Component({/** * Component property list */ properties: {// Whether to start countdown start: {type: Boolean,
      value: false,
      observer(newVal){
        if (newVal === true) {this.countdownfunc ()}}}}, /** * the initial data of the component */ data: {timerText:'Get captcha'}, /** * list of component methods */ methods: {/** * trigger page click events */_getCountdownEvent(){
      this.triggerEvent("getCountdownEvent"}, /** * triggers the page to modify the data event */_setStartDataEvent() {
      this.triggerEvent("setStartDataEvent", this.data.start)}, /** * countdown */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: 'Resend',
            start: false}) this._setStartDataEvent() // When the countdown is 0, reset the parent component's start tofalseClearInterval (timer) // Clear timer}}, 1000)}}})Copy the code

The displayed countdown (timerText) can be modified according to your needs. countdown.wxml

<view bindtap="_getCountdownEvent">{{timerText}}{{start?'s retry after ':' '}}</view>
Copy the code

Page using

The calling component needs to be registered in the corresponding JSON file, which I won’t mention.

Parent component code

sendRandom.wxml

<countdown id="sendRandom" 
    start="{{start}}"
    bind:getCountdownEvent="_getCountdownEvent"
    bind:setStartDataEvent="_setStartDataEvent"
    >
</countdown>
Copy the code

sendRandom.js

Page({/** * the initial data of the Page */ data: {start:false}, /** * click to get verification code */ _getCountdownEvent(e) {// todo: Click to obtain the verification code, according to their own needs, notify child components can start the countdown // for example: to background request to send verification code method, after the request is successful set to starttrue, indicating that the countdown has begun.if (this.data.start === true) {
      return
    }
    this.setData({
      start: true}, /** * countdown end SettingssetThe Data forfalse
   */
  _setStartDataEvent(e){
    if (e.detail === false) {
      this.setData({
        start: false}}}})Copy the code

conclusion

The above is according to the needs of their own company packaged countdown components, write not elegant, just want to record the small program custom components of the mutual value and event response. If there is a better way to provide ideas.