Flutter与WebView之间如何实现无缝通信？

2024-03-03 10:16:07

## 在 Flutter 和 WebView 之间建立无缝通信

简介

在现代移动开发中，将 Web 端应用嵌入 Flutter 移动端应用已变得越来越普遍。通过这种方式，开发人员可以同时利用 Web 技术的强大功能和 Flutter 的跨平台优势。然而，在这些混合应用中实现有效的通信可能是一个挑战。本文将探讨 Flutter 移动端应用和嵌入式 Web 端应用之间的通信问题并提供详细的解决方案。

## 问题：单向通信

当将 Web 端应用嵌入到 Flutter 移动端应用中时，常见的困难是只能从 Web 端应用向移动端应用发送消息。移动端应用无法对这些消息进行回复，从而限制了双向通信。

## 解决方案：JavaScript 通道

解决此问题的关键是配置一个 JavaScript 通道。此通道允许 Flutter 移动端应用和 Web 端应用交换消息。

步骤：

配置 JavaScript 通道：

在 Flutter 移动端应用中，使用 WebViewController 的 addJavaScriptChannel 方法配置一个名为 "awc" 的 JavaScript 通道。

_webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel(
    'awc',
    onMessageReceived: (JavaScriptMessage message) async {
      // 处理来自 Web 端应用的消息
      print('message ${message.message}');
      // 向 Web 端应用发送回复消息
      await _webViewController!.runJavaScript("window.postMessage('answer', '*');");
    },
  )

设置 Web 端应用：
- 在 Web 端应用中，使用 window.postMessage() 方法发送消息到 Flutter 移动端应用。
```
js.context.callMethod('eval', ['window.awc.postMessage("get_endpoint");']);
```
处理回复消息：
- 在 Web 端应用中，使用 window.addEventListener() 方法监听 message 事件，并在收到来自 Flutter 移动端应用的回复消息时进行相应处理。
```
window.addEventListener('message', (event) => {
  if (event.data === 'answer') {
    // 处理来自 Flutter 移动端应用的回复消息
  }
});
```