uni.setnavigationbartitle必须在onload或onready中调用,且需确保navigationstyle非custom、h5端单独处理document.title、标题需清洗限长。

uni.setNavigationBarTitle 必须在 onLoad 或 onReady 中调用
标题没变,八成是调早了。这个 API 不是“写了就生效”,它依赖原生导航栏已就绪。写在 data、created 甚至 onLoad 之前的位置,必然静默失败。
实操建议:
-
onLoad是最稳妥的时机:能拿到路由参数,也适合先设“加载中”,再异步更新真实标题 -
onReady也可用,但没必要——除非你明确需要 DOM 渲染完成后再改(比如标题要响应某个动画状态) - 别在
onShow里反复调:安卓可能闪一下,iOS 直接忽略(原生导航栏结构已锁定) - App 端 vue3 项目中,
onReady触发稍晚,若仍失败可加setTimeout(() => uni.setNavigationBarTitle({ title }), 50)
启用 navigationStyle: "custom" 后 uni.setNavigationBarTitle 完全无效
一旦 pages.json 里配了 "navigationStyle": "custom",原生导航栏就被移除,uni.setNavigationBarTitle 就像对空气喊话——没对象可作用。
实操建议:
- 检查 pages.json 对应页面的
style配置,确认没写"navigationStyle": "custom" - 若必须自定义(比如要加按钮、搜索框、胶囊避让),标题就得自己用
<view></view>实现,此时uni.setNavigationBarTitle彻底弃用 - 自定义时务必处理状态栏:用
uni.getSystemInfoSync().statusBarHeight或 CSS 变量env(safe-area-inset-top)顶高容器,否则标题被遮住
H5 平台下它只是 document.title,不是“导航栏”
在 H5 端,uni.setNavigationBarTitle 不会生成任何视觉上的导航栏,只改浏览器标签页和 history.state.title。指望它做出小程序那样的顶部标题效果,注定失望。
实操建议:
- 跨端统一处理时,必须做平台判断:
// #ifdef H5document.title = 'xxx'// #endif// #ifndef H5uni.setNavigationBarTitle({ title: 'xxx' })// #endif - 不要在 H5 上依赖 success/fail 回调做逻辑分支——它永远走 success,但视觉上毫无变化
- 若需 H5 页面内显示标题栏,得自己写一个
<header></header>组件,和原生导航栏无关
标题内容要清洗、限长、防截断
传入的字符串看着正常,真机上却显示异常或被省略号吞掉,常见于中文标题超长、含不可见字符或连续空格。
实操建议:
- 传参前做清洗:
title.trim().replace(/\s+/g, ' ') - 长度控制在 12 字以内(微信/支付宝小程序实际渲染上限约 14~16 UTF-16 单位,中文占 2)
- 避免从后端直拼标题,尤其带用户昵称时,先过滤 emoji 和控制字符,再赋值
- 测试时别只看开发者工具:真机 iOS 对标题截断更敏感,Android 厂商系统(如华为 EMUI)可能直接丢字











