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

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 x dan y, dihantar ke Dart oleh fungsi JavaScript menggunakan setPosition saluran.

Walaupun data boleh dihantar daripada JavaScript menggunakan postMessage(), 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 onMessageReceived 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.

Mengintegrasikan JavaScript dan Komunikasi Dart dalam Flutter WebView

Penyelesaian kami yang dibangunkan menunjukkan cara menggunakan a Saluran JavaScript untuk menghantar banyak hujah daripada JavaScript 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 postMessage() 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 jsonDecode() 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 window.location.href dalam JavaScript. Dart kemudiannya boleh memintas data ini menggunakan navigationDelegate. Apabila menggunakan Saluran JavaScript 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 WebView penyepaduan mewujudkan hubungan kukuh antara teknologi web dan persekitaran asal 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;
  },
);

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 x dan y 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 JSON.stringify() kaedah, yang kemudiannya boleh dipindahkan dengan berkesan menggunakan postMessage() kaedah. Selepas itu, Dart boleh memanfaatkan jsonDecode() 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 postMessage() 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, WebView 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 evaluateJavascript 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.