uni-app 运行到手机上打开外部网页时网页的title会跳一下

uni-app 运行到手机上打开外部网页时网页的title会跳一下

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.12

手机系统：Android

手机系统版本号：Android 6.0

手机厂商：vivo

手机机型：vivo Y55A

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

onLoad(options) { if (options) { let param = JSON.parse(options.param); console.log(param.type); this.url = param.url; this.title = param.type; } setTimeout(() => { uni.setNavigationBarTitle({ title:this.title }) }, 200) },


### 操作步骤：

这是代码 `<web-view :src="url"></web-view>`

这是js `onReady() { setTimeout(() => { uni.setNavigationBarTitle({ title:this.title }) }, 200) }`

pages.json：
```json
"style" :
{
    "navigationBarTitleText":"",
    "enablePullDownRefresh": false,
    "h5":{
        "titleNView":false
    }
}

更多关于uni-app 运行到手机上打开外部网页时网页的title会跳一下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 运行到手机上打开外部网页时网页的title会跳一下的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app WebView 导航栏标题闪烁问题，主要原因是 WebView 加载网页时，网页自身的 title 会与 uni-app 设置的导航栏标题产生冲突。

问题分析：

  1. WebView 加载外部网页时，网页的 <title> 标签内容会尝试覆盖 uni-app 的导航栏标题
  2. 你通过 setTimeout 延迟设置标题，但网页加载完成后其 title 仍会短暂显示
  3. 这导致了标题从初始值 → 网页 title → 你设置的标题 这样的"跳一下"现象

解决方案：

方案1：使用 pages.json 预定义标题（推荐） 在 pages.json 中直接配置该页面的标题：

{
  "path": "pages/your-page",
  "style": {
    "navigationBarTitleText": "你的标题",
    "h5": {
      "titleNView": {
        "titleText": "你的标题"
      }
    }
  }
}

方案2：在 onLoad 中立即设置标题 移除 setTimeout，在 onLoad 中直接设置：

onLoad(options) {
    if (options) {
        let param = JSON.parse(options.param);
        this.url = param.url;
        this.title = param.type;
        
        // 立即设置标题
        uni.setNavigationBarTitle({
            title: this.title
        });
    }
}

方案3：使用 plus.webview 创建 WebView（更彻底） 对于需要更精细控制的情况，可以使用原生 WebView：

onReady() {
    const wv = this.$mp.page.$getAppWebview();
    const currentWebview = plus.webview.currentWebview();
    
    // 创建新的 WebView 并隐藏原生标题栏
    const newWv = plus.webview.create(this.url, '', {
        titleNView: {
            titleText: this.title,
            autoBackButton: true
        }
    });
    
    currentWebview.append(newWv);
}

方案4：隐藏 WebView 默认标题栏 在 pages.json 中彻底禁用原生导航栏，使用自定义导航栏组件：

{
  "style": {
    "navigationStyle": "custom",
    "h5": {
      "titleNView": false
    }
  }
}
回到顶部