小程序模拟VUE过滤器

做前端的人都知道，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里

这样就相当与一个麻烦一点的过滤器啦 虽然看起来很麻烦 用起来也很麻烦 不过能用就行了～如果你有更简单的方法，麻烦分享给我吧～