Het JavaScript-kanaal in Flutter WebView gebruiken om verschillende parameters van JavaScript door te geven aan Dart

Omgaan met JavaScript en Dart-communicatie in Flutter WebView

Voor het samenstellen van een hybride applicatie kan het nodig zijn om JavaScript en Flutter via een WebView te integreren. Gegevensoverdracht van JavaScript naar Dart is een veel voorkomende taak die een soepele communicatie tussen de twee omgevingen mogelijk maakt.

In dit bericht wordt uitgelegd hoe u het JavaScript-kanaal van een Flutter WebView-plug-in kunt gebruiken om talloze parameters van JavaScript naar Dart over te zetten. We zullen ons specifiek concentreren op een situatie waarin bijvoorbeeld twee argumenten voorkomen X En j, worden naar Dart verzonden door een JavaScript-functie met behulp van de setPositie kanaal.

Hoewel gegevens vanuit JavaScript kunnen worden verzonden met behulp van postBericht(), is het absoluut noodzakelijk om deze berichten correct af te handelen in Dart om te garanderen dat de communicatie functioneert zoals bedoeld. Effectieve gegevensverwerking vereist dat u weet hoe u Dart's moet gebruiken op Bericht ontvangen functie om dit te doen.

Je bent niet de enige als je op internet naar antwoorden hebt gezocht, maar niet veel hebt gevonden. In dit artikel gaan we hier uitgebreid op in en geven we u een stapsgewijze methode voor het opbouwen van deze communicatiepijplijn.

Integratie van JavaScript en Dart-communicatie in Flutter WebView

Onze ontwikkelde oplossing laat zien hoe u een JavaScript-kanaal om talloze argumenten over te brengen JavaScript naar Dart via Flutter's WebView. Het primaire doel is het creëren van een betrouwbare pijplijn voor communicatie tussen de Dart-code en JavaScript die in WebView draait. De postBericht() methode wordt door de JavaScript-functie gebruikt om twee parameters (x en y) te verzenden, die vervolgens door Dart worden ontvangen via de onMessageReceived callback. Met deze configuratie kan belangrijke informatie effectief worden gecommuniceerd van de webinhoud naar de native Dart-code.

Met behulp van de jsonDecode() functie decoderen we het ontvangen bericht aan de Dart-kant. Wij zorgen ervoor dat talloze parameters op een georganiseerde manier kunnen worden verzonden door JSON-gegevens uit JavaScript over te zetten. Na het decoderen kan Dart de individuele waarden (x en y) ophalen en voor elk doel gebruiken. Dit omvat het vastleggen van informatie, het wijzigen van elementen van de gebruikersinterface en het uitvoeren van andere taken die afhankelijk zijn van de verkregen waarden. Deze methode garandeert lage overhead bij het verzenden van complexe datastructuren van JavaScript naar Dart.

Naast het rechtstreeks beheren van berichten, hebben we ook gekeken naar een andere aanpak waarbij gebruik werd gemaakt van unieke URL-schema's. We kunnen parameters via de URL verzenden door de venster.locatie.href in JavaScript. Dart kan deze gegevens vervolgens onderscheppen met behulp van de navigatieDelegeren. Bij gebruik van de JavaScript-kanaal misschien niet haalbaar is of wanneer URL-gebaseerde communicatie logischer is gezien het ontwerp van het programma, kan deze aanpak nuttig zijn. Daarna parseert Dart de URL en gebruikt de Uri.queryParameters functie om parameters zoals x en y te extraheren. Dit garandeert dat verschillende communicatiemechanismen tussen Dart en webinhoud mogelijk zijn.

Prestaties en veiligheid krijgen bij alle benaderingen de hoogste prioriteit, vooral bij het ontvangen van inkomende communicatie. We verhogen de procesveiligheid en leesbaarheid door JSON in te zetten voor het doorgeven van berichten, waardoor gegevensmanipulatie wordt gestopt. Unittests garanderen bovendien dat de functionaliteit in verschillende instellingen functioneert zoals bedoeld. Soepel en betrouwbaar, de Webweergave integratie creëert een sterke link tussen webtechnologieën en de eigen omgeving van Flutter.

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

Onderzoek naar technieken voor het doorgeven van parameters in Flutter WebView

Het omgaan met meer gecompliceerde datastructuren is een belangrijk onderdeel van het doorgeven van parameters via een Flutter WebView tussen JavaScript en Dart. Hoewel onze focus lag op het behalen van de basis X En j argumenten, kunnen er situaties zijn waarin u ook een object, array of zelfs meerdere geneste objecten moet doorgeven. Complexe datastructuren kunnen met behulp van JavaScript worden omgezet in een stringformaat JSON.stringify() methode, die vervolgens effectief kan worden overgedragen met behulp van de postMessage() methode. Daarna kan Dart gebruiken jsonDecode() om de oorspronkelijke structuur weer in elkaar te zetten, zodat deze kan worden verwerkt.

Foutbeheer bij het doorsturen van berichten is een andere praktische methode. Ervoor zorgen dat de gegevens worden gevalideerd in zowel de JavaScript- als de Dart-omgeving is van cruciaal belang bij het verplaatsen van belangrijke gegevens tussen de twee talen. Voorkomen kan worden dat onjuist opgemaakte gegevens worden geleverd door controles uit te voeren voordat er een beroep op wordt gedaan postMessage() aan de JavaScript-kant. U kunt verifiëren dat de gecodeerde gegevens de verwachte sleutels en waarden aan de Dart-kant hebben door deze te valideren. Dit zorgt niet alleen voor effectieve communicatie, maar beschermt ook tegen fouten of beschadigde gegevens.

Aanvullend, WebView in Flutter biedt een extra functionaliteit waarmee u aangepast JavaScript op de webpagina kunt toepassen. U kunt JavaScript-routines dynamisch activeren vanaf de Dart-kant door gebruik te maken van de evaluateJavascript techniek. Dit vergroot de veelzijdigheid doordat opdrachten vanuit uw Flutter-app naar de webinhoud kunnen worden verzonden, waardoor het tweerichtingscommunicatiekanaal wordt verbeterd. Wanneer er behoefte is aan constante gegevensuitwisseling tussen de twee lagen, werkt deze strategie goed.