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

Обробка зв’язку JavaScript із Dart у Flutter WebView

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

У цьому дописі пояснюється, як використовувати канал JavaScript плагіна Flutter WebView для передачі численних параметрів із JavaScript у Dart. Ми спеціально зосередимося на ситуації, в якій, скажімо, два аргументи x і р, надсилаються до Dart функцією JavaScript за допомогою setPosition канал.

Хоча дані можна надсилати з JavaScript за допомогою postMessage(), дуже важливо правильно обробляти ці повідомлення в Dart, щоб гарантувати, що зв’язок функціонує належним чином. Для ефективної обробки даних потрібно знати, як використовувати Dart onMessageReceived функцію для цього.

Ви не самотні, якщо намагалися шукати відповіді в Інтернеті, але не знайшли багато. У цій статті ми детально розберемося та надамо вам покроковий метод створення цього каналу зв’язку.

Інтеграція JavaScript і Dart Communication у Flutter WebView

Наше розроблене рішення показує, як використовувати a Канал JavaScript передати численні аргументи з JavaScript щоб Dart через WebView Flutter. Основна мета — створити надійний конвеєр для зв’язку між кодом Dart і JavaScript, який працює у WebView. The postMessage() Метод використовується функцією JavaScript для передачі двох параметрів (x і y), які згодом отримує Dart через зворотний виклик onMessageReceived. За допомогою такої конфігурації важлива інформація може ефективно передаватись із веб-вмісту до рідного коду Dart.

Використовуючи jsonDecode() ми декодуємо отримане повідомлення на стороні Dart. Ми гарантуємо, що численні параметри можуть надсилатися в організований спосіб, передаючи дані JSON із JavaScript. Після декодування Dart може отримати окремі значення (x і y) і використовувати їх для будь-яких цілей. Це включає запис інформації, зміну елементів інтерфейсу користувача та виконання інших завдань, які залежать від отриманих значень. Цей метод гарантує низькі витрати під час надсилання складних структур даних із JavaScript до Dart.

Окрім безпосереднього керування повідомленнями, ми також розглянули інший підхід, який передбачає використання унікальних схем URL-адрес. Ми можемо передавати параметри через URL-адресу, змінивши window.location.href в JavaScript. Потім Dart може перехопити ці дані за допомогою navigationDelegate. При використанні Канал JavaScript може бути неможливим або коли комунікація на основі URL має більше сенсу з огляду на дизайн програми, цей підхід може бути корисним. Після цього Dart аналізує URL-адресу та використовує Uri.queryParameters функція для вилучення таких параметрів, як x і y. Це гарантує наявність кількох механізмів зв’язку між Dart і веб-вмістом.

Продуктивність і безпека надаються головним пріоритетом у всіх підходах, особливо під час отримання вхідних повідомлень. Ми підвищуємо безпеку процесів і читабельність, використовуючи JSON для передачі повідомлень, що припиняє маніпулювання даними. Модильні тести також гарантують, що функціональність функціонує належним чином у різних налаштуваннях. Плавний і надійний WebView інтеграція створює міцний зв'язок між веб-технологіями та рідним середовищем 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. Хоча наша увага була зосереджена на проходженні основних x і р аргументів, можуть бути ситуації, коли вам також потрібно передати об’єкт, масив або навіть кілька вкладених об’єктів. Складні структури даних можна перетворити на рядковий формат за допомогою JavaScript JSON.stringify() метод, який потім можна ефективно передати за допомогою postMessage() метод. Після цього Дарт може використовувати jsonDecode() щоб повторно зібрати початкову структуру, щоб її можна було обробити.

Управління помилками пересилання повідомлень є ще одним практичним методом. Під час переміщення важливих даних між двома мовами важливо переконатися, що дані перевірені як у середовищах JavaScript, так і в Dart. Можна уникнути доставки неправильних даних, встановивши перевірки перед викликом postMessage() на стороні JavaScript. Ви можете переконатися, що закодовані дані мають очікувані ключі та значення на стороні Dart, перевіривши їх. Окрім забезпечення ефективної комунікації, це захищає від помилок або пошкодження даних.

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