使用 Flutter WebView 中的 JavaScript 通道将多个参数从 JavaScript 传递到 Dart

在 Flutter WebView 中处理 JavaScript 到 Dart 的通信

组装混合应用程序可能需要通过 WebView 集成 JavaScript 和 Flutter。从 JavaScript 到 Dart 的数据传输是一项频繁的工作，可以实现两个环境之间的顺利通信。

这篇文章将解释如何使用 Flutter WebView 插件的 JavaScript Channel 将大量参数从 JavaScript 传输到 Dart。我们将特别关注有两个参数的情况，例如 和 ，由 JavaScript 函数使用以下命令发送到 Dart 渠道。

尽管可以使用 JavaScript 从 JavaScript 发送数据 ，必须在 Dart 中正确处理这些消息，以保证通信按预期运行。有效的数据处理需要了解如何使用 Dart 函数来执行此操作。

如果您尝试在互联网上搜索答案但没有找到太多答案，那么您并不孤单。在本文中，我们将详细介绍并为您提供构建此通信管道的分步方法。

命令	使用示例
postMessage()	此 JavaScript 方法的目的是在多个上下文之间传输消息。在这里，它用于通过 从 Web 内容（在本例中为 JavaScript）到 Flutter WebView 的 Dart 端。
jsonDecode()	在 dart:convert 包中可以找到一个 Dart 函数，该函数解析用 JSON 编码的字符串并将其转换为 Dart 映射或列表。为了检索数据，例如 和 ，它有助于解码 从 JavaScript 接收。
JavascriptChannel	这是一个 Flutter 类，可促进 Dart 代码和在 WebView 中执行的 JavaScript 之间的通信。当消息从 JavaScript 端到达时， 在 Dart 中监听并处理它们。
onMessageReceived	中触发的回调 收到来自 JavaScript 的消息后。它管理传入消息并执行数据处理操作，包括解析 JSON 或使用给定的参数。
navigationDelegate	Dart 属性允许 小部件来控制和拦截与导航相关的事件。它使您能够记录 URL 更改（例如，使用自定义 URL 方案发送参数时）。
Uri.queryParameters	在 Dart 中，此属性从 URL 检索查询参数。您可以访问作为 URL 中的参数提供的数据，例如 和 ，当您使用自定义 URL 方案时。
NavigationDecision.prevent	一个返回值 用于停止 WebView 导航。当管理参数和拦截 URL 更改而无需离开当前页面时，它会很有帮助。
JavascriptMessage	一个 Dart 类，用于接收通过以下方式发送的消息 从 JavaScript 到 Dart。消息字符串包含在那里，准备根据需要进行处理或解码。
WebView	这 Flutter 应用程序中的 widget 用于显示网页内容。它使 JavaScript 通道可访问，从而实现本机代码和 Web 代码之间的双向通信。

在 Flutter WebView 中集成 JavaScript 和 Dart 通信

我们开发的解决方案展示了如何使用 传递大量的论据 通过 Flutter 的 WebView 到 Dart。主要目标是创建一个可靠的管道，用于 Dart 代码和 WebView 中运行的 JavaScript 之间的通信。这 JavaScript 函数使用该方法来传输两个参数（x 和 y），Dart 随后通过 onMessageReceived 回调接收这两个参数。通过这种配置，重要信息可以有效地从网页内容传递到原生 Dart 代码。

使用 函数中，我们在 Dart 端对接收到的消息进行解码。我们确保通过从 JavaScript 传输 JSON 数据，可以以有组织的方式发送大量参数。解码后，Dart 能够检索各个值（x 和 y）并将它们用于任何目的。这包括记录信息、更改用户界面元素以及执行取决于所获得的值的其他任务。该方法保证了从 JavaScript 向 Dart 发送复杂数据结构时的低开销。

除了直接管理消息之外，我们还研究了一种不同的方法，涉及利用独特的 URL 方案。我们可以通过改变 URL 来传递参数 在 JavaScript 中。然后 Dart 可以使用以下方法拦截该数据 。当使用 可能不可行，或者当考虑到程序设计基于 URL 的通信更有意义时，此方法可能很有用。之后，Dart 解析 URL 并使用 Uri.查询参数 函数来提取 x 和 y 等参数。这保证了 Dart 和 Web 内容之间的多种通信机制是可能的。

