uni-app 4.31版本nvue内嵌的webview返回后页面点击无反应

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

uni-app 4.31版本nvue内嵌的webview返回后页面点击无反应

测试过的手机：

安卓与IOS

示例代码：

<CL-WebH5View  
    class="webView"  
    ref="webView"   
    :url="webUrl"  
    :isvue3="1"  
    @onProgress="showPross"   
    @onMessage="onReceiveH5Message"  
    @onStart="startLoading"  
    @onEnd="loadDone"  
    @onTitle="titleChange"  
    @onError="loadError" />

操作步骤：

  • 进入nvue的weiview页面，然后再次返回

预期结果：

  • 返回后的页面正常

实际结果：

  • 返回后的页面无法点击

bug描述：

4.31版本nvue内嵌的webview，返回后会导致页面点击无反应。
4.29版本无此次问题



| 项目信息       | 详细信息         |
|----------------|------------------|
| 产品分类       | uniapp/App       |
| PC开发环境操作系统 | Windows          |
| PC开发环境操作系统版本号 | win10            |
| HBuilderX类型  | 正式             |
| HBuilderX版本号 | 4.31             |
| 手机系统       | 全部             |
| 页面类型       | nvue             |
| vue版本        | vue3             |
| 打包方式       | 云端             |
| 项目创建方式   | HBuilderX        |

Harmonyos Next教程
2 回复

我看压缩包里是个视频演示，你代码里的 cl-webview 是怎么封装的，提供一个单页面源码吗，并说明操作步骤把


在uni-app 4.31版本中，如果在nvue内嵌的webview组件中遇到返回后页面点击无反应的问题，这通常是由于页面渲染或事件绑定未能正确恢复导致的。以下是一个简化的代码示例，展示如何在nvue中使用webview组件，并确保返回后页面能够正常响应点击事件。

首先，确保你的nvue页面结构大致如下：

<template>
  <div>
    <stack>
      <page name="home">
        <web-view id="webview" src="https://example.com" @loaded="onWebviewLoaded" @error="onWebviewError"></web-view>
        <button @click="goBack">返回</button>
      </page>
    </stack>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canGoBack: false,
    };
  },
  methods: {
    onWebviewLoaded() {
      // 当webview加载完成时，可以设置一个标志位表示可以返回
      this.canGoBack = true;
    },
    onWebviewError(e) {
      console.error('Webview加载错误:', e);
    },
    goBack() {
      const webview = this.$mp.page.selectComponent('#webview');
      if (webview && this.canGoBack && webview.canGoBack()) {
        webview.goBack();
      } else {
        // 如果无法后退，则执行其他逻辑，比如关闭当前页面或弹出提示
        uni.showToast({
          title: '无法后退',
          icon: 'none',
        });
      }
    },
  },
  onUnload() {
    // 页面卸载时，可以重置一些状态
    this.canGoBack = false;
  },
};
</script>

<style>
/* 添加必要的样式 */
</style>

在这个例子中，我们使用了web-view组件来加载一个外部网页，并通过@loaded事件监听webview的加载完成状态。一旦加载完成，我们设置canGoBack为true，表示此时webview可以执行后退操作。

goBack方法检查canGoBack标志位和webview的canGoBack方法返回值，以确定是否可以执行后退操作。如果不能后退，则显示一个提示。

此外，注意在onUnload生命周期函数中重置状态，以避免潜在的内存泄漏或状态不一致问题。

如果返回后页面仍然无响应，可能需要检查以下几点：

  1. 确保返回操作正确执行，没有遗留在某个未正确渲染的状态。
  2. 检查是否有其他JavaScript错误或冲突影响了页面的正常功能。
  3. 使用开发者工具调试，查看事件绑定是否正确恢复，以及DOM结构是否如预期。

以上代码提供了一个基本的框架，你可以根据实际情况进行调整和优化。

回到顶部