微信小程序在模板循环使用filter过滤器几种方式

由于微信小程序生态略为封闭，修改源码不太实际，所以{{}}内的管道符号写法目前很难实现，那么我们是否能在{{}}内调用函数来模仿filter的功能呢？然而微信小程序和Vue Angular等不同，并不能在{{}}内调用自定义函数，甚至toString() parseInt()等js内置函数都无法调用，这一点也坑害了不少开发人员。

但如今有了WXS模块，我们可以用其编写脚本函数，在wxss页面中引入并调用，官方文档戳这里->WXS·小程序

我们来写两个过滤器函数，一个实现日期格式，另一个实现金额保留两位小数。

首先在utils目录下创建一个filter.wxs   

在filter.js中编写这两个函数并导出：

// filter.wxs
var dateFormat = function(date) {
    var dates = date.split('/');
    return dates[0] + "年" + dates[1] + "月" + dates[2] + "日";
}
var moneyFormat = function(money) {
    return money.toFixed(2);
}
 
/*
 * 导出
 */
module.exports = {
    dateFormat: dateFormat,
    moneyFormat: moneyFormat
}

index.js中定义date和money：

//index.js  
Page({
    data: {
        date: "2018/8/5",
        money:280.8888888
    }
})

index.wxss中引入wxs模块并使用：

<!-- page/index/index.wxml -->
<!-- src引入filter.wxs, module给模块起名 -->
<wxs src="../../utils/filter.wxs" module="filter" />
<!-- 调用filter模块里的dateFormat函数 -->
<view>{{filter.dateFormat(date)}}</view>
<!-- 调用filter模块里的moneyFormat函数 -->
<view>{{filter.moneyFormat(money)}}</view>