微信小程序通过WXS实现共享filter过滤器

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 目前主要是增强 WXML 标签的表达能力。

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/

1、首先我们建立共享filter文件夹，实现一个日期格式化

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

var DateFormat = {
  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: DateFormat.getDate
}

2、在业务页面wxml中使用wxs

<wxs module="dateFormat" src="../../filter/DateFormat.wxs"></wxs>

使用filter

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

微信小程序的架构分为 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。

因为运行在不同线程所以 js与wxs 不能相互引用的。这就有可能在js中使用的公共方法在wxs中需要重新写一份(为了共享filter)，造成代码冗余。