استخدام قناة JavaScript في Flutter WebView لتمرير عدة معلمات من JavaScript إلى Dart

التعامل مع JavaScript إلى Dart Communication في Flutter WebView

قد يتطلب تجميع تطبيق مختلط دمج JavaScript وFlutter عبر WebView. يعد نقل البيانات من JavaScript إلى Dart إحدى المهام المتكررة التي تتيح الاتصال السلس بين البيئتين.

يشرح هذا المنشور كيفية استخدام قناة JavaScript الخاصة بمكون Flutter WebView الإضافي لنقل العديد من المعلمات من JavaScript إلى Dart. سنركز بشكل خاص على الموقف الذي تكون فيه حجتان، على سبيل المثال س و ذ، يتم إرسالها إلى Dart بواسطة وظيفة JavaScript باستخدام الملف setPosition قناة.

على الرغم من أنه يمكن إرسال البيانات من JavaScript باستخدام بريد الرسالة ()فمن الضروري التعامل مع هذه الرسائل بشكل صحيح في Dart لضمان عمل الاتصال على النحو المنشود. تتطلب المعالجة الفعالة للبيانات معرفة كيفية استخدام Dart onMessageReceived وظيفة للقيام بذلك.

لست وحدك إذا حاولت البحث في الإنترنت عن الإجابات ولكنك لم تجد الكثير. سنتناول الكثير من التفاصيل وسنقدم لك طريقة خطوة بخطوة لإنشاء خط أنابيب الاتصال هذا في هذه المقالة.

دمج JavaScript وDart Communication في Flutter WebView

يوضح حلنا المطور كيفية استخدام أ قناة جافا سكريبت لنقل العديد من الحجج من جافا سكريبت إلى Dart عبر WebView الخاص بـFlutter. الهدف الأساسي هو إنشاء خط أنابيب يمكن الاعتماد عليه للاتصال بين كود Dart وJavaScript الذي يتم تشغيله في WebView. ال بريد الرسالة () يتم استخدام الطريقة بواسطة وظيفة JavaScript لإرسال معلمتين (x وy)، والتي يتم استلامها لاحقًا بواسطة Dart عبر رد الاتصال onMessageReceived. باستخدام هذا التكوين، قد يتم نقل المعلومات المهمة بشكل فعال من محتوى الويب إلى كود Dart الأصلي.

باستخدام جسونديكود () وظيفة، نقوم بفك تشفير الرسالة المستلمة على جانب Dart. نتأكد من إمكانية إرسال العديد من المعلمات بطريقة منظمة عن طريق نقل بيانات JSON من JavaScript. بعد فك التشفير، يستطيع Dart استرجاع القيم الفردية (x وy) واستخدامها لأي غرض. يتضمن ذلك تسجيل المعلومات وتعديل عناصر واجهة المستخدم وتنفيذ مهام أخرى تعتمد على القيم التي تم الحصول عليها. تضمن هذه الطريقة انخفاض الحمل عند إرسال بنيات البيانات المعقدة من JavaScript إلى Dart.

وبصرف النظر عن إدارة الرسائل مباشرة، فقد بحثنا أيضًا في نهج مختلف يتضمن استخدام أنظمة عناوين URL فريدة. يمكننا نقل المعلمات عبر عنوان URL عن طريق تغيير ملف window.location.href في جافا سكريبت. يمكن لـ Dart بعد ذلك اعتراض هذه البيانات باستخدام ملف navigationDelegate. عند استخدام قناة جافا سكريبت قد لا يكون ذلك ممكنًا أو عندما يكون الاتصال المستند إلى عنوان URL أكثر منطقية نظرًا لتصميم البرنامج، فقد يكون هذا الأسلوب مفيدًا. بعد ذلك، يقوم Dart بتحليل عنوان URL واستخدام الملف Uri.queryParameters وظيفة لاستخراج المعلمات مثل x و y. وهذا يضمن إمكانية وجود العديد من آليات الاتصال بين Dart ومحتوى الويب.

يتم إعطاء الأداء والأمان الأولوية القصوى في جميع الأساليب، خاصة عند تلقي الاتصالات الواردة. نحن نعمل على زيادة سلامة العمليات وسهولة القراءة من خلال استخدام JSON لتمرير الرسائل، مما يوقف معالجة البيانات. تضمن اختبارات الوحدة أيضًا أن الوظيفة تعمل على النحو المقصود في الإعدادات المختلفة. على نحو سلس ويمكن الاعتماد عليها، و عرض ويب ينشئ التكامل رابطًا قويًا بين تقنيات الويب وبيئة 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. على الرغم من أن تركيزنا كان على اجتياز الأساسيات س و ذ الوسائط، قد تكون هناك مواقف تحتاج فيها أيضًا إلى تمرير كائن أو مصفوفة أو حتى عدة كائنات متداخلة. يمكن تحويل هياكل البيانات المعقدة إلى تنسيق سلسلة باستخدام JavaScript JSON.stringify() الطريقة، والتي يمكن بعد ذلك نقلها بشكل فعال باستخدام postMessage() طريقة. بعد ذلك، يمكن لدارت الاستفادة منها jsonDecode() لإعادة تجميع الهيكل الأولي بحيث يمكن معالجته.

تعد إدارة أخطاء إعادة توجيه الرسائل طريقة عملية أخرى. يعد التأكد من التحقق من صحة البيانات في كل من بيئات JavaScript وDart أمرًا بالغ الأهمية عند نقل البيانات المهمة بين اللغتين. يمكن تجنب تسليم البيانات المشوهة عن طريق إجراء عمليات التحقق قبل الاستدعاء postMessage() على الجانب جافا سكريبت. يمكنك التحقق من أن البيانات المشفرة تحتوي على المفاتيح والقيم المتوقعة على جانب Dart من خلال التحقق من صحتها. بالإضافة إلى ضمان التواصل الفعال، فإن هذا يحمي من الأخطاء أو البيانات التالفة.

بالإضافة إلى ذلك، WebView في Flutter وظيفة إضافية تتيح لك تطبيق JavaScript مخصص على صفحة الويب. يمكنك تشغيل إجراءات JavaScript ديناميكيًا من جانب Dart من خلال الاستفادة من evaluateJavascript تقنية. يؤدي ذلك إلى زيادة تعدد الاستخدامات من خلال تمكين إرسال الأوامر من تطبيق Flutter إلى محتوى الويب، وبالتالي تعزيز قناة الاتصال ثنائية الاتجاه. عندما تكون هناك حاجة لتبادل البيانات المستمر بين الطبقتين، تعمل هذه الإستراتيجية بشكل جيد.