„JavaScript“ kanalo naudojimas „Flutter WebView“ keliems parametrams perduoti iš „JavaScript“ į „Dart“.

„JavaScript“ ir „Dart“ komunikacijos tvarkymas naudojant „Flutter WebView“.

Norint surinkti hibridinę programą, gali reikėti integruoti „JavaScript“ ir „Flutter“ per „WebView“. Duomenų perdavimas iš „JavaScript“ į „Dart“ yra dažnas darbas, leidžiantis sklandžiai bendrauti tarp dviejų aplinkų.

Šiame įraše bus paaiškinta, kaip naudoti „Flutter WebView“ papildinio „JavaScript“ kanalą norint perkelti daugybę parametrų iš „JavaScript“ į „Dart“. Konkrečiai sutelksime dėmesį į situaciją, kai, tarkime, du argumentai x ir y, siunčiami į Dart naudojant JavaScript funkciją nustatytiPozicija kanalas.

Nors duomenis galima siųsti iš JavaScript naudojant postMessage(), būtina teisingai tvarkyti šiuos pranešimus „Dart“, kad būtų užtikrinta, jog ryšys veiks taip, kaip numatyta. Norint efektyviai apdoroti duomenis, reikia žinoti, kaip naudotis Dart's onMessageReceived funkcija tai padaryti.

Jūs nesate vieni, jei bandėte ieškoti atsakymų internete, bet nieko neradote. Šiame straipsnyje pateiksime išsamią informaciją ir pateiksime nuoseklų metodą, kaip sukurti šį ryšio kanalą.

„JavaScript“ ir „Dart“ komunikacijos integravimas į „Flutter WebView“.

Mūsų sukurtas sprendimas parodo, kaip naudoti a „JavaScript“ kanalas perduoti daugybę argumentų iš JavaScript į Dart per Flutter's WebView. Pagrindinis tikslas yra sukurti patikimą „Dart“ kodo ir „JavaScript“, kuris veikia „WebView“, komunikacijai. The postMessage() „JavaScript“ funkcija naudoja metodą, kad perduotų du parametrus (x ir y), kuriuos „Dart“ vėliau gauna per onMessageReceived atgalinį skambutį. Naudojant šią konfigūraciją, svarbi informacija gali būti veiksmingai perduodama iš žiniatinklio turinio į vietinį Dart kodą.

Naudojant jsonDecode() funkcija, gautą pranešimą iškoduojame Dart pusėje. Perkeldami JSON duomenis iš „JavaScript“ užtikriname, kad daug parametrų būtų siunčiami organizuotai. Po dekodavimo Dart gali gauti atskiras reikšmes (x ir y) ir panaudoti jas bet kokiam tikslui. Tai apima informacijos įrašymą, vartotojo sąsajos elementų keitimą ir kitų užduočių, kurios priklauso nuo gautų verčių, atlikimą. Šis metodas garantuoja mažas pridėtines išlaidas siunčiant sudėtingas duomenų struktūras iš JavaScript į Dart.

Be tiesioginio pranešimų valdymo, mes taip pat ieškojome kitokio požiūrio, apimančio unikalių URL schemų naudojimą. Mes galime perduoti parametrus per URL, pakeisdami window.location.href JavaScript. Tada Dart gali perimti šiuos duomenis naudodamas navigacija Deleguoti. Kai naudojate „JavaScript“ kanalas gali būti neįmanomas arba kai URL pagrįstas ryšys yra prasmingesnis, atsižvelgiant į programos dizainą, šis metodas gali būti naudingas. Po to Dart analizuoja URL ir naudoja Uri.queryParameters funkcija išgauti tokius parametrus kaip x ir y. Tai garantuoja, kad tarp Dart ir žiniatinklio turinio galimi keli komunikacijos mechanizmai.

Našumas ir saugumas yra svarbiausias prioritetas visais būdais, ypač priimant gaunamus pranešimus. Padidiname procesų saugumą ir skaitomumą naudodami JSON pranešimams perduoti, o tai sustabdo manipuliavimą duomenimis. Įrenginio testai taip pat garantuoja, kad funkcionalumas veikia taip, kaip numatyta įvairiuose nustatymuose. Sklandus ir patikimas, WebView integracija sukuria tvirtą ryšį tarp žiniatinklio technologijų ir „Flutter“ gimtosios aplinkos.

// 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;
  },
);

Parametrų perdavimo metodų tyrinėjimas naudojant „Flutter WebView“.

Sudėtingesnių duomenų struktūrų tvarkymas yra svarbi parametrų perdavimo per „Flutter WebView“ tarp „JavaScript“ ir „Dart“ dalis. Nors daugiausia dėmesio skyrėme tam, kad išlaikytume pagrindinius dalykus x ir y argumentus, gali būti situacijų, kai taip pat reikia perduoti objektą, masyvą ar net kelis įdėtus objektus. Sudėtingos duomenų struktūros gali būti konvertuojamos į eilutės formatą naudojant JavaScript JSON.stringify() metodą, kurį vėliau galima veiksmingai perkelti naudojant postMessage() metodas. Po to Dartas gali naudoti jsonDecode() iš naujo surinkti pradinę struktūrą, kad ją būtų galima apdoroti.

Pranešimų persiuntimo klaidų valdymas yra dar vienas praktinis metodas. Perkeliant svarbius duomenis iš vienos kalbos į kitą, labai svarbu užtikrinti, kad duomenys būtų patvirtinti ir JavaScript, ir Dart aplinkoje. Netinkamai suformuotų duomenų galima išvengti, jei prieš iškviečiant atliekami patikrinimai postMessage() „JavaScript“ pusėje. Galite patikrinti, ar užkoduoti duomenys turi numatytus raktus ir reikšmes Dart pusėje, patvirtindami juos. Tai ne tik užtikrina veiksmingą ryšį, bet ir apsaugo nuo klaidų ar sugadintų duomenų.

Be to, WebView „Flutter“ suteikia papildomą funkciją, leidžiančią tinklalapiui pritaikyti tinkintą „JavaScript“. Galite dinamiškai suaktyvinti „JavaScript“ procedūras iš „Dart“ pusės, naudodami evaluateJavascript technika. Tai padidina universalumą, nes leidžia siųsti komandas iš „Flutter“ programos į žiniatinklio turinį, taip pagerinant dvipusio ryšio kanalą. Kai reikia nuolat keistis duomenimis tarp dviejų sluoksnių, ši strategija veikia gerai.