Uso del canal JavaScript en Flutter WebView para pasar varios parámetros de JavaScript a Dart

Manejo de JavaScript para la comunicación Dart en Flutter WebView

Para ensamblar una aplicación híbrida, es posible que sea necesario integrar JavaScript y Flutter a través de WebView. La transmisión de datos de JavaScript a Dart es un trabajo frecuente que permite una comunicación fluida entre los dos entornos.

Esta publicación explicará cómo utilizar el canal JavaScript del complemento Flutter WebView para transferir numerosos parámetros de JavaScript a Dart. Nos concentraremos específicamente en una situación en la que dos argumentos, digamos incógnita y y, se envían a Dart mediante una función de JavaScript utilizando el establecer posición canal.

Aunque los datos se pueden enviar desde JavaScript usando publicar mensaje(), es imperativo manejar estos mensajes correctamente en Dart para garantizar que la comunicación funcione según lo previsto. El procesamiento de datos eficaz requiere saber cómo utilizar Dart. en mensaje recibido función para hacer esto.

No está solo si ha intentado buscar respuestas en Internet pero no ha encontrado muchas. Entraremos en gran detalle y le brindaremos un método paso a paso para construir este canal de comunicación en este artículo.

Integración de JavaScript y comunicación Dart en Flutter WebView

Nuestra solución desarrollada muestra cómo utilizar un Canal JavaScript transmitir numerosos argumentos de javascript a Dart a través del WebView de Flutter. El objetivo principal es crear una canalización confiable para la comunicación entre el código Dart y JavaScript que se ejecuta en WebView. El publicar mensaje() La función JavaScript utiliza el método para transmitir dos parámetros (x e y), que Dart recibe posteriormente a través de la devolución de llamada onMessageReceived. Con esta configuración, se puede comunicar de manera efectiva información importante desde el contenido web al código nativo de Dart.

Usando el jsonDecode() función, decodificamos el mensaje recibido en el lado de Dart. Nos aseguramos de que se puedan enviar numerosos parámetros de forma organizada transfiriendo datos JSON desde JavaScript. Después de la decodificación, Dart puede recuperar los valores individuales (xey) y utilizarlos para cualquier propósito. Esto incluye registrar información, alterar elementos de la interfaz de usuario y realizar otras tareas que dependen de los valores obtenidos. Este método garantiza una baja sobrecarga al enviar estructuras de datos complejas desde JavaScript a Dart.

Además de gestionar los mensajes directamente, también analizamos un enfoque diferente que implicaba utilizar esquemas de URL únicos. Podemos transmitir parámetros a través de la URL cambiando el ventana.ubicación.href en JavaScript. Dart puede entonces interceptar estos datos utilizando el navegaciónDelegar. Al usar el Canal JavaScript Puede que no sea factible o cuando la comunicación basada en URL tenga más sentido dado el diseño del programa, este enfoque puede resultar útil. Después de eso, Dart analiza la URL y usa el Parámetros de consulta Uri Función para extraer parámetros como x e y. Esto garantiza que sean posibles varios mecanismos de comunicación entre Dart y el contenido web.

El rendimiento y la seguridad reciben la máxima prioridad en todos los enfoques, especialmente al recibir comunicaciones entrantes. Aumentamos la seguridad y legibilidad del proceso empleando JSON para el paso de mensajes, lo que detiene la manipulación de datos. Las pruebas unitarias también garantizan que la funcionalidad funcione según lo previsto en diversos entornos. Suave y confiable, el Vista web La integración crea un fuerte vínculo entre las tecnologías web y el entorno nativo 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;
  },
);

Explorando técnicas de paso de parámetros en Flutter WebView

El manejo de estructuras de datos más complicadas es una parte importante del paso de parámetros a través de Flutter WebView entre JavaScript y Dart. Aunque nos hemos centrado en aprobar los cursos básicos incógnita y y argumentos, puede haber situaciones en las que también necesite pasar un objeto, una matriz o incluso varios objetos anidados. Las estructuras de datos complejas se pueden convertir a un formato de cadena utilizando JavaScript. JSON.stringify() método, que luego puede ser transferido efectivamente utilizando el postMessage() método. Después de eso, Dart puede utilizar jsonDecode() volver a montar la estructura inicial para poder procesarla.

La gestión de errores de reenvío de mensajes es otro método práctico. Asegurarse de que los datos estén validados en los entornos JavaScript y Dart es crucial al mover datos importantes entre los dos idiomas. Se puede evitar que se entreguen datos con formato incorrecto implementando controles antes de invocarlos. postMessage() en el lado de JavaScript. Puede verificar que los datos codificados tengan las claves y valores anticipados en el lado de Dart validándolos. Además de garantizar una comunicación eficaz, esto protege contra errores o datos corruptos.

Además, WebView en Flutter proporciona una funcionalidad adicional que le permite aplicar JavaScript personalizado a la página web. Puede activar dinámicamente rutinas de JavaScript desde el lado de Dart utilizando el evaluateJavascript técnica. Esto aumenta la versatilidad al permitir que se envíen comandos desde su aplicación Flutter al contenido web, mejorando así el canal de comunicación bidireccional. Cuando existe la necesidad de un intercambio constante de datos entre las dos capas, esta estrategia funciona bien.