ஃப்ளட்டர் வெப்வியூவில் ஜாவாஸ்கிரிப்ட் சேனலைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் முதல் டார்ட் வரை பல அளவுருக்களை அனுப்புதல்

Flutter WebView இல் ஜாவாஸ்கிரிப்டை டார்ட் கம்யூனிகேஷன் கையாளுதல்

ஒரு கலப்பின பயன்பாட்டை அசெம்பிள் செய்ய, WebView வழியாக JavaScript மற்றும் Flutter ஐ ஒருங்கிணைக்க வேண்டும். ஜாவாஸ்கிரிப்டில் இருந்து டார்ட்டுக்கு தரவு பரிமாற்றம் என்பது இரண்டு சூழல்களுக்கு இடையே சுமூகமான தொடர்பை செயல்படுத்தும் ஒரு அடிக்கடி வேலை.

ஜாவாஸ்கிரிப்டில் இருந்து டார்ட்டுக்கு பல அளவுருக்களை மாற்ற, ஃப்ளட்டர் வெப்வியூ செருகுநிரலின் ஜாவாஸ்கிரிப்ட் சேனலை எவ்வாறு பயன்படுத்துவது என்பதை இந்த இடுகை விளக்குகிறது. இரண்டு வாதங்கள் சொல்லும் ஒரு சூழ்நிலையில் நாங்கள் குறிப்பாக கவனம் செலுத்துவோம் x மற்றும் ஒய், ஐப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் செயல்பாடு மூலம் டார்ட்டுக்கு அனுப்பப்படுகிறது அமைவு நிலை சேனல்.

ஜாவாஸ்கிரிப்ட் மூலம் தரவுகளை அனுப்ப முடியும் என்றாலும் postMessage(), இந்தச் செய்திகளை டார்ட்டில் சரியாகக் கையாள்வது கட்டாயமாகும், இதன் மூலம் தகவல்தொடர்பு நோக்கம் கொண்டதாக செயல்படுகிறது. பயனுள்ள தரவுச் செயலாக்கத்திற்கு டார்ட்டை எவ்வாறு பயன்படுத்துவது என்பதைத் தெரிந்து கொள்ள வேண்டும் செய்தி பெறப்பட்டது இதைச் செய்வதற்கான செயல்பாடு.

நீங்கள் இணையத்தில் பதில்களைத் தேட முயற்சித்தாலும் அதிகம் கிடைக்கவில்லை என்றால் நீங்கள் தனியாக இல்லை. நாங்கள் மிக விரிவாகச் சென்று, இந்தக் கட்டுரையில் இந்தத் தகவல்தொடர்புக் குழாயை உருவாக்குவதற்கான படிப்படியான முறையை உங்களுக்கு வழங்குவோம்.

Flutter WebView இல் ஜாவாஸ்கிரிப்ட் மற்றும் டார்ட் தொடர்பை ஒருங்கிணைத்தல்

எங்களின் வளர்ந்த தீர்வு, எப்படி பயன்படுத்துவது என்பதைக் காட்டுகிறது ஜாவாஸ்கிரிப்ட் சேனல் இருந்து பல வாதங்களை அனுப்ப ஜாவாஸ்கிரிப்ட் Flutter's WebView வழியாக டார்ட்டிற்கு. WebView இல் இயங்கும் டார்ட் குறியீடு மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றுக்கு இடையேயான தகவல்தொடர்புக்கான நம்பகமான பைப்லைனை உருவாக்குவதே முதன்மை குறிக்கோள். தி postMessage() இரண்டு அளவுருக்களை (x மற்றும் y) அனுப்ப ஜாவாஸ்கிரிப்ட் செயல்பாட்டால் இந்த முறை பயன்படுத்தப்படுகிறது, அவை பின்னர் onMessageReceived கால்பேக் வழியாக டார்ட்டால் பெறப்படுகின்றன. இந்த உள்ளமைவின் மூலம், முக்கியமான தகவல்கள் இணைய உள்ளடக்கத்திலிருந்து நேட்டிவ் டார்ட் குறியீட்டிற்கு திறம்படத் தெரிவிக்கப்படலாம்.

பயன்படுத்தி jsonDecode() செயல்பாடு, டார்ட் பக்கத்தில் பெறப்பட்ட செய்தியை டிகோட் செய்கிறோம். JavaScript இலிருந்து JSON தரவை மாற்றுவதன் மூலம் பல அளவுருக்கள் ஒழுங்கமைக்கப்பட்ட முறையில் அனுப்பப்படுவதை உறுதிசெய்கிறோம். டிகோடிங் செய்த பிறகு, டார்ட் தனிப்பட்ட மதிப்புகளை (x மற்றும் y) மீட்டெடுக்க முடியும் மற்றும் எந்த நோக்கத்திற்காகவும் அவற்றைப் பயன்படுத்த முடியும். இதில் தகவல்களைப் பதிவு செய்தல், பயனர் இடைமுக உறுப்புகளை மாற்றுதல் மற்றும் பெறப்பட்ட மதிப்புகளைப் பொறுத்து பிற பணிகளைச் செய்தல் ஆகியவை அடங்கும். ஜாவாஸ்கிரிப்டில் இருந்து டார்ட்டுக்கு சிக்கலான தரவு கட்டமைப்புகளை அனுப்பும் போது இந்த முறை குறைந்த மேல்நிலைக்கு உத்தரவாதம் அளிக்கிறது.

