为什么Flutter WebView包要求你使用“.postMessage()”？

Question

我的

pubspec.yaml

中有 Flutter WebView 包。 webview 具有 JavaScript 通道功能。例如，您可以使用类似

Foo

的名称定义 Dart 函数。但要让该函数处理参数，它需要一个

onMessageReceived()

方法。然后，要从 JS 上下文调用 Dart 代码，您需要执行

Foo.postMessage()

而不是仅仅

Foo()

。

为什么要这样实现？为什么不简单直接？

stackoverflow 告诉我这个问题看起来很主观，所以我会再次澄清：为什么调用 Dart 函数需要添加

.postMessage()

？为什么要这样设计？

Answer 1

当您将

WebView

与 JavaScript 通道一起使用时，它会在 Dart 代码和加载到 WebView 的页面中运行的 JavaScript 代码之间建立双向通信。您不能直接从 JavaScript 代码调用 Dart 函数，这是通道设计来处理的。唯一可以从 JavaScript 传递到 Dart 的是使用

JavaScriptMessage

类的字符串。

您可以使用

WebViewController

设置频道，如下所示：

myWebViewController.addJavaScriptChannel('myChannel',
    onMessageReceived: (JavaScriptMessage message) async {
  // your code here
});

加载页面后，表达式

myChannel

将在JavaScript代码中定义和访问，并且可以像这样调用，

myChannel.postMessage('your string message here');

来自 Dart：

myWebViewController.runJavaScript('your JavaScript expression here');

或

final result = await myWebViewController.runJavaScriptReturningResult('your JavaScript expression here');

在您询问

Foo

是否是 Dart 函数时，您不能在 JavaScript 代码中使用

Foo.postMessage()

，只有当

Foo

是您创建的通道的名称时 与

addJavaScriptChannel

。

通信基本上是在 Dart 和 JavaScript 之间传递字符串，JavaScript 端评估该字符串并运行（如果它是页面 JavaScript 代码上下文中的有效表达式）。在 Dart 方面，您必须将所有内容作为字符串传递，如果 JavaScript 有结果，则也将是一个字符串。无法直接从 WebView 调用 Dart 函数。