评论

用小程序wxs做一个时间格式化的过滤器

用WXS格式化时间

为什么用wxs格式化时间呢?

使用小程序的wxs格式化时间可以使代码更简洁、易读,并且可以避免在多个地方使用相同的时间格式化代码,提高了代码的可维护性和可重用性。此外,wxs运行在渲染层,可以减少渲染层和逻辑层之间的通信开销,提高小程序的性能。


只需要三步,就可以做一个格式化时间的过滤器(代码亲测可用


1 在小程序的工程目录中,创建一个名为“filters”的文件夹,然后在该文件夹下创建一个名为“timeFilter.wxs”的文件,用于实现时间格式化过滤器。


2 在“timeFilter.wxs”文件中,定义一个名为“timeFormat”的函数,用于格式化时间。该函数接收一个时间参数(可以是当前时间、时间戳、毫秒时间戳或Date格式的时间),以及一个格式化字符串参数(例如“yyyy-MM-dd HH:mm:ss”),返回格式化后的时间字符串。

function timeFormat(timestamp, format) {
  if (!format) {
    format = "yyyy-MM-dd hh:mm:ss";
  }
  
  var realDate
  if ((timestamp + '').length == 10 || (timestamp + '').length == 13) {
    if ((timestamp + '').length == 10) timestamp = timestamp * 1000;
    timestamp = parseInt(timestamp);
    realDate = getDate(timestamp);
  } else {
    timestamp = timestamp.replace(getRegExp("T", 'g'), ' ');
    timestamp = timestamp.replace(getRegExp("-", 'g'), '/');
    realDate = 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);
  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;
}

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

module.exports = {
  timeFormat: timeFormat
};


3 在需要使用过滤器的页面的.wxml文件中,引入“timeFilter.wxs”文件,使用<wxs>标签将其定义为一个模块,然后在需要格式化时间的地方使用过滤器。

<wxs module="timeFilter" src="../test/fimeFilter.wxs"></wxs>


<!-- 格式化时间戳 -->
<view>{{timeFilter.timeFormat(1613509857, 'yyyy-MM-dd hh:mm:ss')}}</view>


<!-- 格式化毫秒时间戳 -->
<view>{{timeFilter.timeFormat(1613509857123, 'yyyy-MM-dd hh:mm:ss')}}</view>


<!-- 格式化Date格式的时间 -->
<view>{{timeFilter.timeFormat('2022-02-12T12:00:00', 'yyyy-MM-dd hh:mm:ss')}}</view>
<view>{{timeFilter.timeFormat('2022/02/12 12:00:00', 'yyyy-MM-dd hh:mm:ss')}}</view>




当然,小程序的wxs不仅仅可以格式化时间,还可以用于实现一些数据的计算、格式化、过滤等功能,主要包括以下方面:

  1. 数据的格式化:可以将时间、货币、数字等数据进行格式化,例如将时间转换为指定格式的字符串,将数字保留指定位数的小数等。
  2. 数据的计算:可以进行简单的数学运算,例如加减乘除、求余数等。
  3. 数据的过滤:可以实现对数据的筛选和过滤,例如过滤出符合条件的数组元素、去除字符串中的空格等。
  4. 数据的操作:可以对数据进行一些简单的操作,例如获取数组的长度、获取字符串的子串等。


需要注意的是,小程序的wxs并不是完整的JavaScript语言,它是在JavaScript的基础上进行了一定的限制和扩展。因此,在使用wxs时需要遵守小程序的规范和限制,例如不能使用全局变量、不能直接访问页面的DOM元素等。


更多关于wxs的详细说明,可以移步官方文档 《WXS介绍》

最后一次编辑于  2023-02-15  
点赞 3
收藏
评论

3 个评论

  • 意塑
    意塑
    2023-02-15
    <view>{{timeFilter.timeFormat('2022-02-12 12:00:00', 'yyyy-MM-dd HH:mm:ss')}}</view>
    小程序在ios端用时间2022-02-12的形式下new Date的值为null必须使用2022/2/12的形式
    
    建议在timeFormat上做个处理 date = new Date(time.replace(/-/g,  "/"))
    
    2023-02-15
    赞同 1
    回复 4
    • 启年
      启年
      2023-02-15
      已采纳,蟹蟹
      2023-02-15
      回复
    • 阿白
      阿白
      01-10回复启年
      你好 有最新版的代码吗?参考一下 谢谢了
      01-10
      回复
    • 启年
      启年
      01-10回复阿白
      文章内的代码就是最新的
      01-10
      回复
    • 阿白
      阿白
      01-15
      采用文章内的代码 格式化这样的 2024-01-15T16:26:28.982+08:00 报这个提示?
      01-15
      回复
  • showms
    showms
    2023-02-15

    太秀了

    2023-02-15
    赞同 1
    回复
  • Halcyon
    Halcyon
    2023-10-26
    scroll-view 滚动时 timeFormat方法会一直响应这个是为什么
    
    2023-10-26
    赞同
    回复
登录 后发表内容