uni-app nvue页面overrideUrlLoading不生效，同样的代码在vue文件中就没问题

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

uni-app nvue页面overrideUrlLoading不生效，同样的代码在vue文件中就没问题

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 13.6.8
HBuilderX类型 正式
HBuilderX版本号 4.24
手机系统 iOS
手机系统版本号 iOS 17
手机厂商 苹果
手机机型 ip 15 pro
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

setTimeout(() => {
    var pages = getCurrentPages();
    var page = pages[pages.length - 1];
    var currentWebview = page.$getAppWebview();
    var url = currentWebview.children()[0].getURL();
    console.log('=== url ===', url);
    var wv = currentWebview.children()[0];
    wv.overrideUrlLoading({
        mode: 'reject',
        match: '.*'
    }, function(e) {
        console.log('reject url: ' + e.url);
        uni.navigateTo({
            url: `/pages/xxx/xxx?weburl=${e.url}`
        })
    });
}, 400)

从 "console.log(’=== url ===’, url);"这里就开始报错url is undefined 。就算换成下面这种也不行，overrideUrlLoading的回调函数不执行。

setTimeout(() => {
    var pages = getCurrentPages();
    var page = pages[pages.length - 1];
    var currentWebview = page.$getAppWebview();

    currentWebview.overrideUrlLoading({
        mode: 'reject',
        match: '.*'
    }, function(e) {
        console.log('reject url: ' + e.url);
        uni.navigateTo({
            url: `/pages/xxx/xxx?weburl=${e.url}`
        })
    });
}, 400)

操作步骤：

无

预期结果：

正常运行

实际结果：

无

bug描述：

在nvue页面overrideUrlLoading不生效，同样的代码在vue文件中就没问题


Harmonyos Next教程
2 回复

nvue webview不支持overrideUrlLoading方法


在uni-app中，nvue页面与vue页面在处理Web视图相关事件时存在一些差异，这可能是由于nvue使用的是Weex引擎，而vue页面使用的是Vue框架和H5引擎。overrideUrlLoading是一个在Web视图中处理URL加载事件的方法，用于拦截页面中的链接跳转。在nvue页面中，由于引擎的不同，处理这类事件的方法可能有所不同。

首先，确保你在nvue页面中正确使用了Weex提供的API来处理URL加载。在nvue中，没有直接的overrideUrlLoading方法，但你可以通过监听Web组件的事件来实现类似的功能。以下是一个使用nvue页面中的<web-view>组件并监听其loading事件的示例代码：

<template>
  <div>
    <web-view id="webview" src="https://example.com" @loading="onLoading"></web-view>
  </div>
</template>

<script>
export default {
  methods: {
    onLoading(event) {
      const { url } = event.detail;
      console.log('Loading URL:', url);
      // 在这里可以拦截并处理URL，例如阻止默认行为或重定向
      // 如果需要阻止加载，可以尝试使用以下逻辑（注意：实际效果可能受Weex引擎限制）
      if (url.includes('unwanted-path')) {
        // 阻止加载或执行其他逻辑
        uni.showToast({
          title: 'Blocked URL',
          icon: 'none'
        });
        // 尝试停止加载（注意：Weex的web-view可能不支持直接停止加载）
        // this.$refs.webview.stopLoading(); // 假设有stopLoading方法，但Weex可能不支持
      }
      // 注意：由于Weex的限制，直接阻止加载可能不可行，可能需要其他策略，如页面内JS干预
    }
  }
}
</script>

<style scoped>
/* 添加样式 */
</style>

请注意，由于nvue使用Weex引擎，其对Web视图的控制和vue页面中的H5引擎有所不同。在Weex中，<web-view>组件的API和功能可能较为有限，直接阻止URL加载可能不像在H5中那样直接。如果Weex的<web-view>组件不支持直接阻止加载，你可能需要在加载的网页内部通过JavaScript来干预URL的跳转行为。

此外，考虑到uni-app和Weex的更新迭代，建议查阅最新的官方文档或社区讨论，以获取关于如何在nvue页面中处理类似问题的最新信息和最佳实践。

回到顶部