uni.setNavigationBarTitle()只接受纯字符串,不支持Vue过滤器;需将过滤器转为独立函数手动调用,并在onReady/onShow中设置标题;H5端须用document.title且需手动更新;titleNView不解析过滤器,且与navigationStyle冲突。

uni.setNavigationBarTitle() 不接受过滤器,只能传字符串
直接在 uni.setNavigationBarTitle() 里写 {{ timestamp | formatDate }} 是无效的——这个 API 只接收纯字符串,不走 Vue 模板编译流程,也不支持管道语法。所有过滤器都是模板层能力,而导航栏标题设置是原生层调用,两者不在同一执行上下文。
想动态显示格式化后的时间,得先手动调用过滤器函数
你得把过滤器从 Vue.filter 提出来,变成普通函数再调用。比如你定义了 formatDate 过滤器,就不能只靠模板绑定,而要:
- 确保过滤器导出为独立函数(别只挂载在 Vue 上)
- 在
onReady或onShow里手动计算值:const title = formatDate(timestamp, 'yyyy-MM-dd') - 再传给
uni.setNavigationBarTitle({ title })
常见错误是把过滤器写在 filters/index.js 里但没导出函数,只做了 Vue.filter('xxx', ...),结果页面里调不到,报 formatDate is not defined。
H5 端必须用 document.title,且不能用过滤器自动更新
uni.setNavigationBarTitle() 在 H5 完全不生效,它压根没有原生导航栏。你得显式写:document.title = formatDate(timestamp, 'yyyy-MM-dd')。但要注意:
- 这个赋值不会响应式,
timestamp变了,document.title不会自动变 - 如果依赖数据变化更新标题,得在
watch或onUpdated里手动触发 - 微信小程序真机上,若基础库 > 3.4,
setNavigationBarTitle可能静默失败,建议降级测试
pages.json 的 titleNView 不读取 JS 数据,也不能用过滤器
如果你开了 titleNView(App 或 H5),它的 text 字段只认静态字符串或 "{title}" 这种占位符,不解析 Vue 表达式,更不跑过滤器。想让它动态变标题,只能:
- 在
pages.json中配"text": "{title}" - 用
uni.setStorageSync('title', ...)存值 - 在页面
onShow里调uni.setNavigationBarTitle()(仅 App 有效) - H5 和小程序仍需各自降级处理,没法靠一个配置通吃
最易被忽略的是:titleNView 和 navigationStyle 不能混用,后者优先级更高,一设就覆盖前者,导致自定义按钮消失、背景色失效。


















