webview - 在嵌入式 WebView 中设置 Dart 和 js 之间通信的通道

Question

需要在 OpenLayers 库之上构建具有地图功能的应用程序。这个应用程序是由两个平台（ios 和 android）上的本地语言构建的，并且运行良好。现在，我们想要迁移到 Flutter 以获得“代码一次”术语的好处。除了 Flutter 团队开发的 webview 插件，Flutter 似乎是最好的选择。它不支持dart和js之间的通信:-(。也在社区中浏览了一些插件，但没有找到合适的插件。有人有好的想法，请指教。非常感谢！

标签： webviewflutteropenlayers

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 窗口中看到日志“Hello World was called from Javascript code”

如果您想将 msg 从 dart 发送到 js，那么这是您的示例：-

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