微信小程序之倒计时组件

注：这篇文章内容已经过时，请移步 【重构】微信小程序倒计时组件 这篇新文章进行阅读。
注：这篇文章内容已经过时，请移步 【重构】微信小程序倒计时组件 这篇新文章进行阅读。
注：这篇文章内容已经过时，请移步 【重构】微信小程序倒计时组件 这篇新文章进行阅读。

最近在写活动页的时候，老大和我说：“小郭，你来写个倒计时组件吧！”身为实习生的我立马将这个任务加到了ToDo当中，然后认真思考起来。当时我的思路是后端传来一个目标时间，然后前端来计算当前时间和目标时间的时间差。但是大哥却说：“你这样可不行。”

那么为什么不行呢？大哥告诉我说：“因为用户可以修改手机时间，来直接到达倒计时的时间。所以应该通过后端直接返回 一个当前时间与目标时间的时间差。”

然后我修改了系统时间尝试了一下，发现果然如此！既然这样就那就只好直接用后端给的时间差了。确定好传入属性后我们就来思考组件的具体实现。

确定传入属性

整个倒计时组件只需要一个传入属性，也就是时间差。如下：

  properties: {
    initDuration: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        // ToDo 初始化倒计时
      }
    }
  }
复制代码

时间处理过程

整个处理过程分割成三个函数，分别为如下：

  methods: {
    /**
     * 计算倒计时
     * @param {Number} duration [秒数时间差，必填]
     * @return {String} [倒计时字符串]
     */
    _countDown: function (duration) {
      if (duration <= 0) {
        this.setData({
          flag: true
        })
        return undefined
      }
      
      // 计算出传入秒数是几小时几分钟几秒
      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
    },
    
    /**
     * 格式化小于10的时间
     * @param {Number} time [必填]
     * @return {String} [返回时间字符串]
     */
    _format: function (time) {
      if (time >= 10) {
        return time
      } else {
        return `0${time}`
      }
    },
    
    /**
     * 执行倒计时
     * @param {Number} initDuration [传入时间，必填]
     */
    _runCountDown: function (initDuration) {
      // 首次展示倒计时
      var countDownTime = this._countDown(initDuration)

      // 每1s执行一次的倒计时计算
      var timer = setInterval(() => {
        // flag为true也就是传入_countDown的值小于等于零时
        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 })
    },
  }
复制代码

初始化倒计时

如果向组件中传入了新的initDuration（比如刷新页面时），那么便会调用属性的observer回调。所以我们需要一个函数来处理倒计时的初始化执行。

  _initCountDown: function (newVal) {
    if (this.data.timer > 0) {
      clearInterval(this.data.timer)
    }
    this.setData({
      flag: false,
      duration: this.data.initDuration
    })
    this._runCountDown(newVal)
  }
复制代码

同时在initDuration属性的observer回调函数中调用：

  observer: function (newVal) {
    this._initCountDown(newVal)
  }
复制代码

这样基本上一个微信小程序中的倒计时组件就完成了。使用时在'Page'.json中设置好

  {
    "usingComponents": {
      "count-down": "../components/count-down"
    }
  }
复制代码

然后在Page中直接使用，并且传入初始值就可以了。

结尾

这是第一次实习生活的第一个组件任务，在这里记录下来。如果哪里写的很烂或者逻辑混乱，还请各位读者在评论中指出。不怕你骂我，就怕你不理我。谢谢各位。

转载于:https://juejin.im/post/5ac8746951882555770cb6ad