这篇文章主要介绍“微信小程序倒计时组件怎么用”，在日常操作中，相信很多人在微信小程序倒计时组件怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序倒计时组件怎么用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
在原来的组件中有一个initDuration属性和3个方法，3个方法分别是countDown，format和runCountDown。
首先我们需要三个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方法是接受一个参数为倒计时的秒数，返回一个倒计时的字符串。在这个方法中没有太大改动，只是改动了一些代码格式。如下：
/**
* 计算倒计时
* @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方法的作用很简单，就是处理小于10的数字展示问题。
/**
* 格式化小于10的数字
* @param {Number} time - 小于10的数字
* @returns {string} 格式化后的字符串
*/
format: function (time) {
return time >= 10 ? time : `0${time}`
},
复制代码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)
复制代码这样自定义字符串就成功了，在使用组件时传入默认值即可。
这个问题的出现是因为当传入属性为默认值时，不会调用observer回调函数，所以这时我们需要使用组件的 attached 生命周期函数。
attached: function () {
if (this.properties.initDuration <= 0) {
// 如果传入值为零时不会调用observer回调，则直接从这里展示倒计时结束
this.setEndContent(this.properties.endContent)
}
}
复制代码为了简洁起见，我们就不为组件增加新的属性了，依然使用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方法
}
}
复制代码到此，关于“微信小程序倒计时组件怎么用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
