uniapp开发webview点击事件中uni.postmessage的使用方法

在uniapp开发webview时，如何正确使用uni.postmessage方法传递点击事件数据？我在webview中绑定了点击事件，但调用uni.postmessage后，H5页面接收不到消息。请问参数格式是否有特殊要求？是否需要配置额外的安全策略？能否提供一个完整的示例代码？

2 回复

在uniapp的webview中，通过uni.postMessage向H5页面发送数据。H5页面通过window.addEventListener('message', callback)接收。示例：

// uniapp
uni.postMessage({ data: '消息内容' });

// H5
window.addEventListener('message', (e) => {
  console.log(e.data); // 接收数据
});

注意：需在webview组件的@message事件中触发。


在 UniApp 中，Webview 组件用于嵌入网页内容，并通过 uni.postMessage 实现 Webview 内网页与 UniApp 页面之间的通信。以下是具体使用方法：

步骤说明

  1. 在 UniApp 页面中创建 Webview：使用 <web-view> 组件加载网页，并通过 @message 监听网页发送的消息。
  2. 在 Webview 加载的网页中调用 uni.postMessage：网页通过此方法向 UniApp 发送数据。
  3. UniApp 接收并处理消息：在 @message 事件中获取数据并执行相应逻辑。

代码示例

UniApp 页面（Vue 文件）

<template>
  <view>
    <!-- 加载网页，并绑定 message 事件 -->
    <web-view src="https://example.com/your-page.html" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  methods: {
    handleMessage(e) {
      // 从事件对象中获取网页发送的数据
      const data = e.detail.data[0];
      console.log('收到网页消息:', data);
      // 根据数据执行操作，例如跳转页面、显示提示等
      if (data.action === 'navigate') {
        uni.navigateTo({
          url: data.url
        });
      }
    }
  }
}
</script>

网页内代码（HTML/JavaScript）

在 Webview 加载的网页中，通过 uni.postMessage 发送消息：

<!DOCTYPE html>
<html>
<head>
    <title>Webview 页面</title>
</head>
<body>
    <button onclick="sendMessageToUniApp()">点击发送消息</button>

    <script>
        function sendMessageToUniApp() {
            // 调用 uni.postMessage 向 UniApp 发送数据
            uni.postMessage({
                data: {
                    action: 'navigate',
                    url: '/pages/detail/detail'
                }
            });
        }
    </script>
</body>
</html>

注意事项

  • 环境支持：uni.postMessage 仅在 UniApp 的 Webview 环境中可用，需通过 HBuilderX 真机运行或打包后测试。
  • 数据格式：发送的数据必须是可序列化的对象（如字符串、数字、对象、数组）。
  • 安全性：确保网页来源可信，避免恶意代码注入。
  • 调试：使用 console.log 输出数据，或在 UniApp 开发者工具中查看消息日志。

通过以上方法，即可实现 Webview 内点击事件与 UniApp 的高效通信。如有更多需求（如双向通信），可结合 uni.webView.evalJS 执行网页内脚本。

回到顶部