目录

背景

正文 

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<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>

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

完美!!!

Logo

前往低代码交流专区

更多推荐