在微信小程序中使用过滤器

孙泽辉

发布于：2021年9月13日

字数：298字

时长：1分钟

次浏览

微信小程序里的大括号语法竟然不能调用函数，好low啊。

起因

在使用大括号语法时，调用Page里写的formatTime函数

<text>{{ formatTime(item.time) }}</text>

Page({
    // ...
    formatTime(dateStr)  {
     const date = new Date(dateStr)
     const year = date.getFullYear()
     const month = date.getMonth() + 1
     const day = date.getDate()

      return year + "/" + month + "/" + day
    }    
})

然而页面中什么也没显示。。。

经过

遂查文档，WXS是专门解决这个问题的。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 语法参考 | 微信开放文档 (qq.com)

解决步骤：

1. 新建filter.wxs

// utils/filter.wxs
function formatTime(dateStr)  {
    var date = getDate(dateStr)
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()

    return year+"/"+ month+"/"+ day
}

module.exports = {
	formatTime:formatTime,
}

2. 导入filter到wxml，并使用

<text>{{ dateUtil.formatTime(item.time) }}</text>
<wxs module="dateUtil" src="/utils/filter.wxs"></wxs>

结果

完美解决问题！

但，WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

吐槽，const不能用，new Date()不能用，箭头函数不能用

不过，听同学说用uniapp框架写的小程序可以调函数，哭啦。