微信小程序使用过滤过滤器的几种方式

由于微信小程序相对封闭的技术生态，很多现代前端框架积累的很多成果都没有实现(也许以后会一个个实现)。总是很难习惯现代小程序。

如果你需要结果，请直接看最后的WXS

#### ##查看过滤器过滤器理解为管道处理。你扔给我一组数据，通过各种类型的流水线处理产生新的数据，但不会影响对原始数据的修改，最后展现给用户。

现有的前端框架过滤器一般为：

时间| dateTime('yyy-mm-dd ')使用|作为管道运算符传递参数进行序列化。

缺陷：

到目前为止，还没有针对小程序官方的流水线实现方法。这里有几个选择供大家选择。

直接修改原数据

请求完成后，对返回值数据进行数据处理，如抽象出一个_formatListData方法对返回值进行二次处理。

_ format listdata(list){ return list . map((item)={ let date=format util . getdatetime(item .分娩)；item . filter分娩=`${date.y}-${date。m }-$ { date . d } `；退货项目；}}}此方法将在原始数据中添加一个新的字段filter分娩(原始字段为分娩)。最后，显示屏还将向视图显示过滤器分娩，许多需要过滤器的字段将以这种方式处理。显然对于一些业务过滤器来说是比较好的，如果遇到需要共享的过滤器，会比较尴尬。

ES6 get

数据： { time : 1511748300571 } get time(){ return formatutil . getdate(this . data . time)；}通过get方法过滤字段的显示。只能操作对象，但数组中的项目很弱。

WXS

微信小程序的架构分为app-service和page-frame，分别运行在不同的线程上。您在开发过程中编写的所有JS都在应用服务线程中运行，而每个页面的WXML/WXSS都在页面框架中运行。应用服务和页面框架之间通过桥接协议(包括setData调用、canvas指令和各种DOM事件)的通信涉及消息序列化、跨线程通信和evaluateJavascript()。这种架构的优点是主业务线程和显示界面是分离的，即使主业务线程很忙，也不会阻塞用户在页面框架上的交互。一个小程序可以有多个页面框架(webview)，页面之间切换的动画比SPA更流畅。缺点是服务JS不能在页面框架上调用。跨线程通信非常昂贵，不适合需要频繁通信的场景。JS不能直接控制DOM。作者：陆链接：

知道了wxs设计的初衷，我们也就知道自己能做什么了。目前wxs主要是增强wxml标签的表达能力。

Ps :运行在不同的线程中，所以js和wxs不能互相引用。这使得可以在js中使用公共方法，并在wxs中重写它们(以便共享过滤器)，从而导致代码冗余。

通过wxs实现共享滤波器：

首先，我们设置一个共享过滤文件夹，实现的日期格式。

WXS实现日期格式(不能使用es6语法)

var DateFr={ getDate:函数(time，splitStr) { if(！时间)返回“”；var date=getDate(时间)；var M=date . getmonth()1；var y=date . getfullyear()；var d=date . GetDate()；if(M ^ 10)M=' 0 ' M；if(D10)d=' 0 ' d；if (splitStr)返回y splitStr M splitStr d；否则返回{ y: y，M: M，d :d }；} } module . exports={ getdate 3360 deterfr . getdate }引用了业务页面wxml中的wxs。

Wxs模块=' datefr' src='./././filter/datefr.wxs'/wxs使用筛选器。

文本{{datefr。gettime(项。createdat，' :')}}/text

结尾

WXS基本符合滤镜：的场景。

共享过滤器场景使用3个服务过滤器。许多场景使用1，3简单服务过滤数据。非阵列场景使用2个小程序。路还很长，还需要努力。