微信小程序页面使用类似filter函数的wxs语法

luffy54592026-02-26 13:40

在vue框架中，页面上我们展示有些信息的时候，数据有的是从后台返回的，格式相对固定，有些数据还需要我们做个翻译，比如一些状态1/0，我们展示在页面的时候，显示"成功""失败"。还有一些枚举类的值，我们也需要做一个简单的转化，在vue框架里面，我们可以使用过滤器这样的方式，比如：

{{name | toUpperCase()}}

这个方法就是把名字中的字母转大写。虽然这个功能也可以在获取数据的时候，我们通过js代码直接转化，可是通过过滤器的方式，很直观，代码侵入少。

在微信小程序开发这里，也有这样的功能，不过它的使用和过滤器有些区别。微信小程序这里叫wxs语法，转换的代码需要写在wxs代码块内。

wxs语法不同于一般的javascript语法。无法使用es5语法，变量统一使用var声明。不能使用let,const关键字。

另外一个值得关注的地方，关于日期转化，一般而言，我们日期在后台传过来之后，变成一个字符串，这时候，需要格式化，需要先把它变为一个日期对象，wxs语法里面没有new Date()这样的用法，它直接转日期，有一个javascript方法里面没有的方法getDate()。这个是一个大坑。

一般为了简单，直接把wxs代码块放在wxml页面内，如下是一个日期简单转化的方法。

javascript 复制代码

<wxs module="pagefilter">
  var formatDate = function(date) {
    var newDate = getDate(date)
    var year = newDate.getFullYear()
    var month = newDate.getMonth() + 1
    var day = newDate.getDate()
    return year + "-" + month + "-" + day
  }
  module.exports = {
    formatDate: formatDate
  }
</wxs>

页面上使用的时候：

html 复制代码

<view>{{pagefilter.formatDate(expireDate)}}</view>

这个语法和vue中filter用法不一样，需要modulename.exportsmethod的方式调用。

上面方法中getDate()方法就是把字符串格式日期转日期对象格式，在wxs语法中就有效，javascript语法中却没有这个方法：

所以这里是一个大坑，我们在wxs语法中，可以使用大量的javascript语法，可是，new Date(),new RegExp()这样的就无法使用。