微信小程序倒計(jì)時(shí)組件實(shí)例
下面為大家介紹微信小程序倒計(jì)時(shí)組件,這一組件主要用來(lái)顯示小程序中倒計(jì)時(shí)的效果,下面為開(kāi)發(fā)文檔
重構(gòu)舊代碼
在原來(lái)的組件中有一個(gè)initDuration屬性和3個(gè)方法,3個(gè)方法分別是countDown,format和runCountDown。
initDuration屬性
首先我們需要三個(gè)page屬性來(lái)幫助完成接下來(lái)的代碼,它們的名字和內(nèi)容如下:
timer: null, // 存儲(chǔ)setInterval的ID flag: false, // 倒計(jì)時(shí)是否結(jié)束的標(biāo)志 num: 0 // 過(guò)去的秒數(shù) 復(fù)制代碼
在initDuration屬性的新的回調(diào)方法中,我們封裝了clearTimer方法,init初始化方法,并且執(zhí)行倒計(jì)時(shí)。
initDuration: { type: Number, value: 0, observer: function (newVal) { if (this.timer) { this.clearTimer() } this.init() // 重置num和flag this.runCountDown(newVal) } }, 復(fù)制代碼
一定要注意,當(dāng)傳入的屬性的值為默認(rèn)值,例如這里是0時(shí),是不會(huì)觸發(fā)observer回調(diào)的。
/** * 初始化函數(shù) */ init: function () { this.flag = false this.num = 0 } /** * 清空計(jì)時(shí)器 */ clearTimer: function () { clearInterval(this.timer) this.timer = null } 復(fù)制代碼
countDown方法
countDown方法是接受一個(gè)參數(shù)為倒計(jì)時(shí)的秒數(shù),返回一個(gè)倒計(jì)時(shí)的字符串。在這個(gè)方法中沒(méi)有太大改動(dòng),只是改動(dòng)了一些代碼格式。如下:
/** * 計(jì)算倒計(jì)時(shí) * @param {Number} duration - 秒數(shù)時(shí)間差 * @returns {string} 倒計(jì)時(shí)的字符串 */ countDown: function (duration) { if (duration <= 0) { this.setFlag(true) // 將flag屬性設(shè)為true return '00:00:00' // 返回默認(rèn)時(shí)間設(shè)置 } 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}` }, 復(fù)制代碼
format方法
format方法的作用很簡(jiǎn)單,就是處理小于10的數(shù)字展示問(wèn)題。
/** * 格式化小于10的數(shù)字 * @param {Number} time - 小于10的數(shù)字 * @returns {string} 格式化后的字符串 */ format: function (time) { return time >= 10 ? time : `0${time}` }, 復(fù)制代碼
runCountDown方法
runCountDown方法中的改動(dòng)比較大,在原來(lái)的代碼中邏輯比較混亂,穿插了許多無(wú)關(guān)的代碼,其實(shí)應(yīng)該將它們封裝起來(lái)達(dá)到解耦的目的。
runCountDown: function (initDuration) { // 第一次給倒計(jì)時(shí)賦值 this.setData({ countDownStr }) this.setCountDownTime(this.countDown(initDuration)) // 每一秒更新一次倒計(jì)時(shí) this.timer = setInterval(() => { if (this.flag == true) { // 倒計(jì)時(shí)結(jié)束 clearInterval(this.timer) return undefined } this.addNum() // this.num += 1 this.setCountDownTime(this._countDown(initDuration - this.num)) }, 1000) }, 復(fù)制代碼
增加新功能
我們?cè)瓉?lái)的倒計(jì)時(shí)組件是缺乏一些功能的,例如傳入的時(shí)間只能是秒數(shù),倒計(jì)時(shí)結(jié)束后只顯示00:00:00,如果傳入的值是0的話會(huì)不進(jìn)行初始化(這算是Bug了)。所以我們需要加入以下的新功能:
- 支持自定義倒計(jì)時(shí)結(jié)束后現(xiàn)實(shí)的字符串。
- 修復(fù)傳入值為0的Bug。
- 傳入的時(shí)間可以是秒數(shù),也可以是UTC時(shí)間的字符串。
自定義結(jié)束字符串
在倒計(jì)時(shí)組件中,展示倒計(jì)時(shí)字符串的是this.data.countDownTime屬性。所以在結(jié)束時(shí)將countDownTime屬性的值設(shè)為傳入的字符串即可。 首先,封裝一個(gè)賦值方法
setEndContent: function (countDownTime) { if (countDownTime) { this.setData({ countDownTime }) } } 復(fù)制代碼
接下來(lái)為組件新增加一個(gè)屬性為 endContent 。
endContent: { type: String, value: '00:00:00' } 復(fù)制代碼
接下來(lái),在倒計(jì)時(shí)結(jié)束的位置,調(diào)用我們的賦值方法,也就是runCountDown方法的計(jì)時(shí)器回調(diào)函數(shù)中。
this.timer = setInterval(() => { if (this.flag == true) { clearInterval(this.timer) this.setEndContent(this.properties.endContent) // 設(shè)置結(jié)束字符串 return undefined } this.addNum() this.setCountDownTime(this._countDown(initDuration - this.num)) }, 1000) 復(fù)制代碼
這樣自定義字符串就成功了,在使用組件時(shí)傳入默認(rèn)值即可。
修復(fù)傳入值為0的Bug
這個(gè)問(wèn)題的出現(xiàn)是因?yàn)楫?dāng)傳入屬性為默認(rèn)值時(shí),不會(huì)調(diào)用observer回調(diào)函數(shù),所以這時(shí)我們需要使用組件的 attached 生命周期函數(shù)。
attached: function () { if (this.properties.initDuration <= 0) { // 如果傳入值為零時(shí)不會(huì)調(diào)用observer回調(diào),則直接從這里展示倒計(jì)時(shí)結(jié)束 this.setEndContent(this.properties.endContent) } } 復(fù)制代碼
可以傳入U(xiǎn)TC時(shí)間字符串
為了簡(jiǎn)潔起見(jiàn),我們就不為組件增加新的屬性了,依然使用initDuration屬性,所以要將其type從Number改為null(小程序的這點(diǎn)不夠強(qiáng),不能選擇多類(lèi)型。)。在修改type后我們需要封裝一個(gè)將UTC時(shí)間字符串解析成倒計(jì)時(shí)秒數(shù)的方法。
parseDate: function (date) { if (typeof date == 'string') { // 將傳進(jìn)來(lái)的時(shí)間減去現(xiàn)在的時(shí)間,得到的結(jié)果便和直接傳進(jìn)數(shù)字值相同 return Math.floor((+new Date(date) / 1000)) - Math.floor((+new Date / 1000)) } return date } 復(fù)制代碼
在observer回調(diào)中調(diào)用時(shí)如下:
initDuration: { type: null, observer: function (newVal) { if (this.timer) { this._clearTimer() } this._init() this._runCountDown(this.parseDate(newVal)) // 在這里調(diào)用parseData方法 } } 復(fù)制代碼
HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看:小程序商店