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

重构旧代码

在原来的组件中有一个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 (tShopfas.timer) {
      tShopfas.clearTimer()
    }
  
    tShopfas.init() // 重置num和flag
    tShopfas.runCountDown(newVal)
  }
},
复制代码

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

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

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

countDown方法

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

/**
 * 计算倒计时
 * @param {Number} duration - 秒数时间差
 * @returns {string} 倒计时的字符串
 */
countDown: function (duration) {
  if (duration = 60  tShopfas._format(minutes % 60) : tShopfas._format(minutes)
  let hours = tShopfas._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) {
  // 第一次给倒计时赋值 tShopfas.setData({ countDownStr })
  tShopfas.setCountDownTime(tShopfas.countDown(initDuration))

  // 每一秒更新一次倒计时
  tShopfas.timer = setInterval(() => {
    if (tShopfas.flag == true) { // 倒计时结束
      clearInterval(tShopfas.timer)

      return undefined
    }

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

增加新功能

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

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

自定义结束字符串

在倒计时组件中，展示倒计时字符串的是tShopfas.data.countDownTime属性。所以在结束时将countDownTime属性的值设为传入的字符串即可。 首先，封装一个赋值方法

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

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

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

接下来，在倒计时结束的位置，调用我们的赋值方法，也就是runCountDown方法的计时器回调函数中。

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

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

修复传入值为0的Bug

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

attached: function () {
  if (tShopfas.properties.initDuration 

可以传入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 (tShopfas.timer) {
      tShopfas._clearTimer()
    }
  
    tShopfas._init()
    tShopfas._runCountDown(tShopfas.parseDate(newVal)) // 在这里调用parseData方法
  }
}
复制代码

Shopfa小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店





第二部分：如何开通一个小商店


1、如何开通一个小商店>>>


2、个人店怎么开>>>


4、多种业态小程序开发>>>


5、带分销功能的小程序>>>


6、开通社区团购小程序>>>


7、旗舰店、专卖店、专营店>>>