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

我们在项目中经常会遇到要对一些数据进行格式化处理，比如保留两位小数，把金额元换算成万元展示等等……；这些在vue中都能很好的被我解决，得益于它提供的过滤器filter。但是在微信小程序应该怎么来实现呢？
微信小程序wxs模块就可以实现filter过滤器。

新建.wxs文件

注意不能使用es6语法
通过 module.exports对外暴露内部函数

// /filters/numFormat.wxs
/*
 * ******注意不能用es6*******
*/
//保留两位小数
var fnToFixed = function(num){
    num = num.toFixed(2);
    return num;
};
//传入金额换算成单位万元
var fnMoney = function(money){
    money = parseFloat(money)/10000;
    money = money%1 == 0 ? money : money.toFixed(2);
    return money;
};

module.exports = {
    fnToFixed : fnToFixed,
    fnMoney : fnMoney
}

在wxml页面使用

<wxs></wxs>标签src引入.wxs文件，module值filters为当前 <wxs> 标签的模块名，在wxml中使用。名字你可以自己另起一个，这里我叫filters。

<wxs src="../../filters/numFormat.wxs" module="filters"></wxs>

wxml中，用filters.函数名 调用wxs内部方法

<view>
    <view>
        <view>格式化为两位小数</view>
        <text>{{num1}}</text>------><text>{{filters.fnToFixed(num1)}}</text>
    </view>

    <view>
        <view>格式化为单位万元</view>
        <text>{{num2}}元</text>------><text>{{filters.fnMoney(num2)}}万元</text>
    </view>
</view>

输出结果

结果.png

结束语

1.wxs注意不要使用es6语法
2.wxs的src属性引用相对路径
附上微信小程序中wxs语法参考开发文档