JavaScript'ten Dart'a Çeşitli Parametreleri Aktarmak için Flutter WebView'da JavaScript Kanalını Kullanma

Flutter WebView'da JavaScript'ten Dart İletişimine Yönelik İşleme

Hibrit bir uygulamanın derlenmesi, JavaScript ve Flutter'ın bir Web Görünümü aracılığıyla entegre edilmesini gerektirebilir. JavaScript'ten Dart'a veri aktarımı, iki ortam arasında sorunsuz iletişim sağlayan sık yapılan işlerden biridir.

Bu yazı, çok sayıda parametreyi JavaScript'ten Dart'a aktarmak için Flutter WebView eklentisinin JavaScript Kanalının nasıl kullanılacağını açıklayacaktır. Özellikle iki argümanın olduğu bir duruma odaklanacağız: X Ve sen, Dart'a bir JavaScript işlevi kullanılarak gönderilir. setPozisyonu kanal.

Veriler JavaScript kullanılarak gönderilebilmesine rağmen mesajMesaj()iletişimin amaçlandığı gibi çalışmasını garanti etmek için bu mesajların Dart'ta doğru şekilde işlenmesi zorunludur. Etkili veri işleme, Dart'ın nasıl kullanılacağını bilmeyi gerektirir onMesaj Alındı Bunu yapmak için işlev.

Cevaplar için internette arama yapmayı denediyseniz ancak fazla bir şey bulamadıysanız yalnız değilsiniz. Bu makalede çok ayrıntıya gireceğiz ve size bu iletişim hattını oluşturmak için adım adım bir yöntem sunacağız.

Flutter WebView'da JavaScript ve Dart İletişimini Entegre Etme

Geliştirdiğimiz çözüm, bir a'nın nasıl kullanılacağını gösterir. JavaScript Kanalı çok sayıda argüman iletmek için JavaScript Flutter'ın Web Görünümü aracılığıyla Dart'a. Birincil hedef, Dart kodu ile Web Görünümünde çalışan JavaScript arasında iletişim için güvenilir bir boru hattı oluşturmaktır. mesajMesaj() yöntemi, JavaScript işlevi tarafından daha sonra Dart tarafından onMessageReceived geri çağrısı yoluyla alınan iki parametreyi (x ve y) iletmek için kullanılır. Bu konfigürasyonla, önemli bilgiler web içeriğinden yerel Dart koduna etkili bir şekilde iletilebilir.

kullanarak jsonDecode() işlevi, alınan mesajın Dart tarafında kodunu çözeriz. JSON verilerini JavaScript'ten aktararak çok sayıda parametrenin düzenli bir şekilde gönderilebilmesini sağlıyoruz. Kod çözme işleminden sonra Dart, bireysel değerleri (x ve y) alabilir ve bunları herhangi bir amaç için kullanabilir. Buna bilgilerin kaydedilmesi, kullanıcı arayüzü öğelerinin değiştirilmesi ve elde edilen değerlere bağlı diğer görevlerin gerçekleştirilmesi de dahildir. Bu yöntem, karmaşık veri yapılarını JavaScript'ten Dart'a gönderirken düşük yükü garanti eder.

İletileri doğrudan yönetmenin yanı sıra, benzersiz URL şemalarının kullanılmasını içeren farklı bir yaklaşımı da inceledik. Parametreleri değiştirerek URL üzerinden iletebiliriz. window.location.href JavaScript'te. Dart daha sonra bu verileri aşağıdakileri kullanarak yakalayabilir: navigasyonDelege. Kullanırken JavaScript Kanalı mümkün olmayabilir veya programın tasarımı göz önüne alındığında URL tabanlı iletişimin daha anlamlı olduğu durumlarda bu yaklaşım faydalı olabilir. Bundan sonra Dart, URL'yi ayrıştırır ve Uri.queryParameters x ve y gibi parametreleri çıkarma işlevi. Bu, Dart ile web içeriği arasında çeşitli iletişim mekanizmalarının mümkün olduğunu garanti eder.

Performans ve güvenliğe, özellikle gelen iletişimler alınırken tüm yaklaşımlarda en büyük öncelik verilmektedir. Veri manipülasyonunu durduran mesaj iletimi için JSON'u kullanarak süreç güvenliğini ve okunabilirliğini artırıyoruz. Birim testleri ayrıca işlevselliğin çeşitli ayarlarda amaçlandığı gibi çalıştığını da garanti eder. Pürüzsüz ve güvenilir, Web Görünümü entegrasyon, web teknolojileri ile Flutter'ın yerel ortamı arasında güçlü bir bağlantı oluşturur.

// 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'da Parametre Aktarma Tekniklerini Keşfetmek

Daha karmaşık veri yapılarının işlenmesi, JavaScript ve Dart arasında Flutter WebView aracılığıyla parametre aktarımının önemli bir parçasıdır. Her ne kadar odak noktamız temel düzeyde başarılı olmak olsa da X Ve sen bağımsız değişkenleri kullanırken, bir nesneyi, diziyi, hatta birkaç iç içe geçmiş nesneyi de iletmeniz gereken durumlar olabilir. Karmaşık veri yapıları, JavaScript kullanılarak dize formatına dönüştürülebilir. JSON.stringify() yöntemi kullanılarak etkili bir şekilde aktarılabilir. postMessage() Yöntem. Bundan sonra Dart şunları kullanabilir: jsonDecode() İlk yapıyı işlenebilecek şekilde yeniden birleştirmek.

Mesaj iletme hata yönetimi başka bir pratik yöntemdir. Önemli verileri iki dil arasında taşırken verilerin hem JavaScript hem de Dart ortamlarında doğrulandığından emin olmak çok önemlidir. Çağırmadan önce kontroller yapılarak hatalı biçimlendirilmiş verilerin iletilmesi önlenebilir. postMessage() JavaScript tarafında. Kodlanan verinin Dart tarafında beklenen anahtar ve değerlere sahip olduğunu doğrulayarak doğrulayabilirsiniz. Etkili iletişim sağlamanın yanı sıra bu, hatalara veya bozuk verilere karşı koruma sağlar.

Ek olarak, WebView Flutter'da web sayfasına özel JavaScript uygulamanıza olanak tanıyan ekstra bir işlevsellik sağlar. Aşağıdakileri kullanarak Dart tarafından JavaScript rutinlerini dinamik olarak tetikleyebilirsiniz: evaluateJavascript teknik. Bu, Flutter uygulamanızdan web içeriğine komutların gönderilmesini sağlayarak çok yönlülüğü artırır, böylece iki yönlü iletişim kanalını geliştirir. İki katman arasında sürekli veri alışverişine ihtiyaç duyulduğunda bu strateji işe yarar.