uni-app 中一个vue页面存在多个web-view时 获取、入参等异常

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

uni-app 中一个vue页面存在多个web-view时 获取、入参等异常

操作步骤：

  • 一个vue 中循环webview即可复现

预期结果：

  1. 多个web-view循环时，id不一样
  2. :webview-styles=“webviewStyles(index)” 当延迟加载时【即：loading 变更为true】，则index 为当前；并且创建的webView 宽高按照当前执行；
  3. 接收消息@message 回调时，能否在EventHandler中添加属性 标识那个web-view 即id;

实际结果：

  1. 多个web-view循环时，通过console.log( this.$scope.$getAppWebview().children() ) 查看发现所有的id都一样【致命bug 导致我无法删除对应Webview】
  2. 多个web-view循环时，@message=“receiveMessage($event,index)”, 此时 index永远都时0；
  3. :webview-styles=“webviewStyles(index)” 当延迟加载时【即：loading 变更为true】，则index 同上；并且创建的webView 宽高按照上一个执行；
  4. 接收消息@message 回调时，我无法知道是哪个webView 进行回调的。

bug描述：

问题：

  1. 多个web-view循环时，通过console.log( this.$scope.$getAppWebview().children() ) 查看发现所有的id都一样【致命bug 导致我无法删除对应Webview】
  2. 多个web-view循环时，@message=“receiveMessage($event,index)”, 此时 index永远都时0；
  3. :webview-styles=“webviewStyles(index)” 当延迟加载时【即：loading 变更为true】，则index 同上；并且创建的webView 宽高按照上一个执行；
  4. 接收消息@message 回调时，能否在EventHandler中添加属性 标识那个web-view 即id;

使用场景：

我们需要对接第三方的界面，我们通过接口获取到：首页、购物车、我的等界面，我们只能通过webView 打开相应的界面，他们通过uni.postMessage发送消息获取定位、图片等信息。

附件

index.zip

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 家庭中文版 23H2
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 14
手机厂商 小米
手机机型 Redmi Note 13 5G 必现
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

Harmonyos Next教程
1 回复

在uni-app中，当一个Vue页面包含多个<web-view>组件时，管理和获取这些<web-view>的内容、参数传递等确实会变得复杂。这是因为<web-view>主要用于嵌入外部网页，而外部网页与宿主页面之间的通信需要通过特定的机制来实现。

以下是一个简单的代码示例，展示如何在uni-app中实现多个<web-view>组件之间的通信和参数传递。需要注意的是，<web-view>的通信主要依赖于postMessage API。

Vue页面代码示例

<template>
  <view>
    <web-view ref="webview1" src="https://example1.com" @message="handleMessage1"></web-view>
    <web-view ref="webview2" src="https://example2.com" @message="handleMessage2"></web-view>
    <button @click="sendMessageToWebview1">Send Message to Webview 1</button>
    <button @click="sendMessageToWebview2">Send Message to Webview 2</button>
  </view>
</template>

<script>
export default {
  methods: {
    sendMessageToWebview1() {
      this.$refs.webview1.evalJS(`window.postMessage({data: 'Hello from app to webview1'}, '*');`);
    },
    sendMessageToWebview2() {
      this.$refs.webview2.evalJS(`window.postMessage({data: 'Hello from app to webview2'}, '*');`);
    },
    handleMessage1(event) {
      console.log('Message from webview1:', event.detail.data);
    },
    handleMessage2(event) {
      console.log('Message from webview2:', event.detail.data);
    }
  }
}
</script>

注意事项

  1. 通信机制：<web-view>组件通过window.postMessage方法发送消息，宿主页面通过监听@message事件接收消息。
  2. 安全性：在postMessage的第二个参数中，'*'表示接受所有来源的消息。在实际应用中，应指定具体的来源以提高安全性。
  3. evalJS方法：evalJS方法用于在<web-view>中执行JavaScript代码，这里用于发送消息。
  4. 跨域问题：如果嵌入的网页与uni-app不在同一个域下，需要确保目标网页允许跨域通信。

通过上述代码，你可以在uni-app中管理多个<web-view>组件，并实现它们与宿主页面之间的通信。然而，对于更复杂的场景，如获取<web-view>内部页面的DOM或状态，可能需要考虑其他方法，如使用自定义URL Scheme、Storage API或第三方库。不过，这些方法通常依赖于网页本身的支持和配合。

回到顶部