Webview cầu javascript

Cầu nối để JavaScript giao tiếp với webview_flutter

Đặc trưng

• xử lý thông báo từ cấu trúc JavaScript
• gửi tin nhắn tới JavaScript dễ dàng hơn

Cách sử dụng

Trước khi sử dụng gói này, bạn cần thiết lập với Flutter và JavaScript

Chớp cánh

Trước hết, thêm webview_javascript_bridge làm phụ thuộc trong pubspec của bạn. tập tin yaml. Chỉ cần chạy

flutter pub add webview_javascript_bridge

Và sau đó tạo cá thể cầu nối và init

late final _bridge = WebViewJavaScriptBridge[];
late WebViewController _webviewController = WebViewController[]
  // your code
  ..addJavaScriptChannel[
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  ]
  // your code


@override
void initState[] {
  super.initState[];
  // your code
  _bridge.updateWebViewController[_webviewController];
  // your code
}

Cuối cùng, đừng quên thêm trình xử lý tin nhắn của bạn cho JavaScript, chẳng hạn như Toaster

@override
void initState[] {
    super.initState[];
    /// add handler
    _bridge.addMessageHandler[ClosureMessageHandler[
      resolver: [message, controller] => message.action == "toaster",
      handler: [message, controller] {
        // TODO: show the toaster
        print[message];
        return null;
      },
    ]];
}

JavaScript

Trước hết, hãy cài đặt gói

late final _bridge = WebViewJavaScriptBridge[];
late WebViewController _webviewController = WebViewController[]
  // your code
  ..addJavaScriptChannel[
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  ]
  // your code


@override
void initState[] {
  super.initState[];
  // your code
  _bridge.updateWebViewController[_webviewController];
  // your code
}

yarn add webview-javascript-bridge

hoặc với npm

npm install webview-javascript-bridge

Tiếp theo, nhập

late final _bridge = WebViewJavaScriptBridge[];
late WebViewController _webviewController = WebViewController[]
  // your code
  ..addJavaScriptChannel[
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  ]
  // your code


@override
void initState[] {
  super.initState[];
  // your code
  _bridge.updateWebViewController[_webviewController];
  // your code
}

import webViewJavaScriptBridge from 'webview-javascript-bridge';

Cuối cùng là gửi tin nhắn

________số 8_______

Nếu bạn sử dụng TypeScript, hãy xem ví dụ để biết thêm chi tiết

❗️Mẹo

1. Imp của BridgeJavascriptMessageHandler trong Flutter

late final _bridge = WebViewJavaScriptBridge[];
late WebViewController _webviewController = WebViewController[]
  // your code
  ..addJavaScriptChannel[
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  ]
  // your code


@override
void initState[] {
  super.initState[];
  // your code
  _bridge.updateWebViewController[_webviewController];
  // your code
}

2 trả về loại

late final _bridge = WebViewJavaScriptBridge[];
late WebViewController _webviewController = WebViewController[]
  // your code
  ..addJavaScriptChannel[
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  ]
  // your code


@override
void initState[] {
  super.initState[];
  // your code
  _bridge.updateWebViewController[_webviewController];
  // your code
}

3

_bridge.addMessageHandler[
  ClosureMessageHandler[
    resolver: [m, c] => m.action == "toaster",
    handler: [m, c] {
      // ❗️❗️❗️❗️
      return "this value will response to JavaScript, and it must be jsonable";
    },
  ],
];

2. Bạn sẽ nhận được một ngoại lệ, nếu một hàm JavaScript trả về

late final _bridge = WebViewJavaScriptBridge[];
late WebViewController _webviewController = WebViewController[]
  // your code
  ..addJavaScriptChannel[
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  ]
  // your code


@override
void initState[] {
  super.initState[];
  // your code
  _bridge.updateWebViewController[_webviewController];
  // your code
}

4 hoặc

late final _bridge = WebViewJavaScriptBridge[];
late WebViewController _webviewController = WebViewController[]
  // your code
  ..addJavaScriptChannel[
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  ]
  // your code


@override
void initState[] {
  super.initState[];
  // your code
  _bridge.updateWebViewController[_webviewController];
  // your code
}

5

final ret = await _bridge.sendMessage[function:"aJavaScriptFunctionReturningNullOrUndefined"];
////// ⬆️ will be empty string.