Χρήση του καναλιού JavaScript στο Flutter WebView για τη μετάδοση πολλών παραμέτρων από το JavaScript στο Dart

Χειρισμός επικοινωνίας JavaScript σε Dart στο Flutter WebView

Η συναρμολόγηση μιας υβριδικής εφαρμογής ενδέχεται να απαιτεί ενσωμάτωση JavaScript και Flutter μέσω WebView. Η μετάδοση δεδομένων από JavaScript στο Dart είναι μια συχνή εργασία που επιτρέπει την ομαλή επικοινωνία μεταξύ των δύο περιβαλλόντων.

Αυτή η ανάρτηση θα εξηγήσει πώς να χρησιμοποιήσετε το JavaScript Channel μιας προσθήκης Flutter WebView για να μεταφέρετε πολλές παραμέτρους από το JavaScript στο Dart. Θα επικεντρωθούμε συγκεκριμένα σε μια κατάσταση στην οποία δύο επιχειρήματα, ας πούμε x και y, αποστέλλονται στο Dart από μια συνάρτηση JavaScript χρησιμοποιώντας το setPosition κανάλι.

Παρόλο που τα δεδομένα μπορούν να σταλούν από JavaScript χρησιμοποιώντας postMessage(), είναι επιτακτική ανάγκη να χειριστείτε σωστά αυτά τα μηνύματα στο Dart για να διασφαλιστεί ότι η επικοινωνία λειτουργεί όπως προβλέπεται. Η αποτελεσματική επεξεργασία δεδομένων απαιτεί τη γνώση του τρόπου χρήσης του Dart's onMessageReceived λειτουργία για να γίνει αυτό.

Δεν είστε μόνοι αν έχετε προσπαθήσει να ψάξετε στο διαδίκτυο για απαντήσεις αλλά δεν έχετε βρει πολλά. Θα αναφερθούμε σε πολλές λεπτομέρειες και θα σας δώσουμε μια μέθοδο βήμα προς βήμα για τη δημιουργία αυτού του αγωγού επικοινωνίας σε αυτό το άρθρο.

Ενσωμάτωση JavaScript και Dart Communication στο Flutter WebView

Η λύση που έχουμε αναπτύξει δείχνει πώς να χρησιμοποιήσετε το α Κανάλι JavaScript να μεταδώσει πολλά επιχειρήματα από JavaScript στο Dart μέσω του WebView του Flutter. Ο πρωταρχικός στόχος είναι να δημιουργηθεί μια αξιόπιστη διοχέτευση για επικοινωνία μεταξύ του κώδικα Dart και της JavaScript που εκτελείται στο WebView. Ο postMessage() Η μέθοδος χρησιμοποιείται από τη συνάρτηση JavaScript για τη μετάδοση δύο παραμέτρων (x και y), οι οποίες στη συνέχεια λαμβάνονται από το Dart μέσω της επιστροφής κλήσης onMessageReceived. Με αυτήν τη διαμόρφωση, σημαντικές πληροφορίες μπορούν να μεταδοθούν αποτελεσματικά από το περιεχόμενο ιστού στον εγγενή κώδικα Dart.

Χρησιμοποιώντας το jsonDecode() λειτουργία, αποκωδικοποιούμε το ληφθέν μήνυμα στην πλευρά Dart. Διασφαλίζουμε ότι πολλές παράμετροι μπορούν να αποσταλούν με οργανωμένο τρόπο μεταφέροντας δεδομένα JSON από JavaScript. Μετά την αποκωδικοποίηση, το Dart είναι σε θέση να ανακτήσει τις μεμονωμένες τιμές (x και y) και να τις χρησιμοποιήσει για οποιονδήποτε σκοπό. Αυτό περιλαμβάνει την καταγραφή πληροφοριών, την τροποποίηση στοιχείων διεπαφής χρήστη και την εκτέλεση άλλων εργασιών που εξαρτώνται από τις τιμές που λαμβάνονται. Αυτή η μέθοδος εγγυάται χαμηλό κόστος κατά την αποστολή σύνθετων δομών δεδομένων από JavaScript στο Dart.

