uni-app h5中webview使用uni.setNavigationBarTitle设置导航栏标题不生效

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app h5中webview使用uni.setNavigationBarTitle设置导航栏标题不生效

示例代码

<template>
<view>
<web-view src="https://www.baidu.com/"></web-view>
</view>
</template>

<script>
export default {
  data() {
    return {
      navigatorTitle: ""
    };
  },
  // 导航栏标题不显示
  // onLoad(event) {
  //   if (event.title) {
  //     this.navigatorTitle = event.title;
  //     uni.setNavigationBarTitle({
  //       title: this.navigatorTitle
  //     });
  //   }
  // },
  // 导航栏标题不显示
  // onReady() {
  //   if (this.navigatorTitle) {
  //     uni.setNavigationBarTitle({
  //       title: this.navigatorTitle
  //     });
  //   }
  // },
  // 此种设置字符串可以生效
  // onReady() {
  //   if (this.navigatorTitle) {
  //     uni.setNavigationBarTitle({
  //       title: "45464646"
  //     });
  //   }
  // }
}
</script>

<style lang="scss">
</style>

操作步骤

代码发布后访问,页面连接,微信安卓和苹果分别打开链接,观察是否正常显示

预期结果

微信内:安卓端和苹果端打开都显示导航栏标题

实际结果

微信内:安卓端打开后不显示导航栏标题,苹果正常

bug描述

h5中webview页面使用uni.setNavigationBarTitle设置导航栏在安卓微信端无效(苹果正常).
无效场景在于动态设置,如果设置标题为字符串常量值的话是正常的.
参考过其他帖子,之前是在onLoad中设置,尝试过onReady生命周期和延迟设置,都无法实现动态设置.

开发环境信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 浏览器平台 浏览器版本
HBuilderX Windows win10 正式 3.7.9 微信内置浏览器 安卓版本

Harmonyos Next教程
4 回复

没有理解，是指 webview 这个网页内部的样式，还是 webview 页面的样式？普通的页面空白 button 切换是否正常


导航栏标题不显示,下图所示

导航栏标题不显示,下图所示

在uni-app中，uni.setNavigationBarTitle 方法通常用于设置原生导航栏的标题。然而，在H5平台中，由于页面运行在浏览器中，原生导航栏并不存在，因此 uni.setNavigationBarTitle 方法在H5上不会生效。为了在H5中自定义导航栏，你需要采用其他方法，比如使用CSS和JavaScript来模拟一个自定义的导航栏。

以下是一个简单的示例，展示如何在H5中使用HTML、CSS和JavaScript来创建一个自定义导航栏，并动态设置其标题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Navigation Bar</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .navbar {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #007aff;
            color: white;
            height: 44px; /* 模拟原生导航栏高度 */
            padding: 0 16px;
            box-sizing: border-box;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .navbar-title {
            flex: 1;
            text-align: center;
        }
        .content {
            padding-top: 60px; /* 确保内容不被导航栏遮挡 */
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="navbar-title" id="navbar-title">默认标题</div>
    </div>
    <div class="content">
        <p>这里是页面内容。</p>
        <button onclick="changeTitle('新标题')">更改标题</button>
    </div>

    <script>
        function changeTitle(newTitle) {
            document.getElementById('navbar-title').innerText = newTitle;
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个固定的导航栏，并使用JavaScript函数 changeTitle 来动态更改导航栏的标题。当用户点击按钮时，导航栏的标题将从“默认标题”更改为“新标题”。

这种方法虽然不如直接使用 uni.setNavigationBarTitle 简单，但在H5平台上是一种有效的替代方案。通过这种方式，你可以在H5应用中实现类似于原生导航栏的功能，并能够灵活地控制其外观和行为。

回到顶部