uniapp加载webview之后需要返回2次是什么原因

在uniapp中加载webview页面后，按返回键需要点击两次才能返回上一页，这是什么原因导致的？
webview内嵌的是普通H5页面，没有额外的前进操作，但安卓和iOS都出现同样的情况，代码中没有手动处理返回逻辑。
请问如何解决只能返回一次的问题？

2 回复

可能是webview内部页面有跳转，导致需要返回两次才能退出。建议检查webview的src链接是否有重定向或嵌套页面，或使用uni.navigateBack()手动控制返回逻辑。


在UniApp中，加载WebView后需要返回两次的问题，通常是由于页面栈管理不当导致的。以下是常见原因及解决方案：

常见原因

  1. 页面栈嵌套问题：WebView页面可能被多次推入页面栈，导致需要多次返回才能退出。
  2. WebView内部导航：WebView加载的网页内部有历史记录，第一次返回是网页内的后退，第二次才是退出WebView页面。
  3. 路由配置问题：在pages.json中配置了重复的路由或使用了reLaunch等跳转方式，导致页面栈异常。

解决方案

  1. 检查页面跳转方式：

    • 避免使用uni.navigateTo多次跳转到同一WebView页面。改用uni.redirectTo替换当前页面，或使用uni.reLaunch关闭所有页面再打开。
    • 示例代码：
      // 推荐使用redirectTo替代navigateTo
uni.redirectTo({
  url: '/pages/webview/webview?url=' + encodeURIComponent(url)
});

  2. 处理WebView内部返回：

    • 在WebView页面中，监听返回按钮事件，并先判断WebView内部是否可以后退。
    • 示例代码（在WebView页面的Vue文件中）：
      export default {
  data() {
    return {
      webview: null
    };
  },
  onLoad(options) {
    // 创建WebView
    this.webview = uni.createWebViewContext('myWebview');
  },
  onBackPress() {
    // 监听返回按钮
    this.webview.canBack((res) => {
      if (res.canBack) {
        // WebView内部可后退，则执行后退
        this.webview.back();
      } else {
        // 内部无历史记录，直接退出页面
        uni.navigateBack();
      }
    });
    return true; // 阻止默认返回行为
  }
};

  3. 优化路由配置：

    • 检查pages.json，确保WebView页面没有重复定义，跳转逻辑清晰。

总结

通过调整页面跳转方式、处理WebView内部导航以及检查路由配置，可以解决需要返回两次的问题。核心在于管理好页面栈和WebView的历史记录。

回到顶部