董路飞

发布：2023-07-13 11:56
更新：2023-12-08 16:25
阅读：785

【报Bug】uni.setNavigationBarTitle() 测试在微信小程序和App的 onLoad 和 onReady 都生效，H5 都失效

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows [版本 10.0.22000.1696]

HBuilderX类型： Alpha

HBuilderX版本号： 3.8.7

浏览器平台： Chrome

浏览器版本： 109.0.5414.129

项目创建方式： HBuilderX

示例代码：

<script setup>  
    import { onLoad, onReady } from "@dcloudio/uni-app"  
    import { ref, inject } from "vue"  
    import { useThemeStore } from "@/store/theme.js"  
    import { storeToRefs } from "pinia"  

    // 页面生命周期  
    onLoad((e) => {  
        console.log("【 进入 detail-onLoad 】", e.data)  

        uni.setNavigationBarTitle({  
            title: "巴拉巴拉",  
            complete(e) {  
                console.log(" setNavigationBarTitle-complete ", e)  
            },  
        })  
    })  
    onReady(() => {  
        console.log("【 进入 detail-onReady 】")  
        // uni.showNavigationBarLoading()  
        // uni.setNavigationBarColor({  
        //  frontColor: "#ffffff",  
        //  backgroundColor: "#ff0000",  
        //  animation: {  
        //      duration: 400,  
        //      timingFunc: "easeIn",  
        //  },  
        // })  

        // uni.setNavigationBarTitle({  
        //  title: '巴拉巴拉2',  
        //  complete(e) {  
        //      console.log(" setNavigationBarTitle-complete ", e)  
        //  },  
        // })  

        // setTimeout(() => {  

        // }, 3000)  
    })

操作步骤：

如上代码，在APP和微信小程序都成功，在h5端 complete回调里打印的是成功ok，但是页面并没有效果，查看控制台html元素，里面也是空的（并不是颜色问题）。

预期结果：

希望和文档写的一样H5支持此API

实际结果：

API回调正常，页面并没有渲染。同一套代码，在微信小程序和App是渲染正常导航栏标题，在h5端一直是空的

bug描述：

微信内置浏览器和自己最新版谷歌浏览器都测试过了。h5端此 uni.setNavigationBarTitle API未生效

2023-07-13 11:56 负责人:无分享

6 个回复

董路飞 (作者) - 搜索小程序麻丝和 App 麻丝

哦，我知道 h5 端为啥没有了，它设置到标题去了，没有设置到导航栏。就是网页页签的标题。怪不得我导航栏返回箭头右边一直什么文本都没有。应该也在导航栏设置的。不然就禁掉 H5 端的导航栏，全去依赖 h5 端自带浏览器的返回和网页标题

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序

使用api你把成功和失败回调都写上，好排查错误

董路飞 (作者) - 搜索小程序麻丝和 App 麻丝

success 和 complete 都是输出 {errMsg: "setNavigationBarTitle:ok"} fail没触发

奇怪同样的代码我放到重新开的空项目，h5 正常

董路飞 (作者) - 搜索小程序麻丝和 App 麻丝

找到原因了。【官方修复下】：
是 manifest.json 配置的暗黑模式 + theme.json 影响 h5 动态设置标题

manifest.json 里面一段配置：

    "h5": {  
        "darkmode": true,  
        "router": {  
            "mode": "history" // 路由跳转模式，支持 hash、history  
            // "base":"/h5/", // 应用基础路径，默认值/  
        },  
        "optimization": {  
            "prefetch": true, // 资源预取  
            "preload": true, // 资源预加载  
            "treeShaking": {  
                "enable": true  
            }  
        },  
        "devServer": {  
            "port": 3000, // 前端开发服务端口,uni-app 默认 5173，Vue2 8080；Vue3 3000     
            "disableHostCheck": true // 禁用 Host 检查  
        }  
    },

theme.json 配置：

