Flutter WebView で JavaScript チャネルを使用して JavaScript から Dart にいくつかのパラメータを渡す

Flutter WebView を介して JavaScript から Dart に複数のパラメータを渡す

このソリューションは、ベスト プラクティスに従って処理しながら、JavaScript から Dart にいくつかの引数 (x、y) を渡します。これは、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 ソリューションの主な目的は、受信したメッセージを JSON 形式でデコードすることで、WebView の JavaScript チャネル経由で効果的に処理することです。

// 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 スキームを使用したパラメータの受け渡し

このメソッドは、WebView の URL 変更イベント時に Dart でデコードされる JavaScript のカスタム URL スキームを使用して引数を渡す方法を示します。

// 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 に 3 つ以上のパラメータを送信することはできますか?
6. はい、使用できます JSON.stringify() 多くのパラメータを JSON オブジェクトとして送信し、 jsonDecode() Dart でそれらを処理します。
7. WebView が JavaScript チャネルをサポートしていない場合はどうなりますか?
8. JavaScript チャネルが利用できない場合は、カスタム URL スキームを使用して、 navigationDelegate Dart で URL をインターセプトします。
9. パラメーターの受け渡し中のエラーはどのように処理すればよいですか?
10. Dart と JavaScript でエラー処理を実践します。すべてのデータが送信されたことを確認してください postMessage() にチェックが入っているので使用します try-catch Dart のブロックを使用してデコードの問題を検出します。

Flutter WebView 通信に関する最終的な考え

JavaScript と Dart の間で引数を送信できる機能により、オンライン コンテンツと Flutter アプリの対話方法が改善されます。データの整合性と使いやすさが保証されるのは、 postMessage() ダーツと組み合わせて使用​​されます jsonDecode() 関数。

開発者は、URL スキームやダイレクト メッセージの処理などのいくつかの戦略を検討することで、プロジェクトに最適なアプローチを選択できます。適切な検証とエラー管理を確保することで、これらの通信システムの信頼性が向上します。