在所有方法中，性能和安全性都是重中之重，特别是在接收传入通信时。我们通过使用 JSON 进行消息传递来提高流程安全性和可读性，从而停止数据操作。单元测试还保证功能在各种设置中按预期运行。平稳可靠， 集成在 Web 技术和 Flutter 原生环境之间建立了牢固的联系。

// JavaScript code to send two parameters to Dart
function sendPosition(x, y) {
    setPosition.postMessage(JSON.stringify({ x: x, y: y }));
}
// Example of calling the function
sendPosition(100, 200);

// Dart code: Set up WebView and JavaScript channel
WebView(
  initialUrl: 'https://your-webpage.com',
  javascriptChannels: {
    JavascriptChannel(
      name: 'setPosition',
      onMessageReceived: (JavascriptMessage message) {
        // Decode the JSON message
        final data = jsonDecode(message.message);
        final x = data['x'];
        final y = data['y'];
        // Handle the x and y values
        print('Position received: x=$x, y=$y');
        // Add your logic here
      },
    ),
  },
);

import 'package:flutter_test/flutter_test.dart';
import 'dart:convert';
void main() {
  test('Test JavaScript message parsing', () {
    const message = '{"x": 100, "y": 200}';
    final data = jsonDecode(message);
    expect(data['x'], 100);
    expect(data['y'], 200);
  });
}

// JavaScript code: Send parameters via custom URL scheme
function sendPositionViaUrl(x, y) {
    window.location.href = 'flutter-webview://setPosition?x=' + x + '&y=' + y;
}
// Example of calling the function
sendPositionViaUrl(100, 200);

WebView(
  initialUrl: 'https://your-webpage.com',
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith('flutter-webview://setPosition')) {
      final uri = Uri.parse(request.url);
      final x = uri.queryParameters['x'];
      final y = uri.queryParameters['y'];
      print('Position received via URL: x=$x, y=$y');
      // Add your logic here
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
);

探索 Flutter WebView 中的参数传递技术

处理更复杂的数据结构是 JavaScript 和 Dart 之间通过 Flutter WebView 进行参数传递的重要部分。虽然我们的重点是通过基础 和 参数，在某些情况下您可能还需要传递对象、数组甚至多个嵌套对象。复杂的数据结构可以使用 JavaScript 转换为字符串格式 方法，然后可以使用 postMessage() 方法。之后，Dart 可以利用 重新组装初始结构以便可以对其进行处理。

消息转发错误管理是另一种实用的方法。在两种语言之间移动重要数据时，确保数据在 JavaScript 和 Dart 环境中得到验证至关重要。通过在调用之前进行检查可以避免传送格式错误的数据 在 JavaScript 方面。您可以通过验证编码数据来验证 Dart 端是否具有预期的键和值。除了确保有效的通信之外，这还可以防止错误或数据损坏。

此外， Flutter 中提供了一项额外的功能，可让您将自定义 JavaScript 应用于网页。您可以利用以下方法从 Dart 端动态触发 JavaScript 例程 技术。这可以通过将命令从 Flutter 应用程序发送到 Web 内容来提高多功能性，从而增强双向通信通道。当两层之间需要不断交换数据时，此策略效果很好。

1. 如何将复杂对象从 JavaScript 发送到 Dart？
2. 要在 Dart 端解码复杂的对象，请使用 将它们转换为字符串后 和 。
3. 在传输数据之前如何最有效地验证数据？
4. 在传输数据之前 ，确保其结构正确并且具有 JavaScript 端的所有必需字段。通信解码后，在 Dart 端验证键和值。
5. 是否可以从 JavaScript 向 Dart 发送两个以上的参数？
6. 是的，您可以使用 以 JSON 对象的形式传输许多参数，以及 在 Dart 中处理它们。
7. 如果WebView不支持JavaScript Channel怎么办？
8. 如果 JavaScript 通道不可用，您可以使用自定义 URL 方案并使用 在 Dart 中拦截 URL。
9. 如何处理参数传递过程中的错误？
10. 在 Dart 和 JavaScript 中实践错误处理。确保发送的所有数据 被检查，并使用 Dart 中的块来检测解码问题。

在 JavaScript 和 Dart 之间发送参数的能力改善了在线内容和 Flutter 应用程序的交互方式。数据完整性和可用性得到保证 与 Dart 结合使用 功能。

开发人员可以通过研究多种策略（例如 URL 方案和直接消息处理）来选择最适合其项目的方法。确保适当的验证和错误管理可以增强这些通信系统的可靠性。