uni-app的webview如何获取url的值(完整的)

在uni-app中，如果你需要在Webview组件中获取当前加载的URL值，可以通过监听Webview的loaded事件来实现。loaded事件会在页面加载完成时触发，并返回一个包含URL信息的事件对象。以下是一个完整的示例，展示如何在uni-app的Webview中获取并显示当前加载的URL。

首先，确保你的uni-app项目中已经包含了Webview组件。

1. 在页面的.vue文件中添加Webview组件

<template>
  <view>
    <web-view 
      src="https://example.com" 
      @loaded="onWebviewLoaded" 
      id="my-webview"
      style="width: 100%; height: 100vh;"></web-view>
    <view v-if="loadedUrl">
      <text>Loaded URL: {{ loadedUrl }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadedUrl: ''
    };
  },
  methods: {
    onWebviewLoaded(event) {
      // event.detail.url 是加载完成的URL
      this.loadedUrl = event.detail.url;
      console.log('Loaded URL:', this.loadedUrl);
    }
  }
};
</script>

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

2. 解释代码

• 模板部分：

  • <web-view> 组件用于加载外部网页，src 属性指定了要加载的URL。
  • @loaded="onWebviewLoaded" 监听Webview的loaded事件，当页面加载完成时调用onWebviewLoaded方法。
  • id="my-webview" 为Webview组件设置一个唯一标识符（虽然在这个示例中未使用，但在复杂场景中可能有用）。
  • style="width: 100%; height: 100vh;" 设置Webview组件的样式，使其全屏显示。

• 脚本部分：

  • data 方法返回一个对象，包含一个loadedUrl属性，用于存储加载完成的URL。
  • onWebviewLoaded 方法是loaded事件的回调函数，接收一个事件对象event。通过event.detail.url获取加载完成的URL，并将其赋值给loadedUrl。

• 样式部分：

  • 使用scoped样式确保样式仅应用于当前组件。

3. 注意事项

• 确保你的uni-app项目配置正确，能够访问外部网页。
• 如果需要处理更多Webview事件，可以参考uni-app官方文档中的Webview组件部分。

通过上述代码，你可以在uni-app的Webview组件中获取并显示当前加载的完整URL。