小程序数据过滤的实现

场景应用

微信小程序的wxml和js的内部实现机制是分开编译的，在wxml是没办法调用js的函数的。导致WXML缺少一个我们常用的功能，没有办法在视图层对数据进行格式化处理。
比如我们从后端获取到一个包含了时间戳数据的数组，需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式，在Vue, Angular之类的前端Web框架中，一般在视图层都提供了如filter之类相应比较好用的方案。微信小程序推出了wxs类型文件解决这类问题的

实现方式

新建filter.wxs文件(一般作为公共方法存在)


var formatDate = function (timestamp, option) {
  var date = getDate(parseInt(timestamp));
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();
  if (option == 'notime') {  //不需要时间
    return [year, month, day].map(formatNumber).join('-');
  }
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}

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

module.exports = {
  formatDate: formatDate,
}

在wxml文件中使用

1
2
3

<wxs src='../../utils/filter.wxs' module='filter' />
<view>日期：{{filter.formatDate('1599013002483')}}</view>
<view>日期：{{filter.formatDate('1599013002483', 'notime')}}</view>

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数

引用的时候，要注意如下几点：
- 只能引用 .wxs 文件模块，且必须使用相对路径。
- wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
- 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行
了解更多，参照小程序官方文档(wxs是不同于js文件的。所以很多js的api是不支持的)
- To Learn More…