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

背景

最近开发小程序的过程中，发现需求中有大量需要转换时间的地方，而且每个地方转换的时间格式都不一样，于是就想，小程序中是否有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<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;
}


module.exports = {
  dateFormat: dateFormat
};

wxml

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

<wxs module="dateUtil" src="../../wxs/timeUtil.wxs"></wxs>
<!--index.wxml-->
<view class="container">
  
  <view>
    <!-- 不指定格式则默认输出：yyyy-MM-dd hh:mm:ss 格式 -->
    {{dateUtil.dateFormat('1537578367970')}}
  </view>
  <view>
    <!-- 第一个参数为当前时间戳，第二个参数为指定时间输出格式，如下 -->
    {{dateUtil.dateFormat('1537578367970','yyyy/MM/dd')}}
  </view>
  

  

</view>

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

完美！！！

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

背景

正文

wxs

wxml

猜你喜欢