web view中返回上一页，uni.navigateBack()冲突，怎么办

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

这个问题很常见，当 App 使用 web-view 组件加载了一个由 uni-app 编译的 H5 页面时，在 App 端调用 uni.navigateBack() 会优先触发 webview 内部 H5 的路由返回，而不是直接关闭当前的 web-view 页面。

根据知识库中的内容，这是正常的默认行为。DCloud 官方人员明确回复过：“这个是正常的，这样也符合侧滑之类的返回操作”。如果想让 App 直接退出 web-view 页面，而不是回到 H5 的上一页，需要先关闭 webview 再执行返回操作。

解决方案

方案一：在 App 页面中先关闭 webview 再返回（推荐）

在你的 web-view 所在页面的 onBackPress 生命周期中，先获取 webview 对象并关闭它，然后再调用 uni.navigateBack()：

export default {  
  data() {  
    return {  
      webviewObj: null  
    }  
  },  
  onReady() {  
    // #ifdef APP-PLUS  
    // 获取当前页面的 webview 对象  
    var currentWebview = this.$scope.$getAppWebview();  
    // 获取 web-view 组件的 webview 子对象  
    this.webviewObj = currentWebview.children()[0];  
    // #endif  
  },  
  onBackPress(options) {  
    // #ifdef APP-PLUS  
    if (this.webviewObj) {  
      // 先关闭 webview  
      this.webviewObj.close();  
    }  
    // 然后执行 App 的页面返回  
    uni.navigateBack();  
    return true; // 阻止默认返回行为  
    // #endif  
  }  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方案二：使用 H5 与 App 通信，由 App 控制返回

在 H5 页面中，通过 uni.webview.js SDK 通知 App 执行返回操作。参考 在 web-view 加载的 HTML 中调用 uni 的 API：

H5 页面中：

<script type="text/javascript" src="https://static.sdetv.com.cn/uni.webview.1.5.8.js"></script>  
<script>  
  document.addEventListener('UniAppJSBridgeReady', function() {  
    // 通知 App 执行返回操作  
    uni.webView.navigateBack({  
      delta: 1  
    });  
  });  

  // 或者在需要返回的地方调用  
  function backToApp() {  
    uni.webView.navigateBack({  
      delta: 1  
    });  
  }  
</script>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

App 的 web-view 页面中监听 message 事件：

<template>  
  <web-view :src="url" @message="handleMessage"></web-view>  
</template>  

<script>  
export default {  
  methods: {  
    handleMessage(e) {  
      // 收到 H5 的返回指令后，先关闭 webview  
      // #ifdef APP-PLUS  
      var currentWebview = this.$scope.$getAppWebview();  
      var wv = currentWebview.children()[0];  
      if (wv) {  
        wv.close();  
      }  
      // #endif  
      uni.navigateBack();  
    }  
  }  
}  
</script>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方案三：拦截侧滑返回（iOS 左滑、安卓物理返回键）

如果需要实现类似“在 webview 内先返回 H5 的上一页，H5 无法返回时再关闭 webview”的效果，可以在 App 中拦截返回操作，通过 plus 操作 webview 进行 .back() 操作：

onBackPress(options) {  
  // #ifdef APP-PLUS  
  var currentWebview = this.$scope.$getAppWebview();  
  var wv = currentWebview.children()[0];  

  if (wv) {  
    // 尝试让 webview 内的 H5 返回上一页  
    wv.canBack(function(e) {  
      if (e.canBack) {  
        // H5 还有历史记录，执行 H5 内部返回  
        wv.back();  
      } else {  
        // H5 已经是最顶层，关闭 webview 并返回 App 上一页  
        wv.close();  
        uni.navigateBack();  
      }  
    });  
    return true;  
  }  
  // #endif  
  return false;  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方案四：使用插件市场的原生 webview 插件

如果上述方案仍无法满足需求，可以考虑使用插件市场的原生 webview 插件，它们对返回键的控制更加灵活：

• 安卓原生webview，解决uni自带webview返回键监听无效问题
• 安卓原生webviewModule，解决uni自带webview返回键监听无效

注意事项

1. 获取 webview 对象时可能需要延时：如果是首页的 onLoad 调用，需要延时一下才能获取到 webview 对象
2. iOS 和 Android 行为一致：这个问题在 iOS 和 Android 平台上的表现是相同的
3. uni.webview.js 版本：建议使用最新版本的 uni.webview.1.5.8.js，地址：https://gitcode.com/dcloud/uni-app/tree/uni-app-vue2-dev/dist/uni.webview.1.5.8.js