開頭
- 最近寫小程式寫上癮了,業務上需要實現一個倒數計時的功能,考慮到可擴充以及使用方便,便將其封裝成元件(寫習慣了JSX不得不吐槽小程式自定義元件的繁瑣)
- 萌新第一次在掘金寫東西,東西比較簡單可能拉低整個掘金的文章水平了(求輕噴~)
需求
- 可配置倒數計時的時間
- 倒數計時結束後執行事件
- 可配置倒數計時時間的格式
步驟
- 先定義自定義元件的
properties,這裡有兩個父元件傳給該倒數計時元件的引數target倒數計時的時間,format倒數計時時間的格式
properties: {
target: {
type: String,
},
format: {
type: Function,
default: null
}
},
複製程式碼- 定義元件生命週期函式
lifetimes: {
attached() {
//元件建立時
this.setData({
lastTime: this.initTime(this.properties).lastTime, //根據 target 初始化元件的lastTime屬性
}, () => {
//開啟定時器
this.tick();
//判斷是否有format屬性 如果設定按照自定義format處理頁面上顯示的時間 沒有設定按照預設的格式處理
if (typeof this.properties.format === 'object') {
this.defaultFormat(this.data.lastTime)
}
})
},
detached() {
//元件銷燬時清除定時器 防止爆棧
clearTimeout(timer);
},
},
複製程式碼微信小程式自定義元件的生命週期指的是指的是元件自身的一些函式，這些函式在特殊的時間點或遇到一些特殊的框架事件時被自動觸發。其中，最重要的生命週期是
createdattacheddetached，包含一個元件例項生命流程的最主要時間點。具體微信自定義元件學習參考官方文件
- 定義元件自身的狀態
/**
* 元件的初始資料
*/
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:預設時間處理函式tick:定時事件initTime初始化時間onEnd:時間結束的回撥
- 倒數計時元件
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, //根據 target 初始化元件的lastTime屬性
}, () => {
//開啟定時器
this.tick();
//判斷是否有format屬性 如果設定按照自定義format處理頁面上顯示的時間 沒有設定按照預設的格式處理
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');
}
}
})
複製程式碼- 倒數計時元件
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}}">{{d}}天</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>
複製程式碼其中引入了兩個wxs檔案中的函式
WXS（WeiXin Script）是小程式的一套指令碼語言，結合 WXML，可以構建出頁面的結構。官方文件
function fixedZero(val) {
return val * 1 < 10 ? '0' + val : val;
}
//保留 pos位小數
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 + ' 小時 ' + minutes + ' 分鐘 ' + seconds + ' 秒 ';
};
data:{
formatTime:formatChinaDate,
creatTargetTime:1556428889000, //時間戳
}
getPageList:function(){
//倒數計時結束啦
console.log('倒數計時結束啦')
}
複製程式碼API
| 引數 | 說明 | 類別 | 預設值 |
|---|---|---|---|
| format | 時間格式化顯示 | Function(time) | x天00:00:00 |
| target | 目標時間 | Date | |
| onEnd | 倒數計時結束回撥 | funtion |
補充
- 文章首發於:微信小程式之自定義倒數計時元件