Menggunakan Saluran JavaScript dalam Flutter WebView untuk

Daniel Marino

Khamis, 26 September 2024 8:38:18 PTG

Mengendalikan JavaScript ke Dart Communication dalam Flutter WebView
Memasang aplikasi hibrid mungkin memerlukan penyepaduan JavaScript dan Flutter melalui WebView. Penghantaran data daripada JavaScript ke Dart ialah satu kerja yang kerap yang membolehkan komunikasi lancar antara kedua-dua persekitaran.
Siaran ini akan menerangkan cara menggunakan Saluran JavaScript pemalam Flutter WebView untuk memindahkan banyak parameter daripada JavaScript ke Dart. Kami secara khusus akan menumpukan pada situasi di mana dua hujah, katakan dan , dihantar ke Dart oleh fungsi JavaScript menggunakan saluran.
Walaupun data boleh dihantar daripada JavaScript menggunakan , adalah penting untuk mengendalikan mesej ini dengan betul dalam Dart untuk menjamin bahawa komunikasi berfungsi seperti yang dimaksudkan. Pemprosesan data yang berkesan memerlukan mengetahui cara menggunakan Dart fungsi untuk melakukan ini.
Anda tidak bersendirian jika anda telah mencuba mencari jawapan di internet tetapi tidak banyak menemuinya. Kami akan menerangkan dengan terperinci dan memberi anda kaedah langkah demi langkah untuk membina saluran komunikasi ini dalam artikel ini.

Perintah Contoh penggunaan

postMessage() Tujuan kaedah JavaScript ini adalah untuk memindahkan mesej antara beberapa konteks. Di sini, ia digunakan untuk mengangkut data melalui ke bahagian Dart pada Flutter WebView daripada kandungan web (dalam contoh ini, JavaScript).

jsonDecode() Fungsi Dart yang menghuraikan rentetan yang dikodkan dengan JSON dan mengubahnya menjadi peta atau senarai Dart ditemui dalam pakej dart:convert. Untuk mendapatkan semula data seperti dan , ia membantu dalam penyahkodan diterima daripada JavaScript.

JavascriptChannel Ini ialah kelas Flutter yang memudahkan komunikasi antara kod Dart dan JavaScript yang dilaksanakan dalam WebView. Apabila mesej tiba dari sisi JavaScript, mendengar mereka dan mengendalikan mereka dalam Dart.

onMessageReceived Panggilan balik yang dicetuskan dalam apabila menerima mesej daripada JavaScript. Ia mengurus mesej masuk dan menjalankan operasi pemprosesan data, termasuk menghuraikan JSON atau menggunakan hujah yang telah diberikan.

navigationDelegate Harta Dart yang membolehkan widget untuk mengawal dan memintas acara yang berkaitan dengan navigasi. Ia membolehkan anda merekodkan perubahan URL (cth., semasa menghantar parameter dengan skema URL tersuai).

Uri.queryParameters Dalam Dart, sifat ini mendapatkan semula parameter pertanyaan daripada URL. Anda boleh mengakses data yang dibekalkan sebagai parameter dalam URL, seperti dan , apabila anda menggunakan skema URL tersuai.

NavigationDecision.prevent Nilai pulangan yang digunakan untuk menghentikan WebView daripada menavigasi. Apabila mengurus hujah dan memintas perubahan URL tanpa meninggalkan halaman semasa, ini berguna.

JavascriptMessage Kelas Dart yang menerima mesej yang dihantar melalui daripada JavaScript kepada Dart. Rentetan mesej terkandung di sana, sedia untuk diproses atau penyahkodan seperti yang diperlukan.

WebView The widget dalam aplikasi Flutter digunakan untuk memaparkan kandungan web. Ia menjadikan saluran JavaScript boleh diakses, membolehkan komunikasi dua arah antara kod asli dan web.

