JavaScript kanāla izmantošana programmā Flutter WebView, lai pārsūtītu vairākus parametrus no JavaScript uz Dart

JavaScript apstrādāšana ar dart saziņu pakalpojumā Flutter WebView

Hibrīda lietojumprogrammas montāžai var būt nepieciešams integrēt JavaScript un Flutter, izmantojot WebView. Datu pārsūtīšana no JavaScript uz Dart ir viens biežs darbs, kas nodrošina netraucētu saziņu starp abām vidēm.

Šajā rakstā tiks paskaidrots, kā izmantot Flutter WebView spraudņa JavaScript kanālu, lai pārsūtītu daudzus parametrus no JavaScript uz Dart. Mēs īpaši koncentrēsimies uz situāciju, kurā, teiksim, ir divi argumenti x un y, tiek nosūtīti uz Dart, izmantojot JavaScript funkciju, izmantojot setPosition kanālu.

Lai gan datus var nosūtīt no JavaScript, izmantojot postMessage(), ir obligāti pareizi jāapstrādā šie ziņojumi programmā Dart, lai nodrošinātu, ka saziņa darbojas, kā paredzēts. Efektīvai datu apstrādei ir jāzina, kā lietot Dart's onMessageReceived funkciju, lai to izdarītu.

Jūs neesat viens, ja esat mēģinājis meklēt atbildes internetā, bet neko daudz neesat atradis. Šajā rakstā mēs iedziļināsimies detalizētās detaļās un sniegsim jums soli pa solim metodi, kā izveidot šo sakaru cauruļvadu.

JavaScript un Dart komunikācijas integrēšana programmā Flutter WebView

Mūsu izstrādātais risinājums parāda, kā izmantot a JavaScript kanāls pārsūtīt daudzus argumentus no JavaScript uz Dart, izmantojot Flutter's WebView. Galvenais mērķis ir izveidot uzticamu cauruļvadu saziņai starp Dart kodu un JavaScript, kas darbojas WebView. The postMessage() metodi izmanto JavaScript funkcija, lai pārsūtītu divus parametrus (x un y), kurus Dart pēc tam saņem, izmantojot onMessageReceived atzvanu. Izmantojot šo konfigurāciju, svarīga informācija var tikt efektīvi nosūtīta no tīmekļa satura uz vietējo Dart kodu.

Izmantojot jsonDecode() funkciju, mēs atšifrējam saņemto ziņojumu Dart pusē. Mēs nodrošinām, ka daudzus parametrus var nosūtīt organizētā veidā, pārsūtot JSON datus no JavaScript. Pēc dekodēšanas Dart var izgūt atsevišķās vērtības (x un y) un izmantot tās jebkuram mērķim. Tas ietver informācijas ierakstīšanu, lietotāja interfeisa elementu mainīšanu un citu uzdevumu veikšanu, kas ir atkarīgi no iegūtajām vērtībām. Šī metode garantē zemas izmaksas, sūtot sarežģītas datu struktūras no JavaScript uz Dart.

Papildus ziņojumu tiešai pārvaldībai mēs izskatījām arī citu pieeju, kas ietvēra unikālu URL shēmu izmantošanu. Mēs varam pārsūtīt parametrus, izmantojot URL, mainot window.location.href JavaScript. Pēc tam Dart var pārtvert šos datus, izmantojot navigācija Delegāts. Lietojot JavaScript kanāls var nebūt iespējama vai ja uz URL balstīta saziņa ir saprātīgāka, ņemot vērā programmas dizainu, šī pieeja var būt noderīga. Pēc tam Dart parsē URL un izmanto Uri.queryParameters funkcija, lai iegūtu tādus parametrus kā x un y. Tas garantē, ka starp Dart un tīmekļa saturu ir iespējami vairāki saziņas mehānismi.

Veiktspēja un drošība ir galvenā prioritāte visās pieejās, jo īpaši, saņemot ienākošos sakarus. Mēs paaugstinām procesu drošību un lasāmību, ziņojumu nosūtīšanai izmantojot JSON, kas aptur datu manipulācijas. Vienību testi arī garantē, ka funkcionalitāte dažādos iestatījumos darbojas kā paredzēts. Gluda un uzticama, WebView integrācija rada spēcīgu saikni starp tīmekļa tehnoloģijām un Flutter vietējo vidi.

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

Parametru nodošanas metožu izpēte pakalpojumā Flutter WebView

Sarežģītāku datu struktūru apstrāde ir svarīga daļa no parametru pārsūtīšanas caur Flutter WebView starp JavaScript un Dart. Lai gan mūsu uzmanība tika pievērsta pamata nokārtošanai x un y argumentus, var būt situācijas, kurās jums ir jānodod arī objekts, masīvs vai pat vairāki ligzdotie objekti. Sarežģītas datu struktūras var pārvērst virknes formātā, izmantojot JavaScript JSON.stringify() metodi, ko pēc tam var efektīvi pārsūtīt, izmantojot postMessage() metodi. Pēc tam Dart var izmantot jsonDecode() lai no jauna saliktu sākotnējo struktūru, lai to varētu apstrādāt.

Vēl viena praktiska metode ir ziņojumu pārsūtīšanas kļūdu pārvaldība. Pārvietojot svarīgus datus starp abām valodām, ir ļoti svarīgi nodrošināt datu validāciju gan JavaScript, gan Dart vidē. Nepareizi veidotus datus var izvairīties no piegādes, pirms izsaukšanas veicot pārbaudes postMessage() JavaScript pusē. Varat pārbaudīt, vai kodētajiem datiem ir paredzētās atslēgas un vērtības Dart pusē, tos apstiprinot. Papildus efektīvas komunikācijas nodrošināšanai tas pasargā no kļūdām vai bojātiem datiem.

Turklāt WebView Flutter nodrošina papildu funkcionalitāti, kas ļauj tīmekļa lapai lietot pielāgotu JavaScript. Varat dinamiski aktivizēt JavaScript rutīnas no Dart puses, izmantojot evaluateJavascript tehnika. Tas palielina daudzpusību, ļaujot nosūtīt komandas no jūsu lietotnes Flutter uz tīmekļa saturu, tādējādi uzlabojot divvirzienu saziņas kanālu. Ja ir nepieciešama pastāvīga datu apmaiņa starp diviem slāņiem, šī stratēģija darbojas labi.