uniapp 中使用 webview 与 uni.postMessage 通信

Uniapp 中使用 Webview 与 `uni.postMessage` 通信

在 Uniapp 开发中，Webview 组件被广泛用于加载和展示外部网页或 H5 页面。在实际项目中，通常需要在 Webview 与 Uniapp 的原生页面之间进行通信，比如在 Webview 页面中触发事件，或者从 Uniapp 原生页面向 Webview 传递数据。为了实现这种双向通信，Uniapp 提供了 uni.postMessage 和 uni.onMessage 方法，使得与 Webview 的交互变得更加简单。

本文将详细介绍如何在 Uniapp 中使用 Webview 组件和 uni.postMessage 进行双向通信。

1. Webview 和 uni.postMessage 简介

Webview：Uniapp 提供的组件，可以加载和显示 H5 页面或外部网页内容。
uni.postMessage：用于从 Uniapp 页面向 Webview 发送消息。
uni.onMessage：用于接收从 Webview 发送到 Uniapp 的消息。

通过 uni.postMessage，可以轻松实现 H5 页面与 Uniapp 的双向消息传递，适用于许多场景，例如：

从原生页面向 H5 页面传递登录状态、用户信息。
从 H5 页面向原生页面发送操作指令，如导航、状态更新等。

2. Webview 与 Uniapp 通信的基本流程

Uniapp 向 Webview 发送消息：使用 uni.postMessage 方法将消息发送给 Webview 页面。
Webview 向 Uniapp 发送消息：在 Webview 页面中通过 window.postMessage 将数据发送给 Uniapp 页面，Uniapp 通过 uni.onMessage 监听消息。

3. 实现步骤

3.1 在 Uniapp 中配置 Webview 组件

首先，在 Uniapp 页面中添加 Webview 组件，用于加载 H5 页面。

<template>
  <view class="container">
    <web-view src="https://www.example.com" @message="onMessage"></web-view>
  </view>
</template>

<script>
export default {
  methods: {
    // 处理从 Webview 传来的消息
    onMessage(event) {
      console.log('Message from Webview:', event.detail.data);
    }
  }
}
</script>

<style>
.container {
  height: 100%;
}
</style>

<web-view>：Webview 组件，用于加载外部网页。
@message：监听 Webview 页面发送的消息。

3.2 Webview 页面发送消息给 Uniapp

在 H5 页面或 Webview 加载的页面中，可以通过 window.postMessage 方法向 Uniapp 页面发送消息。

// H5 页面中的 JavaScript
window.onload = function() {
    // 向 Uniapp 发送一条消息
    window.postMessage({
        action: 'sendData',
        message: 'Hello from Webview!'
    });
}

window.postMessage：该方法可以向 Uniapp 原生页面发送消息，消息数据通过事件传递。

3.3 Uniapp 向 Webview 页面发送消息

Uniapp 页面中可以通过 uni.postMessage 方法向 Webview 页面发送消息。

// 在页面的某个事件中发送消息
methods: {
  sendMessageToWebview() {
    const webview = this.$refs.myWebview;
    webview.postMessage({
      action: 'updateData',
      data: 'Message from Uniapp!'
    });
  }
}

在这个例子中，Uniapp 通过 postMessage 方法向 Webview 页面发送消息。要注意的是，发送的消息是一个对象，包含 action 和 data 字段。

3.4 Webview 页面接收 Uniapp 发送的消息

在 Webview 页面中，通过监听 message 事件接收从 Uniapp 发送的消息：

// H5 页面中的 JavaScript
window.addEventListener('message', function(event) {
    console.log('Message from Uniapp:', event.data);
    if (event.data.action === 'updateData') {
        // 处理收到的数据
        document.body.innerHTML += '<p>' + event.data.data + '</p>';
    }
});

window.addEventListener('message', ...)：监听来自 Uniapp 的消息，并处理接收到的数据。

4. 双向通信示例

下面展示一个完整的 Uniapp 和 Webview 通信的简单示例。

4.1 Uniapp 页面

<template>
  <view class="container">
    <button @click="sendMessageToWebview">Send Message to Webview</button>
    <web-view ref="myWebview" src="https://www.example.com" @message="onMessage"></web-view>
  </view>
</template>

<script>
export default {
  methods: {
    onMessage(event) {
      console.log('Message from Webview:', event.detail.data);
    },
    sendMessageToWebview() {
      this.$refs.myWebview.postMessage({
        action: 'updateData',
        data: 'Hello Webview, this is Uniapp!'
      });
    }
  }
}
</script>

<style>
.container {
  height: 100%;
}
</style>

点击按钮时，Uniapp 页面向 Webview 发送消息。
Webview 中的页面可以通过监听 message 事件接收到该消息。

4.2 Webview 页面（H5 页面）

<!DOCTYPE html>
<html>
<head>
  <title>Webview Example</title>
</head>
<body>
  <h1>Webview Page</h1>

  <script>
    window.onload = function() {
      // 向 Uniapp 发送一条消息
      window.postMessage({
        action: 'sendData',
        message: 'Hello from Webview!'
      });
    }

    // 接收来自 Uniapp 的消息
    window.addEventListener('message', function(event) {
      console.log('Received from Uniapp:', event.data);
      if (event.data.action === 'updateData') {
        document.body.innerHTML += '<p>' + event.data.data + '</p>';
      }
    });
  </script>
</body>
</html>

当 Webview 页面加载时，它会向 Uniapp 发送一条初始消息。
然后，它会监听来自 Uniapp 的消息并动态更新页面内容。

5. 可能的应用场景

用户登录状态同步：Uniapp 页面可以向 Webview 发送登录状态，Webview 页面根据登录状态决定显示的内容。
数据传递与更新：在一些复杂的 Webview 场景中，可以通过 uni.postMessage 向 Webview 页面传递数据，如用户信息、配置参数等。
Webview 页面控制 Uniapp 导航：Webview 可以通过发送消息触发 Uniapp 中的页面跳转或状态变更，提升应用的交互性。

6. 总结

通过使用 Uniapp 的 Webview 组件和 uni.postMessage 通信机制，开发者可以在原生应用与 H5 页面之间实现双向消息传递，确保数据同步和功能联动。本文详细介绍了如何配置 Webview、如何通过 uni.postMessage 与 Webview 进行通信，以及如何在 H5 页面中监听和处理消息。此方法适用于 Uniapp 应用中的多种业务场景，如页面数据同步、登录状态共享等。

这种灵活的通信方式不仅提升了 Uniapp 的开发效率，也为应用提供了更多扩展的可能性。