Perintah	Contoh penggunaan
postMessage()	Tujuan kaedah JavaScript ini adalah untuk memindahkan mesej antara beberapa konteks. Di sini, ia digunakan untuk mengangkut data melalui ke bahagian Dart pada Flutter WebView daripada kandungan web (dalam contoh ini, JavaScript).
jsonDecode()	Fungsi Dart yang menghuraikan rentetan yang dikodkan dengan JSON dan mengubahnya menjadi peta atau senarai Dart ditemui dalam pakej dart:convert. Untuk mendapatkan semula data seperti dan , ia membantu dalam penyahkodan diterima daripada JavaScript.
JavascriptChannel	Ini ialah kelas Flutter yang memudahkan komunikasi antara kod Dart dan JavaScript yang dilaksanakan dalam WebView. Apabila mesej tiba dari sisi JavaScript, mendengar mereka dan mengendalikan mereka dalam Dart.
onMessageReceived	Panggilan balik yang dicetuskan dalam apabila menerima mesej daripada JavaScript. Ia mengurus mesej masuk dan menjalankan operasi pemprosesan data, termasuk menghuraikan JSON atau menggunakan hujah yang telah diberikan.
navigationDelegate	Harta Dart yang membolehkan widget untuk mengawal dan memintas acara yang berkaitan dengan navigasi. Ia membolehkan anda merekodkan perubahan URL (cth., semasa menghantar parameter dengan skema URL tersuai).
Uri.queryParameters	Dalam Dart, sifat ini mendapatkan semula parameter pertanyaan daripada URL. Anda boleh mengakses data yang dibekalkan sebagai parameter dalam URL, seperti dan , apabila anda menggunakan skema URL tersuai.
NavigationDecision.prevent	Nilai pulangan yang digunakan untuk menghentikan WebView daripada menavigasi. Apabila mengurus hujah dan memintas perubahan URL tanpa meninggalkan halaman semasa, ini berguna.
JavascriptMessage	Kelas Dart yang menerima mesej yang dihantar melalui daripada JavaScript kepada Dart. Rentetan mesej terkandung di sana, sedia untuk diproses atau penyahkodan seperti yang diperlukan.
WebView	The widget dalam aplikasi Flutter digunakan untuk memaparkan kandungan web. Ia menjadikan saluran JavaScript boleh diakses, membolehkan komunikasi dua arah antara kod asli dan web.

Mengintegrasikan JavaScript dan Komunikasi Dart dalam Flutter WebView

Penyelesaian kami yang dibangunkan menunjukkan cara menggunakan a untuk menghantar banyak hujah daripada ke Dart melalui WebView Flutter. Matlamat utama adalah untuk mencipta saluran paip yang boleh dipercayai untuk komunikasi antara kod Dart dan JavaScript yang dijalankan dalam WebView. The kaedah digunakan oleh fungsi JavaScript untuk menghantar dua parameter (x dan y), yang kemudiannya diterima oleh Dart melalui panggilan balik onMessageReceived. Dengan konfigurasi ini, maklumat penting mungkin disampaikan dengan berkesan daripada kandungan web kepada kod Dart asli.

Menggunakan fungsi, kami menyahkod mesej yang diterima di sebelah Dart. Kami memastikan bahawa banyak parameter boleh dihantar dengan cara yang teratur dengan memindahkan data JSON daripada JavaScript. Selepas penyahkodan, Dart dapat mendapatkan semula nilai individu (x dan y) dan menggunakannya untuk sebarang tujuan. Ini termasuk merekod maklumat, mengubah elemen antara muka pengguna dan menjalankan tugas lain yang bergantung pada nilai yang diperoleh. Kaedah ini menjamin overhed yang rendah apabila menghantar struktur data yang kompleks daripada JavaScript ke Dart.

Selain daripada menguruskan mesej secara langsung, kami juga melihat pendekatan berbeza yang melibatkan penggunaan skema URL unik. Kami boleh menghantar parameter melalui URL dengan menukar dalam JavaScript. Dart kemudiannya boleh memintas data ini menggunakan . Apabila menggunakan mungkin tidak dapat dilaksanakan atau apabila komunikasi berasaskan URL lebih masuk akal memandangkan reka bentuk program, pendekatan ini boleh berguna. Selepas itu, Dart menghuraikan URL dan menggunakan Uri.queryParameters berfungsi untuk mengekstrak parameter seperti x dan y. Ini menjamin bahawa beberapa mekanisme komunikasi antara Dart dan kandungan web adalah mungkin.

Prestasi dan keselamatan diberi keutamaan dalam semua pendekatan, terutamanya apabila menerima komunikasi masuk. Kami meningkatkan keselamatan proses dan kebolehbacaan dengan menggunakan JSON untuk penghantaran mesej, yang menghentikan manipulasi data. Ujian unit juga menjamin bahawa fungsi berfungsi seperti yang dimaksudkan dalam pelbagai tetapan. Lancar dan boleh dipercayai, yang penyepaduan mewujudkan hubungan kukuh antara teknologi web dan persekitaran asal Flutter.

Melewati Berbilang Parameter daripada JavaScript ke Dart melalui Flutter WebView

Penyelesaian ini menghantar beberapa hujah (x, y) daripada JavaScript kepada Dart sambil merawatnya mengikut amalan terbaik. Ia melakukan ini dengan memanfaatkan pemalam Flutter WebView dan saluran JavaScript.

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

Mengendalikan Parameter Diterima dalam Dart melalui Saluran JavaScript WebView

Matlamat utama penyelesaian Dart ini adalah untuk mengendalikan mesej yang diterima secara berkesan melalui saluran JavaScript WebView dengan menyahkodnya dalam format JSON.

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

Ujian Unit untuk Dart: Menguji Saluran JavaScript

Bahagian Dart ujian unit penyelesaian memastikan mesej JavaScript diproses dan dihuraikan dengan betul.

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

Pendekatan Alternatif: Menggunakan Skim URL untuk Lulus Parameter

