本文主要是介绍微信小程序WXS实现filter过滤器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
WXS实现filter过滤器
ps: 写的不好， 请大家多多指教。谢谢！
- 说到过滤器，不多不说
vue中提供了强大filter过滤器， 通过管道符{{ message | capitalize }}使用 - 微信小程序提供 WXS 模块， 结合
WXML，可以构建出页面的结构。
文章目录
- WXS实现filter过滤器
- API
- 模块
- 使用步骤
- 1. 新建 `.wxs` 文件
- 2. wxml组件中使用
- 输出结果
- 3. 引用需注意如下几点
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模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
这篇关于微信小程序WXS实现filter过滤器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
