Utilizarea canalului JavaScript în Flutter WebView pentru a trece mai mulți parametri de la JavaScript la Dart

Gestionarea comunicării JavaScript la Dart în Flutter WebView

Asamblarea unei aplicații hibride poate necesita integrarea JavaScript și Flutter printr-un WebView. Transmiterea datelor de la JavaScript la Dart este o sarcină frecventă care permite o comunicare lină între cele două medii.

Această postare va explica cum să utilizați canalul JavaScript al unui plugin Flutter WebView pentru a transfera numeroși parametri din JavaScript în Dart. Ne vom concentra în mod special asupra unei situații în care două argumente, să zicem x şi y, sunt trimise către Dart printr-o funcție JavaScript folosind setPosition canal.

Deși datele pot fi trimise din JavaScript folosind postMessage(), este imperativ să gestionați corect aceste mesaje în Dart pentru a vă garanta că comunicarea funcționează așa cum este prevăzut. Procesarea eficientă a datelor necesită cunoașterea modului de utilizare a lui Dart onMessageReceived funcția pentru a face acest lucru.

Nu ești singur dacă ai încercat să cauți răspunsuri pe internet, dar nu ai găsit prea multe. Vom intra în detalii și vă vom oferi o metodă pas cu pas pentru construirea acestei conducte de comunicare în acest articol.

Integrarea JavaScript și Dart Communication în Flutter WebView

Soluția noastră dezvoltată arată cum să utilizați a Canal JavaScript pentru a transmite numeroase argumente din JavaScript la Dart prin Flutter's WebView. Scopul principal este de a crea o conductă de încredere pentru comunicarea între codul Dart și JavaScript care rulează în WebView. The postMessage() metoda este utilizată de funcția JavaScript pentru a transmite doi parametri (x și y), care sunt ulterior primiți de Dart prin apelul invers onMessageReceived. Cu această configurație, informațiile importante pot fi comunicate efectiv din conținutul web către codul nativ Dart.

Folosind jsonDecode() funcția, decodăm mesajul primit pe partea Dart. Ne asigurăm că numeroși parametri pot fi trimiși într-un mod organizat prin transferul datelor JSON din JavaScript. După decodare, Dart este capabil să recupereze valorile individuale (x și y) și să le folosească în orice scop. Aceasta include înregistrarea informațiilor, modificarea elementelor interfeței cu utilizatorul și efectuarea altor sarcini care depind de valorile obținute. Această metodă garantează o supraîncărcare redusă la trimiterea structurilor complexe de date de la JavaScript la Dart.

Pe lângă gestionarea directă a mesajelor, am analizat și o abordare diferită care a implicat utilizarea unor scheme URL unice. Putem transmite parametrii prin adresa URL prin modificarea window.location.href în JavaScript. Dart poate apoi intercepta aceste date folosind navigare delegat. Când utilizați Canal JavaScript s-ar putea să nu fie fezabilă sau atunci când comunicarea bazată pe URL are mai mult sens, având în vedere designul programului, această abordare poate fi utilă. După aceea, Dart analizează adresa URL și folosește Uri.queryParameters funcția de extragere a parametrilor precum x și y. Acest lucru garantează că sunt posibile mai multe mecanisme de comunicare între Dart și conținutul web.

Performanța și securitatea primesc prioritate maximă în toate abordările, în special atunci când se primesc comunicații. Creștem siguranța și lizibilitatea procesului prin folosirea JSON pentru transmiterea mesajelor, ceea ce oprește manipularea datelor. Testele unitare garantează, de asemenea, că funcționalitatea funcționează așa cum este prevăzut în diferite setări. Neted și de încredere, WebView integrarea creează o legătură puternică între tehnologiile web și mediul nativ 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;
  },
);

Explorarea tehnicilor de trecere a parametrilor în Flutter WebView

Gestionarea structurilor de date mai complicate este o parte importantă a trecerii parametrilor printr-un Flutter WebView între JavaScript și Dart. Deși ne concentrăm pe trecerea de bază x şi y argumente, pot exista situații în care trebuie să treceți și un obiect, o matrice sau chiar mai multe obiecte imbricate. Structurile complexe de date pot fi convertite într-un format de șir folosind JavaScript JSON.stringify() metoda, care poate fi apoi transferată eficient folosind postMessage() metodă. După aceea, Dart poate utiliza jsonDecode() să reasamblați structura inițială astfel încât să poată fi prelucrată.

Gestionarea erorilor de redirecționare a mesajelor este o altă metodă practică. Asigurarea faptului că datele sunt validate atât în ​​mediul JavaScript, cât și în mediul Dart este crucială atunci când mutați date importante între cele două limbi. Datele incorecte pot fi evitate să fie livrate prin efectuarea de verificări înainte de invocare postMessage() pe partea JavaScript. Puteți verifica dacă datele codificate au cheile și valorile anticipate pe partea Dart validând-o. Pe lângă asigurarea unei comunicări eficiente, aceasta protejează împotriva greșelilor sau a datelor corupte.

În plus, WebView în Flutter oferă o funcționalitate suplimentară care vă permite să aplicați JavaScript personalizat pe pagina web. Puteți declanșa dinamic rutine JavaScript din partea Dart utilizând evaluateJavascript tehnică. Acest lucru crește versatilitatea, permițând trimiterea comenzilor din aplicația dvs. Flutter către conținutul web, îmbunătățind astfel canalul de comunicare bidirecțională. Atunci când este nevoie de un schimb constant de date între cele două straturi, această strategie funcționează bine.