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

通过 Flutter WebView 将多个参数从 JavaScript 传递到 Dart

该解决方案将多个参数 (x, y) 从 JavaScript 传递到 Dart，同时根据最佳实践处理它们。它通过利用 Flutter WebView 插件和 JavaScript 通道来实现这一点。

// 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);

通过 WebView 的 JavaScript 通道处理 Dart 中接收到的参数

此 Dart 解决方案的主要目标是通过将 WebView 的 JavaScript 通道解码为 JSON 格式来有效处理接收到的消息。

// 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
      },
    ),
  },
);

Dart 单元测试：测试 JavaScript 通道

解决方案单元测试的 Dart 端确保 JavaScript 消息得到正确处理和解析。

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);
  });
}

替代方法：使用 URL 方案进行参数传递

此方法展示了如何使用 JavaScript 中的自定义 URL 方案传递参数，该方案在 WebView 的 URL 更改事件时在 Dart 中进行解码。

// 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);

Dart：处理 WebView 中的 URL 更改

为了捕获和处理通过 URL 协议给出的参数，此 Dart 解决方案会拦截 WebView 中的 URL 更改。

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 中传递参数的常见问题

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

关于 Flutter WebView 通信的最终想法

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

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