uni-app 的 filters 仅 h5 支持,小程序和 app 平台完全忽略且不报错;应改用 computed 或 methods 实现格式化,并注意 ios 日期兼容性问题。

过滤器在 uni-app 里不生效,基本不是你写错了,而是它根本没被调用——尤其是跨平台时,H5 能跑,小程序或 App 就静默失效。
uni-app 的 filters 在小程序平台默认不支持
uni-app 的 filters 仅在 H5 平台原生支持;微信小程序、App(nvue)、快应用等平台**完全忽略 filters 定义**,也不会报错,页面就“看起来没变”。这是官方明确限制的行为,不是 bug。
- 检查你是否在
mp-weixin或app-plus下调试,却写了filters: { formatDate }—— 这段代码会被直接跳过 -
v-html、rich-text、组件插槽里的内容,更不会经过 filters 处理 - 哪怕你在 H5 上验证通过,切到真机调试时也得重写逻辑
替代方案:用 computed 或 methods 替代 filters
把原本写在 filters 里的逻辑,挪到 computed 或 methods 中,是唯一可靠且跨平台的做法。
- 轻量转换(如截取字符串、转大写)放
computed:响应式强、性能好 - 带参数或需复用的格式化(如日期、金额)放
methods,调用时显式传参:{{ formatDate(item.time, 'yyyy-MM-dd') }} - 避免在
methods里直接操作 DOM 或发请求,保持纯函数特性
全局函数挂载位置必须对,否则真机拿不到
很多人把格式化函数挂到 Vue.prototype 或 this.$options.filters,结果小程序里 this.$formatDate 是 undefined。
- 推荐统一挂到
uni.$date或uni.$utils,在main.js中初始化 - 确保挂载时机早于任何页面实例创建(即在
createApp后、app.mount前) - 注意:在
onLaunch、API 拦截器、store action 等非 Vue 实例上下文中,uni.$xxx不可用,此时必须import工具模块
日期类过滤器最容易踩 iOS 兼容坑
哪怕你把过滤器逻辑挪到了 methods,如果里面直接写 new Date('2026-08-05'),iOS 真机仍会解析失败,返回 Invalid Date。
- 永远先 normalize 字符串:用
.replace(/-/g, '/')或转时间戳再构造Date - 别依赖
Date.parse()直接解析带短横线的 ISO 格式,iOS Safari 不认 - 涉及“刚刚”“昨天”这类相对时间计算,务必用
Date.now()做基准,而不是new Date().getTime(),避免时区偏移
真正麻烦的不是写不出 format 函数,而是你以为它运行了,其实从头到尾都没执行过——尤其当它只在 H5 有效,而你正在调试微信小程序时。











