Flutter WebView의 JavaScript 채널을 사용하여 JavaScript에서 Dart로 여러 매개변수 전달

Flutter WebView를 통해 JavaScript에서 Dart로 여러 매개변수 전달

이 솔루션은 모범 사례에 따라 처리하면서 JavaScript에서 Dart로 여러 인수(x, y)를 전달합니다. Flutter WebView 플러그인과 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);

WebView의 JavaScript 채널을 통해 Dart에서 수신된 매개변수 처리

이 Dart 솔루션의 주요 목표는 WebView의 JavaScript 채널을 통해 수신된 메시지를 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
      },
    ),
  },
);

Dart용 단위 테스트: JavaScript 채널 테스트

솔루션 단위 테스트의 Dart 측면에서는 JavaScript 메시지가 올바르게 처리되고 구문 분석되는지 확인합니다.

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

대체 접근 방식: 매개변수 전달을 위한 URL 체계 사용

이 메소드는 WebView의 URL 변경 이벤트 시 Dart에서 디코딩되는 JavaScript의 사용자 정의 URL 구성표를 사용하여 인수를 전달하는 방법을 보여줍니다.

// 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: WebView에서 URL 변경 처리하기

URL 프로토콜을 통해 제공된 매개변수를 캡처하고 처리하기 위해 이 Dart 솔루션은 WebView에서 URL 변경을 가로챕니다.

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의 매개변수 전달에 대한 일반적인 질문

1. JavaScript에서 Dart로 복잡한 객체를 어떻게 보내나요?
2. Dart 측에서 복잡한 객체를 디코딩하려면 다음을 사용하십시오. jsonDecode() 문자열로 변환한 후 JSON.stringify() 그리고 postMessage().
3. 데이터를 전송하기 전에 어떻게 가장 효과적으로 확인할 수 있나요?
4. 데이터를 전송하기 전에 postMessage(), 올바르게 구조화되어 있고 JavaScript 측에 필요한 모든 필드가 있는지 확인하세요. 통신이 디코딩된 후 Dart 측의 키와 값을 확인하세요.
5. JavaScript에서 Dart에 두 개 이상의 매개변수를 보낼 수 있나요?
6. 예, 사용할 수 있습니다 JSON.stringify() 많은 매개변수를 JSON 객체로 전송하고 jsonDecode() Dart에서 처리합니다.
7. WebView가 JavaScript 채널을 지원하지 않으면 어떻게 되나요?
8. JavaScript 채널을 사용할 수 없는 경우 사용자 정의 URL 구성표를 사용하고 navigationDelegate Dart에서 URL을 가로채세요.
9. 매개변수 전달 중 오류를 어떻게 처리합니까?
10. Dart와 JavaScript에서 오류 처리를 실제로 적용해 보세요. 전송된 모든 데이터를 확인하세요. postMessage() 확인하고 사용하세요 try-catch 디코딩 문제를 감지하기 위해 Dart의 블록을 사용합니다.

Flutter WebView 통신에 대한 최종 생각

JavaScript와 Dart 간에 인수를 보내는 기능은 온라인 콘텐츠와 Flutter 앱이 상호 작용하는 방식을 개선합니다. 데이터 무결성과 유용성은 다음과 같은 경우 보장됩니다. 포스트메시지() Dart's와 함께 사용됩니다. json디코드() 기능.

개발자는 URL 구성표 및 직접 메시지 처리와 같은 여러 전략을 조사하여 프로젝트에 가장 적합한 접근 방식을 선택할 수 있습니다. 적절한 검증 및 오류 관리를 보장하면 이러한 통신 시스템의 신뢰성이 향상됩니다.