onload 中调用 uni.setnavigationbartitle 最稳妥,onshow 失效因原生导航栏已初始化;启用 custom 导航栏时该 api 无效;nvue 不支持;h5 仅改 document.title;标题需清洗、限长、防乱码。

onLoad 里调用 uni.setNavigationBarTitle 才有效
标题动态设置失败,八成是时机错了。该 API 必须在页面生命周期的 onLoad 或之后触发,onShow 里调用大概率无效(尤其是 iOS),因为原生导航栏结构在页面创建时已初始化,不支持运行时重绘。
实操建议:
-
onLoad是最稳妥的时机——能拿到options,也适合配合接口异步设标题(先设“加载中”,再更新) - 别写在
data初始化块或created钩子中,那比生命周期还早,必然失效 - App 端偶发失效可加
setTimeout(() => { uni.setNavigationBarTitle(...) }, 50),不是根治但比重试轻量
检查是否启用了 custom 导航栏
调用后标题完全没反应?先看 pages.json 里对应页面的 style 配置有没有 "navigationStyle": "custom"。一旦启用,原生导航栏被隐藏,uni.setNavigationBarTitle 就失去作用对象。
实操建议:
- 静态配置中删掉
"navigationStyle": "custom",改用系统默认导航栏 - 若必须自定义(比如要加按钮、渐变、胶囊避让),标题就得自己用
<view></view>实现,uni.setNavigationBarTitle完全不用管 - 注意:nvue 页面下该 API 不可用,只能走自定义导航栏方案
H5 平台下它只是改 document.title
别指望它在 H5 上做出原生导航栏效果。uni.setNavigationBarTitle 在 H5 端会直接退化为 document.title = xxx,和地址栏、浏览器标签页有关,和页面内导航栏视觉无关。
实操建议:
- 跨端一致性要求高时,优先静态配
navigationBarTitleText;动态仅用于少数依赖数据的场景 - 需要 H5 标签页标题精准控制,直接写条件编译:
// #ifdef H5document.title = 'xxx'// #endif - 混入统一处理逻辑时,H5 只操作
document.title,其他端才调用uni.setNavigationBarTitle
中文乱码、截断、空格异常怎么防
传参字符串含零宽空格、BOM、连续空格或超长时,部分 Android 厂商系统会渲染异常或静默截断。这不是 bug,是底层限制。
实操建议:
- 标题赋值前强制清洗:
title.trim().replace(/\s+/g, ' ') - 长度控制在 12 字以内(UTF-16 单位,中文占 2),Android 显示上限常为 14~16,超长必省略且不可干预
- 避免从后端字段直拼标题,尤其带用户昵称时,先做基础过滤(如移除控制字符),别依赖
encodeURIComponent解码
onLoad(options) 解析逻辑,或者把 uni.setNavigationBarTitle 写在了 data 初始化里——那一刻连 Vue 实例都还没挂载。











