Sử dụng Kênh JavaScript trong Flutter WebView để chuyển một số tham số từ JavaScript sang Dart

Xử lý JavaScript để giao tiếp phi tiêu trong Flutter WebView

Việc lắp ráp một ứng dụng lai có thể yêu cầu tích hợp JavaScript và Flutter thông qua WebView. Truyền dữ liệu từ JavaScript sang Dart là một công việc thường xuyên giúp giao tiếp trơn tru giữa hai môi trường.

Bài đăng này sẽ giải thích cách sử dụng Kênh JavaScript của plugin Flutter WebView để chuyển nhiều tham số từ JavaScript sang Dart. Chúng ta sẽ đặc biệt tập trung vào một tình huống trong đó có hai lập luận, chẳng hạn x Và y, được gửi tới Dart bằng hàm JavaScript bằng cách sử dụng setPosition kênh.

Mặc dù dữ liệu có thể được gửi từ JavaScript bằng cách sử dụng postMessage(), bắt buộc phải xử lý các thông báo này một cách chính xác trong Dart để đảm bảo rằng hoạt động giao tiếp diễn ra như dự định. Xử lý dữ liệu hiệu quả đòi hỏi phải biết cách sử dụng Dart onMessageĐã nhận chức năng để thực hiện việc này.

Bạn không đơn độc nếu bạn đã cố gắng tìm kiếm câu trả lời trên Internet nhưng không tìm thấy nhiều. Chúng tôi sẽ đi sâu vào chi tiết và cung cấp cho bạn phương pháp từng bước để xây dựng kênh liên lạc này trong bài viết này.

Tích hợp JavaScript và giao tiếp phi tiêu trong Flutter WebView

Giải pháp được phát triển của chúng tôi cho thấy cách sử dụng Kênh JavaScript để truyền tải nhiều đối số từ JavaScript tới Dart thông qua WebView của Flutter. Mục tiêu chính là tạo ra một đường dẫn đáng tin cậy để liên lạc giữa mã Dart và JavaScript chạy trong WebView. các postMessage() phương thức được hàm JavaScript sử dụng để truyền hai tham số (x và y), sau đó được Dart nhận thông qua lệnh gọi lại onMessageReceured. Với cấu hình này, thông tin quan trọng có thể được truyền đạt một cách hiệu quả từ nội dung web đến mã Dart gốc.

Sử dụng jsonDecode() chức năng, chúng tôi giải mã tin nhắn nhận được ở phía Dart. Chúng tôi đảm bảo rằng nhiều tham số có thể được gửi một cách có tổ chức bằng cách chuyển dữ liệu JSON từ JavaScript. Sau khi giải mã, Dart có thể truy xuất các giá trị riêng lẻ (x và y) và sử dụng chúng cho bất kỳ mục đích nào. Điều này bao gồm ghi lại thông tin, thay đổi các thành phần giao diện người dùng và thực hiện các tác vụ khác phụ thuộc vào giá trị thu được. Phương pháp này đảm bảo chi phí thấp khi gửi cấu trúc dữ liệu phức tạp từ JavaScript đến Dart.

Ngoài việc quản lý thư trực tiếp, chúng tôi còn xem xét một cách tiếp cận khác liên quan đến việc sử dụng các lược đồ URL duy nhất. Chúng ta có thể truyền tham số qua URL bằng cách thay đổi window.location.href trong JavaScript. Dart sau đó có thể chặn dữ liệu này bằng cách sử dụng điều hướngĐại biểu. Khi sử dụng Kênh JavaScript có thể không khả thi hoặc khi giao tiếp dựa trên URL có ý nghĩa hơn dựa trên thiết kế của chương trình, phương pháp này có thể hữu ích. Sau đó, Dart phân tích URL và sử dụng Uri.queryThông số hàm trích xuất các tham số như x và y. Điều này đảm bảo rằng có thể thực hiện được một số cơ chế giao tiếp giữa Dart và nội dung web.

Hiệu suất và bảo mật được ưu tiên hàng đầu trong mọi phương pháp tiếp cận, đặc biệt khi nhận thông tin liên lạc đến. Chúng tôi tăng cường tính an toàn và khả năng đọc của quy trình bằng cách sử dụng JSON để truyền thông báo, điều này giúp dừng thao tác dữ liệu. Kiểm tra đơn vị cũng đảm bảo rằng chức năng hoạt động như dự định trong các cài đặt khác nhau. Nhẹ nhàng và đáng tin cậy, WebView tích hợp tạo ra mối liên kết chặt chẽ giữa công nghệ web và môi trường gốc của 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;
  },
);

Khám phá các kỹ thuật truyền tham số trong Flutter WebView

Xử lý các cấu trúc dữ liệu phức tạp hơn là một phần quan trọng của việc truyền tham số qua Flutter WebView giữa JavaScript và Dart. Mặc dù trọng tâm của chúng tôi là vượt qua bài kiểm tra cơ bản x Và y đối số, có thể có những tình huống mà bạn cũng cần truyền một đối tượng, mảng hoặc thậm chí một số đối tượng lồng nhau. Cấu trúc dữ liệu phức tạp có thể được chuyển đổi thành định dạng chuỗi bằng cách sử dụng JavaScript JSON.stringify() phương pháp này sau đó có thể được chuyển giao một cách hiệu quả bằng cách sử dụng postMessage() phương pháp. Sau đó, Dart có thể sử dụng jsonDecode() tập hợp lại cấu trúc ban đầu để có thể xử lý được.

Quản lý lỗi chuyển tiếp tin nhắn là một phương pháp thực tế khác. Đảm bảo rằng dữ liệu được xác thực trong cả môi trường JavaScript và Dart là rất quan trọng khi di chuyển dữ liệu quan trọng giữa hai ngôn ngữ. Có thể tránh gửi dữ liệu không đúng định dạng bằng cách thực hiện kiểm tra trước khi gọi postMessage() về phía JavaScript. Bạn có thể xác minh rằng dữ liệu được mã hóa có các khóa và giá trị dự kiến ​​ở phía Dart bằng cách xác thực nó. Ngoài việc đảm bảo giao tiếp hiệu quả, điều này còn bảo vệ bạn khỏi những sai sót hoặc dữ liệu bị hỏng.

Ngoài ra, WebView trong Flutter cung cấp một chức năng bổ sung cho phép bạn áp dụng JavaScript tùy chỉnh cho trang web. Bạn có thể tự động kích hoạt các quy trình JavaScript từ phía Dart bằng cách sử dụng evaluateJavascript kỹ thuật. Điều này làm tăng tính linh hoạt bằng cách cho phép gửi lệnh từ ứng dụng Flutter của bạn đến nội dung web, nhờ đó nâng cao kênh liên lạc hai chiều. Khi có nhu cầu trao đổi dữ liệu liên tục giữa hai lớp, chiến lược này hoạt động tốt.