Použití kanálu JavaScript ve Flutter WebView k předání několika parametrů z JavaScriptu do Dartu

Manipulace s JavaScriptem pro komunikaci Dart ve Flutter WebView

Sestavení hybridní aplikace může vyžadovat integraci JavaScriptu a Flutter prostřednictvím WebView. Přenos dat z JavaScriptu do Dartu je častou úlohou, která umožňuje hladkou komunikaci mezi těmito dvěma prostředími.

Tento příspěvek vysvětlí, jak používat JavaScriptový kanál pluginu Flutter WebView k přenosu mnoha parametrů z JavaScriptu do Dartu. Konkrétně se zaměříme na situaci, kdy dva argumenty řekněme x a y, jsou odesílány do Dartu pomocí funkce JavaScript pomocí setPosition kanál.

Ačkoli data lze odesílat z JavaScriptu pomocí postMessage(), je nezbytné, abyste s těmito zprávami v Dart zacházeli správně, aby bylo zaručeno, že komunikace funguje tak, jak bylo zamýšleno. Efektivní zpracování dat vyžaduje vědět, jak používat Dart's onMessageReceived funkci k tomu.

Nejste sami, pokud jste zkoušeli hledat odpovědi na internetu, ale moc jste toho nenašli. Půjdeme do velkých podrobností a v tomto článku vám poskytneme podrobnou metodu budování tohoto komunikačního kanálu.

Integrace JavaScriptu a komunikace Dart do Flutter WebView

Naše vyvinuté řešení ukazuje, jak používat a JavaScript kanál předat četné argumenty z JavaScript do Dartu přes Flutter's WebView. Primárním cílem je vytvořit spolehlivý kanál pro komunikaci mezi kódem Dart a JavaScriptem, který běží ve WebView. The postMessage() metoda je používána funkcí JavaScriptu k přenosu dvou parametrů (x a y), které následně Dart přijímá prostřednictvím zpětného volání onMessageReceived. Díky této konfiguraci mohou být důležité informace efektivně přenášeny z webového obsahu do nativního kódu Dart.

Pomocí jsonDecode() dekódujeme přijatou zprávu na straně Dart. Přenosem dat JSON z JavaScriptu zajišťujeme, aby bylo možné organizovaným způsobem odesílat řadu parametrů. Po dekódování je Dart schopen načíst jednotlivé hodnoty (x a y) a použít je k libovolnému účelu. To zahrnuje záznam informací, změnu prvků uživatelského rozhraní a provádění dalších úkolů, které závisí na získaných hodnotách. Tato metoda zaručuje nízkou režii při odesílání složitých datových struktur z JavaScriptu do Dartu.

Kromě přímé správy zpráv jsme také zkoumali jiný přístup, který zahrnoval použití jedinečných schémat URL. Parametry můžeme přenášet přes URL změnou window.location.href v JavaScriptu. Dart pak může tato data zachytit pomocí navigaceDelegát. Při použití JavaScript kanál nemusí být proveditelné, nebo když komunikace založená na URL dává větší smysl vzhledem k designu programu, může být tento přístup užitečný. Poté Dart analyzuje URL a použije Uri.queryParameters funkce pro extrakci parametrů jako x a y. To zaručuje, že je možné několik komunikačních mechanismů mezi Dartem a webovým obsahem.

Výkon a bezpečnost mají nejvyšší prioritu ve všech přístupech, zejména při příjmu příchozí komunikace. Zvyšujeme bezpečnost a čitelnost procesů tím, že pro předávání zpráv používáme JSON, který zastavuje manipulaci s daty. Testy jednotek také zaručují, že funkčnost funguje tak, jak má v různých nastaveních. Hladký a spolehlivý, WebView integrace vytváří silné spojení mezi webovými technologiemi a nativním prostředím 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;
  },
);

Prozkoumání technik předávání parametrů ve Flutter WebView

Manipulace se složitějšími datovými strukturami je důležitou součástí předávání parametrů přes Flutter WebView mezi JavaScriptem a Dartem. I když jsme se soustředili na absolvování základních x a y argumenty, mohou nastat situace, kdy také potřebujete předat objekt, pole nebo dokonce několik vnořených objektů. Složité datové struktury lze převést do řetězcového formátu pomocí JavaScriptu JSON.stringify() metodu, kterou lze následně efektivně přenést pomocí postMessage() metoda. Poté může Dart využít jsonDecode() znovu sestavit původní strukturu, aby mohla být zpracována.

Další praktickou metodou je správa chyb při předávání zpráv. Při přesunu důležitých dat mezi těmito dvěma jazyky je zásadní zajistit, aby byla data ověřena v prostředí JavaScript i Dart. Doručení chybně tvarovaných dat lze předejít provedením kontrol před vyvoláním postMessage() na straně JavaScriptu. Můžete ověřit, že zakódovaná data mají očekávané klíče a hodnoty na straně Dart jejich validací. Kromě zajištění efektivní komunikace to chrání před chybami nebo poškozením dat.

navíc WebView in Flutter poskytuje další funkce, které vám umožní použít vlastní JavaScript na webovou stránku. Rutiny JavaScriptu můžete dynamicky spouštět ze strany Dart pomocí evaluateJavascript technika. To zvyšuje všestrannost tím, že umožňuje odesílání příkazů z vaší aplikace Flutter do webového obsahu, čímž se zlepšuje obousměrný komunikační kanál. Když je potřeba neustálá výměna dat mezi dvěma vrstvami, tato strategie funguje dobře.