Utilizzo del canale JavaScript in Flutter WebView per passare diversi parametri da JavaScript a Dart

Gestione di JavaScript per Dart Communication in Flutter WebView

L'assemblaggio di un'applicazione ibrida potrebbe richiedere l'integrazione di JavaScript e Flutter tramite WebView. La trasmissione dei dati da JavaScript a Dart è un lavoro frequente che consente una comunicazione fluida tra i due ambienti.

Questo post spiegherà come utilizzare il canale JavaScript del plug-in Flutter WebView per trasferire numerosi parametri da JavaScript a Dart. Ci concentreremo specificamente su una situazione in cui due argomenti, diciamo X E sì, vengono inviati a Dart da una funzione JavaScript utilizzando il file setPosition canale.

Sebbene i dati possano essere inviati da JavaScript utilizzando postMessaggio(), è fondamentale gestire correttamente questi messaggi in Dart per garantire che la comunicazione funzioni come previsto. Un'elaborazione efficace dei dati richiede la conoscenza di come utilizzare Dart onMessaggio ricevuto funzione per farlo.

Non sei solo se hai provato a cercare risposte su Internet ma non hai trovato molto. In questo articolo entreremo nei dettagli e ti forniremo un metodo passo passo per costruire questa pipeline di comunicazione.

Integrazione di JavaScript e Dart Communication in Flutter WebView

La nostra soluzione sviluppata mostra come utilizzare a Canale JavaScript da cui trasmettere numerosi argomenti JavaScript a Dart tramite WebView di Flutter. L'obiettivo principale è creare una pipeline affidabile per la comunicazione tra il codice Dart e JavaScript eseguito in WebView. IL postMessaggio() Il metodo viene utilizzato dalla funzione JavaScript per trasmettere due parametri (xey), che vengono successivamente ricevuti da Dart tramite il callback onMessageReceived. Con questa configurazione, informazioni importanti possono essere comunicate in modo efficace dal contenuto web al codice Dart nativo.

Utilizzando il jsonDecode() funzione, decodifichiamo il messaggio ricevuto sul lato Dart. Ci assicuriamo che numerosi parametri possano essere inviati in modo organizzato trasferendo i dati JSON da JavaScript. Dopo la decodifica, Dart è in grado di recuperare i singoli valori (xey) e utilizzarli per qualsiasi scopo. Ciò include la registrazione di informazioni, la modifica degli elementi dell'interfaccia utente e l'esecuzione di altre attività che dipendono dai valori ottenuti. Questo metodo garantisce un sovraccarico ridotto durante l'invio di strutture dati complesse da JavaScript a Dart.

Oltre alla gestione diretta dei messaggi, abbiamo anche esaminato un approccio diverso che prevedeva l'utilizzo di schemi URL univoci. Possiamo trasmettere parametri tramite l'URL modificando il file finestra.posizione.href in JavaScript. Dart può quindi intercettare questi dati utilizzando il file navigazioneDelegato. Quando si utilizza il Canale JavaScript potrebbe non essere fattibile o quando la comunicazione basata su URL ha più senso data la progettazione del programma, questo approccio può essere utile. Successivamente, Dart analizza l'URL e utilizza il file Uri.queryParameters funzione per estrarre parametri come xey. Ciò garantisce che siano possibili diversi meccanismi di comunicazione tra Dart e il contenuto web.

Prestazioni e sicurezza hanno la massima priorità in tutti gli approcci, in particolare quando si ricevono comunicazioni in entrata. Aumentiamo la sicurezza e la leggibilità del processo utilizzando JSON per lo scambio di messaggi, che interrompe la manipolazione dei dati. I test unitari garantiscono inoltre che la funzionalità funzioni come previsto in varie impostazioni. Fluido e affidabile, il WebView l'integrazione crea un forte legame tra le tecnologie web e l'ambiente nativo di 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;
  },
);

Esplorazione delle tecniche di passaggio dei parametri in Flutter WebView

La gestione di strutture dati più complicate è una parte importante del passaggio dei parametri tramite Flutter WebView tra JavaScript e Dart. Anche se il nostro obiettivo è stato quello di superare il livello base X E sì argomenti, possono esserci situazioni in cui è necessario passare anche un oggetto, un array o anche diversi oggetti nidificati. Strutture dati complesse possono essere convertite in un formato stringa utilizzando JavaScript JSON.stringify() metodo, che può quindi essere trasferito efficacemente utilizzando il metodo postMessage() metodo. Successivamente, Dart può utilizzare jsonDecode() ricomporre la struttura iniziale affinché possa essere elaborata.

La gestione degli errori di inoltro dei messaggi è un altro metodo pratico. Assicurarsi che i dati siano convalidati in entrambi gli ambienti JavaScript e Dart è fondamentale quando si spostano dati importanti tra i due linguaggi. È possibile evitare che i dati non corretti vengano consegnati effettuando controlli prima dell'invocazione postMessage() dal lato JavaScript. Puoi verificare che i dati codificati abbiano le chiavi e i valori previsti sul lato Dart convalidandoli. Oltre a garantire una comunicazione efficace, ciò protegge da errori o dati corrotti.

Inoltre, WebView in Flutter fornisce una funzionalità aggiuntiva che ti consente di applicare JavaScript personalizzato alla pagina web. Puoi attivare dinamicamente le routine JavaScript dal lato Dart utilizzando il file evaluateJavascript tecnica. Ciò aumenta la versatilità consentendo l'invio di comandi dalla tua app Flutter al contenuto web, migliorando così il canale di comunicazione bidirezionale. Quando è necessario un costante scambio di dati tra i due livelli, questa strategia funziona bene.