Korištenje JavaScript kanala u Flutter WebViewu za prosljeđivanje nekoliko parametara iz JavaScripta u Dart

Rukovanje JavaScript to Dart komunikacijom u Flutter WebViewu

Sastavljanje hibridne aplikacije može zahtijevati integraciju JavaScripta i Fluttera putem WebViewa. Prijenos podataka iz JavaScripta u Dart jedan je čest posao koji omogućuje glatku komunikaciju između dva okruženja.

Ovaj će post objasniti kako koristiti JavaScript kanal dodatka Flutter WebView za prijenos brojnih parametara iz JavaScripta u Dart. Posebno ćemo se usredotočiti na situaciju u kojoj dva argumenta, npr x i g, šalju se u Dart JavaScript funkcijom pomoću setPosition kanal.

Iako se podaci mogu slati iz JavaScripta pomoću objavi poruku(), neophodno je pravilno rukovati tim porukama u Dartu kako bi se zajamčilo da komunikacija funkcionira kako je predviđeno. Za učinkovitu obradu podataka potrebno je znati kako se koristiti Dartom onMessageReceived funkciju za to.

Niste sami ako ste pokušali tražiti odgovore na internetu, ali niste pronašli mnogo. Ući ćemo u detalje i dati vam korak po korak metodu za izgradnju ovog komunikacijskog cjevovoda u ovom članku.

Integracija JavaScripta i Dart komunikacije u Flutter WebView

Naše razvijeno rješenje pokazuje kako koristiti a JavaScript kanal prenijeti brojne argumente iz JavaScript na Dart putem Flutterovog WebViewa. Primarni cilj je stvoriti pouzdan cjevovod za komunikaciju između Dart koda i JavaScripta koji se izvodi u WebViewu. The objavi poruku() JavaScript funkcija koristi metodu za prijenos dva parametra (x i y), koje zatim prima Dart putem povratnog poziva onMessageReceived. Uz ovu konfiguraciju, važne informacije mogu se učinkovito prenijeti s web sadržaja na izvorni Dart kod.

Korištenje jsonDecode() funkciju dekodiramo primljenu poruku na Dart strani. Osiguravamo da se brojni parametri mogu slati na organiziran način prijenosom JSON podataka iz JavaScripta. Nakon dekodiranja, Dart može dohvatiti pojedinačne vrijednosti (x i y) i koristiti ih u bilo koju svrhu. To uključuje snimanje informacija, mijenjanje elemenata korisničkog sučelja i izvršavanje drugih zadataka koji ovise o dobivenim vrijednostima. Ova metoda jamči niske troškove prilikom slanja složenih struktura podataka iz JavaScripta u Dart.

Osim izravnog upravljanja porukama, također smo istražili drugačiji pristup koji uključuje korištenje jedinstvenih URL shema. Parametre možemo prenijeti putem URL-a promjenom prozor.lokacija.href u JavaScriptu. Dart tada može presresti te podatke pomoću navigationDelegate. Prilikom korištenja JavaScript kanal možda nije izvedivo ili kada komunikacija temeljena na URL-u ima više smisla s obzirom na dizajn programa, ovaj pristup može biti koristan. Nakon toga, Dart analizira URL i koristi Uri.queryParameters funkcija za izdvajanje parametara kao što su x i y. To jamči da je moguće nekoliko komunikacijskih mehanizama između Darta i web sadržaja.

Performanse i sigurnost imaju najveći prioritet u svim pristupima, osobito pri primanju dolaznih komunikacija. Povećavamo sigurnost procesa i čitljivost korištenjem JSON-a za prijenos poruka, što zaustavlja manipulaciju podacima. Jedinični testovi također jamče da funkcionalnost funkcionira kako je predviđeno u različitim postavkama. Glatko i pouzdano, WebView integracija stvara snažnu vezu između web tehnologija i izvornog okruženja 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;
  },
);

Istraživanje tehnika prosljeđivanja parametara u Flutter WebViewu

Rukovanje kompliciranijim strukturama podataka važan je dio prijenosa parametara putem Flutter WebViewa između JavaScripta i Darta. Iako je naš fokus bio na polaganju osnovnih x i g argumenata, mogu postojati situacije u kojima također trebate proslijediti objekt, polje ili čak nekoliko ugniježđenih objekata. Složene strukture podataka mogu se pretvoriti u format niza pomoću JavaScripta JSON.stringify() metoda, koja se zatim može učinkovito prenijeti pomoću postMessage() metoda. Nakon toga, Dart može koristiti jsonDecode() ponovno sastaviti početnu strukturu kako bi se mogla obraditi.

Upravljanje pogreškama pri prosljeđivanju poruka još je jedna praktična metoda. Prilikom premještanja važnih podataka s jednog jezika na drugi ključna je provjera valjanosti podataka u okruženjima JavaScript i Dart. Isporuka neispravnih podataka može se izbjeći postavljanjem provjera prije pozivanja postMessage() na strani JavaScripta. Možete potvrditi da kodirani podaci imaju predviđene ključeve i vrijednosti na Dart strani tako da ih potvrdite. Osim što osigurava učinkovitu komunikaciju, ovo štiti od pogrešaka ili oštećenih podataka.

Dodatno, WebView u Flutteru pruža dodatnu funkcionalnost koja vam omogućuje primjenu prilagođenog JavaScripta na web stranicu. Možete dinamički pokrenuti JavaScript rutine sa Dart strane korištenjem evaluateJavascript tehnika. Ovo povećava svestranost omogućavanjem slanja naredbi iz vaše aplikacije Flutter na web sadržaj, čime se poboljšava dvosmjerni komunikacijski kanal. Kada postoji potreba za stalnom razmjenom podataka između dva sloja, ova strategija dobro funkcionira.