uni-app如何定义全局过滤器-uni-app-PHP中文网

vue.filter 仅在 h5 端有效，小程序和 app 端因渲染机制不支持管道语法而失效；跨端应改用纯函数封装+显式调用或 computed，金额等场景优先使用 intl.numberformat。

uni-app如何定义全局过滤器

Vue.filter 在 Vue 2 模式下可用，但仅限 H5 端有效；小程序（微信/支付宝/字节）和 App 端基本不执行，别依赖它做跨端格式化。

为什么全局过滤器在小程序里不生效

不是你写错了，是 uni-app 编译机制决定的：Vue.filter 注册的过滤器只在 Vue 2 的 template 编译阶段被 H5 渲染器识别，而小程序端使用自定义组件树 + JSON 数据驱动，| 语法根本不会被解析——模板里写 {{ date | formatDate }}，真机上就原样输出，不报错也不执行。

main.js 里写 Vue.filter 有用吗

只对 H5 有效，其他端无效。常见错误现象：

Vue.filter('formatDate', ...) 写了，H5 正常，微信开发者工具里没反应
页面里用 {{ timestamp | formatDate }}，小程序真机调试时显示 NaN-NaN-NaN 或直接空字符串
支付宝小程序构建后过滤器完全消失，控制台也无 warning

原因：各端底层渲染引擎不支持 filter 管道语法，且 uni-app 小程序平台未做 polyfill。

真正能跨端用的替代方案

放弃 filters 对象和 Vue.filter，改用函数封装 + 显式调用：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

在 @/utils/filters.js 里导出纯函数：

export const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

在页面 setup 中导入并使用：

import { formatDate } from '@/utils/filters'
// ...
const formattedDate = formatDate(item.createTime)

需要模板中直接用？用计算属性或 computed：

const displayDate = computed(() => formatDate(props.item.time))

金额、千分位等更复杂场景，优先用 Intl.NumberFormat 实例，别手写正则——它在微信基础库 2.19.0+、支付宝 10.2.80+、iOS Safari 和 Android Chrome 均稳定支持。

如果项目必须用 Vue 2 且只跑 H5

可以保留 Vue.filter，但注意两个坑：

new Date(date) 传入字符串时，iOS Safari 对 "2022-03-08" 格式支持差，建议统一转成时间戳或加兼容处理
getDay() 返回的是星期几（0–6），不是日期，容易误写成 ndate.getDay() 导致显示“2022-3-2”这种错误结果

正确写法是 ndate.getDate()，这个细节在多个博客示例里都写错了，复制即翻车。