做前端的人都知道,vue的过滤器是很好用的,特别是在接收后台数据在前台显示的时候
小程序暂时还没有这项方便的功能,不过最近通过花花同学解锁了新的技能
1.用小程序的.wxs文件来模拟vue的过滤器功能
2.在小程序的js文件中使用公共方法来模拟vue的过滤器功能
下面先来讲第一个种方法~
创建一个.wxs文件,我把它起名为common,表示这是一个公用的过滤器
并在这个文件种写入这样一段代码,以订单状态为例
module.exports={
//订单状态过滤
orderStatusFilter:function(param){
var maps = {
cutsomer_toSalerConfirmed:'待付款',
customer_Confirmed:'已付款'
}
return maps[param]
}
}
然后在要用到这个过滤器的.wxml页面里引用wxs文件,就像下面的图片种这样引进来,不过要注意一下路径问题哦
使用起来就非常简单了,像下面这样就好 item.orderStatus就是我要过滤的字段~
是不是非常简单!but也有美中不足的地方,.wxs文件是无法使用小程序api的,这样如果要过滤城市国家这种很多很多的怎么办呢
不要慌张 这时候就可以用第二种方法啦~
第二种方法的先决条件是要与后台配合,让后台传给你可以循环的字段,将后台传过来的那些东西处理一下,变成一个数组,比如像下面这样的
在我的小程序里,我在app.js种请求了一个恶心的借口,在其中提取了这样的字段,并把它变成了这样可爱的数组,顺便存放到了本地存储中(放在本地存储中是因为乐意,也可以放在全局变量中,看你自己的心情)
然后把下面的代码放到一个公共的js中
嗯哼~是不是跟上面那个方法很像,只是把刚刚处理好的数组从本地存储中取出来了而已,使用方法如下,注意要写在js文件中了哦,而不是wxs里
这样就相当与一个麻烦一点的过滤器啦 虽然看起来很麻烦 用起来也很麻烦 不过能用就行了~如果你有更简单的方法,麻烦分享给我吧~