{  
    "dark": {  
        "navBgColor": "#191919", // 导航栏背景颜色（同状态栏背景色,HexColor 类型）"#000"  
        "navTxtStyle": "white", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white  
        "bgColor": "#222", // 下拉显示出来的窗口的背景色（HexColor 类型)  
        "bgTxtStyle": "dark", // 下拉 loading 的样式，仅支持 dark / light  
        "tabFontColor": "#666", // tab 上的文字默认颜色（HexColor 类型）  
        "tabSelectedColor": "#fff", // tab 上的文字选中时的颜色（HexColor 类型）  
        "tabBgColor": "#191919", // tab 的背景色（HexColor 类型）"#000"  
        "tabBorderStyle": "white" // tabbar 上边框的颜色，小程序只能 black/white，H5和APP支持其他颜色值  

        // "iconPath1": "image/icon1_dark.png",  
        // "selectedIconPath1": "image/selected_icon1_dark.png",  
        // "iconPath2": "image/icon2_dark.png",  
        // "selectedIconPath2": "image/selected_icon2_dark.png"  
    },  
    "light": {  
        "navBgColor": "#fff",  
        "navTxtStyle": "black",  
        "bgColor": "#eee",  
        "bgTxtStyle": "dark",  
        "tabFontColor": "#aaa",  
        "tabSelectedColor": "#000",  
        "tabBgColor": "#fff",  
        "tabBorderStyle": "black"  

        // "iconPath1": "image/icon1_light.png",  
        // "selectedIconPath1": "image/selected_icon1_light.png",  
        // "iconPath2": "image/icon2_light.png",  
        // "selectedIconPath2": "image/selected_icon2_light.png"  
    }  
}

董路飞 (作者) - 搜索小程序麻丝和 App 麻丝

很奇怪的现象，暗黑模式应该只是影响颜色，为什么使动态设置的文本为空（浏览器控制台可查看标签元素内容）
我注释 "darkmode": true, 和删除 theme.json 文件，h5 动态设置导航栏标题立马生效

DCloud_UNI_LXH

升级版本，这个问题修复过了

2023-08-15 10:28
l***@163.com

回复 DCloud_UNI_LXH:咨询一下这个升级版本是指升级HbuilderX的版本吗，还是升级@dcloudio/uni-h5这个依赖的版本

2023-09-16 13:01
DCloud_UNI_LXH

回复 l***@163.com: 如果是 hx 项目，则升级 hx ，如果是 cli ，则需要升级 cli 整体的版本

2023-10-07 19:48

2***@qq.com - 很个性的签名~~~

麻了,app端动态设置标题不生效了

DCloud_UNI_LXH

什么版本？详细说明一下，你这样简短的描述定位不了问题

2023-12-12 17:47

要回复问题请先登录或注册

【报Bug】uni.setNavigationBarTitle() 测试在微信小程序和App的 onLoad 和 onReady 都生效，H5 都失效

操作步骤：

如上代码，在APP和微信小程序都成功，在h5端 complete回调里打印的是成功ok，但是页面并没有效果，查看控制台html元素，里面也是空的（并不是颜色问题）。

预期结果：

希望和文档写的一样H5支持此API

实际结果：

API回调正常，页面并没有渲染。同一套代码，在微信小程序和App是渲染正常导航栏标题，在h5端一直是空的

bug描述：

6 个回复

manifest.json 里面一段配置：

theme.json 配置：

公告

相关问题

【报Bug】uni.setNavigationBarTitle() 测试在微信小程序和App的 onLoad 和 onReady 都生效，H5 都失效

操作步骤： 如上代码，在APP和微信小程序都成功，在h5端 complete回调里打印的是成功ok，但是页面并没有效果，查看控制台html元素，里面也是空的（并不是颜色问题）。

预期结果： 希望和文档写的一样H5支持此API

实际结果： API回调正常，页面并没有渲染。同一套代码，在微信小程序和App是渲染正常导航栏标题，在h5端一直是空的

bug描述：

相关链接 ：

与内容相关的链接

6 个回复

manifest.json 里面一段配置：

theme.json 配置：

公告

相关问题

操作步骤：

如上代码，在APP和微信小程序都成功，在h5端 complete回调里打印的是成功ok，但是页面并没有效果，查看控制台html元素，里面也是空的（并不是颜色问题）。

预期结果：

希望和文档写的一样H5支持此API

实际结果：

API回调正常，页面并没有渲染。同一套代码，在微信小程序和App是渲染正常导航栏标题，在h5端一直是空的

相关链接：