Maneig de JavaScript a Dart Communication a Flutter WebView
El muntatge d'una aplicació híbrida pot requerir la integració de JavaScript i Flutter mitjançant una WebView. La transmissió de dades de JavaScript a Dart és una tasca freqüent que permet una comunicació fluida entre els dos entorns.
En aquesta publicació s'explicarà com utilitzar el canal JavaScript d'un connector Flutter WebView per transferir nombrosos paràmetres de JavaScript a Dart. Ens centrarem específicament en una situació en què dos arguments, per exemple i , s'envien a Dart mitjançant una funció JavaScript utilitzant el canal.
Tot i que les dades es poden enviar des de JavaScript mitjançant , és imprescindible gestionar aquests missatges correctament a Dart per garantir que la comunicació funcioni com es pretén. El processament de dades eficaç requereix saber com utilitzar Dart's funció per fer-ho.
No esteu sols si heu provat de cercar respostes a Internet però no n'heu trobat gaire. En aquest article entrarem en detalls i us donarem un mètode pas a pas per crear aquest canal de comunicació.
| Comandament | Exemple d'ús |
|---|---|
| postMessage() | L'objectiu d'aquest mètode JavaScript és transferir missatges entre diversos contextos. Aquí, s'utilitza per transportar dades a través del al costat Dart del Flutter WebView des del contingut web (en aquest exemple, JavaScript). |
| jsonDecode() | Al paquet dart:convert es troba una funció de Dart que analitza una cadena codificada amb JSON i la transforma en un mapa o llista de Dart. Per tal de recuperar dades com i , ajuda a descodificar el rebut de JavaScript. |
| JavascriptChannel | Aquesta és una classe Flutter que facilita la comunicació entre el codi Dart i JavaScript que s'executa dins d'una WebView. Quan arriben missatges del costat de JavaScript, el els escolta i els maneja en Dart. |
| onMessageReceived | Una devolució de trucada que s'activa al fitxer en rebre un missatge de JavaScript. Gestiona el missatge entrant i realitza operacions de processament de dades, com ara analitzar JSON o utilitzar els arguments que se li han donat. |
| navigationDelegate | Una propietat de Dart que permet el giny per controlar i interceptar esdeveniments relacionats amb la navegació. Us permet registrar els canvis d'URL (p. ex., quan envieu paràmetres amb esquemes d'URL personalitzats). |
| Uri.queryParameters | A Dart, aquesta propietat recupera els paràmetres de consulta d'un URL. Podeu accedir a les dades subministrades com a paràmetres a l'URL, com ara i , quan utilitzeu un esquema d'URL personalitzat. |
| NavigationDecision.prevent | Un valor de retorn que el s'utilitza per aturar la navegació de WebView. Quan gestioneu arguments i intercepteu un canvi d'URL sense sortir de la pàgina actual, és útil. |
| JavascriptMessage | Una classe de dards que rep missatges enviats a través del de JavaScript a Dart. La cadena de missatge està continguda allà, a punt per processar-se o descodificar segons sigui necessari. |
| WebView | El El widget de les aplicacions Flutter s'utilitza per mostrar contingut web. Fa que els canals de JavaScript siguin accessibles, permetent la comunicació bidireccional entre el codi natiu i el web. |
Integració de JavaScript i Dart Communication a Flutter WebView
La nostra solució desenvolupada mostra com utilitzar a de transmetre nombrosos arguments a Dart mitjançant Flutter's WebView. L'objectiu principal és crear una canalització fiable per a la comunicació entre el codi Dart i JavaScript que s'executa a WebView. El La funció JavaScript utilitza el mètode per transmetre dos paràmetres (x i y), que Dart rep posteriorment mitjançant la devolució de trucada onMessageReceived. Amb aquesta configuració, la informació important es pot comunicar efectivament des del contingut web al codi de Dart natiu.
Utilitzant el funció, descodifiquem el missatge rebut al costat de Dart. Ens assegurem que es poden enviar nombrosos paràmetres de manera organitzada mitjançant la transferència de dades JSON des de JavaScript. Després de la descodificació, Dart és capaç de recuperar els valors individuals (x i y) i utilitzar-los per a qualsevol propòsit. Això inclou registrar informació, alterar elements de la interfície d'usuari i realitzar altres tasques que depenen dels valors obtinguts. Aquest mètode garanteix una sobrecàrrega baixa quan s'envien estructures de dades complexes de JavaScript a Dart.
A part de gestionar directament els missatges, també vam estudiar un enfocament diferent que implicava utilitzar esquemes d'URL únics. Podem transmetre paràmetres mitjançant l'URL canviant el en JavaScript. Dart pot interceptar aquestes dades utilitzant el . Quan utilitzeu el pot ser que no sigui factible o quan la comunicació basada en URL té més sentit donat el disseny del programa, aquest enfocament pot ser útil. Després d'això, Dart analitza l'URL i utilitza Uri.queryParameters funció per extreure paràmetres com x i y. Això garanteix que són possibles diversos mecanismes de comunicació entre Dart i el contingut web.
El rendiment i la seguretat tenen la màxima prioritat en tots els enfocaments, especialment quan es reben comunicacions entrants. Augmentem la seguretat i la llegibilitat dels processos utilitzant JSON per passar missatges, cosa que atura la manipulació de dades. Les proves d'unitat també garanteixen que la funcionalitat funcioni tal com s'ha previst en diverses configuracions. Suau i fiable, el La integració crea un vincle fort entre les tecnologies web i l'entorn natiu de Flutter.
Passant diversos paràmetres de JavaScript a Dart mitjançant Flutter WebView
Aquesta solució passa diversos arguments (x, y) de JavaScript a Dart mentre els tracta segons les millors pràctiques. Ho fa aprofitant el connector Flutter WebView i un canal JavaScript.
// JavaScript code to send two parameters to Dartfunction sendPosition(x, y) {setPosition.postMessage(JSON.stringify({ x: x, y: y }));}// Example of calling the functionsendPosition(100, 200);
Gestió dels paràmetres rebuts a Dart mitjançant el canal JavaScript de WebView
L'objectiu principal d'aquesta solució Dart és gestionar eficaçment el missatge rebut mitjançant el canal JavaScript de WebView descodificant-lo en format JSON.
// Dart code: Set up WebView and JavaScript channelWebView(initialUrl: 'https://your-webpage.com',javascriptChannels: {JavascriptChannel(name: 'setPosition',onMessageReceived: (JavascriptMessage message) {// Decode the JSON messagefinal data = jsonDecode(message.message);final x = data['x'];final y = data['y'];// Handle the x and y valuesprint('Position received: x=$x, y=$y');// Add your logic here},),},);
Test unitari per a Dart: provant el canal JavaScript
El costat de Dart de les proves unitàries de la solució assegura que el missatge JavaScript es processa i s'analitza correctament.
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);});}
Enfocament alternatiu: ús d'esquemes d'URL per passar paràmetres
Aquest mètode mostra com passar arguments mitjançant un esquema d'URL personalitzat en JavaScript que es descodifica a Dart després de l'esdeveniment de canvi d'URL del WebView.
// JavaScript code: Send parameters via custom URL schemefunction sendPositionViaUrl(x, y) {window.location.href = 'flutter-webview://setPosition?x=' + x + '&y=' + y;}// Example of calling the functionsendPositionViaUrl(100, 200);
Dart: Gestió dels canvis d'URL a WebView
Per tal de capturar i processar els paràmetres donats pel protocol d'URL, aquesta solució de Dart intercepta els canvis d'URL a WebView.
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 herereturn NavigationDecision.prevent;}return NavigationDecision.navigate;},);
Explorant les tècniques de pas de paràmetres a Flutter WebView
La gestió d'estructures de dades més complicades és una part important del pas de paràmetres a través d'un Flutter WebView entre JavaScript i Dart. Tot i que ens hem centrat en el pas bàsic i arguments, hi pot haver situacions en què també necessiteu passar un objecte, una matriu o fins i tot diversos objectes imbricats. Les estructures de dades complexes es poden convertir en un format de cadena mitjançant JavaScript mètode, que després es pot transferir eficaçment mitjançant el postMessage() mètode. Després d'això, Dart es pot utilitzar tornar a muntar l'estructura inicial perquè es pugui processar.
La gestió d'errors de reenviament de missatges és un altre mètode pràctic. Assegurar-se que les dades estiguin validades tant a l'entorn JavaScript com a Dart és crucial quan es mouen dades importants entre els dos idiomes. Es pot evitar que les dades amb format incorrecte s'entreguin posant comprovacions abans d'invocar-les al costat de JavaScript. Podeu verificar que les dades codificades tinguin les claus i valors previstos al costat de Dart validant-les. A més de garantir una comunicació eficaç, això protegeix contra errors o dades corruptes.
A més, a Flutter ofereix una funcionalitat addicional que us permet aplicar JavaScript personalitzat a la pàgina web. Podeu activar dinàmicament rutines de JavaScript des del costat de Dart utilitzant el tècnica. Això augmenta la versatilitat en permetre que les ordres s'enviïn des de l'aplicació Flutter al contingut web, millorant així el canal de comunicació bidireccional. Quan es necessita un intercanvi constant de dades entre les dues capes, aquesta estratègia funciona bé.
- Com puc enviar objectes complexos de JavaScript a Dart?
- Per descodificar objectes complicats al costat de Dart, feu servir després de convertir-los en una cadena amb i .
- Com es poden verificar les dades de la manera més eficaç abans de transferir-les?
- Abans de transmetre les dades amb , assegureu-vos que estigui estructurat correctament i que tingui tots els camps necessaris al costat de JavaScript. Després de descodificar la comunicació, verifiqueu les claus i els valors del costat de Dart.
- És possible enviar Dart més de dos paràmetres des de JavaScript?
- Sí, pots utilitzar per transmetre molts paràmetres com a objecte JSON i per manejar-los a Dart.
- Què passa si WebView no admet el canal JavaScript?
- Si el canal de JavaScript no està disponible, podeu utilitzar un esquema d'URL personalitzat i utilitzar-lo a Dart per interceptar l'URL.
- Com puc gestionar els errors durant el pas de paràmetres?
- Posa en pràctica la gestió d'errors a Dart i JavaScript. Assegureu-vos que totes les dades s'enviïn amb està comprovat i s'utilitza blocs a Dart per detectar problemes de descodificació.
La possibilitat d'enviar arguments entre JavaScript i Dart millora la manera com interactuen el contingut en línia i les aplicacions Flutter. La integritat i la usabilitat de les dades estan garantides quan s'utilitza conjuntament amb Dart's funció.
Els desenvolupadors poden seleccionar l'enfocament que millor s'adapti al seu projecte investigant diverses estratègies, com ara els esquemes d'URL i la gestió de missatges directes. Assegurar una validació adequada i una gestió d'errors millora la fiabilitat d'aquests sistemes de comunicació.
- S'aprofundeix en la configuració i com s'integren aplicacions. Documentació de Flutter WebView
- Proporciona informació sobre el mètode i el seu ús a JavaScript per a missatgeria entre marcs. MDN Web Docs - postMessage()
- Explica com Dart gestiona la descodificació i l'anàlisi JSON per a un maneig eficient de dades des de JavaScript. Documentació de Dart jsonDecode().
- Cobertes utilitzant el per a la intercepció d'URL dins d'una WebView. Flutter WebView NavigationDelegate