Question

需要构建一个具有在OpenLayers库之上构建的Map功能的应用程序。该应用程序是由两种平台（iOS和android）上的本地语言构建的，并且运行良好。现在，我们想迁移到扑朔迷离中，以获取“一次性编码”术语的好处。除了Flutter团队开发的Webview插件之外，Flutter似乎是最佳选择。它不支持dart与js之间的通信:-(.。还通过了社区中的一些插件，但没有找到合适的插件的运气。有人有一个好主意，请指教。非常感谢！

Answer 1

我知道为时已晚，但可能会对其他人有所帮助。

这是一个从Javascript代码到Flutter的通信示例。

在Flutter中，像这样构建WebView：

WebView(
          initialUrl: url,
          javascriptMode: JavascriptMode.unrestricted,
          javascriptChannels: Set.from([
            JavascriptChannel(
                name: 'Print',
                onMessageReceived: (JavascriptMessage message) {
                  //This is where you receive message from 
                  //javascript code and handle in Flutter/Dart
                  //like here, the message is just being printed
                  //in Run/LogCat window of android studio
                  print(message.message);
                })
          ]),
          onWebViewCreated: (WebViewController w) {
            webViewController = w;
          },
        )

并在您的HTML文件中：

<script type='text/javascript'>
Print.postMessage('Hello World being called from Javascript code');
</script>

运行此代码时，您将能够在android studio的LogCat / Run窗口中看到日志“从Javascript代码调用Hello World”

如果您要将味精从dart发送到js，则您的示例如下：-

 flutterWebviewPlugin.evalJavascript('var x = document.getElementsByClassName("layout__area--top"); x[0].style.opacity =0;');

设置用于在嵌入式WebView中的Dart与js之间进行通信的通道

1 个答案: