在開發(fā)小程序時(shí)遇到了需要做自定義倒計(jì)時(shí)的需求，比如番茄鬧鐘，比如安享智家的管家功能，這些都需要用到自定義倒計(jì)時(shí)組件，那么這個(gè)組件該如何開發(fā)呢？
下面可速云小編就帶大家來(lái)看下自定義倒計(jì)時(shí)的組件怎么開發(fā)，也歡迎大家用微信小程序搜索下‘安享智家’，體驗(yàn)下小程序定時(shí)的功能
需求
- 可配置倒計(jì)時(shí)的時(shí)間
- 倒計(jì)時(shí)結(jié)束后執(zhí)行事件
- 可配置倒計(jì)時(shí)時(shí)間的格式
步驟
- 先定義自定義組件的
properties ,這里有兩個(gè)父組件傳給該倒計(jì)時(shí)組件的參數(shù) target 倒計(jì)時(shí)的時(shí)間, format 倒計(jì)時(shí)時(shí)間的格式
properties: { target: {
type: String,
}, format: { type: Function,
default: null
}
},
lifetimes: {
attached() { this.setData({
lastTime: this.initTime(this.properties).lastTime, }, () => { this.tick(); if (typeof this.properties.format === 'object') { this.defaultFormat(this.data.lastTime)
}
})
},
detached() { clearTimeout(timer);
},
},微信小程序自定義組件的生命周期指的是指的是組件自身的一些函數(shù)，這些函數(shù)在特殊的時(shí)間點(diǎn)或遇到一些特殊的框架事件時(shí)被自動(dòng)觸發(fā)。其中，最重要的生命周期是 created attached detached ，包含一個(gè)組件實(shí)例生命流程的最主要時(shí)間點(diǎn)。具體微信自定義組件學(xué)習(xí)參考官方文檔
data: { d: 0, h: 0, m: 0, s: 0, result: '', lastTime:'' },
methods: { defaultFormat: function(time) { const day = 24 * 60 * 60 * 1000 const hours = 60 * 60 * 1000; const minutes = 60 * 1000; const d = Math.floor(time / day); const h = Math.floor((time - d * day) / hours); const m = Math.floor((time - d * day - h * hours) / minutes); const s = Math.floor((time - d * day - h * hours - m * minutes) / 1000); this.setData({
d,
h,
m,
s
})
}, tick: function() { let {
lastTime
} = this.data;
timer = setTimeout(() => { if (lastTime < interval) {
clearTimeout(timer); this.setData({ lastTime: 0, result: '' },
() => { this.defaultFormat(lastTime) if (this.onEnd) { this.onEnd();
}
}
);
} else {
lastTime -= interval; this.setData({
lastTime, result: this.properties.format ? this.properties.format(lastTime) : '' },
() => { this.defaultFormat(lastTime) this.tick();
}
);
}
}, interval);
}, initTime: function(properties) { let lastTime = 0; let targetTime = 0; try { if (Object.prototype.toString.call(properties.target) === '[object Date]') {
targetTime = Number(properties.target).getTime();
} else {
targetTime = new Date(Number(properties.target)).getTime();
}
} catch (e) { throw new Error('invalid target properties', e);
}
lastTime = targetTime - new Date().getTime(); return { lastTime: lastTime < 0 ? 0 : lastTime,
};
}, onEnd: function() { this.triggerEvent('onEnd');
}
}defaultFormat :默認(rèn)時(shí)間處理函數(shù) tick :定時(shí)事件 initTime 初始化時(shí)間 onEnd :時(shí)間結(jié)束的回調(diào)
倒計(jì)時(shí)組件 countDown.js 完整代碼
var timer = 0; var interval = 1000;
Component({ properties: { target: { type: String,
}, format: { type: Function, default: null }
}, lifetimes: {
attached() { this.setData({ lastTime: this.initTime(this.properties).lastTime, }, () => { this.tick(); if (typeof this.properties.format === 'object') { this.defaultFormat(this.data.lastTime)
}
})
},
detached() { clearTimeout(timer);
},
}, data: { d: 0, h: 0, m: 0, s: 0, result: '', lastTime:'' }, methods: { defaultFormat: function(time) { const day = 24 * 60 * 60 * 1000 const hours = 60 * 60 * 1000; const minutes = 60 * 1000; const d = Math.floor(time / day); const h = Math.floor((time - d * day) / hours); const m = Math.floor((time - d * day - h * hours) / minutes); const s = Math.floor((time - d * day - h * hours - m * minutes) / 1000); this.setData({
d,
h,
m,
s
})
}, tick: function() { let {
lastTime
} = this.data;
timer = setTimeout(() => { if (lastTime < interval) {
clearTimeout(timer); this.setData({ lastTime: 0, result: '' },
() => { this.defaultFormat(lastTime) if (this.onEnd) { this.onEnd();
}
}
);
} else {
lastTime -= interval; this.setData({
lastTime, result: this.properties.format ? this.properties.format(lastTime) : '' },
() => { this.defaultFormat(lastTime) this.tick();
}
);
}
}, interval);
}, initTime: function(properties) { let lastTime = 0; let targetTime = 0; try { if (Object.prototype.toString.call(properties.target) === '[object Date]') {
targetTime = Number(properties.target).getTime();
} else {
targetTime = new Date(Number(properties.target)).getTime();
}
} catch (e) { throw new Error('invalid target properties', e);
}
lastTime = targetTime - new Date().getTime(); return { lastTime: lastTime < 0 ? 0 : lastTime,
};
}, onEnd: function() { this.triggerEvent('onEnd');
}
}
})
- 倒計(jì)時(shí)組件
countDown.wxml 完整代碼
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../../comm.wxs" module="comm" /> <view class="count-down"> <text wx:if="{{result!==''}}">{{result}}text> <block wx:else> <text wx:if="{{comm.numberToFixed(d)>0}}">{tfevyzqs}天text> <text>{{utils.fixedZero(h)}}text> <text style="font-weight: 500">:text> <text>{{utils.fixedZero(m)}}text> <text style="font-weight: 500">:text> <text>{{utils.fixedZero(s)}}text> block> view>
復(fù)制代碼
其中引入了兩個(gè)wxs文件中的函數(shù)
WXS（WeiXin Script）是小程序的一套腳本語(yǔ)言，結(jié)合 WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。官方文檔
function fixedZero(val) { return val * 1 < 10 ? '0' + val : val;
} function numberToFixed(number, pos) { if (number === null || number === '' || number < 0) return '' return parseFloat(number).toFixed(pos)
}組件使用
"usingComponents": { "countDown": "../../../components/countDown/countDown" },??<countDown bind:onEnd="getPageList" format="{{formatTime}}" target="{{creatTargetTime}}" const formatChinaDate = mss => { let days = parseInt(mss / (1000 * 60 * 60 * 24)); let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)); let seconds = parseInt((mss % (1000 * 60)) / 1000); return days + ' 天 ' + hours + ' 小時(shí) ' + minutes + ' 分鐘 ' + seconds + ' 秒 ';
};
data:{ formatTime:formatChinaDate, creatTargetTime:1556428889000, }
getPageList:function(){ console.log('倒計(jì)時(shí)結(jié)束啦')
}?以上就是微信小程序自定義倒計(jì)時(shí)組件的開發(fā)步驟，更多開發(fā)教程請(qǐng)關(guān)注“可速云”查閱
熱門推薦: 上海微信小程序 小程序開發(fā) 小程序設(shè)計(jì) 支付寶小程序 百度小程序?
