Použitie kanála JavaScript vo Flutter WebView na odovzdanie niekoľkých parametrov z JavaScriptu do Dartu

Spracovanie komunikácie cez JavaScript na Dart vo Flutter WebView

Zostavenie hybridnej aplikácie môže vyžadovať integráciu JavaScriptu a Flutter cez WebView. Prenos dát z JavaScriptu do Dartu je jednou z častých úloh, ktoré umožňujú bezproblémovú komunikáciu medzi týmito dvoma prostrediami.

Tento príspevok vysvetlí, ako používať kanál JavaScript doplnku Flutter WebView na prenos mnohých parametrov z JavaScriptu do Dartu. Konkrétne sa zameriame na situáciu, v ktorej povedzme dva argumenty x a r, sú odosielané do Dart pomocou funkcie JavaScript pomocou setPosition kanál.

Hoci údaje možno odosielať z JavaScriptu pomocou postMessage(), je nevyhnutné správne spracovať tieto správy v aplikácii Dart, aby sa zaručilo, že komunikácia funguje podľa plánu. Efektívne spracovanie údajov vyžaduje vedieť, ako používať Dart's onMessageReceived funkciu, aby ste to urobili.

Nie ste sami, ak ste skúšali hľadať odpovede na internete, no veľa ste toho nenašli. Pôjdeme do veľkých podrobností a v tomto článku vám poskytneme postupnú metódu budovania tohto komunikačného kanála.

Integrácia JavaScriptu a komunikácie Dart do Flutter WebView

Naše vyvinuté riešenie ukazuje, ako používať a JavaScript kanál odovzdať početné argumenty z JavaScript do Dartu cez Flutter's WebView. Primárnym cieľom je vytvoriť spoľahlivý kanál na komunikáciu medzi kódom Dart a JavaScriptom, ktorý beží vo WebView. The postMessage() metódu JavaScript používa funkcia JavaScript na prenos dvoch parametrov (x a y), ktoré následne prijíma Dart prostredníctvom spätného volania onMessageReceived. S touto konfiguráciou môžu byť dôležité informácie efektívne prenášané z webového obsahu do natívneho kódu Dart.

Pomocou jsonDecode() funkciu, dekódujeme prijatú správu na strane Dart. Zabezpečujeme, že početné parametre je možné odosielať organizovaným spôsobom prenosom údajov JSON z JavaScriptu. Po dekódovaní je Dart schopný získať jednotlivé hodnoty (x a y) a použiť ich na akýkoľvek účel. To zahŕňa zaznamenávanie informácií, zmenu prvkov používateľského rozhrania a vykonávanie ďalších úloh, ktoré závisia od získaných hodnôt. Táto metóda zaručuje nízku réžiu pri odosielaní zložitých dátových štruktúr z JavaScriptu do Dartu.

Okrem priamej správy správ sme sa zamerali aj na iný prístup, ktorý zahŕňal využitie jedinečných schém URL. Parametre môžeme prenášať cez URL zmenou window.location.href v JavaScripte. Dart potom môže tieto údaje zachytiť pomocou navigáciaDelegát. Pri použití JavaScript kanál nemusí byť uskutočniteľné alebo keď komunikácia založená na URL dáva väčší zmysel vzhľadom na dizajn programu, tento prístup môže byť užitočný. Potom Dart analyzuje URL a použije Uri.queryParameters funkcia na extrahovanie parametrov ako x a y. To zaručuje, že medzi Dartom a webovým obsahom sú možné viaceré komunikačné mechanizmy.

Výkon a bezpečnosť majú najvyššiu prioritu vo všetkých prístupoch, najmä pri prijímaní prichádzajúcej komunikácie. Bezpečnosť a čitateľnosť procesov zvyšujeme využívaním JSON na odovzdávanie správ, čo zastavuje manipuláciu s údajmi. Testy jednotiek tiež zaručujú, že funkčnosť funguje tak, ako má v rôznych nastaveniach. Hladký a spoľahlivý, WebView integrácia vytvára silné prepojenie medzi webovými technológiami a natívnym prostredím 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;
  },
);

Skúmanie techník odovzdávania parametrov vo Flutter WebView

Spracovanie komplikovanejších dátových štruktúr je dôležitou súčasťou odovzdávania parametrov cez Flutter WebView medzi JavaScriptom a Dart. Aj keď sme sa zamerali na absolvovanie základného x a r argumenty, môžu nastať situácie, v ktorých potrebujete odovzdať aj objekt, pole alebo dokonca niekoľko vnorených objektov. Komplexné dátové štruktúry je možné previesť do formátu reťazca pomocou JavaScriptu JSON.stringify() metódu, ktorú potom možno efektívne preniesť pomocou postMessage() metóda. Potom môže Dart využiť jsonDecode() znovu zostaviť pôvodnú štruktúru, aby sa dala spracovať.

Ďalšou praktickou metódou je správa chýb pri preposielaní správ. Pri presúvaní dôležitých údajov medzi týmito dvoma jazykmi je rozhodujúce zabezpečiť overenie údajov v prostredí JavaScript aj Dart. Doručeniu chybných údajov možno predísť zavedením kontrol pred vyvolaním postMessage() na strane JavaScriptu. Overením platnosti kódovaných údajov môžete overiť, či majú na strane Dart predpokladané kľúče a hodnoty. Okrem zabezpečenia efektívnej komunikácie to chráni pred chybami alebo poškodenými údajmi.

okrem toho WebView in Flutter poskytuje ďalšiu funkčnosť, ktorá vám umožňuje použiť na webovú stránku vlastný JavaScript. Rutiny JavaScriptu môžete dynamicky spúšťať zo strany Dart pomocou evaluateJavascript technika. To zvyšuje všestrannosť tým, že umožňuje odosielanie príkazov z vašej aplikácie Flutter do webového obsahu, čím sa zlepšuje obojsmerný komunikačný kanál. Keď je potrebná neustála výmena údajov medzi dvoma vrstvami, táto stratégia funguje dobre.