微信小程序倒计时组件示例

以下是微信小程序倒计时组件的说明。该组件主要用于显示小程序中的倒计时效果。以下是开发文档

重构旧代码

在原始组件中有一个initDuration属性和三个方法，三个方法是countDown，format和runCountDown。

initDuration属性

首先，我们需要三个页面属性来帮助完成下一个代码，它们的名称和内容如下：

定时器: null，//存储setInterval IDflag: false，//检查倒计时结束是否为num: 0 //过去秒复制代码

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

initDuration: {type: Number，value: 0，observer: function（newVal）{if（this.timer）{this.clearTimer（）} this.init（）//reset num and flag this.runCountDown（newVal）}} ，复制代码

重要的是要注意，当传入的属性的值是默认值时，例如，如果它是0，则不会触发观察者回调。

/** *初始化函数*/init:函数（）{this.flag=false this.num=0}/** *清除计时器*/clearTimer:函数（）{clearInterval（this.timer）this.timer=Null复制代码countDown方法

countDown方法计数倒计时的秒数并返回倒计时字符串。这种方法没有太大的变化，只需更改一些代码格式。如下：

/** *计算倒计时* @param {Number}持续时间 - 秒时差* @returns {string}倒计时字符串*/countDown:函数（持续时间）{if（持续时间＆lt;=＆gt;=60？this._format（分钟） ％60）: this._format（分钟）let hours=this._format（Math.floor（duration/3600））return` $ {hours}: $ {minutes}: $ {seconds}`}，复制代码格式Method

格式方法的作用很简单，处理小于10的数字显示问题。

/** *格式数小于10 * @param {Number}时间 - 小于10的数字* @returns {string}格式化字符串* /格式:函数（时间）{返回时间＆gt;=10？时间:`0 $ {time}`}，复制代码runCountDown方法

runCountDown方法中的更改相对较大。原始代码中的逻辑混乱，散布着许多不相关的代码，事实上，它们应该被打包用于解耦目的。

runCountDown: function（initDuration）{//将此倒计时分配给this.setData（{countDownStr}）this.setCountDownTime（this.countDown（initDuration））//每秒更新倒计时this.timer=setInterval（（）=＆gt; {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，则不会初始化（这是一个错误）。 ）。所以我们需要添加以下新功能：

在自定义倒计时结束后支持实际字符串。修复传入值为0的错误。传入时间可以是几秒或一串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（（）=＆gt; {if（this.flag==true）{clearInterval（this.timer）this.setEndContent（this.properties.endContent）//设置结束字符串返回undefined} this.addNum （）this.setCountDownTime（this._countDown（initDuration - this.num））}，1000）复制代码

这样自定义字符串成功，您可以在使用组件时传递默认值。

修复传入值为0

的错误 出现此问题的原因是当传入属性是默认值时未调用传入回调函数，因此我们需要使用组件的附加生命周期函数。

附加:函数（）{if（this.properties.initDuration＆lt;=＆gt;）可以传递UTC时间字符串

为简洁起见，我们不向组件添加新属性。我们仍然使用initDuration属性，因此我们需要将其类型从Number更改为null（小程序不足以选择多个类型。）。修改类型后，我们需要封装一个将UTC时间字符串解析为倒计时秒的方法。

parseDate: function（date）{if（typeof date=='string'）{//从当前时间减去传入时间，结果与返回的直接数值相同。返回Math.floor（（+ new Date（date）/1000）） - Math.floor（（+ new date/1000））} return date}复制代码

在观察者回调中调用如下:

initDuration: {type: null，observer: function（newVal）{if（this.timer）{this._clearTimer（）} this._init（）this._runCountDown（this.parseDate（newVal））//在这里调用parseData方法复制代码

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。