Usando o canal JavaScript no Flutter WebView para passar vários parâmetros de JavaScript para Dart

Manipulando JavaScript para comunicação Dart no Flutter WebView

A montagem de um aplicativo híbrido pode exigir a integração de JavaScript e Flutter por meio de um WebView. A transmissão de dados de JavaScript para Dart é um trabalho frequente que permite uma comunicação tranquila entre os dois ambientes.

Esta postagem explicará como usar o canal JavaScript de um plug-in Flutter WebView para transferir vários parâmetros de JavaScript para Dart. Iremos concentrar-nos especificamente numa situação em que dois argumentos, digamos x e sim, são enviados ao Dart por uma função JavaScript usando o definirPosição canal.

Embora os dados possam ser enviados de JavaScript usando postMessage(), é imperativo lidar corretamente com essas mensagens no Dart para garantir que a comunicação funcione conforme planejado. O processamento eficaz de dados requer saber como usar o Dart onMessageRecebido função para fazer isso.

Você não está sozinho se tentou pesquisar respostas na Internet, mas não encontrou muitas. Entraremos em detalhes e forneceremos um método passo a passo para construir esse pipeline de comunicação neste artigo.

Integrando JavaScript e comunicação Dart no Flutter WebView

Nossa solução desenvolvida mostra como usar um Canal JavaScript transmitir numerosos argumentos de JavaScript para Dart por meio do WebView do Flutter. O objetivo principal é criar um pipeline confiável para comunicação entre o código Dart e o JavaScript executado no WebView. O postMessage() é usado pela função JavaScript para transmitir dois parâmetros (x e y), que são posteriormente recebidos pelo Dart por meio do retorno de chamada onMessageReceived. Com esta configuração, informações importantes podem ser comunicadas de forma eficaz do conteúdo da web para o código Dart nativo.

Usando o jsonDecode() função, decodificamos a mensagem recebida no lado do Dart. Garantimos que vários parâmetros possam ser enviados de forma organizada, transferindo dados JSON de JavaScript. Após a decodificação, o Dart é capaz de recuperar os valores individuais (x e y) e usá-los para qualquer finalidade. Isso inclui registrar informações, alterar elementos da interface do usuário e realizar outras tarefas que dependem dos valores obtidos. Este método garante baixa sobrecarga ao enviar estruturas de dados complexas de JavaScript para Dart.

Além de gerenciar mensagens diretamente, também analisamos uma abordagem diferente que envolvia a utilização de esquemas de URL exclusivos. Podemos transmitir parâmetros através da URL alterando o janela.localização.href em JavaScript. O Dart pode então interceptar esses dados usando o delegado de navegação. Ao usar o Canal JavaScript pode não ser viável ou quando a comunicação baseada em URL faz mais sentido dado o design do programa, esta abordagem pode ser útil. Depois disso, o Dart analisa o URL e usa o Uri.queryParameters função para extrair parâmetros como x e y. Isso garante que diversos mecanismos de comunicação entre o Dart e o conteúdo da web sejam possíveis.

O desempenho e a segurança têm prioridade máxima em todas as abordagens, especialmente no recebimento de comunicações. Aumentamos a segurança e a legibilidade do processo empregando JSON para passagem de mensagens, o que impede a manipulação de dados. Os testes de unidade também garantem que a funcionalidade funcione conforme pretendido em várias configurações. Suave e confiável, o Visualização da Web a integração cria um forte vínculo entre as tecnologias da web e o ambiente nativo do 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 passagem de parâmetros no Flutter WebView

Lidar com estruturas de dados mais complicadas é uma parte importante da passagem de parâmetros por meio de um Flutter WebView entre JavaScript e Dart. Embora nosso foco tenha sido a aprovação do básico x e sim argumentos, pode haver situações em que você também precise passar um objeto, array ou até mesmo vários objetos aninhados. Estruturas de dados complexas podem ser convertidas em um formato de string usando JavaScript JSON.stringify() método, que pode então ser efetivamente transferido usando o postMessage() método. Depois disso, o Dart pode utilizar jsonDecode() remontar a estrutura inicial para que ela possa ser processada.

O gerenciamento de erros de encaminhamento de mensagens é outro método prático. Garantir que os dados sejam validados nos ambientes JavaScript e Dart é crucial ao mover dados importantes entre as duas linguagens. A entrega de dados malformados pode ser evitada colocando-se verificações antes de invocar postMessage() no lado do JavaScript. Você pode verificar se os dados codificados possuem as chaves e valores previstos no lado do Dart, validando-os. Além de garantir uma comunicação eficaz, protege contra erros ou dados corrompidos.

Adicionalmente, WebView no Flutter fornece uma funcionalidade extra que permite aplicar JavaScript personalizado à página da web. Você pode acionar dinamicamente rotinas JavaScript do lado do Dart utilizando o evaluateJavascript técnica. Isso aumenta a versatilidade, permitindo que comandos sejam enviados do seu aplicativo Flutter para o conteúdo da web, melhorando assim o canal de comunicação bidirecional. Quando há necessidade de intercâmbio constante de dados entre as duas camadas, esta estratégia funciona bem.