Использование канала JavaScript во Flutter WebView для передачи нескольких параметров из JavaScript в Dart

Обработка JavaScript для связи Dart во Flutter WebView

Сборка гибридного приложения может потребовать интеграции JavaScript и Flutter через WebView. Передача данных из JavaScript в Dart — это одна из частых задач, обеспечивающая бесперебойную связь между двумя средами.

В этом посте объясняется, как использовать канал JavaScript плагина Flutter WebView для передачи многочисленных параметров из JavaScript в Dart. Мы специально сосредоточимся на ситуации, когда два аргумента, скажем, х и й, отправляются в Dart функцией JavaScript с использованием setPosition канал.

Хотя данные можно отправлять из JavaScript, используя постСообщение(), крайне важно правильно обрабатывать эти сообщения в Dart, чтобы гарантировать, что связь работает должным образом. Эффективная обработка данных требует знания того, как использовать Dart. onMessageReceived функция для этого.

Вы не одиноки, если пытались искать ответы в Интернете, но не нашли многого. В этой статье мы подробно рассмотрим и предоставим вам пошаговый метод построения этого коммуникационного конвейера.

Интеграция JavaScript и Dart Communication во Flutter WebView

Разработанное нами решение показывает, как использовать Канал JavaScript передать многочисленные аргументы от JavaScript в Dart через WebView Flutter. Основная цель — создать надежный конвейер для связи между кодом Dart и JavaScript, который работает в WebView. постСообщение() Метод используется функцией JavaScript для передачи двух параметров (x и y), которые впоследствии получаются Dart через обратный вызов onMessageReceived. Благодаря такой конфигурации важная информация может эффективно передаваться из веб-контента в собственный код Dart.

Используя jsonDecode() функции мы декодируем полученное сообщение на стороне Dart. Мы заботимся о том, чтобы многочисленные параметры можно было отправлять организованно, передавая данные JSON из JavaScript. После декодирования Dart может получить отдельные значения (x и y) и использовать их для любых целей. Сюда входит запись информации, изменение элементов пользовательского интерфейса и выполнение других задач, зависящих от полученных значений. Этот метод гарантирует низкие накладные расходы при отправке сложных структур данных из JavaScript в Dart.

Помимо прямого управления сообщениями, мы также рассмотрели другой подход, предполагающий использование уникальных схем URL-адресов. Мы можем передавать параметры через URL, изменив window.location.href в JavaScript. Затем Dart может перехватить эти данные, используя навигацияДелегат. При использовании JavaScript-канал может быть неосуществимым или когда связь на основе URL-адресов имеет больше смысла с учетом дизайна программы, этот подход может быть полезен. После этого Dart анализирует URL-адрес и использует Uri.queryParameters функция для извлечения таких параметров, как x и y. Это гарантирует возможность использования нескольких механизмов связи между Dart и веб-контентом.

Производительность и безопасность имеют высший приоритет во всех подходах, особенно при приеме входящих сообщений. Мы повышаем безопасность и читаемость процессов, используя JSON для передачи сообщений, что предотвращает манипулирование данными. Модульные тесты также гарантируют, что функциональность работает должным образом в различных настройках. Плавный и надежный, Веб-представление интеграция создает прочную связь между веб-технологиями и собственной средой 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;
  },
);

Изучение методов передачи параметров во Flutter WebView

Обработка более сложных структур данных — важная часть передачи параметров через Flutter WebView между JavaScript и Dart. Хотя наше внимание было сосредоточено на прохождении базовых х и й аргументы, могут возникнуть ситуации, в которых вам также потребуется передать объект, массив или даже несколько вложенных объектов. Сложные структуры данных можно преобразовать в строковый формат с помощью JavaScript. JSON.stringify() метод, который затем можно эффективно перенести с помощью postMessage() метод. После этого Дарт может использовать jsonDecode() собрать исходную структуру так, чтобы ее можно было обработать.

Управление ошибками пересылки сообщений — еще один практический метод. Проверка того, что данные проверены как в средах JavaScript, так и в средах Dart, имеет решающее значение при перемещении важных данных между двумя языками. Доставки искаженных данных можно избежать, установив проверки перед вызовом. postMessage() на стороне JavaScript. Вы можете убедиться, что закодированные данные имеют ожидаемые ключи и значения на стороне Dart, проверив их. Это не только обеспечивает эффективную связь, но и защищает от ошибок или повреждения данных.

Кроме того, WebView во Flutter предоставляет дополнительную функциональность, позволяющую применять собственный JavaScript к веб-странице. Вы можете динамически запускать процедуры JavaScript со стороны Dart, используя evaluateJavascript техника. Это повышает универсальность, позволяя отправлять команды из вашего приложения Flutter в веб-контент, тем самым улучшая двусторонний канал связи. Когда есть необходимость в постоянном обмене данными между двумя уровнями, эта стратегия работает хорошо.