Εκτός από τη διαχείριση των μηνυμάτων απευθείας, εξετάσαμε επίσης μια διαφορετική προσέγγιση που περιλάμβανε τη χρήση μοναδικών σχημάτων URL. Μπορούμε να μεταδώσουμε παραμέτρους μέσω του URL αλλάζοντας το window.location.href σε JavaScript. Το Dart μπορεί στη συνέχεια να υποκλέψει αυτά τα δεδομένα χρησιμοποιώντας το πλοήγηση Εκπρόσωπος. Όταν χρησιμοποιείτε το Κανάλι JavaScript μπορεί να μην είναι εφικτή ή όταν η επικοινωνία που βασίζεται σε URL είναι πιο λογική, δεδομένου του σχεδιασμού του προγράμματος, αυτή η προσέγγιση μπορεί να είναι χρήσιμη. Μετά από αυτό, το Dart αναλύει τη διεύθυνση URL και χρησιμοποιεί το Uri.queryParameters συνάρτηση για εξαγωγή παραμέτρων όπως x και y. Αυτό εγγυάται ότι είναι δυνατοί πολλοί μηχανισμοί επικοινωνίας μεταξύ του Dart και του περιεχομένου Ιστού.

Οι επιδόσεις και η ασφάλεια δίνονται σε ύψιστη προτεραιότητα σε όλες τις προσεγγίσεις, ιδιαίτερα κατά τη λήψη εισερχόμενων επικοινωνιών. Αυξάνουμε την ασφάλεια και την αναγνωσιμότητα της διαδικασίας χρησιμοποιώντας JSON για τη μετάδοση μηνυμάτων, η οποία σταματά τη χειραγώγηση δεδομένων. Οι δοκιμές μονάδας εγγυώνται επίσης ότι η λειτουργικότητα λειτουργεί όπως προβλέπεται σε διάφορες ρυθμίσεις. Ομαλή και αξιόπιστη, η WebView Η ενοποίηση δημιουργεί μια ισχυρή σύνδεση μεταξύ των τεχνολογιών Ιστού και του εγγενούς περιβάλλοντος του Flutter.

// 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

Ο χειρισμός πιο περίπλοκων δομών δεδομένων είναι ένα σημαντικό μέρος της μετάδοσης παραμέτρων μέσω ενός Flutter WebView μεταξύ JavaScript και Dart. Αν και η εστίασή μας ήταν στο πέρασμα βασικών x και y ορίσματα, μπορεί να υπάρχουν καταστάσεις στις οποίες πρέπει επίσης να περάσετε ένα αντικείμενο, έναν πίνακα ή ακόμα και πολλά ένθετα αντικείμενα. Οι σύνθετες δομές δεδομένων μπορούν να μετατραπούν σε μορφή συμβολοσειράς χρησιμοποιώντας JavaScript JSON.stringify() μέθοδο, η οποία στη συνέχεια μπορεί να μεταφερθεί αποτελεσματικά χρησιμοποιώντας το postMessage() μέθοδος. Μετά από αυτό, το Dart μπορεί να χρησιμοποιήσει jsonDecode() να συναρμολογήσει ξανά την αρχική δομή ώστε να μπορεί να υποβληθεί σε επεξεργασία.

Η διαχείριση σφαλμάτων προώθησης μηνυμάτων είναι μια άλλη πρακτική μέθοδος. Η διασφάλιση ότι τα δεδομένα επικυρώνονται τόσο στο περιβάλλον JavaScript όσο και στο περιβάλλον Dart είναι ζωτικής σημασίας κατά τη μεταφορά σημαντικών δεδομένων μεταξύ των δύο γλωσσών. Τα λανθασμένα δεδομένα μπορούν να αποφευχθούν από την παράδοση, κάνοντας ελέγχους πριν από την επίκληση postMessage() στην πλευρά JavaScript. Μπορείτε να επαληθεύσετε ότι τα κωδικοποιημένα δεδομένα έχουν τα αναμενόμενα κλειδιά και τιμές στην πλευρά του Dart επικυρώνοντάς τα. Εκτός από τη διασφάλιση αποτελεσματικής επικοινωνίας, αυτό προφυλάσσει από λάθη ή κατεστραμμένα δεδομένα.

Επιπλέον, WebView στο Flutter παρέχει μια επιπλέον λειτουργικότητα που σας επιτρέπει να εφαρμόσετε προσαρμοσμένη JavaScript στην ιστοσελίδα. Μπορείτε να ενεργοποιήσετε δυναμικά τις ρουτίνες JavaScript από την πλευρά του Dart χρησιμοποιώντας το evaluateJavascript τεχνική. Αυτό αυξάνει την ευελιξία επιτρέποντας την αποστολή εντολών από την εφαρμογή Flutter στο περιεχόμενο ιστού, βελτιώνοντας έτσι το κανάλι αμφίδρομης επικοινωνίας. Όταν υπάρχει ανάγκη για συνεχή ανταλλαγή δεδομένων μεταξύ των δύο επιπέδων, αυτή η στρατηγική λειτουργεί καλά.