Note: The content of this article is out of date, please refer to the [reconstruction] wechat applet countdown component of the new article to read. Note: The content of this article is out of date, please refer to the [reconstruction] wechat applet countdown component of the new article to read. Note: The content of this article is out of date, please refer to the [reconstruction] wechat applet countdown component of the new article to read.

So why not? Brother told me: “Because users can modify the mobile phone time, to directly reach the countdown time. So you should return a time difference between the current time and the target time directly through the back end.”

Then I changed the system time to try it and found that it was true! In this case, we have to directly use the time difference given by the backend. With the incoming properties identified, we can think about the implementation of the component.

Determine the incoming property

The entire countdown component requires only one incoming property, the time difference. As follows:

  properties: {
    initDuration: {
      type: Number.value: 0.observer: function (newVal, oldVal) {
        // ToDo initializes the countdown}}}Copy the code

Time processing

The whole process is divided into three functions, which are as follows:

  methods: {
    /** * count countdown * @param {Number} duration [time difference in seconds, mandatory] * @return {String} [countdown String] */
    _countDown: function (duration) {
      if (duration <= 0) {
        this.setData({
          flag: true
        })
        return undefined
      }
      
      // Calculate the number of incoming seconds as hours minutes seconds
      var seconds = this._format(duration % 60)
      var minutes = Math.floor(duration / 60)
      var hours = this._format(Math.floor(duration / 3600))
      if (minutes >= 60) {
        minutes = minutes % 60
      }
      minutes = this._format(minutes)
      
      var result = `${hours}:${minutes}:${seconds}`
      return result
    },
    
    /** * Format the time less than 10 * @param {Number} time [mandatory] * @return {String} [Return time String] */
    _format: function (time) {
      if (time >= 10) {
        return time
      } else {
        return ` 0${time}`}},/** * Execute countdown * @param {Number} initDuration [incoming time, mandatory] */
    _runCountDown: function (initDuration) {
      // Display countdown for the first time
      var countDownTime = this._countDown(initDuration)

      // The countdown is calculated once every 1s
      var timer = setInterval((a)= > {
        // flag is true if the value passed in to _countDown is less than or equal to zero
        if (this.data.flag === true) {
          clearInterval(timer)
          return undefined
        }
        var duration = this.data.duration - 1
        var countDownTime = this._countDown(duration)
        this.setData({ duration, countDownTime })
      }, 1000)

      this.setData({ countDownTime, timer })
    },
  }
Copy the code

Initialization countdown

If a new initDuration is passed to the component (such as when a page is refreshed), the property’s Observer callback is invoked. So we need a function to handle the initial execution of the countdown.

  _initCountDown: function (newVal) {
    if (this.data.timer > 0) {
      clearInterval(this.data.timer)
    }
    this.setData({
      flag: false.duration: this.data.initDuration
    })
    this._runCountDown(newVal)
  }
Copy the code

Also called in the observer callback of the initDuration property:

  observer: function (newVal) {
    this._initCountDown(newVal)
  }
Copy the code

So basically a micro channel applets in the countdown component is complete. Set it in ‘Page’. Json when used

  {
    "usingComponents": {
      "count-down": ".. /components/count-down"}}Copy the code

Then use it directly in the Page and pass in the initial value.

At the end

This is the first component of the first internship life, which is recorded here. If anything is bad or illogical, please point it out in the comments. Not afraid of you scold me, afraid you ignore me. Thank you.