Używanie kanału JavaScript w Flutter WebView do przekazywania kilku parametrów z JavaScript do Dart

Obsługa komunikacji JavaScript do Dart w Flutter WebView

Montaż aplikacji hybrydowej może wymagać integracji JavaScript i Flutter za pośrednictwem WebView. Transmisja danych z JavaScript do Dart to częste zadanie, które umożliwia płynną komunikację pomiędzy obydwoma środowiskami.

W tym poście wyjaśniono, jak używać kanału JavaScript wtyczki Flutter WebView do przesyłania wielu parametrów z JavaScript do Dart. Skoncentrujemy się szczególnie na sytuacji, w której, powiedzmy, dwa argumenty X I y, są wysyłane do Dart przez funkcję JavaScript za pomocą ustaw pozycję kanał.

Chociaż dane można wysyłać z JavaScript za pomocą postWiadomość(), konieczne jest prawidłowe obsłużenie tych wiadomości w Dart, aby zagwarantować prawidłowe działanie komunikacji. Efektywne przetwarzanie danych wymaga umiejętności korzystania z Darta o Odebrano wiadomość funkcję, aby to zrobić.

Nie jesteś sam, jeśli próbowałeś przeszukać Internet w poszukiwaniu odpowiedzi, ale niewiele znalazłeś. W tym artykule omówimy szczegółowo i przedstawimy krok po kroku metodę tworzenia tego potoku komunikacji.

Integracja JavaScript i komunikacji Dart w Flutter WebView

Opracowane przez nas rozwiązanie pokazuje, jak wykorzystać a Kanał JavaScriptowy przekazać wiele argumentów z JavaScript do Dart poprzez WebView Fluttera. Głównym celem jest stworzenie niezawodnego potoku komunikacji pomiędzy kodem Dart a JavaScriptem działającym w WebView. The postWiadomość() Metoda jest używana przez funkcję JavaScript do przesyłania dwóch parametrów (x i y), które następnie są odbierane przez Dart poprzez wywołanie zwrotne onMessageReceived. Dzięki tej konfiguracji ważne informacje mogą być skutecznie przekazywane z treści internetowych do natywnego kodu Dart.

Korzystanie z jsonDecode() funkcję, dekodujemy odebraną wiadomość po stronie Dart. Dbamy o to, aby wiele parametrów można było przesyłać w zorganizowany sposób, przesyłając dane JSON z JavaScript. Po zdekodowaniu Dart jest w stanie odzyskać poszczególne wartości (x i y) i wykorzystać je w dowolnym celu. Obejmuje to rejestrowanie informacji, zmianę elementów interfejsu użytkownika i wykonywanie innych zadań zależnych od uzyskanych wartości. Ta metoda gwarantuje niski narzut przy przesyłaniu złożonych struktur danych z JavaScript do Dart.

Oprócz bezpośredniego zarządzania wiadomościami sprawdziliśmy także inne podejście, które polegało na wykorzystaniu unikalnych schematów adresów URL. Możemy przesyłać parametry poprzez adres URL, zmieniając okno.lokalizacja.href w JavaScript. Dart może następnie przechwycić te dane za pomocą metody nawigacjaDelegat. Podczas korzystania z Kanał JavaScriptowy może nie być wykonalne lub gdy komunikacja oparta na adresach URL ma większy sens, biorąc pod uwagę projekt programu, to podejście może być przydatne. Następnie Dart analizuje adres URL i używa pliku Parametry Uri.query funkcja wyodrębniająca parametry takie jak x i y. Gwarantuje to, że możliwych jest kilka mechanizmów komunikacji pomiędzy Dartem a treściami internetowymi.

Wydajność i bezpieczeństwo są traktowane priorytetowo we wszystkich podejściach, szczególnie podczas odbierania komunikacji przychodzącej. Zwiększamy bezpieczeństwo i czytelność procesów wykorzystując do przekazywania komunikatów JSON, co zapobiega manipulacji danymi. Testy jednostkowe gwarantują również, że funkcjonalność działa zgodnie z przeznaczeniem w różnych ustawieniach. Gładka i niezawodna Widok sieciowy integracja tworzy silne powiązanie pomiędzy technologiami sieciowymi i natywnym środowiskiem Fluttera.

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

Odkrywanie technik przekazywania parametrów w Flutter WebView

Obsługa bardziej skomplikowanych struktur danych jest ważną częścią przekazywania parametrów za pośrednictwem Flutter WebView pomiędzy JavaScript i Dart. Chociaż skupialiśmy się na zaliczeniu podstaw X I y argumentów, mogą zaistnieć sytuacje, w których konieczne będzie przekazanie obiektu, tablicy lub nawet kilku zagnieżdżonych obiektów. Złożone struktury danych można przekształcić w format łańcuchowy za pomocą JavaScript JSON.stringify() metodę, którą można następnie skutecznie przenieść za pomocą metody postMessage() metoda. Następnie Dart może wykorzystać jsonDecode() zmontować pierwotną strukturę tak, aby można ją było poddać obróbce.

Zarządzanie błędami w przekazywaniu wiadomości to kolejna praktyczna metoda. Podczas przenoszenia ważnych danych między obydwoma językami kluczowe znaczenie ma upewnienie się, że dane są sprawdzane zarówno w środowisku JavaScript, jak i Dart. Dostarczenia zniekształconych danych można uniknąć, sprawdzając je przed wywołaniem postMessage() po stronie JavaScript. Możesz sprawdzić, czy zakodowane dane mają przewidywane klucze i wartości po stronie Dart, sprawdzając je. Oprócz zapewnienia skutecznej komunikacji, chroni to przed błędami lub uszkodzonymi danymi.

Dodatkowo, WebView w Flutter zapewnia dodatkową funkcjonalność, która pozwala zastosować niestandardowy JavaScript na stronie internetowej. Możesz dynamicznie uruchamiać procedury JavaScript ze strony Dart, korzystając z evaluateJavascript technika. Zwiększa to wszechstronność, umożliwiając wysyłanie poleceń z aplikacji Flutter do treści internetowych, poprawiając w ten sposób dwukierunkowy kanał komunikacji. Gdy istnieje potrzeba ciągłej wymiany danych pomiędzy dwiema warstwami, strategia ta sprawdza się dobrze.