微信小程序过滤器 filter的使用（过滤器 filter）

我们在实际的项目开发中避免不了传输数据与展示数据不同，直接修改原数据显然是不合适。这个时候如果有过滤器的话，可以很方便的解决我们的问题，但是遗憾的是小程序目前没有过滤器，只能通过自己来模拟。下面就提供两种在小程序中使用过滤器的方法：

方法1 通过在js中自定义函数来实现过滤功能

data : {originTime : 1811748300578
}getTime (){    return FormatUtil.getDate(this.data.originTime );
}

方法2 使用wxs，wxs 目前主要是增强 wxml 标签的表达能力；方式如下

a) 在项目的目录中新建一个filte的文件夹（文件夹的名字可以随便起，不过一般使用filter）

b) 在该文件夹下新建一个后缀为.wxs的文件（该文件主要是用来实现相关功能）

c) 在该文件中，编写我们要实现的功能代码即可（本例中实现的是商品的价格显示保留两位小数）

var unit = {reduceSecond: function(text) {var cates = text;if(cates.indexOf("|")!=-1){var catesArr = cates.split("|");var pinStr = "";catesArr.forEach(function(objs){pinStr = pinStr+' '+ objs.substring(objs.indexOf(":")+1);})console.log(pinStr);}else{var pinStr = "";var catesArr = cates.split(":");catesArr.forEach(function(objs){pinStr+=catesArr[1];})}return pinStr;},saveSecond:function(text){var getNum = text*1;var postNum = getNum.toFixed(2);return postNum;}
}
module.exports = {reduceSecond: unit.reduceSecond,saveSecond:unit.saveSecond
}

d) 在我们要用到的wxml页面中，引入该文件，引入方式如下：

需要注意的是要在引入文件的同时给wxs标签添加module属性，方便我们在下面使用

e) 在需要过滤的地方使用即可实现

效果：

<view>         <text class="cate-price">￥{{unit.saveSecond(salePrice/100)}}</text><text class="diaPrice">￥{{unit.saveSecond(productInfo.marketPrice/100)}}</text></view>

以上就是微信小程序中实现过滤器的两种方法，对你有帮助的话，给个赞吧欢迎交流！

微信小程序过滤器 filter的使用（过滤器 filter）相关推荐

微信小程序 CSS filter（滤镜）的使用示例
前言之前在看七月老师的视频的时候,看到了有一个样式是-webkit-filter,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下 ...
微信小程序 php毛玻璃,微信小程序 CSS filter（滤镜）的使用示例详解
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下面 ...
vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
微信小程序中实现过滤器
微信小程序中的过滤器文章目录微信小程序中的过滤器前言一.WXS 简介 1. 什么是wxs 2. wxs的应用场景 3. wxs和JavaScript的关系 4. wxs的特点二.使用步骤 1 ...
当微信小程序遇上filter~
在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读 ...
微信小程序 php毛玻璃,当微信小程序遇上filter~
在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读 ...
微信小程序过滤html,当微信小程序遇上filter~(示例代码)
在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读 ...
php mysql特殊符号过滤微信小程序_微信小程序数据过滤（filter）方法
因为微信小程序的wxml和js的内部实现机制是分开编译的.所以在wxml是没办法调用js的函数的.这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据做一些特殊处理.比如我们从后端获取 ...
微信小程序数据过滤（filter）方法
因为微信小程序的wxml和js的内部实现机制是分开编译的.所以在wxml是没办法调用js的函数的.这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据做一些特殊处理.比如我们从后端获取 ...

微信小程序过滤器 filter的使用（过滤器 filter）

微信小程序过滤器 filter的使用（过滤器 filter）相关推荐

最新文章

热门文章