Brug af JavaScript-kanalen i Flutter WebView til at overføre flere parametre fra JavaScript til Dart

Håndtering af JavaScript til Dart-kommunikation i Flutter WebView

Samling af en hybridapplikation kan kræve integration af JavaScript og Flutter via en WebView. Datatransmission fra JavaScript til Dart er et hyppigt job, der muliggør jævn kommunikation mellem de to miljøer.

Dette indlæg vil forklare, hvordan man bruger et Flutter WebView-plugins JavaScript-kanal til at overføre adskillige parametre fra JavaScript til Dart. Vi vil specifikt koncentrere os om en situation, hvor to argumenter f.eks x og y, sendes til Dart af en JavaScript-funktion ved hjælp af sætposition kanal.

Selvom data kan sendes fra JavaScript vha postMessage(), er det bydende nødvendigt at håndtere disse beskeder korrekt i Dart for at garantere, at kommunikationen fungerer efter hensigten. Effektiv databehandling kræver at vide, hvordan man bruger Dart's onMessageReceived funktion til at gøre dette.

Du er ikke alene, hvis du har prøvet at søge på internettet efter svar, men ikke har fundet meget. Vi vil gå i detaljer og give dig en trin-for-trin metode til at opbygge denne kommunikationspipeline i denne artikel.

Integrering af JavaScript og Dart Communication i Flutter WebView

Vores udviklede løsning viser, hvordan man bruger en JavaScript kanal at overføre talrige argumenter fra JavaScript til Dart via Flutter's WebView. Det primære mål er at skabe en pålidelig pipeline til kommunikation mellem Dart-koden og JavaScript, der kører i WebView. De postMessage() metoden bruges af JavaScript-funktionen til at sende to parametre (x og y), som efterfølgende modtages af Dart via onMessageReceived callback. Med denne konfiguration kan vigtig information effektivt kommunikeres fra webindholdet til den oprindelige Dart-kode.

Ved hjælp af jsonDecode() funktion, afkoder vi den modtagne besked på Dart-siden. Vi sørger for, at adskillige parametre kan sendes på en organiseret måde ved at overføre JSON-data fra JavaScript. Efter afkodning er Dart i stand til at hente de individuelle værdier (x og y) og bruge dem til ethvert formål. Dette omfatter registrering af information, ændring af brugergrænsefladeelementer og udførelse af andre opgaver, der afhænger af de opnåede værdier. Denne metode garanterer lav overhead, når der sendes komplekse datastrukturer fra JavaScript til Dart.

Udover at administrere beskeder direkte, undersøgte vi også en anden tilgang, der involverede brug af unikke URL-skemaer. Vi kan overføre parametre via URL'en ved at ændre window.location.href i JavaScript. Dart kan derefter opsnappe disse data ved hjælp af navigationsdelegeret. Ved brug af JavaScript kanal er muligvis ikke mulig, eller når URL-baseret kommunikation giver mere mening i betragtning af programmets design, kan denne tilgang være nyttig. Derefter analyserer Dart URL'en og bruger Uri.queryParameters funktion til at udtrække parametre som x og y. Dette garanterer, at flere kommunikationsmekanismer mellem Dart og webindhold er mulige.

Ydeevne og sikkerhed har topprioritet i alle tilgange, især ved modtagelse af indgående kommunikation. Vi øger processikkerheden og læsbarheden ved at anvende JSON til meddelelsesoverførsel, hvilket stopper datamanipulation. Enhedstest garanterer også, at funktionaliteten fungerer efter hensigten i forskellige indstillinger. Glat og pålidelig, den WebView integration skaber en stærk forbindelse mellem webteknologier og Flutters oprindelige 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;
  },
);

Udforskning af parameteroverførselsteknikker i Flutter WebView

Håndtering af mere komplicerede datastrukturer er en vigtig del af parameteroverførsel via en Flutter WebView mellem JavaScript og Dart. Selvom vores fokus har været på at bestå basic x og y argumenter, kan der være situationer, hvor du også skal sende et objekt, et array eller endda flere indlejrede objekter. Komplekse datastrukturer kan konverteres til et strengformat ved hjælp af JavaScript JSON.stringify() metode, som derefter effektivt kan overføres ved hjælp af postMessage() metode. Derefter kan Dart bruge jsonDecode() at samle den oprindelige struktur igen, så den kan behandles.

Fejlhåndtering ved videresendelse af beskeder er en anden praktisk metode. Det er afgørende at sikre, at dataene er valideret i både JavaScript- og Dart-miljøerne, når du flytter vigtige data mellem de to sprog. Misdannede data kan undgås i at blive leveret ved at sætte kontrol på plads før påberåbelse postMessage() på JavaScript-siden. Du kan kontrollere, at de kodede data har de forventede nøgler og værdier på Dart-siden ved at validere dem. Ud over at sikre effektiv kommunikation, beskytter dette mod fejl eller korrupte data.

Derudover WebView i Flutter giver en ekstra funktionalitet, der lader dig anvende tilpasset JavaScript på websiden. Du kan dynamisk udløse JavaScript-rutiner fra Dart-siden ved at bruge evaluateJavascript teknik. Dette øger alsidigheden ved at gøre det muligt at sende kommandoer fra din Flutter-app til webindholdet, så tovejskommunikationskanalen forbedres. Når der er behov for konstant dataudveksling mellem de to lag, fungerer denne strategi godt.