uni-app 接收不到 webview 发来的消息

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

uni-app 接收不到 webview 发来的消息

测试过的手机：

Redmi K40、huawei nova 5i

示例代码：

uniapp代码：

<template>
<view>
<web-view v-if="showWebview" :webview-styles="webviewStyles" @message="handleMessage" src="http://localhost/#/pages/login222"></web-view>
</view>
</template>  
<script setup>
import {ref} from "vue";

const showWebview = ref(true)
const detail = ref('')

const webviewStyles = {
progress: {
color: '#FF3333'
}
}

const handleMessage = (e) => {
console.log('e.detail', e.detail)
detail.value = e.detail
}
</script>

webview代码：

<template>
<view class="login">
<button @click="handleXXX" class="login_btn">xxx</button>
</view>
</template>  
<script setup>
const handleXXX = () => {
console.log('handleXXX is called.');
window.parent.postMessage(JSON.stringify({data: '测试11'}), "*");
}
</script>

manifest.json代码：

"h5" : {
"title" : "ccc",
"Webview": {
"DomainList": ["http://localhost","http://192.168.0.108"]
}
},

操作步骤：

如上代码

预期结果：

handleMessage会触发

实际结果：

handleMessage没有触发

bug描述：

window.addEventListener('message', (e) => {
console.log('Global catch message: ', e);
}, {capture: true});

这个是可以监听到的，@message="handleMessage"这个监听不到


Harmonyos Next教程
2 回复

app的话需要在webview的页面里面引入uni的js，然后使用uni.postMessage，参考https://uniapp.dcloud.net.cn/component/web-view.html#postmessage


在 uni-app 中，如果你发现接收不到从 WebView 发来的消息，这通常是由于消息传递机制未正确设置或实现有误。以下是一个基本的示例，展示了如何在 uni-app 中设置 WebView 并接收其发送的消息。

1. 在 uni-app 中嵌入 WebView

首先，在你的页面模板中嵌入一个 WebView 组件。

<template>
  <view>
    <web-view src="https://example.com" @message="handleMessage"></web-view>
  </view>
</template>

2. 监听 message 事件

在上面的代码中，我们使用了 @message="handleMessage" 来监听 WebView 发出的消息。你需要定义一个 handleMessage 方法来处理这些消息。

<script>
export default {
  methods: {
    handleMessage(event) {
      console.log('Received message from WebView:', event.detail.data);
      // 在这里处理接收到的消息
    }
  }
}
</script>

3. 在 WebView 中发送消息

确保你的 WebView 页面（在这个例子中是 https://example.com）能够发送消息。这通常通过 JavaScript 实现，使用 postMessage 方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebView Example</title>
</head>
<body>
  <script>
    function sendMessageToUniApp() {
      if (window.WeixinJSBridge) {
        WeixinJSBridge.invoke('sendMsgToApp', { data: 'Hello from WebView' });
      } else if (window.plus && window.plus.webview) {
        // 对于 uni-app 来说，更常见的是这种方式
        window.plus.webview.currentWebview().evalJS(`
          plus.runtime.postMessage({data: 'Hello from WebView'});
        `);
      } else {
        console.error('Unsupported environment for sending messages.');
      }
    }

    // 触发发送消息的函数，可以根据需要调整
    setTimeout(sendMessageToUniApp, 3000);
  </script>
</body>
</html>

注意事项

  • 确保你的 WebView 页面和 uni-app 在同一域下，或者已经处理了跨域问题，否则可能会因为安全策略而阻止消息传递。
  • 在实际项目中，请替换 https://example.com 为你的实际 WebView 页面地址。
  • uni-app 的 WebView 组件与原生应用中的 WebView 可能有所不同，特别是消息传递的 API，因此请根据你的具体环境和需求进行调整。

以上代码提供了一个基本的框架，展示了如何在 uni-app 中接收来自 WebView 的消息。如果仍然遇到问题，请检查控制台日志，查看是否有错误或警告信息，这可能会提供更多线索。

回到顶部