wxs 之 dateFormat

小程序在 wxml 中格式化日期

Background

在写小程序的过程中，经常会用到日期格式化展示的功能，常规的做法是在 js 中计格式化日期内容，添加额外字段，这对后期的UI变更维护并不友好。笔者之前的解决方案是通过自定义组件 的方式处理日期格式化。且 pipe的 handlerMethods可以扩展。近期接触了 vant-weappUI库，观其code，发现用到了小程序框架wxs脚本，在wxml中引入脚本文件，即可通过脚本定义的方法处理数据，便想尝鲜一下。

Show Me The Code

1. /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 语法参考

2. /pages/index.html

Tip: 引入必须使用相对路径

Conclusion

1. wxs 方式处理数据，结构更清晰，但是不能做到一次声明全局使用，且不能通过绝对路径引入。
2. 扩展性比较差，且语法比较生硬，不如 es6 来的 happy
3. 无法与 js 交互

纵观以上，笔者还是喜欢以自定义组件的方式来处理数据，此处并未考虑性能方面的指标。