微信小程序中使用过滤器

妖狐艹你老母 2022-10-23 11:13 179阅读 0赞

主要是借助wxs文件，具体说明看文档：[WXS | 微信开放文档][WXS _]  
直接上如何使用：

1.  在根目录下新建filter文件夹  
    创建你需要的过滤器文件，后缀名为.wxs  
    ![在这里插入图片描述][20210305094009720.png]
2.  编写过滤器代码

// wxs不支持es6的语法
    var statusFilter = { 
      // 定义一个函数作为过滤器 参数status为传来的原始值
      getStatus: function(status) { 
        if(status !== '' && status != undefined) { 
          // 操作之后再将值return回去
          return status === 1 ? '结算成功' : '结算失败';
        } else { 
          return status
        }
      }
    }
    
    // 导出过滤器 这段代码必写
    module.exports = { 
      自定义名1: statusFilter.getStatus
    }

1.  在wxml文件中使用

// 导入过滤器
    <wxs module="自定义名2" src="../../filter/settleRecord/statusFilter.wxs"></wxs>
    
    // 使用过滤器
    <text>{
       {自定义名2.自定义名1(item.status)}}</text>

1.  完成。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]

> 参考文档：  
> [微信小程序踩坑（三） —— 在小程序中使用过滤器 ][_ _]  
> [微信小程序 使用filter过滤器几种方式][_filter]

[WXS _]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
[20210305094009720.png]: /images/20221023/c0dba9310bde4b48b414218415e536fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]: /images/20221023/8b1f71c2b05541dabac5aad25177fc54.png
[_ _]: https://www.cnblogs.com/lzb1234/p/12533136.html
[_filter]: https://www.cnblogs.com/10manongit/p/12726225.html