Verwenden des JavaScript-Kanals in Flutter WebView, um mehrere Parameter von JavaScript an Dart zu übergeben

Umgang mit JavaScript zur Dart-Kommunikation in Flutter WebView

Das Zusammenstellen einer Hybridanwendung erfordert möglicherweise die Integration von JavaScript und Flutter über eine WebView. Die Datenübertragung von JavaScript zu Dart ist eine häufige Aufgabe, die eine reibungslose Kommunikation zwischen den beiden Umgebungen ermöglicht.

In diesem Beitrag wird erläutert, wie Sie den JavaScript-Kanal eines Flutter WebView-Plugins verwenden, um zahlreiche Parameter von JavaScript an Dart zu übertragen. Wir werden uns speziell auf eine Situation konzentrieren, in der beispielsweise zwei Argumente vorliegen X Und j, werden von einer JavaScript-Funktion mithilfe der an Dart gesendet setPosition Kanal.

Obwohl Daten mithilfe von JavaScript gesendet werden können postMessage(), ist es unbedingt erforderlich, diese Nachrichten in Dart korrekt zu verarbeiten, um sicherzustellen, dass die Kommunikation wie vorgesehen funktioniert. Eine effektive Datenverarbeitung erfordert Kenntnisse im Umgang mit Darts onMessageReceived Funktion, um dies zu tun.

Sie sind nicht allein, wenn Sie versucht haben, im Internet nach Antworten zu suchen, aber nicht viel gefunden haben. Wir gehen ins Detail und geben Ihnen in diesem Artikel eine Schritt-für-Schritt-Methode zum Aufbau dieser Kommunikationspipeline.

Integration von JavaScript und Dart-Kommunikation in Flutter WebView

Unsere entwickelte Lösung zeigt, wie man a verwendet JavaScript-Kanal zahlreiche Argumente zu übermitteln JavaScript zu Dart über Flutters WebView. Das Hauptziel besteht darin, eine zuverlässige Pipeline für die Kommunikation zwischen dem Dart-Code und dem im WebView ausgeführten JavaScript zu erstellen. Der postMessage() -Methode wird von der JavaScript-Funktion verwendet, um zwei Parameter (x und y) zu übertragen, die anschließend von Dart über den onMessageReceived-Rückruf empfangen werden. Mit dieser Konfiguration können wichtige Informationen effektiv vom Webinhalt an den nativen Dart-Code übermittelt werden.

Mit der jsonDecode() Mit dieser Funktion dekodieren wir die empfangene Nachricht auf der Dart-Seite. Durch die Übertragung von JSON-Daten aus JavaScript stellen wir sicher, dass zahlreiche Parameter organisiert versendet werden können. Nach der Dekodierung ist Dart in der Lage, die einzelnen Werte (x und y) abzurufen und für beliebige Zwecke zu verwenden. Dazu gehören das Aufzeichnen von Informationen, das Ändern von Elementen der Benutzeroberfläche und das Ausführen anderer Aufgaben, die von den erhaltenen Werten abhängen. Diese Methode garantiert einen geringen Overhead beim Senden komplexer Datenstrukturen von JavaScript an Dart.

Neben der direkten Verwaltung von Nachrichten haben wir uns auch mit einem anderen Ansatz befasst, der die Verwendung eindeutiger URL-Schemata beinhaltet. Wir können Parameter über die URL übertragen, indem wir die ändern window.location.href in JavaScript. Dart kann diese Daten dann mit dem abfangen navigationDelegate. Bei Verwendung des JavaScript-Kanal Wenn dies möglicherweise nicht möglich ist oder wenn eine URL-basierte Kommunikation aufgrund des Programmdesigns sinnvoller ist, kann dieser Ansatz nützlich sein. Danach analysiert Dart die URL und verwendet die Uri.queryParameters Funktion zum Extrahieren von Parametern wie x und y. Dies gewährleistet, dass mehrere Kommunikationsmechanismen zwischen Dart und Webinhalten möglich sind.

Leistung und Sicherheit haben bei allen Ansätzen oberste Priorität, insbesondere beim Empfang eingehender Kommunikation. Wir erhöhen die Prozesssicherheit und Lesbarkeit, indem wir JSON für die Nachrichtenübermittlung einsetzen, wodurch Datenmanipulationen verhindert werden. Unit-Tests stellen außerdem sicher, dass die Funktionalität in verschiedenen Umgebungen wie vorgesehen funktioniert. Reibungslos und zuverlässig WebView Durch die Integration entsteht eine starke Verbindung zwischen Webtechnologien und der nativen Umgebung von 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;
  },
);

Erkunden von Parameterübergabetechniken in Flutter WebView

Der Umgang mit komplizierteren Datenstrukturen ist ein wichtiger Teil der Parameterübergabe über ein Flutter WebView zwischen JavaScript und Dart. Obwohl unser Fokus auf dem Bestehen der Grundkenntnisse lag X Und j Argumente kann es Situationen geben, in denen Sie auch ein Objekt, ein Array oder sogar mehrere verschachtelte Objekte übergeben müssen. Komplexe Datenstrukturen können mithilfe von JavaScript in ein String-Format umgewandelt werden JSON.stringify() Methode, die dann effektiv mit der übertragen werden kann postMessage() Verfahren. Danach kann Dart genutzt werden jsonDecode() die ursprüngliche Struktur wieder zusammenzusetzen, damit sie verarbeitet werden kann.

Eine weitere praktische Methode ist das Fehlermanagement bei der Nachrichtenweiterleitung. Beim Verschieben wichtiger Daten zwischen den beiden Sprachen ist es von entscheidender Bedeutung, sicherzustellen, dass die Daten sowohl in der JavaScript- als auch in der Dart-Umgebung validiert werden. Durch die Einführung von Kontrollen vor dem Aufruf kann verhindert werden, dass fehlerhafte Daten übermittelt werden postMessage() auf der JavaScript-Seite. Sie können überprüfen, ob die codierten Daten die erwarteten Schlüssel und Werte auf der Dart-Seite haben, indem Sie sie validieren. Dies gewährleistet nicht nur eine effektive Kommunikation, sondern schützt auch vor Fehlern oder beschädigten Daten.

Zusätzlich, WebView in Flutter bietet eine zusätzliche Funktionalität, mit der Sie benutzerdefiniertes JavaScript auf die Webseite anwenden können. Sie können JavaScript-Routinen dynamisch von der Dart-Seite aus auslösen, indem Sie die verwenden evaluateJavascript Technik. Dies erhöht die Vielseitigkeit, indem Befehle von Ihrer Flutter-App an den Webinhalt gesendet werden können, wodurch der bidirektionale Kommunikationskanal verbessert wird. Wenn ein ständiger Datenaustausch zwischen den beiden Schichten erforderlich ist, funktioniert diese Strategie gut.