JavaScripti kanali kasutamine rakenduses Flutter WebView mitme parameetri edastamiseks JavaScriptist Darti

JavaScripti käsitlemine Dart-suhtluses rakenduses Flutter WebView

Hübriidrakenduse kokkupanemine võib nõuda JavaScripti ja Flutteri integreerimist WebView kaudu. Andmete edastamine JavaScriptist Darti on üks sagedane töö, mis võimaldab sujuvat suhtlust kahe keskkonna vahel.

See postitus selgitab, kuidas kasutada Flutter WebView'i pistikprogrammi JavaScripti kanalit arvukate parameetrite ülekandmiseks JavaScriptist Darti. Keskendume konkreetselt olukorrale, kus näiteks kaks argumenti x ja y, saadetakse Dartile JavaScripti funktsiooni abil, kasutades setPosition kanal.

Kuigi andmeid saab saata JavaScriptist kasutades postisõnum(), tuleb neid sõnumeid Dartis õigesti käsitleda, et tagada side toimimine ettenähtud viisil. Tõhus andmetöötlus eeldab Darti kasutamise oskust onMessageReceived funktsioon seda teha.

Te pole üksi, kui olete proovinud Internetist vastuseid otsida, kuid pole palju leidnud. Selles artiklis käsitleme üksikasjalikult ja anname teile samm-sammult meetodi selle sidekanali ülesehitamiseks.

JavaScripti ja Dart-kommunikatsiooni integreerimine Flutter WebView'sse

Meie väljatöötatud lahendus näitab, kuidas kasutada a JavaScripti kanal edastada arvukalt argumente JavaScript Dartile Flutteri WebView kaudu. Esmane eesmärk on luua töökindel konveier Dart-koodi ja WebView-s töötava JavaScripti vaheliseks suhtluseks. The postisõnum() meetodit kasutab JavaScripti funktsioon kahe parameetri (x ja y) edastamiseks, mille Dart seejärel onMessageReceived tagasihelistamise kaudu vastu võtab. Selle konfiguratsiooniga saab olulist teavet veebisisust tõhusalt edastada Dart-koodi.

Kasutades jsonDecode() funktsiooni, dekodeerime vastuvõetud sõnumi Darti poolel. Tagame, et arvukalt parameetreid saab saata organiseeritult, edastades JavaScriptist JSON-andmed. Pärast dekodeerimist suudab Dart hankida üksikud väärtused (x ja y) ja kasutada neid mis tahes eesmärgil. See hõlmab teabe salvestamist, kasutajaliidese elementide muutmist ja muude ülesannete täitmist, mis sõltuvad saadud väärtustest. See meetod tagab keeruliste andmestruktuuride saatmisel JavaScriptist Dartile väikese üldkulu.

Lisaks sõnumite otsesele haldamisele uurisime ka teistsugust lähenemisviisi, mis hõlmas ainulaadsete URL-i skeemide kasutamist. Saame parameetreid URL-i kaudu edastada, muutes window.location.href JavaScriptis. Seejärel saab Dart need andmed kinni püüda, kasutades navigeerimine Delegeeri. Kui kasutate JavaScripti kanal ei pruugi olla teostatav või kui URL-põhine suhtlus on programmi ülesehitust arvestades mõttekam, võib see lähenemine olla kasulik. Pärast seda analüüsib Dart URL-i ja kasutab seda Uri.queryParameters funktsioon selliste parameetrite eraldamiseks nagu x ja y. See tagab, et Darti ja veebisisu vahel on võimalikud mitmed suhtlusmehhanismid.

Jõudlus ja turvalisus on kõigi lähenemisviiside puhul esmatähtsad, eriti sissetuleva teabe vastuvõtmisel. Suurendame protsesside ohutust ja loetavust, kasutades sõnumite edastamiseks JSON-i, mis peatab andmetega manipuleerimise. Seadmetestid tagavad ka selle, et funktsionaalsus töötab erinevates seadistustes ettenähtud viisil. Sujuv ja töökindel, WebView integratsioon loob tugeva seose veebitehnoloogiate ja Flutteri kodukeskkonna vahel.

// 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 parameetrite edastamise tehnikate uurimine

Keerulisemate andmestruktuuride käsitlemine on oluline osa parameetrite edastamisest JavaScripti ja Darti vahel Flutter WebView kaudu. Kuigi meie fookus on olnud põhitõdede läbimisel x ja y argumente, võib esineda olukordi, kus peate edastama ka objekti, massiivi või isegi mitut pesastatud objekti. Keerulisi andmestruktuure saab JavaScripti abil stringivormingusse teisendada JSON.stringify() meetodit, mida saab seejärel tõhusalt üle kanda postMessage() meetod. Pärast seda saab Dart kasutada jsonDecode() esialgse struktuuri uuesti kokku panemiseks, et seda saaks töödelda.

Teine praktiline meetod on sõnumite edastamise veahaldus. Andmete valideerimise tagamine nii JavaScripti kui ka Darti keskkonnas on oluliste andmete teisaldamisel kahe keele vahel ülioluline. Vigaste andmete edastamist saab vältida, kui kontrollite enne käivitamist postMessage() JavaScripti poolel. Saate kontrollida, kas kodeeritud andmetel on Darti poolel eeldatavad võtmed ja väärtused, kinnitades need. Lisaks tõhusa suhtluse tagamisele kaitseb see vigade või rikutud andmete eest.

Lisaks WebView in Flutter pakub lisafunktsiooni, mis võimaldab teil veebilehele kohandatud JavaScripti rakendada. Saate dünaamiliselt käivitada JavaScripti rutiinid Darti poolelt, kasutades evaluateJavascript tehnikat. See suurendab mitmekülgsust, võimaldades saata teie Flutteri rakendusest veebisisu käske, parandades seega kahepoolset suhtluskanalit. Kui kahe kihi vahel on vaja pidevat andmevahetust, töötab see strateegia hästi.