uni-app H5端在钉钉浏览器运行中，顶部原生导航栏标题内容错乱

uni-app H5端在钉钉浏览器运行中，顶部原生导航栏标题内容错乱

开发环境 版本号 项目创建方式
Mac 12.3.1 HBuilderX

产品分类：uniapp/H5

浏览器平台：手机系统浏览器

浏览器版本：钉钉APP6.5.10

示例代码：

{
    "pages": [ 
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "uni-app"  
            }  
        },  
        {  
            "path": "pages/index2/index2",  
            "style": {  
                "navigationBarTitleText": "uni-app2"  
            }  
        },  
        {  
            "path": "pages/index3/index3",  
            "style": {  
                "navigationBarTitleText": "uni-app3"  
            }  
        },  
        {  
            "path": "pages/index4/index4",  
            "style": {  
                "navigationBarTitleText": "uni-app4"  
            }  
        }  
    ],  
    "subPackages": [{  
        "root": "pages/goods-list",  
        "pages": [{  
            "path": "goods-list",  
            "style": {  
                "navigationBarTitleText": "商品列表"  
            }  
        }, {  
            "path": "goods-detail",  
            "style": {  
                "navigationBarTitleText": "商品详情"  
            }  
        }]  
    }],  
    "globalStyle": {  
        "navigationStyle": "custom",  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    }  
}

操作步骤：

{
    "pages": [ 
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "uni-app"  
            }  
        },  
        {  
            "path": "pages/index2/index2",  
            "style": {  
                "navigationBarTitleText": "uni-app2"  
            }  
        },  
        {  
            "path": "pages/index3/index3",  
            "style": {  
                "navigationBarTitleText": "uni-app3"  
            }  
        },  
        {  
            "path": "pages/index4/index4",  
            "style": {  
                "navigationBarTitleText": "uni-app4"  
            }  
        }  
    ],  
    "subPackages": [{  
        "root": "pages/goods-list",  
        "pages": [{  
            "path": "goods-list",  
            "style": {  
                "navigationBarTitleText": "商品列表"  
            }  
        }, {  
            "path": "goods-detail",  
            "style": {  
                "navigationBarTitleText": "商品详情"  
            }  
        }]  
    }],  
    "globalStyle": {  
        "navigationStyle": "custom",  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    }  
}

预期结果：

钉钉浏览器切换路由页面的时候，顶部导航标题能对应正常。

实际结果：

钉钉浏览器切换路由页面的时候，顶部导航标题对应不正常。

bug描述：

uniapp发布H5端，在钉钉浏览器运行。点击进入下一个页面，顶部导航栏显示的标题不正确，具体代码请查看附件demo示例。


更多关于uni-app H5端在钉钉浏览器运行中，顶部原生导航栏标题内容错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

请提供录屏看下表现（上传附件）

更多关于uni-app H5端在钉钉浏览器运行中，顶部原生导航栏标题内容错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传

回复 StarSky: 应该是钉钉浏览器的bug，对spa兼容有问题

录屏附件已上传

有解决方案了吗

用钉钉文档的api去更改头部就可以了，在每个页面的onshow周期里面调用

这个问题解决了吗？

ding-jsapi解决

在 uni-app 的 H5 端运行在钉钉浏览器中时，如果出现顶部原生导航栏标题内容错乱的问题，可能是由于以下几个原因导致的。以下是一些可能的解决方案：

1. 检查页面标题设置

  • 确保在 pages.json 中正确设置了每个页面的标题。例如：
    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}
  • 如果标题是通过 JavaScript 动态设置的，确保在 onLoad 或 onShow 生命周期中正确调用了 uni.setNavigationBarTitle 方法：
    uni.setNavigationBarTitle({
  title: '动态标题'
});

2. 检查钉钉浏览器的兼容性

  • 钉钉浏览器可能对某些 HTML 或 CSS 属性的支持不完全，导致标题显示异常。可以尝试简化页面的 HTML 和 CSS，排除样式冲突的可能性。
  • 使用浏览器的开发者工具（F12）检查页面元素，查看是否有样式覆盖或布局问题。

3. 处理页面加载顺序

  • 确保页面标题在页面加载完成后再进行设置。如果标题设置过早，可能会导致标题显示不正确。可以在 onReady 生命周期中设置标题：
    onReady() {
  uni.setNavigationBarTitle({
    title: '页面加载完成后的标题'
  });
}

4. 检查钉钉 SDK 的集成

  • 如果使用了钉钉 SDK，确保 SDK 的初始化代码正确执行，并且没有与 uni-app 的导航栏设置冲突。
  • 钉钉 SDK 可能会对页面的导航栏进行一些自定义操作，检查是否有相关的代码影响了标题的显示。

5. 使用自定义导航栏

  • 如果原生导航栏问题无法解决，可以考虑使用自定义导航栏。在 pages.json 中禁用原生导航栏，然后在页面顶部自定义一个导航栏组件：
    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom"
      }
    }
  ]
}
回到顶部