Bruke JavaScript-kanalen i Flutter WebView for å overføre flere parametere fra JavaScript til Dart

Håndtere JavaScript til Dart-kommunikasjon i Flutter WebView

Å sette sammen en hybridapplikasjon kan kreve integrering av JavaScript og Flutter via en WebView. Dataoverføring fra JavaScript til Dart er en hyppig jobb som muliggjør jevn kommunikasjon mellom de to miljøene.

Dette innlegget vil forklare hvordan du bruker en Flutter WebView-plugins JavaScript-kanal for å overføre en rekke parametere fra JavaScript til Dart. Vi vil spesifikt konsentrere oss om en situasjon der to argumenter, si x og y, sendes til Dart av en JavaScript-funksjon ved hjelp av settposisjon kanal.

Selv om data kan sendes fra JavaScript vha postMessage(), er det viktig å håndtere disse meldingene riktig i Dart for å garantere at kommunikasjonen fungerer etter hensikten. Effektiv databehandling krever at du vet hvordan du bruker Dart's onMessageReceived funksjon for å gjøre dette.

Du er ikke alene hvis du har prøvd å søke på internett etter svar, men ikke funnet mye. Vi vil gå i detalj og gi deg en trinn-for-trinn-metode for å bygge opp denne kommunikasjonspipelinen i denne artikkelen.

Integrering av JavaScript og Dart Communication i Flutter WebView

Vår utviklede løsning viser hvordan du bruker en JavaScript-kanal å overføre mange argumenter fra JavaScript til Dart via Flutters WebView. Hovedmålet er å lage en pålitelig pipeline for kommunikasjon mellom Dart-koden og JavaScript som kjører i WebView. De postMessage() metoden brukes av JavaScript-funksjonen til å overføre to parametere (x og y), som deretter mottas av Dart via onMessageReceived tilbakeringing. Med denne konfigurasjonen kan viktig informasjon effektivt kommuniseres fra nettinnholdet til den opprinnelige Dart-koden.

Ved å bruke jsonDecode() funksjon, dekoder vi den mottatte meldingen på Dart-siden. Vi sørger for at mange parametere kan sendes på en organisert måte ved å overføre JSON-data fra JavaScript. Etter dekoding er Dart i stand til å hente de individuelle verdiene (x og y) og bruke dem til ethvert formål. Dette inkluderer registrering av informasjon, endring av brukergrensesnittelementer og utførelse av andre oppgaver som avhenger av de oppnådde verdiene. Denne metoden garanterer lav overhead når du sender komplekse datastrukturer fra JavaScript til Dart.

Bortsett fra å administrere meldinger direkte, undersøkte vi også en annen tilnærming som innebar å bruke unike URL-skjemaer. Vi kan overføre parametere via URL-en ved å endre window.location.href i JavaScript. Dart kan deretter fange opp disse dataene ved å bruke navigasjonsDelegat. Når du bruker JavaScript-kanal kanskje ikke er mulig, eller når URL-basert kommunikasjon gir mer mening gitt programmets design, kan denne tilnærmingen være nyttig. Etter det analyserer Dart URL-en og bruker Uri.queryParameters funksjon for å trekke ut parametere som x og y. Dette garanterer at flere kommunikasjonsmekanismer mellom Dart og webinnhold er mulig.

Ytelse og sikkerhet er gitt topp prioritet i alle tilnærminger, spesielt ved mottak av innkommende kommunikasjon. Vi øker prosesssikkerheten og lesbarheten ved å bruke JSON for meldingsoverføring, som stopper datamanipulering. Enhetstester garanterer også at funksjonaliteten fungerer etter hensikten i ulike innstillinger. Glatt og pålitelig, den WebView integrasjon skaper en sterk kobling mellom nettteknologier og Flutters opprinnelige miljø.

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

Utforsking av parameteroverføringsteknikker i Flutter WebView

Håndtering av mer kompliserte datastrukturer er en viktig del av parameteroverføring via en Flutter WebView mellom JavaScript og Dart. Selv om vårt fokus har vært på å bestå grunnleggende x og y argumenter, kan det være situasjoner der du også må sende et objekt, en matrise eller til og med flere nestede objekter. Komplekse datastrukturer kan konverteres til et strengformat ved hjelp av JavaScript JSON.stringify() metode, som deretter effektivt kan overføres ved hjelp av postMessage() metode. Etter det kan Dart bruke jsonDecode() å sette sammen den opprinnelige strukturen slik at den kan behandles.

Feilhåndtering ved videresending av meldinger er en annen praktisk metode. Å sørge for at dataene er validert i både JavaScript- og Dart-miljøene er avgjørende når du flytter viktige data mellom de to språkene. Feilformede data kan unngås fra å bli levert ved å sette kontroller på plass før påkalling postMessage() på JavaScript-siden. Du kan bekrefte at de kodede dataene har de forventede nøklene og verdiene på Dart-siden ved å validere dem. I tillegg til å sikre effektiv kommunikasjon, beskytter dette mot feil eller korrupte data.

I tillegg, WebView i Flutter gir en ekstra funksjonalitet som lar deg bruke tilpasset JavaScript på nettsiden. Du kan dynamisk utløse JavaScript-rutiner fra Dart-siden ved å bruke evaluateJavascript teknikk. Dette øker allsidigheten ved å gjøre det mulig å sende kommandoer fra Flutter-appen til nettinnholdet, slik at den toveis kommunikasjonskanalen forbedres. Når det er behov for konstant datautveksling mellom de to lagene, fungerer denne strategien bra.