小程序在 wxml 中格式化日期
Background
在写小程序的过程中，经常会用到日期格式化展示的功能，常规的做法是在 js 中计格式化日期内容，添加额外字段，这对后期的UI变更维护并不友好。笔者之前的解决方案是通过自定义组件 <pipe value="{{['datestring or timestamp','dateformat|yyyy/MM/dd']}}"/> 的方式处理日期格式化。且 pipe的 handlerMethods可以扩展。近期接触了 vant-weappUI库，观其code，发现用到了小程序框架wxs脚本，在wxml中引入脚本文件，即可通过脚本定义的方法处理数据，便想尝鲜一下。
Show Me The Code
- /wxs/date.wxs
function format(_date, _fmt) {
var date = _date;
var fmt = _fmt;
if (typeof _date === 'string') {
date = getDate(date.replace(getRegExp('-', 'g'), '/'))
} else if (typeof date === 'number') {
date = getDate(date)
} else {
return '';
}
var o = [
{ reg: 'M+', value: date.getMonth() + 1 },
{ reg: 'd+', value: date.getDate() },
{ reg: 'h+', value: (date.getHours() % 12 === 0) ? 12 : date.getHours() % 12 },
{ reg: 'H+', value: date.getHours() },
{ reg: 'm+', value: date.getMinutes() },
{ reg: 's+', value: date.getSeconds() },
{ reg: 'q+', value: Math.floor((date.getMonth() + 3) / 3) },
{ reg: 'S', value: date.getMilliseconds() }, //毫秒
];
// //年
var yearRegExp = getRegExp('(y+)');
if (yearRegExp.test(fmt)) {
fmt = fmt.replace(yearRegExp, function (a) {
return date.getFullYear().toString().substring(4 - a.length);
});
}
//星期
var weekRegExp = getRegExp('(E+)');
if (weekRegExp.test(fmt)) {
var week = ['日', '一', '二', '三', '四', '五', '六'];
fmt = fmt.replace(weekRegExp, function (a) {
return ((a.length > 1) ? (a.length > 2 ? '星期' : '周') : '') + week[date.getDay()];
});
}
for (var i = 0; i < o.length; i++) {
var exp = getRegExp('(' + o[i].reg + ')');
if (exp.test(fmt)) {
fmt = fmt.replace(exp, function (a) {
return (a.length === 1)
? (o[i].value)
: (('00' + o[i].value).substring(('' + o[i].value).length))
});
}
}
return fmt;
}
module.exports = {
format: format,
};
Tip: wxs 语法不等于 js 语法，哪些语法可以用需要查阅 WXS 语法参考
- /pages/index.html
<wxs src="../wxs/date.wxs" module="date"/>
<van-cell title="上门时间" value="{{date.format(1606280165432,'yyyy.MM.dd EE')}}"/>
<van-cell title="上门时间" value="{{date.format('2020-12-31','yyyy.MM.dd EE')}}"/>
Tip: 引入必须使用相对路径
Conclusion
- wxs 方式处理数据，结构更清晰，但是不能做到一次声明全局使用，且不能通过绝对路径引入。
- 扩展性比较差，且语法比较生硬，不如 es6 来的 happy
- 无法与 js 交互
纵观以上，笔者还是喜欢以自定义组件的方式来处理数据，此处并未考虑性能方面的指标。
