Uporaba kanala JavaScript v Flutter WebView za posredovanje več parametrov iz JavaScripta v Dart

Ravnanje s komunikacijo JavaScript v Dart v Flutter WebView

Sestavljanje hibridne aplikacije bo morda zahtevalo integracijo JavaScripta in Flutterja prek spletnega pogleda. Prenos podatkov iz JavaScripta v Dart je eno pogostih opravil, ki omogoča nemoteno komunikacijo med obema okoljema.

V tej objavi bo razloženo, kako uporabiti kanal JavaScript vtičnika Flutter WebView za prenos številnih parametrov iz JavaScripta v Dart. Posebej se bomo osredotočili na situacijo, v kateri sta dva argumenta, npr x in l, pošlje v Dart funkcija JavaScript z uporabo setPosition kanal.

Čeprav je podatke mogoče poslati iz JavaScripta z uporabo postMessage(), je nujno, da ta sporočila pravilno obravnavate v Dartu, da zagotovite, da komunikacija deluje, kot je predvideno. Učinkovita obdelava podatkov zahteva znanje uporabe Darta onMessageReceived funkcijo za to.

Niste sami, če ste poskušali iskati odgovore po internetu, a niste našli veliko. V tem članku se bomo podrobno posvetili in vam predstavili metodo po korakih za izgradnjo tega komunikacijskega cevovoda.

Vključevanje komunikacije JavaScript in Dart v Flutter WebView

Naša razvita rešitev prikazuje, kako uporabiti a JavaScript kanal posredovati številne argumente iz JavaScript v Dart prek Flutterjevega spletnega pogleda. Primarni cilj je ustvariti zanesljiv cevovod za komunikacijo med kodo Dart in JavaScriptom, ki se izvaja v WebViewu. The postMessage() uporablja funkcija JavaScript za prenos dveh parametrov (x in y), ki ju nato prejme Dart prek povratnega klica onMessageReceived. S to konfiguracijo se lahko pomembne informacije učinkovito posredujejo iz spletne vsebine izvorni kodi Dart.

Uporaba jsonDecode() funkcijo dekodiramo prejeto sporočilo na strani Dart. Zagotavljamo organizirano pošiljanje številnih parametrov s prenosom podatkov JSON iz JavaScripta. Po dekodiranju lahko Dart pridobi posamezne vrednosti (x in y) in jih uporabi za kateri koli namen. To vključuje beleženje informacij, spreminjanje elementov uporabniškega vmesnika in izvajanje drugih nalog, ki so odvisne od dobljenih vrednosti. Ta metoda zagotavlja nizke stroške pri pošiljanju kompleksnih podatkovnih struktur iz JavaScripta v Dart.

Poleg neposrednega upravljanja sporočil smo preučili tudi drugačen pristop, ki je vključeval uporabo edinstvenih shem URL-jev. Parametre lahko prenašamo prek URL-ja tako, da spremenimo okno.lokacija.href v JavaScriptu. Dart lahko nato prestreže te podatke z uporabo navigationDelegate. Pri uporabi JavaScript kanal morda ni izvedljivo ali če je komunikacija na podlagi URL-ja bolj smiselna glede na zasnovo programa, je ta pristop lahko koristen. Po tem Dart razčleni URL in uporabi Uri.queryParameters funkcijo za ekstrahiranje parametrov, kot sta x in y. To zagotavlja, da je možnih več komunikacijskih mehanizmov med Dartom in spletno vsebino.

Zmogljivost in varnost imata prednost pri vseh pristopih, zlasti pri sprejemanju dohodnih komunikacij. Varnost in berljivost procesov povečamo z uporabo JSON za posredovanje sporočil, ki ustavi manipulacijo podatkov. Preizkusi enot prav tako zagotavljajo, da funkcionalnost deluje, kot je predvideno v različnih nastavitvah. Gladko in zanesljivo, WebView integracija ustvarja močno povezavo med spletnimi tehnologijami in domačim okoljem 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;
  },
);

Raziskovanje tehnik podajanja parametrov v Flutter WebView

Ravnanje z bolj zapletenimi podatkovnimi strukturami je pomemben del posredovanja parametrov prek spletnega pogleda Flutter med JavaScriptom in Dartom. Čeprav smo se osredotočili na opravljanje osnovnih x in l argumentov, lahko pride do situacij, v katerih morate posredovati tudi predmet, matriko ali celo več ugnezdenih objektov. Kompleksne podatkovne strukture je mogoče pretvoriti v obliko niza z uporabo JavaScripta JSON.stringify() metodo, ki jo je mogoče nato učinkovito prenesti z uporabo postMessage() metoda. Po tem lahko Dart uporabi jsonDecode() ponovno sestaviti začetno strukturo, da jo je mogoče obdelati.

Upravljanje napak pri posredovanju sporočil je še ena praktična metoda. Pri premikanju pomembnih podatkov med jezikoma je ključnega pomena zagotoviti, da so podatki preverjeni v okoljih JavaScript in Dart. Dostavitvi napačno oblikovanih podatkov se je mogoče izogniti tako, da pred klicem uvedete preverjanja postMessage() na strani JavaScript. Lahko preverite, ali imajo kodirani podatki pričakovane ključe in vrednosti na strani Dart, tako da jih potrdite. Poleg zagotavljanja učinkovite komunikacije to ščiti pred napakami ali poškodovanimi podatki.

Poleg tega WebView v Flutterju ponuja dodatno funkcionalnost, ki vam omogoča uporabo JavaScripta po meri na spletni strani. Rutine JavaScript lahko dinamično sprožite na strani Dart z uporabo evaluateJavascript tehnika. To poveča vsestranskost z omogočanjem pošiljanja ukazov iz vaše aplikacije Flutter v spletno vsebino, s čimer se izboljša dvosmerni komunikacijski kanal. Kadar obstaja potreba po stalni izmenjavi podatkov med obema slojema, ta strategija dobro deluje.