Utilisation du canal JavaScript dans Flutter WebView pour transmettre plusieurs paramètres de JavaScript à Dart

Gestion de JavaScript vers Dart Communication dans Flutter WebView

L'assemblage d'une application hybride peut nécessiter l'intégration de JavaScript et Flutter via une WebView. La transmission de données de JavaScript vers Dart est une tâche fréquente qui permet une communication fluide entre les deux environnements.

Cet article expliquera comment utiliser le canal JavaScript d'un plugin Flutter WebView pour transférer de nombreux paramètres de JavaScript vers Dart. Nous nous concentrerons spécifiquement sur une situation dans laquelle deux arguments, disons x et oui, sont envoyés à Dart par une fonction JavaScript utilisant le définirPosition canal.

Bien que les données puissent être envoyées depuis JavaScript en utilisant postMessage(), il est impératif de gérer correctement ces messages dans Dart pour garantir que la communication fonctionne comme prévu. Un traitement efficace des données nécessite de savoir utiliser Dart's surMessageReçu fonction pour ce faire.

Vous n’êtes pas seul si vous avez essayé de chercher des réponses sur Internet mais que vous n’avez pas trouvé grand-chose. Nous entrerons dans les détails et vous donnerons une méthode étape par étape pour créer ce pipeline de communication dans cet article.

Intégration de JavaScript et Dart Communication dans Flutter WebView

Notre solution développée montre comment utiliser un Canal JavaScript transmettre de nombreux arguments de Javascript à Dart via WebView de Flutter. L'objectif principal est de créer un pipeline fiable pour la communication entre le code Dart et JavaScript qui s'exécute dans WebView. Le postMessage() La méthode est utilisée par la fonction JavaScript pour transmettre deux paramètres (x et y), qui sont ensuite reçus par Dart via le rappel onMessageReceived. Avec cette configuration, des informations importantes peuvent être communiquées efficacement du contenu Web au code Dart natif.

En utilisant le jsonDecode() fonction, nous décodons le message reçu côté Dart. Nous veillons à ce que de nombreux paramètres puissent être envoyés de manière organisée en transférant les données JSON depuis JavaScript. Après décodage, Dart est capable de récupérer les valeurs individuelles (x et y) et de les utiliser à n'importe quelle fin. Cela inclut l'enregistrement d'informations, la modification des éléments de l'interface utilisateur et l'exécution d'autres tâches qui dépendent des valeurs obtenues. Cette méthode garantit une faible surcharge lors de l'envoi de structures de données complexes de JavaScript vers Dart.

Outre la gestion directe des messages, nous avons également étudié une approche différente impliquant l'utilisation de schémas d'URL uniques. Nous pouvons transmettre des paramètres via l'URL en modifiant le fenêtre.emplacement.href en JavaScript. Dart peut alors intercepter ces données en utilisant le navigationDélégué. Lors de l'utilisation du Canal JavaScript peut ne pas être réalisable ou lorsque la communication basée sur des URL est plus logique compte tenu de la conception du programme, cette approche peut être utile. Après cela, Dart analyse l'URL et utilise le Uri.queryParameters fonction pour extraire des paramètres comme x et y. Cela garantit que plusieurs mécanismes de communication entre Dart et le contenu Web sont possibles.

Les performances et la sécurité sont prioritaires dans toutes les approches, en particulier lors de la réception de communications entrantes. Nous augmentons la sécurité et la lisibilité des processus en utilisant JSON pour la transmission des messages, ce qui arrête la manipulation des données. Les tests unitaires garantissent également que la fonctionnalité fonctionne comme prévu dans divers contextes. Doux et fiable, le Vue Web l'intégration crée un lien fort entre les technologies Web et l'environnement natif de 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;
  },
);

Explorer les techniques de transmission de paramètres dans Flutter WebView

La gestion de structures de données plus complexes est une partie importante du passage de paramètres via Flutter WebView entre JavaScript et Dart. Bien que notre objectif ait été de transmettre les connaissances de base x et oui arguments, il peut y avoir des situations dans lesquelles vous devez également transmettre un objet, un tableau ou même plusieurs objets imbriqués. Les structures de données complexes peuvent être converties en format de chaîne à l'aide de JavaScript. JSON.stringify() méthode, qui peut ensuite être efficacement transférée à l’aide du postMessage() méthode. Après cela, Dart peut utiliser jsonDecode() pour remonter la structure initiale afin qu'elle puisse être traitée.

La gestion des erreurs de transfert de messages est une autre méthode pratique. S'assurer que les données sont validées dans les environnements JavaScript et Dart est crucial lors du déplacement de données importantes entre les deux langages. Il est possible d'éviter la transmission de données mal formées en mettant en place des contrôles avant d'invoquer postMessage() du côté JavaScript. Vous pouvez vérifier que les données codées ont les clés et valeurs prévues côté Dart en les validant. En plus d’assurer une communication efficace, cela protège contre les erreurs ou les données corrompues.

En plus, WebView dans Flutter fournit une fonctionnalité supplémentaire qui vous permet d'appliquer du JavaScript personnalisé à la page Web. Vous pouvez déclencher dynamiquement des routines JavaScript du côté Dart en utilisant le evaluateJavascript technique. Cela augmente la polyvalence en permettant d'envoyer des commandes depuis votre application Flutter vers le contenu Web, améliorant ainsi le canal de communication bidirectionnel. Lorsqu’il est nécessaire d’échanger constamment des données entre les deux couches, cette stratégie fonctionne bien.