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

WXS实现filter过滤器

ps: 写的不好， 请大家多多指教。谢谢！

• 说到过滤器，不多不说vue中提供了强大filter过滤器， 通过管道符{{ message | capitalize }}使用
• 微信小程序提供 WXS 模块， 结合WXML，可以构建出页面的结构。

API

官方API

模块

• 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

• 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

• 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

使用步骤

1. 新建 .wxs 文件

• 例如： 在util目录下创建一个 filter.wxs文件。
• 在 filter.wxs中编写所需方法并导出。 例：

// 手机号中间4位*
var replaceStar = function (array) {
    var mphone = array.substring(0, 3) + '****' + array.substring(7);
    return mphone;
}

// 保留两位小数
var moneyFormat = function(money) {
    return money.toFixed(2);
}

//导出
module.exports = {
    replaceStar: replaceStar,
    moneyFormat: moneyFormat
}

2. wxml组件中使用

• 通过 <wxs>标签引用

//每个 wxs 模块均有一个内置的 module 对象。
//src引入filter.wxs文件的相对路径, module当前 <wxs> 标签的模块名
<wxs src="../../utils/filter.wxs" module="filter" />

• 页面使用

//通过 模块名.方法
<view wx:if="{{item.mobile != ''}}">{{filter.replaceStar(item.mobile)}}</view>

// total_money: 88.356
<view>费用:{{total_money}}<text>{{filter.moneyFormat(total_money)}}元</text></view>

输出结果

137****2525
88.36

3. 引用需注意如下几点

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。