A JavaScript-csatorna használata a Flutter WebView-ban számos paraméter átadására JavaScriptről Dart-ra

JavaScript kezelése Dart kommunikációhoz a Flutter WebView-ban

Egy hibrid alkalmazás összeállításához szükség lehet a JavaScript és a Flutter WebView-n keresztüli integrálására. Az adatátvitel a JavaScriptről a Dartba egy gyakori feladat, amely lehetővé teszi a zavartalan kommunikációt a két környezet között.

Ez a bejegyzés elmagyarázza, hogyan használható a Flutter WebView beépülő modul JavaScript-csatornája számos paraméter átvitelére JavaScriptről Dartba. Kifejezetten egy olyan helyzetre fogunk koncentrálni, amelyben mondjuk két érv x és y, amelyeket egy JavaScript-függvény küld a Dartnak a setPosition csatorna.

Bár JavaScriptből is lehet adatokat küldeni segítségével postMessage(), elengedhetetlen, hogy ezeket az üzeneteket helyesen kezelje a Dartban, hogy a kommunikáció a kívánt módon működjön. A hatékony adatfeldolgozás megköveteli a Dart használatának ismeretét onMessageReceived funkciót ehhez.

Nem vagy egyedül, ha az interneten próbáltál választ keresni, de nem sokat találtál. Ebben a cikkben részletesen kitérünk, és lépésről lépésre bemutatjuk a kommunikációs csatorna felépítésének módszerét.

JavaScript és Dart kommunikáció integrálása a Flutter WebView-ban

Kifejlesztett megoldásunk bemutatja, hogyan kell használni a JavaScript csatorna számos érvet továbbítani JavaScript a Darthoz a Flutter's WebView segítségével. Az elsődleges cél egy megbízható folyamat létrehozása a Dart kód és a WebView-ban futó JavaScript közötti kommunikációhoz. A postMessage() metódust használja a JavaScript függvény két paraméter (x és y) továbbítására, amelyeket ezt követően a Dart az onMessageReceived visszahíváson keresztül kap. Ezzel a konfigurációval a fontos információk hatékonyan továbbíthatók a webtartalomból a natív Dart kódba.

A jsonDecode() függvényében dekódoljuk a beérkezett üzenetet a Dart oldalon. Gondoskodunk arról, hogy számos paraméter szervezett módon elküldhető legyen a JSON-adatok JavaScriptből történő átvitelével. A dekódolás után a Dart képes lekérni az egyes értékeket (x és y), és bármilyen célra felhasználni. Ez magában foglalja az információk rögzítését, a felhasználói felület elemeinek módosítását és a kapott értékektől függő egyéb feladatok elvégzését. Ez a módszer alacsony többletköltséget garantál, ha összetett adatstruktúrákat küld JavaScriptből a Dartba.

Az üzenetek közvetlen kezelésén túl egy másik megközelítést is megvizsgáltunk, amely egyedi URL-sémák használatát jelentette. A paramétereket az URL-en keresztül továbbíthatjuk a window.location.href JavaScriptben. A Dart ezután elfoghatja ezeket az adatokat a navigationDelegate. Amikor a JavaScript csatorna esetleg nem kivitelezhető, vagy ha az URL-alapú kommunikáció ésszerűbb a program felépítése miatt, ez a megközelítés hasznos lehet. Ezt követően a Dart elemzi az URL-t, és a Uri.queryParameters függvény olyan paraméterek kinyerésére, mint az x és az y. Ez garantálja, hogy többféle kommunikációs mechanizmus lehetséges a Dart és a webtartalom között.

A teljesítmény és a biztonság minden megközelítésben elsődleges prioritást élvez, különösen a bejövő kommunikáció fogadásakor. Növeljük a folyamatok biztonságát és olvashatóságát azáltal, hogy JSON-t használunk az üzenettovábbításhoz, amely leállítja az adatkezelést. Az egységtesztek azt is garantálják, hogy a funkcionalitás a különböző beállításokban rendeltetésszerűen működik. Sima és megbízható, a WebView az integráció erős kapcsolatot teremt a webes technológiák és a Flutter natív környezete között.

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

Paraméterátadási technikák felfedezése a Flutter WebView-ban

A bonyolultabb adatstruktúrák kezelése fontos része a JavaScript és a Dart közötti Flutter WebView-n keresztüli paramétertovábbításnak. Bár a hangsúly az alapok átadásán volt x és y argumentumokkal, előfordulhatnak olyan helyzetek, amikor egy objektumot, tömböt vagy akár több beágyazott objektumot is át kell adni. Az összetett adatszerkezetek karakterlánc-formátumba konvertálhatók JavaScript segítségével JSON.stringify() módszerrel, amely aztán hatékonyan átvihető a postMessage() módszer. Ezt követően a Dart használhatja jsonDecode() hogy újra összeállítsa a kezdeti szerkezetet, hogy feldolgozható legyen.

Az üzenettovábbítási hibakezelés egy másik gyakorlati módszer. A fontos adatok két nyelv közötti mozgatásakor elengedhetetlen annak biztosítása, hogy az adatok a JavaScript és a Dart környezetben is érvényesek legyenek. A hibásan formázott adatok továbbítása elkerülhető, ha a hívás előtt ellenőrzéseket hajt végre postMessage() a JavaScript oldalon. Az érvényesítéssel ellenőrizheti, hogy a kódolt adatok tartalmazzák-e a várt kulcsokat és értékeket a Dart oldalon. Amellett, hogy biztosítja a hatékony kommunikációt, ez megóvja a hibákat és az adatok megsértését.

Ezenkívül WebView a Flutter egy olyan extra funkciót biztosít, amellyel egyéni JavaScriptet alkalmazhat a weboldalon. Dinamikusan elindíthatja a JavaScript-rutinokat a Dart oldalról a evaluateJavascript technika. Ez növeli a sokoldalúságot azáltal, hogy lehetővé teszi a parancsok küldését a Flutter alkalmazásból a webtartalomhoz, így javítva a kétirányú kommunikációs csatornát. Ha állandó adatcserére van szükség a két réteg között, ez a stratégia jól működik.