微信小程序WXS模拟过滤器

在微信小程序实际开发应用中，后台接口返回数据里面有时会有数据转换，有时候用循环进行转换比较麻烦，这时我就想到了Vue里面的过滤器，可是小程序没有官方过滤器，这时候可以用 WXS来模拟过滤器。
首先来看一下WXS是什么吧。
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面结构。
1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

一、直接在页面渲染
1.wxml页面中：

<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>

页面输出：
hello world

二、在wxs文件中导出
1.在utils文件夹里面新增一个filter.wxs文件

// 价格格式化  过滤器的使用
function price(num) {
  if (parseFloat(num).toString() == "NaN") {
    return 0.00;
  } else {
    var price = num / 100;
    return price.toFixed(2);
  }
}
module.exports = {
  price: price
}

2.在js的data里面定义list

//data里面
  data: {
    list: [{
        title: '红富士',
        money: 1000
      },
      {
        title: '猕猴桃',
        money: 1234
      },
      {
        title: '红心柚',
        money: 2345
      },
    ]
  },

3.在wxml中引入

//引入filter.wxs
<wxs module="filter" src="../utils/filter.wxs" />
<view class='title'> 水果特价：</view>
<view class='item' wx:for="{{list}}" wx:key="index">
    <text>{{item.title}}:</text>
    <text>{{filter.price(item.money)}} (￥)</text>
</view> 

页面输出：
水果特价：
红富士：10.00 (￥)
猕猴桃：12.34 (￥)
红富士：23.45 (￥)

注意:
1.wxs文件不能被js文件引用,能引用wxs文件；
2.wxs 中不能调用 javascript 中定义的函数或者变量，也不能调用小程序提供的API，他的运行环境和 javascript 是隔离的。
4.wxs目前似乎并不支持ES6（至少let不能使用）；
5.只能使用 var 来定义变量，表现形式和 javascript 一样，会有变量提升;
6.不支持使用 new Date()，获取当前日期要用getDate() 。

haha.gif