微信小程序-wxs实现时间格式化过滤器（正则）

目录

背景

正文 

wxs 

wxml

---

 

• 背景

最近开发小程序的过程中，发现需求中有大量需要转换时间的地方，而且每个地方转换的时间格式都不一样，于是就想，小程序中是否有Vue的过滤器一样的方式，直接在输出到html时进行时间格式化操作，这样可以节省很多的时间花在处理数据中的时间格式化上，毕竟大量的数据都是以数组的形式传给前端，如果在pageJs中处理需要大量的循环操作，性能低且繁琐！

• 正文 

言归正传，小程序中到底有没有类似Vue的过滤器呢！答案是很明显的，小程序那么强大的东东，怎么可能不支持这玩意儿呢！在此处，我们需要使用到小程序中的一个wxs的文件辅助我们实现过滤器功能。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

wxs文件比较特殊，他不是单纯的javascript脚本语言，而是微信自己出的一套语言规范，其中有很多javascript种可以正常使用的功能，如new Date(),/\d*/gi等在这里都有另外一种使用方式。具体详见官方文档：

wxs微信官方解释文档

我们的过滤器就需要依赖这个wxs,废话不多说，咱直接贴代码吧。

wxs 

首先，我们创建一个wxs文件，此处命名为：timeUtil.wxs

var formatNumber = function(n){
  n = n.toString()
  return n[1] ? n : '0' + n
}

var regYear = getRegExp("(y+)", "i");

var dateFormat = function(timestamp,format){
  if (!format) {
    format = "yyyy-MM-dd hh:mm:ss";
  }
  timestamp = parseInt(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);
  // console.log(reg1[0]);
  if (reg1) {
    
    format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));
  }
  for (var i=0;i

wxml

我们定义好了我们的过滤器之后，就需要在wxml中进行调用

  
  
    
    {{dateUtil.dateFormat('1537578367970')}}
  
  
    
    {{dateUtil.dateFormat('1537578367970','yyyy/MM/dd')}}
  
  

  

好了，过滤器已经绑定好了，来看看输出结果是否是我们的预期：

完美！！！