uni-app Vue3某个页面里只有一个web-view组件，断网访问时系统返回键无法退出该页面

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

uni-app Vue3某个页面里只有一个web-view组件，断网访问时系统返回键无法退出该页面

示例代码：

onBackPress(({  
    from  
}) => {  
    console.log('执行力')            //输出  
    console.log(uniShare.isShow)  //输出  
    if (uniShare.isShow) {  
        console.log('执行力')   //不输出  
        uniShare.hide()  
        return true;  
    }  

           //...........error  
})

操作步骤：

  • 断网打开带有web-view的页面，系统键无法返回

预期结果：

  • 可以正确返回

实际结果：

  • 无法返回

bug描述：

APP安卓，具体鸿蒙3.0，Vue3某个页面里面只有一个web-view组件，当断网访问该页面时，使用系统返回键无法退出该页面（包括顶部原生导航栏的返回键），页面监听了onBackPress，使用自定义基座调试发现报error，项目配置了自定义404错误页面。

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win11专业版
HBuilderX类型 正式
HBuilderX版本 4.29
手机系统 Android
手机版本号 Android 13
手机厂商 华为
手机机型 安卓14，15
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

Image Image


Harmonyos Next教程
2 回复

这个问题还没人回复吗？


在uni-app中使用Vue3时，如果某个页面只包含一个<web-view>组件，并且希望在断网访问时能够通过系统返回键退出该页面，可以通过监听页面的onUnload或onHide事件来实现。由于<web-view>组件在加载外部网页时会接管页面的生命周期，所以我们需要一些技巧来确保系统返回键能正确触发页面的卸载或隐藏事件。

以下是一个示例代码，展示了如何在uni-app中实现这一功能：

<template>
  <view>
    <web-view :src="webViewUrl" @loaded="onWebViewLoaded" ref="webView"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://example.com' // 替换为实际的URL
    };
  },
  methods: {
    onWebViewLoaded() {
      // 监听网络连接状态
      const checkNetwork = () => {
        if (!navigator.onLine) {
          // 断网处理，这里我们尝试隐藏或卸载web-view页面
          this.$refs.webView.style.display = 'none'; // 隐藏web-view（此方法可能不总是有效，因为web-view是原生组件）
          // 或者尝试强制页面卸载，但注意这可能影响用户体验
          // uni.navigateBack({ delta: 1 }); // 返回上一页，如果这是唯一页面则可能无效
          // 另一种方法是通过路由跳转或显示一个错误页面
          this.$navigateToErrorPage();
        } else {
          // 恢复显示web-view
          this.$refs.webView.style.display = 'block';
        }
        // 定期检查网络连接状态
        setTimeout(checkNetwork, 5000); // 每5秒检查一次
      };
      checkNetwork();
    },
    $navigateToErrorPage() {
      // 跳转到错误页面或执行其他逻辑
      uni.redirectTo({
        url: '/pages/error/error' // 替换为实际的错误页面路径
      });
    }
  },
  onUnload() {
    // 页面卸载时的处理逻辑，比如清理定时器等
    console.log('Page unloaded');
  },
  onHide() {
    // 页面隐藏时的处理逻辑
    console.log('Page hidden');
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

注意：

  1. 由于<web-view>是原生组件，直接通过CSS隐藏它可能不会生效。如果隐藏<web-view>的需求无法实现，可以考虑通过路由跳转的方式处理断网情况。
  2. 定期检查网络连接状态的方法（如checkNetwork函数）可能会带来一定的性能开销，需要根据实际情况调整检查频率或采用更高效的网络监听方案。
  3. 在实际项目中，应确保错误页面或其他跳转逻辑的存在，并提供良好的用户体验。
回到顶部