微信小程序 -- 实现类似于vue中的filter过滤器功能

一. vue过滤器

在vue中，我们知道有个filter过滤器可以对页面数据进行过滤。

如下，先把方法都统一写在一个filters.js文件中，然后在main.js中循环定义全局的过滤器。

filters.js

//格式化价格
exports.formatMoney = function(value){
    if(value || value == 0){
        value = Number(value)
    	return '￥' + value;
    }
}

main.js

//注册filter
import filters from './filters/filters.js'
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

使用格式：数据 | 方法

二. 小程序中的“过滤器”

在小程序中，WXS模块可以实现类似vue过滤器一样效果的功能。

文档描述：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
WXS 语法参考：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

从文档中，我们了解到WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。语法就不一一解释了。举例之前把一些注意点写出来，如下：
1. <wxs>标签有两个属性module和src。

 2. .wxs文件和<wxs>标签都是一个独立的模块，因此里面的变量和函数是私有，对外不可见。因此通过module.exports，将内部的私有变量与函数暴露出去，外部才能使用。

举例：如下的num是在js中定义的，值为120。

写法1：在<wxs>标签里写

<view>
  <wxs module="filter">
    var formatPrice = function(num){
      return '￥'+num;
    }
    module.exports = {
      formatPrice: formatPrice
    }
  </wxs>
  <view>{{filter.formatPrice(num)}}</view>
  <view>{{num}}</view>
</view>

写法2：创建一个.wxs文件，如 filter.wxs，然后用<wxs>标签的src属性引入
filter.wxs文件内容

var formatPrice = function(num){
  return '￥'+num;
}
module.exports = {
  formatPrice: formatPrice
}

wxml内容：

<view>
  <wxs src="./filter.wxs" module="filter"></wxs>
  <view>{{filter.formatPrice(num)}}</view>
  <view>{{num}}</view>
</view>

效果图：

注意：

 如下中：

1. 小程序js中，new可要可不要。比如 var date = Date();

2. 小程序js中，如果用RegExp()方法，则里面的 \ 需要转义，否则会报错，转义就是在 \ 前面再加 \

	小程序 js	wxs
date类型	var date = new Date()	var date = getDate()
正则	var reg = '/^1\d{10}$/' var reg = new RegExp('^1\\d{10}$') var reg = new RegExp('^1\\d{10}$','g')	var reg = getRegExp('^1\d{10}$') var reg = getRegExp('^1\d{10}$','g')