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

因为微信小程序 技术生态比较闭合，致使不少 现代前端框架不少积累出的成果都没有实现(可能将来会逐一实现). 用惯了现代 再耍小程序 总感受很不顺手.

须要结果的请直接看最后的WXS

View Filter

filter 理解为管道加工处理, 你扔给我一组数据 通过各类不一样类型的管道加工 产出新的数据 可是又不会影响修改原数据, 最终展现给用户.

现有前端框架filter通常:

time | dateTime('yyy-mm-dd')

使用 | 做为管道符 传递参数进行序列化

缺陷:

截止目前,小程序官方并无管道实现方式,如下列出了替代几种方案，供你们选择使用.

直接修改原数据

在请求完成以后 对返回值data进行一次数据处理 好比 抽象一个_formatListData方法对 返回进行二次处理.

_formatListData(list) {
     return list.map((item) => {
          let date = FormatUtil.getDateTime(item.childBirth);
          item.filterChildBirth = `${date.y}-${date.M}-${date.d}`;
      return item;
    }
}

这种方式会给原数据添加新字段 filterChildBirth (原字段为 childBirth) . 最终展现也是显示filterChildBirth 到view上面，多个须要filter的字段都经过这种方式去处理,很明显 对一些业务型filter倒还好 若是遇到filter须要 共享 就比较坑.

ES6 get

data : {
  time : 1511748300571
}

 get time (){    
  return FormatUtil.getDate(this.data.time);
}

经过get方法来实现对字段显示过滤. 只能操做对象 对数组中的item 比较无力.

WXS

微信小程序的架构分为 app-service 和 page-frame，分别运行于不一样的线程。你在开发时写的全部 JS 都是运行在 app-service 线程里的，而每一个页面各自的 WXML/WXSS 则运行在 page-frame 中。app-service 与 page-frame 之间经过桥协议通讯（包括 setData 调用、canvas指令和各类DOM事件），涉及消息序列化、跨线程通讯与evaluateJavascript()。这个架构的好处是：分开了业务主线程和显示界面，即使业务主线程很是繁忙，也不会阻塞用户在 page-frame 上的交互。一个小程序能够有多个 page-frame （webview），页面间切换动画比SPA更流畅。坏处是：在 page-frame 上没法调用业务 JS。跨线程通讯的成本很高，不适合须要频繁通讯的场景。业务 JS 没法直接控制 DOM。
做者：鲁小夫
连接：https://www.zhihu.com/questio...

了解了wxs 设计初衷，咱们也就知道能作什么事情了.
wxs 目前主要是加强 wxml 标签的表达能力

ps : 由于运行在不一样线程因此 js与wxs 不能相互引用的. 这就有可能在js中使用公共方法 在wxs中须要从新写一份(为了共享filter) 形成代码冗余.

经过wxs 实现共享filter:

1. 首先咱们创建共享filter文件夹,实现一个日期格式化

1. WXS 实现日期格式化（es6语法不能使用)

   var DateFr = {
   
       getDate: function (time, splitStr) {
   
      if (!time) return '';
   
      var date =getDate(time);
      var M = date.getMonth() + 1;
      var y = date.getFullYear();
      var d = date.getDate();
   
      if (M < 10) M = "0" + M;
      if (d < 10) d = "0" + d;
   
      if (splitStr)
        return y +splitStr + M +splitStr+d;
      else
        return {
          y: y,
          M: M,
          d: d
        };
        }
      }
   
      module.exports = {
        getDate: DateFr.getDate
      }

2. 在业务页面wxml中引用wxs

   <wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>

   使用filter

   <text >{{dateFr.getTime(item.createdAt,':')}}</text>

   结尾

   wxs 基本知足filter的场景:

共享filter场景 采用3业务filter不少场景 采用1,3简单业务filter 数据非数组型场景 采用2小程序还有很长的路要走,仍需继续努力.