Ús del canal JavaScript a Flutter WebView per passar diversos paràmetres de JavaScript a Dart

Maneig de JavaScript a Dart Communication a Flutter WebView

El muntatge d'una aplicació híbrida pot requerir la integració de JavaScript i Flutter mitjançant una WebView. La transmissió de dades de JavaScript a Dart és una tasca freqüent que permet una comunicació fluida entre els dos entorns.

En aquesta publicació s'explicarà com utilitzar el canal JavaScript d'un connector Flutter WebView per transferir nombrosos paràmetres de JavaScript a Dart. Ens centrarem específicament en una situació en què dos arguments, per exemple x i y, s'envien a Dart mitjançant una funció JavaScript utilitzant el setPosition canal.

Tot i que les dades es poden enviar des de JavaScript mitjançant postMessage(), és imprescindible gestionar aquests missatges correctament a Dart per garantir que la comunicació funcioni com es pretén. El processament de dades eficaç requereix saber com utilitzar Dart's onMessageReceived funció per fer-ho.

No esteu sols si heu provat de cercar respostes a Internet però no n'heu trobat gaire. En aquest article entrarem en detalls i us donarem un mètode pas a pas per crear aquest canal de comunicació.

Integració de JavaScript i Dart Communication a Flutter WebView

La nostra solució desenvolupada mostra com utilitzar a Canal JavaScript de transmetre nombrosos arguments JavaScript a Dart mitjançant Flutter's WebView. L'objectiu principal és crear una canalització fiable per a la comunicació entre el codi Dart i JavaScript que s'executa a WebView. El postMessage() La funció JavaScript utilitza el mètode per transmetre dos paràmetres (x i y), que Dart rep posteriorment mitjançant la devolució de trucada onMessageReceived. Amb aquesta configuració, la informació important es pot comunicar efectivament des del contingut web al codi de Dart natiu.

Utilitzant el jsonDecode() funció, descodifiquem el missatge rebut al costat de Dart. Ens assegurem que es poden enviar nombrosos paràmetres de manera organitzada mitjançant la transferència de dades JSON des de JavaScript. Després de la descodificació, Dart és capaç de recuperar els valors individuals (x i y) i utilitzar-los per a qualsevol propòsit. Això inclou registrar informació, alterar elements de la interfície d'usuari i realitzar altres tasques que depenen dels valors obtinguts. Aquest mètode garanteix una sobrecàrrega baixa quan s'envien estructures de dades complexes de JavaScript a Dart.

A part de gestionar directament els missatges, també vam estudiar un enfocament diferent que implicava utilitzar esquemes d'URL únics. Podem transmetre paràmetres mitjançant l'URL canviant el window.location.href en JavaScript. Dart pot interceptar aquestes dades utilitzant el delegat de navegació. Quan utilitzeu el Canal JavaScript pot ser que no sigui factible o quan la comunicació basada en URL té més sentit donat el disseny del programa, aquest enfocament pot ser útil. Després d'això, Dart analitza l'URL i utilitza Uri.queryParameters funció per extreure paràmetres com x i y. Això garanteix que són possibles diversos mecanismes de comunicació entre Dart i el contingut web.

El rendiment i la seguretat tenen la màxima prioritat en tots els enfocaments, especialment quan es reben comunicacions entrants. Augmentem la seguretat i la llegibilitat dels processos utilitzant JSON per passar missatges, cosa que atura la manipulació de dades. Les proves d'unitat també garanteixen que la funcionalitat funcioni tal com s'ha previst en diverses configuracions. Suau i fiable, el WebView La integració crea un vincle fort entre les tecnologies web i l'entorn natiu 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;
  },
);

Explorant les tècniques de pas de paràmetres a Flutter WebView

La gestió d'estructures de dades més complicades és una part important del pas de paràmetres a través d'un Flutter WebView entre JavaScript i Dart. Tot i que ens hem centrat en el pas bàsic x i y arguments, hi pot haver situacions en què també necessiteu passar un objecte, una matriu o fins i tot diversos objectes imbricats. Les estructures de dades complexes es poden convertir en un format de cadena mitjançant JavaScript JSON.stringify() mètode, que després es pot transferir eficaçment mitjançant el postMessage() mètode. Després d'això, Dart es pot utilitzar jsonDecode() tornar a muntar l'estructura inicial perquè es pugui processar.

La gestió d'errors de reenviament de missatges és un altre mètode pràctic. Assegurar-se que les dades estiguin validades tant a l'entorn JavaScript com a Dart és crucial quan es mouen dades importants entre els dos idiomes. Es pot evitar que les dades amb format incorrecte s'entreguin posant comprovacions abans d'invocar-les postMessage() al costat de JavaScript. Podeu verificar que les dades codificades tinguin les claus i valors previstos al costat de Dart validant-les. A més de garantir una comunicació eficaç, això protegeix contra errors o dades corruptes.

A més, WebView a Flutter ofereix una funcionalitat addicional que us permet aplicar JavaScript personalitzat a la pàgina web. Podeu activar dinàmicament rutines de JavaScript des del costat de Dart utilitzant el evaluateJavascript tècnica. Això augmenta la versatilitat en permetre que les ordres s'enviïn des de l'aplicació Flutter al contingut web, millorant així el canal de comunicació bidireccional. Quan es necessita un intercanvi constant de dades entre les dues capes, aquesta estratègia funciona bé.