微信小程序中实现过滤器

微信小程序中的过滤器

---

---

前言

        在使用vue中，我们知道直接使用fliter就可以实现过滤器的功能，但是在原生微信小程序中没有这个概念，官方给出了一种 WXS 脚本语言，下面我来介绍一下在小程序中如何使用它来实现过滤器功能。

---

一、WXS 简介

1. 什么是wxs

     wxs(WeiXin Script) 是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。

2. wxs的应用场景

     wxml中无法调用在页面的js中定义的函数，但是wxml可以调用wxs中定义的函数，因此，小程序中wxs的典型应用场景是‘过滤器’

3. wxs和JavaScript的关系

• wxs的语法类似于JavaScript，但是wxs和JavaScript时完全不同的两种语言
• wxs有自己的数据类型
• wxs不支持类似于ES6及以上的语法
• wxs遵守CommonJS规范

4. wxs的特点

• 与JavaScript不同

• 不能作为组件的时间回调

• 隔离性
  wxs的运行环境和其他JavaScript代码是隔离的，
  wxs不能调用js中定义的函数，
  wxs不能调用小程序提供的API

• 性能好
  在IOS设备上，小程序内wxs会比JavaScript代码块2-20倍,
  在Android中，二者相差不大

二、使用步骤

在对数字的处理中，经常会将 2000000 ——> 2,000,000.00 下面来实现它：

1.定义 .wxs 文件

wxs代码可以编写在以wxs为后缀的文件中

var formatNum = function (str) {
    if (str == undefined || str == '0' || str == '') {
        return '0.00'
    }
    var newStr = "";
    var count = 0;
    var str = str.toString()
    if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
                newStr = str.charAt(i) + "," + newStr;
            } else {
                newStr = str.charAt(i) + newStr;
            }
            count++;
        }
        str = newStr + ".00"; //自动补小数点后两位
        return str
    } else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
                newStr = str.charAt(i) + "," + newStr;
            } else {
                newStr = str.charAt(i) + newStr; //逐个字符相接起来
            }
            count++;
        }
        str = newStr + (str + "00").substring((str + "00").indexOf("."), (str + "00").indexOf(".") + 3);
        return str
    }
}

module.exports ={
    toLower:toLower
}

2.在 .wxml 文件中引用

• 定义外联的wxs脚本

在wxml中引入：

<wxs src="../../utils/filter.wxs" module="wxs"></wxs>

参数说明：

• src为.wxs文件的路径；
• module为文件的别名；
• 使用wxs.methods(data)来实现过滤器效果；

3.使用过滤器

<view style="font-size: 56rpx;">￥{{wxs.formatNum(totalsum)}}</view>

---

总结

        以上就是实现微信小程序实现过滤器功能，本文仅仅简单介绍了 WXS 的使用，而 WXS 还可以减少通信的次数，让事件在视图层（Webview）响应，还有其他场景同样适用，期待着大家分享。