Använda JavaScript-kanalen i Flutter WebView för att skicka flera parametrar från JavaScript till Dart

Hantera JavaScript till Dart-kommunikation i Flutter WebView

Att montera en hybridapplikation kan kräva att JavaScript och Flutter integreras via en WebView. Dataöverföring från JavaScript till Dart är ett frekvent jobb som möjliggör smidig kommunikation mellan de två miljöerna.

Det här inlägget kommer att förklara hur man använder en Flutter WebView-plugins JavaScript-kanal för att överföra många parametrar från JavaScript till Dart. Vi kommer specifikt att koncentrera oss på en situation där två argument, t.ex x och y, skickas till Dart med en JavaScript-funktion med hjälp av setPosition kanal.

Även om data kan skickas från JavaScript med hjälp av postMessage(), är det absolut nödvändigt att hantera dessa meddelanden korrekt i Dart för att garantera att kommunikationen fungerar som avsett. Effektiv databehandling kräver att du vet hur man använder Dart's onMessageReceived funktion för att göra detta.

Du är inte ensam om du har försökt söka på internet efter svar men inte hittat mycket. Vi kommer att gå in i detalj och ge dig en steg-för-steg-metod för att bygga upp denna kommunikationspipeline i den här artikeln.

Integrering av JavaScript och Dart Communication i Flutter WebView

Vår utvecklade lösning visar hur man använder en JavaScript-kanal att överföra många argument från JavaScript till Dart via Flutters WebView. Det primära målet är att skapa en pålitlig pipeline för kommunikation mellan Dart-koden och JavaScript som körs i WebView. De postMessage() metoden används av JavaScript-funktionen för att överföra två parametrar (x och y), som sedan tas emot av Dart via onMessageReceived callback. Med denna konfiguration kan viktig information effektivt kommuniceras från webbinnehållet till den inbyggda Dart-koden.

Med hjälp av jsonDecode() funktion, avkodar vi det mottagna meddelandet på Dart-sidan. Vi ser till att många parametrar kan skickas på ett organiserat sätt genom att överföra JSON-data från JavaScript. Efter avkodning kan Dart hämta de individuella värdena (x och y) och använda dem för alla ändamål. Detta inkluderar att registrera information, ändra användargränssnittselement och utföra andra uppgifter som beror på de erhållna värdena. Denna metod garanterar låg omkostnad när du skickar komplexa datastrukturer från JavaScript till Dart.

Förutom att hantera meddelanden direkt, undersökte vi också ett annat tillvägagångssätt som innebar att använda unika URL-scheman. Vi kan överföra parametrar via URL:en genom att ändra window.location.href i JavaScript. Dart kan sedan fånga upp denna data med hjälp av navigationDelegate. När du använder JavaScript-kanal kanske inte är genomförbart eller när URL-baserad kommunikation är mer vettig med tanke på programmets design, kan detta tillvägagångssätt vara användbart. Efter det analyserar Dart URL:en och använder Uri.queryParameters funktion för att extrahera parametrar som x och y. Detta garanterar att flera kommunikationsmekanismer mellan Dart och webbinnehåll är möjliga.

Prestanda och säkerhet ges högsta prioritet i alla tillvägagångssätt, särskilt vid mottagning av inkommande kommunikation. Vi ökar processsäkerheten och läsbarheten genom att använda JSON för meddelandeöverföring, vilket stoppar datamanipulation. Enhetstester garanterar också att funktionaliteten fungerar som avsett i olika inställningar. Smidig och pålitlig, den WebView integration skapar en stark länk mellan webbteknologier och Flutters inhemska 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;
  },
);

Utforska parameterpasseringstekniker i Flutter WebView

Att hantera mer komplicerade datastrukturer är en viktig del av parameteröverföring via en Flutter WebView mellan JavaScript och Dart. Även om vårt fokus har legat på att klara basic x och y argument kan det finnas situationer där du också behöver skicka ett objekt, en array eller till och med flera kapslade objekt. Komplexa datastrukturer kan konverteras till ett strängformat med hjälp av JavaScript JSON.stringify() metod, som sedan effektivt kan överföras med hjälp av postMessage() metod. Efter det kan Dart använda jsonDecode() att återmontera den ursprungliga strukturen så att den kan bearbetas.

Felhantering vid vidarebefordran av meddelanden är en annan praktisk metod. Att se till att data valideras i både JavaScript- och Dart-miljöerna är avgörande när du flyttar viktig data mellan de två språken. Missformade data kan undvikas från att levereras genom att sätta kontroller på plats innan anropet postMessage() på JavaScript-sidan. Du kan verifiera att den kodade datan har de förväntade nycklarna och värdena på Dart-sidan genom att validera den. Förutom att säkerställa effektiv kommunikation, skyddar detta mot misstag eller korrupta data.

Dessutom, WebView i Flutter tillhandahåller en extra funktion som låter dig tillämpa anpassad JavaScript på webbsidan. Du kan utlösa JavaScript-rutiner dynamiskt från Dart-sidan genom att använda evaluateJavascript teknik. Detta ökar mångsidigheten genom att möjliggöra att kommandon skickas från din Flutter-app till webbinnehållet, vilket förbättrar tvåvägskommunikationskanalen. När det finns ett behov av konstant datautbyte mellan de två lagren fungerar denna strategi bra.