Kaedah ini menunjukkan cara untuk menghantar hujah menggunakan skema URL tersuai dalam JavaScript yang dinyahkod dalam Dart apabila peristiwa perubahan URL WebView.

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

Dart: Mengendalikan Perubahan URL dalam WebView

Untuk menangkap dan memproses parameter yang diberikan melalui protokol URL, penyelesaian Dart ini memintas perubahan URL dalam 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 here
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
);

Meneroka Teknik Lulus Parameter dalam Flutter WebView

Mengendalikan struktur data yang lebih rumit ialah bahagian penting dalam parameter yang dihantar melalui Flutter WebView antara JavaScript dan Dart. Walaupun tumpuan kami adalah untuk lulus asas dan argumen, mungkin terdapat situasi di mana anda juga perlu menghantar objek, tatasusunan, atau bahkan beberapa objek bersarang. Struktur data yang kompleks boleh ditukar kepada format rentetan menggunakan JavaScript kaedah, yang kemudiannya boleh dipindahkan dengan berkesan menggunakan postMessage() kaedah. Selepas itu, Dart boleh memanfaatkan untuk memasang semula struktur awal supaya ia boleh diproses.

Pengurusan ralat penghantaran mesej ialah kaedah praktikal yang lain. Memastikan bahawa data disahkan dalam persekitaran JavaScript dan Dart adalah penting apabila memindahkan data penting antara kedua-dua bahasa. Data yang cacat boleh dielakkan daripada dihantar dengan meletakkan semakan sebelum menggunakan di sebelah JavaScript. Anda boleh mengesahkan bahawa data yang dikodkan mempunyai kunci dan nilai yang dijangkakan pada bahagian Dart dengan mengesahkannya. Selain memastikan komunikasi yang berkesan, ini melindungi daripada kesilapan atau data yang rosak.

Selain itu, dalam Flutter menyediakan fungsi tambahan yang membolehkan anda menggunakan JavaScript tersuai pada halaman web. Anda boleh mencetus rutin JavaScript secara dinamik dari sisi Dart dengan menggunakan teknik. Ini meningkatkan fleksibiliti dengan membolehkan arahan dihantar daripada apl Flutter anda ke kandungan web, jadi meningkatkan saluran komunikasi dua hala. Apabila terdapat keperluan untuk pertukaran data berterusan antara dua lapisan, strategi ini berfungsi dengan baik.

Bagaimanakah saya menghantar objek kompleks daripada JavaScript ke Dart?
Untuk menyahkod objek rumit pada bahagian Dart, gunakan selepas menukarnya kepada rentetan dengan dan .
Bagaimanakah data boleh disahkan dengan paling berkesan sebelum memindahkannya?
Sebelum menghantar data dengan , pastikan ia berstruktur dengan betul dan mempunyai semua medan yang diperlukan di sebelah JavaScript. Selepas komunikasi telah dinyahkod, sahkan kekunci dan nilai pada bahagian Dart.
Adakah mungkin untuk menghantar Dart lebih daripada dua parameter daripada JavaScript?
Ya, anda boleh gunakan untuk menghantar banyak parameter sebagai objek JSON, dan untuk mengendalikan mereka di Dart.
Bagaimana jika WebView tidak menyokong Saluran JavaScript?
Jika saluran JavaScript tidak tersedia, anda boleh menggunakan skema dan penggunaan URL tersuai dalam Dart untuk memintas URL.
Bagaimanakah saya mengendalikan ralat semasa lulus parameter?
Amalkan pengendalian ralat dalam Dart dan JavaScript. Pastikan semua data dihantar dengan diperiksa, dan digunakan blok dalam Dart untuk mengesan isu penyahkodan.

Keupayaan untuk menghantar hujah antara JavaScript dan Dart meningkatkan cara kandungan dalam talian dan apl Flutter berinteraksi. Integriti dan kebolehgunaan data terjamin apabila digunakan bersama dengan Dart fungsi.

Pembangun boleh memilih pendekatan yang paling sesuai dengan projek mereka dengan menyiasat beberapa strategi, seperti skema URL dan pengendalian mesej langsung. Memastikan pengesahan yang sesuai dan pengurusan ralat meningkatkan kebolehpercayaan sistem komunikasi ini.

Menghuraikan tentang penyediaan dan bagaimana mereka berintegrasi ke dalam aplikasi. Dokumentasi WebView Flutter
Memberi pandangan tentang kaedah dan penggunaannya dalam JavaScript untuk pemesejan silang bingkai. Dokumen Web MDN - postMessage()
Menjelaskan cara Dart mengendalikan penyahkodan dan penghuraian JSON untuk pengendalian data yang cekap daripada JavaScript. Dart jsonDecode() Dokumentasi
Penutup menggunakan untuk pemintasan URL dalam WebView. Flutter WebView NavigationDelegate

Menggunakan Saluran JavaScript dalam Flutter WebView untuk Melepasi Beberapa Parameter daripada JavaScript ke Dart