为什么用wxs格式化时间呢?
使用小程序的wxs格式化时间可以使代码更简洁、易读,并且可以避免在多个地方使用相同的时间格式化代码,提高了代码的可维护性和可重用性。此外,wxs运行在渲染层,可以减少渲染层和逻辑层之间的通信开销,提高小程序的性能。
只需要三步,就可以做一个格式化时间的过滤器(代码亲测可用)
1 在小程序的工程目录中,创建一个名为“filters”的文件夹,然后在该文件夹下创建一个名为“timeFilter.wxs”的文件,用于实现时间格式化过滤器。
2 在“timeFilter.wxs”文件中,定义一个名为“timeFormat”的函数,用于格式化时间。该函数接收一个时间参数(可以是当前时间、时间戳、毫秒时间戳或Date格式的时间),以及一个格式化字符串参数(例如“yyyy-MM-dd HH:mm:ss”),返回格式化后的时间字符串。
function timeFormat(timestamp, format) {
if (!format) {
format = "yyyy-MM-dd hh:mm:ss";
}
var realDate
if ((timestamp + '').length == 10 || (timestamp + '').length == 13) {
if ((timestamp + '').length == 10) timestamp = timestamp * 1000;
timestamp = parseInt(timestamp);
realDate = getDate(timestamp);
} else {
timestamp = timestamp.replace(getRegExp("T", 'g'), ' ');
timestamp = timestamp.replace(getRegExp("-", 'g'), '/');
realDate = timestamp;
}
var realDate = getDate(timestamp);
function timeFormat(num) {
return num < 10 ? '0' + num : num;
}
var date = [
["M+", timeFormat(realDate.getMonth() + 1)],
["d+", timeFormat(realDate.getDate())],
["h+", timeFormat(realDate.getHours())],
["m+", timeFormat(realDate.getMinutes())],
["s+", timeFormat(realDate.getSeconds())],
["q+", Math.floor((realDate.getMonth() + 3) / 3)],
["S+", realDate.getMilliseconds()],
];
var reg1 = regYear.exec(format);
if (reg1) {
format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));
}
for (var i = 0; i < date.length; i++) {
var k = date[i][0];
var v = date[i][1];
var reg2 = getRegExp("(" + k + ")").exec(format);
if (reg2) {
format = format.replace(reg2[1], reg2[1].length == 1 ?
v : ("00" + v).substring(("" + v).length));
}
}
return format;
}
var regYear = getRegExp("(y+)", "i");
module.exports = {
timeFormat: timeFormat
};
3 在需要使用过滤器的页面的.wxml文件中,引入“timeFilter.wxs”文件,使用<wxs>标签将其定义为一个模块,然后在需要格式化时间的地方使用过滤器。
<wxs module="timeFilter" src="../test/fimeFilter.wxs"></wxs>
<!-- 格式化时间戳 -->
<view>{{timeFilter.timeFormat(1613509857, 'yyyy-MM-dd hh:mm:ss')}}</view>
<!-- 格式化毫秒时间戳 -->
<view>{{timeFilter.timeFormat(1613509857123, 'yyyy-MM-dd hh:mm:ss')}}</view>
<!-- 格式化Date格式的时间 -->
<view>{{timeFilter.timeFormat('2022-02-12T12:00:00', 'yyyy-MM-dd hh:mm:ss')}}</view>
<view>{{timeFilter.timeFormat('2022/02/12 12:00:00', 'yyyy-MM-dd hh:mm:ss')}}</view>
当然,小程序的wxs不仅仅可以格式化时间,还可以用于实现一些数据的计算、格式化、过滤等功能,主要包括以下方面:
- 数据的格式化:可以将时间、货币、数字等数据进行格式化,例如将时间转换为指定格式的字符串,将数字保留指定位数的小数等。
- 数据的计算:可以进行简单的数学运算,例如加减乘除、求余数等。
- 数据的过滤:可以实现对数据的筛选和过滤,例如过滤出符合条件的数组元素、去除字符串中的空格等。
- 数据的操作:可以对数据进行一些简单的操作,例如获取数组的长度、获取字符串的子串等。
需要注意的是,小程序的wxs并不是完整的JavaScript语言,它是在JavaScript的基础上进行了一定的限制和扩展。因此,在使用wxs时需要遵守小程序的规范和限制,例如不能使用全局变量、不能直接访问页面的DOM元素等。
更多关于wxs的详细说明,可以移步官方文档 《WXS介绍》
<view>{{timeFilter.timeFormat('2022-02-12 12:00:00', 'yyyy-MM-dd HH:mm:ss')}}</view> 小程序在ios端用时间2022-02-12的形式下new Date的值为null必须使用2022/2/12的形式 建议在timeFormat上做个处理 date = new Date(time.replace(/-/g, "/"))
太秀了