JavaScript-kanavan käyttäminen Flutter WebView'ssa useiden parametrien siirtämiseen JavaScriptistä Dartiin

JavaScriptin käsittely Dart-viestintään Flutter WebView -sovelluksessa

Hybridisovelluksen kokoaminen saattaa edellyttää JavaScriptin ja Flutterin integroimista WebView'n kautta. Tiedonsiirto JavaScriptistä Dartiin on yksi toistuva työ, joka mahdollistaa sujuvan viestinnän kahden ympäristön välillä.

Tämä viesti selittää, kuinka Flutter WebView -laajennuksen JavaScript-kanavaa käytetään useiden parametrien siirtämiseen JavaScriptistä Dartiin. Keskitymme erityisesti tilanteeseen, jossa esimerkiksi kaksi argumenttia x ja y, lähetetään Dartille JavaScript-funktiolla käyttämällä setPosition kanava.

Vaikka tietoja voidaan lähettää JavaScriptistä käyttämällä postMessage(), on välttämätöntä käsitellä näitä viestejä oikein Dartissa varmistaaksesi, että viestintä toimii tarkoitetulla tavalla. Tehokas tietojenkäsittely edellyttää Dartin käytön osaamista onMessageReceived toiminto tehdä tämän.

Et ole yksin, jos olet yrittänyt etsiä vastauksia Internetistä, mutta et ole löytänyt paljon. Menemme yksityiskohtaisesti ja annamme sinulle vaiheittaisen menetelmän tämän viestintäkanavan rakentamiseen tässä artikkelissa.

JavaScript- ja Dart-viestinnän integrointi Flutter WebView'ssa

Kehittynyt ratkaisumme näyttää kuinka käyttää a JavaScript-kanava lähettää lukuisia argumentteja JavaScript Dartiin Flutterin WebView'n kautta. Ensisijainen tavoite on luoda luotettava putki Dart-koodin ja WebView'ssa toimivan JavaScriptin välillä. The postMessage() JavaScript-funktio käyttää menetelmää kahden parametrin (x ja y) lähettämiseen, jotka Dart vastaanottaa myöhemmin onMessageReceived-takaisinkutsun kautta. Tällä kokoonpanolla tärkeät tiedot voidaan välittää tehokkaasti verkkosisällöstä alkuperäiseen Dart-koodiin.

Käyttämällä jsonDecode() -toiminto, puramme vastaanotetun viestin Dart-puolella. Varmistamme, että lukuisia parametreja voidaan lähettää järjestelmällisesti siirtämällä JSON-tietoja JavaScriptistä. Dekoodauksen jälkeen Dart pystyy hakemaan yksittäiset arvot (x ja y) ja käyttämään niitä mihin tahansa tarkoitukseen. Tämä sisältää tietojen tallentamisen, käyttöliittymäelementtien muuttamisen ja muiden tehtävien suorittamisen, jotka riippuvat saaduista arvoista. Tämä menetelmä takaa alhaiset lisäkustannukset lähetettäessä monimutkaisia ​​tietorakenteita JavaScriptistä Dartiin.

Viestien suoran hallinnan lisäksi tutkimme myös erilaista lähestymistapaa, joka sisälsi ainutlaatuisten URL-järjestelmien käyttämisen. Voimme lähettää parametreja URL-osoitteen kautta muuttamalla window.location.href JavaScriptissä. Dart voi sitten siepata nämä tiedot käyttämällä navigationDelegate. Kun käytät JavaScript-kanava Tämä lähestymistapa voi olla hyödyllinen, jos se ei ehkä ole mahdollista tai kun URL-pohjainen viestintä on järkevämpää ohjelman suunnittelun vuoksi. Tämän jälkeen Dart jäsentää URL-osoitteen ja käyttää Uri.queryParameters funktio poimimaan parametrit, kuten x ja y. Tämä takaa, että Dartin ja verkkosisällön välillä on useita viestintämekanismeja.

Suorituskyky ja turvallisuus ovat etusijalla kaikissa lähestymistavoissa, erityisesti vastaanotettaessa saapuvia viestejä. Lisäämme prosessien turvallisuutta ja luettavuutta käyttämällä JSON-tekniikkaa viestien välittämiseen, mikä pysäyttää tietojen käsittelyn. Yksikkötestit takaavat myös, että toiminnallisuus toimii tarkoitetulla tavalla eri asetuksissa. Tasainen ja luotettava, WebView integraatio luo vahvan linkin verkkoteknologioiden ja Flutterin alkuperäisen ympäristön välille.

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

Parametrien siirtotekniikoiden tutkiminen Flutter WebView'ssa

Monimutkaisempien tietorakenteiden käsittely on tärkeä osa parametrien välittämistä Flutter WebView'n kautta JavaScriptin ja Dartin välillä. Vaikka painopisteemme on ollut perusasioiden läpäiseminen x ja y argumentteja, voi olla tilanteita, joissa sinun on myös välitettävä objekti, taulukko tai jopa useita sisäkkäisiä objekteja. Monimutkaiset tietorakenteet voidaan muuntaa merkkijonomuotoon JavaScriptin avulla JSON.stringify() menetelmällä, joka voidaan sitten siirtää tehokkaasti käyttämällä postMessage() menetelmä. Sen jälkeen Dart voi käyttää jsonDecode() koota alkuperäinen rakenne uudelleen, jotta se voidaan käsitellä.

Viestien edelleenlähetyksen virheenhallinta on toinen käytännöllinen menetelmä. Tietojen validoinnin varmistaminen sekä JavaScript- että Dart-ympäristöissä on erittäin tärkeää siirrettäessä tärkeitä tietoja kahden kielen välillä. Väärin muotoiltujen tietojen toimittaminen voidaan välttää tarkistamalla ennen kutsumista postMessage() JavaScript-puolella. Voit varmistaa, että koodatulla tiedolla on odotetut avaimet ja arvot Dart-puolella vahvistamalla sen. Tehokkaan viestinnän takaamisen lisäksi tämä suojaa virheiltä tai vioittuneilta tiedoilta.

Lisäksi, WebView in Flutter tarjoaa lisätoiminnon, jonka avulla voit käyttää mukautettua JavaScriptiä verkkosivulle. Voit käynnistää JavaScript-rutiineja dynaamisesti Dart-puolelta käyttämällä evaluateJavascript tekniikka. Tämä lisää monipuolisuutta mahdollistamalla komentojen lähettämisen Flutter-sovelluksesta verkkosisältöön, mikä parantaa kaksisuuntaista viestintäkanavaa. Kun kahden kerroksen välillä tarvitaan jatkuvaa tiedonvaihtoa, tämä strategia toimii hyvin.