下面为各人介绍微信小程序倒计时组件，，，，这一组件主要用来显示小程序中倒计时的效果，，，，下面为开发文档

重构旧代码

在原来的组件中有一个initDuration属性和3个要领，，，，3个要领划分是countDown，，，，format和runCountDown。。。。

initDuration属性

首先我们需要三个page属性来资助完成接下来的代码，，，，它们的名字和内容如下：

timer: null, // 存储setInterval的ID
flag: false, // 倒计时是否竣事的标记
num: 0 // 已往的秒数
复制代码

在initDuration属性的新的回调要领中，，，，我们封装了clearTimer要领，，，，init初始化要领，，，，并且执行倒计时。。。。

initDuration: {
  type: Number,
  value: 0,
  observer: function (newVal) {
    if (this.timer) {
      this.clearTimer()
    }
  
    this.init() // 重置num和flag
    this.runCountDown(newVal)
  }
},
复制代码

一定要注重，，，，当传入的属性的值为默认值，，，，例如这里是0时，，，，是不会触发observer回调的。。。。

/**
 * 初始化函数
 */
init: function () {
  this.flag = false
  this.num = 0
}

/**
 * 清空计时器
 */
clearTimer: function () {
  clearInterval(this.timer)
  this.timer = null
}
复制代码

countDown要领

countDown要领是接受一个参数为倒计时的秒数，，，，返回一个倒计时的字符串。。。。在这个要领中没有太大改动，，，，只是改动了一些代码名堂。。。。如下：

/**
 * 盘算倒计时
 * @param {Number} duration - 秒数时间差
 * @returns {string} 倒计时的字符串
 */
countDown: function (duration) {
  if (duration <= 0) {
    this.setFlag(true) // 将flag属性设为true
    return '00:00:00' // 返回默认时间设置
  }

  let seconds = this._format(duration % 60)
  let minutes = Math.floor(duration / 60)
  minutes = minutes >= 60 ? this._format(minutes % 60) : this._format(minutes)
  let hours = this._format(Math.floor(duration / 3600))

  return `${hours}:${minutes}:${seconds}`
},
复制代码

format要领

format要领的作用很简朴，，，，就是处理小于10的数字展示问题。。。。

/**
 * 名堂化小于10的数字
 * @param {Number} time - 小于10的数字
 * @returns {string} 名堂化后的字符串
 */
format: function (time) {
  return time >= 10 ? time : `0${time}`
},
复制代码

runCountDown要领

runCountDown要领中的改动较量大，，，，在原来的代码中逻辑较量杂乱，，，，穿插了许多无关的代码，，，，着实应该将它们封装起来抵达解耦的目的。。。。

runCountDown: function (initDuration) {
  // 第一次给倒计时赋值 this.setData({ countDownStr })
  this.setCountDownTime(this.countDown(initDuration))

  // 每一秒更新一次倒计时
  this.timer = setInterval(() => {
    if (this.flag == true) { // 倒计时竣事
      clearInterval(this.timer)

      return undefined
    }

    this.addNum() // this.num += 1
    this.setCountDownTime(this._countDown(initDuration - this.num))
  }, 1000)
},
复制代码

增添新功效

我们原来的倒计时组件是缺乏一些功效的，，，，例如传入的时间只能是秒数，，，，倒计时竣事后只显示00:00:00，，，，若是传入的值是0的话会不举行初始化（这算是Bug了）。。。。以是我们需要加入以下的新功效：

• 支持自界说倒计时竣事后现实的字符串。。。。
• 修复传入值为0的Bug。。。。
• 传入的时间可以是秒数，，，，也可以是UTC时间的字符串。。。。

自界说竣事字符串

在倒计时组件中，，，，展示倒计时字符串的是this.data.countDownTime属性。。。。以是在竣事时将countDownTime属性的值设为传入的字符串即可。。。。 首先，，，，封装一个赋值要领

setEndContent: function (countDownTime) {
  if (countDownTime) {
    this.setData({ countDownTime })
  }
}
复制代码

接下来为组件新增添一个属性为 endContent 。。。。

endContent: {
  type: String,
  value: '00:00:00'
}
复制代码

接下来，，，，在倒计时竣事的位置，，，，挪用金狮贵宾会赋值要领，，，，也就是runCountDown要领的计时器回调函数中。。。。

this.timer = setInterval(() => {
  if (this.flag == true) {
    clearInterval(this.timer)
    
    this.setEndContent(this.properties.endContent) // 设置竣事字符串
    
    return undefined
  }
    
  this.addNum()
  this.setCountDownTime(this._countDown(initDuration - this.num))
}, 1000)
复制代码

这样自界说字符串就乐成了，，，，在使用组件时传入默认值即可。。。。

修复传入值为0的Bug

这个问题的泛起是由于当传入属性为默认值时，，，，不会挪用observer回调函数，，，，以是这时我们需要使用组件的 attached 生命周期函数。。。。

attached: function () {
  if (this.properties.initDuration <= 0) {
    // 若是传入值为零时不会挪用observer回调，，，，则直接从这里展示倒计时竣事
    this.setEndContent(this.properties.endContent)
  }
}
复制代码

可以传入UTC时间字符串

为了精练起见，，，，我们就不为组件增添新的属性了，，，，依然使用initDuration属性，，，，以是要将其type从Number改为null（小程序的这点不敷强，，，，不可选择多类型。。。。）。。。。在修改type后我们需要封装一个将UTC时间字符串剖析成倒计时秒数的要领。。。。

parseDate: function (date) {
  if (typeof date == 'string') {
    // 将传进来的时间减去现在的时间，，，，获得的效果便和直接传进数字值相同
    return Math.floor((+new Date(date) / 1000)) - Math.floor((+new Date / 1000))
  }
  
  return date
}
复制代码

在observer回调中挪用时如下:

initDuration: {
  type: null,
  observer: function (newVal) {
    if (this.timer) {
      this._clearTimer()
    }
  
    this._init()
    this._runCountDown(this.parseDate(newVal)) // 在这里挪用parseData要领
  }
}
复制代码

小程序工具提供多类型商城/门店小程序制作，，，，可视化编辑 1秒天生5步上线。。。。通过拖拽、拼接
？？？？榻峁剐〕绦蛏坛且趁妫，，，所看即所得，，，，只需要美工就能做出细腻商城。。。。更多小程序市肆请审查：小程序市肆