微信小程序 封装全局过滤器

本文主要是介绍微信小程序 封装全局过滤器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序 封装全局过滤器

参考官方文档 ：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

作用：往往后端会返回一个数字，比如1，我们根据数字1对应后端数据枚举中的value值在页面中渲染出desc的值。有人会说，直接if else 判断等于1就显示轮播图片，等于2就显示商品卡片等。这样写死到时候后端ModuleTypeEnum里面的数据变化 ，页面就得改，不好维护。所以过滤器是最好的办法

后端给的枚举数据

 "ModuleTypeEnum": [
	      {
	        "value": 2,
	        "desc": "轮播图片"
	      },
	      {
	        "value": 3,
	        "desc": "商品卡片"
	      },
	      {
	        "value": 4,
	        "desc": "导航"
	      },
	      {
	        "value": 5,
	        "desc": "图片卡片"
	      },
	      {
	        "value": 6,
	        "desc": "文本标语"
	      }
 ]

过滤器的使用：

filter.wxs:

  // 封装过滤器
  /* 注： <1> <wxs> 模块只能在定义模块的 WXML 文件中被访问到 
          <2> <wxs> 模块不支持es6语法
  */ 
 var filterData = function(value,array){
    for(var i = 0;i<array.length;i++){
      if(value = array[i].id){
        return array[i].item
      }
    }
  }
  module.exports = {
    filterData:filterData
  }

所需页面中的.wxml:

<!-- 引入 -->
	<wxs src='../../utils/filter.wxs' module='filter'/>
	
<!-- 使用 -->
	<view>{{filter.filterData(value,array)}}</view>

所需页面中的.js:

Page({
  data:{
    value:1,
    array:[
        {id:1,item:'第一'},
        {id:2,item:'第二'},
        {id:3,item:'第三'},
    ],
  }
 })

这篇关于微信小程序 封装全局过滤器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！