微信小程序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语法参考开发文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 由于微信小程序 技术生态比较闭合,导致很多 现代前端框架很多积累出的成果都没有实现(可能未来会逐一实现). 用惯...
    sherlock221b阅读 33,747评论 2 10
  • 在微信小程序实际开发应用中,后台接口返回数据里面有时会有数据转换,有时候用循环进行转换比较麻烦,这时我就想到了Vu...
    童话_xxv阅读 1,203评论 1 4
  • 引言 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 注意 w...
    OzanShareing阅读 1,426评论 0 3
  • 2.4.2 WXS WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结...
    wangbu2阅读 1,304评论 0 2
  • 从向外寻找到向内寻找。 以前的自己对别人的依赖性很重,情绪化、敏感、多愁善感。这种依赖呢结果可想而知,当“所依赖的...
    Hanna阅读 162评论 0 2