செய்திகளை நேரடியாக நிர்வகிப்பதைத் தவிர, தனித்துவமான URL திட்டங்களைப் பயன்படுத்துவதை உள்ளடக்கிய வேறுபட்ட அணுகுமுறையையும் நாங்கள் பார்த்தோம். URL ஐ மாற்றுவதன் மூலம் நாம் அளவுருக்களை அனுப்பலாம் window.location.href ஜாவாஸ்கிரிப்டில். டார்ட் இதைப் பயன்படுத்தி இந்தத் தரவை இடைமறிக்க முடியும் வழிசெலுத்தல் பிரதிநிதி. பயன்படுத்தும் போது ஜாவாஸ்கிரிப்ட் சேனல் சாத்தியமற்றதாக இருக்கலாம் அல்லது URL-அடிப்படையிலான தகவல்தொடர்பு நிரலின் வடிவமைப்பைக் கொண்டு அதிக அர்த்தமுள்ளதாக இருக்கும் போது, ​​இந்த அணுகுமுறை பயனுள்ளதாக இருக்கும். அதன் பிறகு, டார்ட் URL ஐ பாகுபடுத்தி, பயன்படுத்துகிறது Uri.queryParameters x மற்றும் y போன்ற அளவுருக்களை பிரித்தெடுக்கும் செயல்பாடு. டார்ட் மற்றும் இணைய உள்ளடக்கத்திற்கு இடையே பல தொடர்பு வழிமுறைகள் சாத்தியம் என்பதை இது உத்தரவாதம் செய்கிறது.

செயல்திறன் மற்றும் பாதுகாப்பு அனைத்து அணுகுமுறைகளிலும் முதன்மையான முன்னுரிமை அளிக்கப்படுகிறது, குறிப்பாக உள்வரும் தகவல்தொடர்புகளைப் பெறும்போது. செய்தி அனுப்புவதற்கு JSON ஐப் பயன்படுத்துவதன் மூலம் செயல்முறை பாதுகாப்பு மற்றும் வாசிப்புத்திறனை அதிகரிக்கிறோம், இது தரவு கையாளுதலை நிறுத்துகிறது. யூனிட் சோதனைகள் பல்வேறு அமைப்புகளில் நோக்கம் கொண்ட செயல்பாடு செயல்பாடுகளுக்கு உத்தரவாதம் அளிக்கிறது. மென்மையான மற்றும் நம்பகமான, தி WebView ஒருங்கிணைப்பு வலை தொழில்நுட்பங்கள் மற்றும் 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 இல் அளவுரு கடந்து செல்லும் நுட்பங்களை ஆராய்தல்

ஜாவாஸ்கிரிப்ட் மற்றும் டார்ட்டுக்கு இடையில் ஒரு ஃப்ளட்டர் வெப்வியூ வழியாக செல்லும் அளவுருவின் ஒரு முக்கிய பகுதியாக மிகவும் சிக்கலான தரவு கட்டமைப்புகளைக் கையாளுதல். எங்கள் கவனம் அடிப்படை தேர்ச்சியில் இருந்தபோதிலும் x மற்றும் ஒய் வாதங்கள், நீங்கள் ஒரு பொருள், வரிசை அல்லது பல உள்ளமை பொருட்களை அனுப்ப வேண்டிய சூழ்நிலைகள் இருக்கலாம். ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி சிக்கலான தரவு கட்டமைப்புகளை சரம் வடிவமாக மாற்றலாம் JSON.stringify() முறை, பின்னர் திறம்பட பயன்படுத்தி மாற்ற முடியும் postMessage() முறை. அதன் பிறகு, டார்ட் பயன்படுத்த முடியும் jsonDecode() ஆரம்ப கட்டமைப்பை மீண்டும் இணைக்க, அதை செயலாக்க முடியும்.

செய்தி பகிர்தல் பிழை மேலாண்மை மற்றொரு நடைமுறை முறையாகும். இரண்டு மொழிகளுக்கு இடையே முக்கியமான தரவை நகர்த்தும்போது, ​​JavaScript மற்றும் Dart சூழல்களில் தரவு சரிபார்க்கப்படுவதை உறுதிசெய்வது மிகவும் முக்கியமானது. அழைப்பதற்கு முன் காசோலைகளை வைப்பதன் மூலம் தவறான தரவு வழங்கப்படுவதைத் தவிர்க்கலாம் postMessage() ஜாவாஸ்கிரிப்ட் பக்கத்தில். குறியிடப்பட்ட தரவைச் சரிபார்ப்பதன் மூலம் டார்ட் பக்கத்தில் எதிர்பார்க்கப்பட்ட விசைகள் மற்றும் மதிப்புகள் உள்ளதா என்பதை நீங்கள் சரிபார்க்கலாம். பயனுள்ள தகவல்தொடர்புக்கு கூடுதலாக, இது தவறுகள் அல்லது சிதைந்த தரவுகளுக்கு எதிராக பாதுகாக்கிறது.

கூடுதலாக, WebView Flutter கூடுதல் செயல்பாட்டை வழங்குகிறது, இது வலைப்பக்கத்திற்கு தனிப்பயன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. பயன்படுத்துவதன் மூலம் டார்ட் பக்கத்திலிருந்து ஜாவாஸ்கிரிப்ட் நடைமுறைகளை நீங்கள் மாறும் வகையில் தூண்டலாம் evaluateJavascript நுட்பம். இது உங்கள் Flutter பயன்பாட்டிலிருந்து இணைய உள்ளடக்கத்திற்கு கட்டளைகளை அனுப்புவதன் மூலம் பல்துறைத்திறனை அதிகரிக்கிறது, எனவே இருவழி தொடர்பு சேனலை மேம்படுத்துகிறது. இரண்டு அடுக்குகளுக்கு இடையே நிலையான தரவு பரிமாற்றம் தேவைப்படும் போது, ​​இந்த உத்தி நன்றாக வேலை செய்கிறது.