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

Filter过滤器

Vue中提供了相当强大的filter过滤器，可以在html页面用管道符来使用{{date | dateFormat}}，这样我们可以很方便地将日期格式化，或是在显示金额时保留两位小数。

那么我们如何在微信小程序中使用类似于filter的强大功能呢？

watch监听器

上一篇我写到小程序实现watch监听器，可以戳这里查看教程->小程序实现watch监听器，那么是否能用watch监听date，再将格式化后的日期绑定在this.data.dateFormat呢？ 答案是肯定的。

首先在app.js中引入watch.js:

//app.js
const watch = require("./utils/watch.js");
App({
    /**
     * 小程序初始化
     */
    onLaunch: function() {
        
    },
    setWatcher(page){
        watch.setWatcher(page);
    }
})

在index.js中绑定监听器：

//index.js  
Page({
    data: {
        date: "",
        dateFormat: ""
    },
    onLoad() {
        getApp().setWatcher(this);
        this.setData({
            date: new Date().toLocaleDateString()
        })
    },
    watch: {
        date(newValue){
            var dates = newValue.split('/');
            this.setData({
                dateFormat: dates[0] + "年" + dates[1] + "月" + dates[2] + "日"
            })
        }
    },
})

在index.wxml中使用dateFormat显示格式化后的日期：

<!-- page/index/index.wxml -->
<view>{{dateFormat}}</view>

页面显示：

但是细心的同学应该已经发现了这种方式的弊端：

① 格式化的日期只是用于页面显示，需在data中定义显得有些麻烦。

② 不方便重复使用，需要在每个页面单独配置watch，若是大量页面需要相同的逻辑，工程量巨大。

③ date需要修改后才会触发监听器，若是有初始值需要显示，dateFormat是没有值的(也可以专门给dateFormat一个初始值)。

WXS模块

由于微信小程序生态略为封闭，修改源码不太实际，所以{{}}内的管道符号写法目前很难实现，那么我们是否能在{{}}内调用函数来模仿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>

页面显示结果：

是不是很简单呢，赶快在小程序中使用吧！