Menggunakan Saluran JavaScript di Flutter WebView untuk Melewati Beberapa Parameter dari JavaScript ke Dart

Menangani JavaScript ke Komunikasi Dart di Flutter WebView

Merakit aplikasi hibrid mungkin memerlukan pengintegrasian JavaScript dan Flutter melalui WebView. Transmisi data dari JavaScript ke Dart adalah salah satu pekerjaan umum yang memungkinkan kelancaran komunikasi antara dua lingkungan.

Posting ini akan menjelaskan cara menggunakan Saluran JavaScript plugin Flutter WebView untuk mentransfer berbagai parameter dari JavaScript ke Dart. Kami secara khusus akan berkonsentrasi pada situasi di mana ada dua argumen, misalnya X Dan kamu, dikirim ke Dart dengan fungsi JavaScript menggunakan setPosisi saluran.

Meskipun data dapat dikirim dari JavaScript menggunakan pascaPesan(), sangat penting untuk menangani pesan-pesan ini dengan benar di Dart untuk menjamin bahwa komunikasi berfungsi sebagaimana mestinya. Pemrosesan data yang efektif memerlukan pengetahuan cara menggunakan Dart diMessageReceived berfungsi untuk melakukan hal ini.

Anda tidak sendirian jika Anda sudah mencoba mencari jawaban di internet tetapi belum menemukan banyak jawaban. Kami akan membahasnya secara mendetail dan memberi Anda metode langkah demi langkah untuk membangun jalur komunikasi ini di artikel ini.

Mengintegrasikan JavaScript dan Komunikasi Dart di Flutter WebView

Solusi yang kami kembangkan menunjukkan cara menggunakan a Saluran JavaScript untuk menyampaikan banyak argumen dari JavaScript ke Dart melalui WebView Flutter. Tujuan utamanya adalah membuat saluran yang dapat diandalkan untuk komunikasi antara kode Dart dan JavaScript yang berjalan di WebView. Itu pascaPesan() Metode ini digunakan oleh fungsi JavaScript untuk mengirimkan dua parameter (x dan y), yang selanjutnya diterima oleh Dart melalui panggilan balik onMessageReceived. Dengan konfigurasi ini, informasi penting dapat dikomunikasikan secara efektif dari konten web ke kode Dart asli.

Menggunakan jsonDecode() fungsi, kami memecahkan kode pesan yang diterima di sisi Dart. Kami memastikan bahwa banyak parameter dapat dikirim secara terorganisir dengan mentransfer data JSON dari JavaScript. Setelah decoding, Dart dapat mengambil nilai individual (x dan y) dan menggunakannya untuk tujuan apa pun. Ini termasuk merekam informasi, mengubah elemen antarmuka pengguna, dan melaksanakan tugas lain yang bergantung pada nilai yang diperoleh. Metode ini menjamin overhead yang rendah saat mengirim struktur data kompleks dari JavaScript ke Dart.

Selain mengelola pesan secara langsung, kami juga melihat pendekatan berbeda yang melibatkan penggunaan skema URL unik. Kita dapat mengirimkan parameter melalui URL dengan mengubah jendela.lokasi.href dalam JavaScript. Dart kemudian dapat mencegat data ini menggunakan navigasiDelegasi. Saat menggunakan Saluran JavaScript mungkin tidak layak dilakukan atau ketika komunikasi berbasis URL lebih masuk akal mengingat desain programnya, pendekatan ini dapat bermanfaat. Setelah itu, Dart mem-parsing URL dan menggunakan Uri.queryParameters berfungsi untuk mengekstrak parameter seperti x dan y. Hal ini menjamin bahwa beberapa mekanisme komunikasi antara Dart dan konten web dimungkinkan.

Performa dan keamanan menjadi prioritas utama dalam semua pendekatan, khususnya saat menerima komunikasi masuk. Kami meningkatkan keamanan proses dan keterbacaan dengan menggunakan JSON untuk penyampaian pesan, yang menghentikan manipulasi data. Pengujian unit juga menjamin bahwa fungsionalitas berfungsi sebagaimana mestinya dalam berbagai pengaturan. Halus dan dapat diandalkan, itu Tampilan Web integrasi menciptakan hubungan yang kuat antara teknologi web dan lingkungan asli 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;
  },
);

Menjelajahi Teknik Passing Parameter di Flutter WebView

Menangani struktur data yang lebih rumit adalah bagian penting dari penerusan parameter melalui Flutter WebView antara JavaScript dan Dart. Meskipun fokus kami selama ini pada passing dasar X Dan kamu argumen, mungkin ada situasi di mana Anda juga perlu meneruskan sebuah objek, array, atau bahkan beberapa objek bersarang. Struktur data yang kompleks dapat diubah menjadi format string menggunakan JavaScript JSON.stringify() metode, yang kemudian dapat ditransfer secara efektif menggunakan postMessage() metode. Setelah itu, Dart dapat memanfaatkannya jsonDecode() untuk merakit kembali struktur awal sehingga dapat diproses.

Manajemen kesalahan penerusan pesan adalah metode praktis lainnya. Memastikan bahwa data divalidasi di lingkungan JavaScript dan Dart sangat penting saat memindahkan data penting antara kedua bahasa tersebut. Data yang salah format dapat dihindari agar tidak terkirim dengan melakukan pemeriksaan sebelum dipanggil postMessage() di sisi JavaScript. Anda dapat memverifikasi bahwa data yang dikodekan memiliki kunci dan nilai yang diantisipasi di sisi Dart dengan memvalidasinya. Selain memastikan komunikasi yang efektif, hal ini juga melindungi dari kesalahan atau data yang rusak.

Selain itu, WebView di Flutter menyediakan fungsionalitas tambahan yang memungkinkan Anda menerapkan JavaScript khusus ke halaman web. Anda dapat secara dinamis memicu rutinitas JavaScript dari sisi Dart dengan memanfaatkan evaluateJavascript teknik. Hal ini meningkatkan keserbagunaan dengan mengaktifkan perintah untuk dikirim dari aplikasi Flutter Anda ke konten web, sehingga meningkatkan saluran komunikasi dua arah. Ketika ada kebutuhan untuk pertukaran data yang konstan antara dua lapisan, strategi ini bekerja dengan baik.