uniapp中uni.webview.postmessage的使用方法

在uniapp中，使用uni.webview.postMessage向webview发送数据时，接收端总是无法正确获取到消息。请问具体应该如何正确使用这个方法？需要在前端和webview页面分别做哪些配置？能否提供一个完整的示例代码？

2 回复

在uni-app中，使用uni.webview.postMessage向webview发送消息。首先在webview页面监听message事件，然后在父页面调用postMessage发送数据。

示例：

// 父页面发送消息
uni.webview.postMessage({ data: 'Hello Webview' });

// webview页面接收
window.addEventListener('message', (e) => {
  console.log(e.data); // 输出：{ data: 'Hello Webview' }
});

在 UniApp 中，uni.webview.postMessage 用于从 Webview 页面向 UniApp 页面发送数据，实现 Webview 与 UniApp 之间的通信。以下是详细使用方法：

步骤：

  1. 在 Webview 页面发送消息
    在嵌入的 Webview 页面（HTML/JS）中，调用 uni.postMessage 方法发送数据到 UniApp：

    // 在 Webview 页面（如内嵌网页）中
uni.postMessage({
  data: {
    type: 'message',
    content: 'Hello from Webview!'
  }
});

    注意：uni.postMessage 是 Webview 页面中的方法，不是 UniApp 页面的 API。

  2. 在 UniApp 页面监听消息
    在 UniApp 页面的 onLoad 或 onReady 生命周期中，通过 uni.onPostMessage 监听来自 Webview 的消息：

    export default {
  onReady() {
    // 监听 Webview 发送的消息
    uni.onPostMessage((message) => {
      console.log('收到 Webview 消息:', message.data);
      // 处理消息，例如更新页面数据
      this.messageFromWebview = message.data.content;
    });
  }
}

完整示例：

UniApp 页面（嵌入 Webview）：

<template>
  <view>
    <web-view :src="webviewUrl" @message="handleMessage"></web-view>
    <text>收到消息：{{ messageContent }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://example.com', // Webview 页面地址
      messageContent: ''
    };
  },
  methods: {
    handleMessage(e) {
      // 通过 @message 事件接收数据
      this.messageContent = e.detail.data[0].content;
    }
  }
};
</script>

Webview 页面（HTML/JS）：

<!DOCTYPE html>
<html>
<body>
  <button onclick="sendMessage()">发送消息到 UniApp</button>
  <script>
    function sendMessage() {
      // 调用 uni.postMessage 发送数据
      uni.postMessage({
        data: { content: '用户点击了按钮！' }
      });
    }
  </script>
</body>
</html>

注意事项：

  • 环境支持：确保 Webview 页面在 UniApp 的 Webview 组件中运行，否则 uni.postMessage 可能不可用。
  • 数据格式：发送的数据必须是可序列化的对象（如字符串、数字、对象）。
  • 安全性：避免传输敏感信息，并验证消息来源。

通过以上方法，即可实现 Webview 与 UniApp 的高效数据交互。

回到顶部