Flutter WebView与JS互调详解入门指南

简介：
本指南深入浅出地讲解了如何在Flutter应用中使用WebView组件，并详细介绍了Flutter与JavaScript之间的数据交互方法和技巧。适合初学者快速上手。 详解Flutter WebView与JS互相调用简易指南 在移动应用开发过程中，特别是在 Hybrid App 的构建中，Flutter WebView 与 JS 之间的交互是一项关键技术。它允许开发者将 Web 视图嵌入到 Flutter 应用程序，并实现两者间的双向通信功能。 本段落旨在提供一个简明的指导来介绍如何使用Flutter和Webview进行JavaScript（JS）调用以及从Flutter端发起对JS的调用，主要分为两个部分：一是JS 调用 Flutter；二是Flutter 调用 JS。 **一、JS 调用 Flutter** 在实现此功能时，有两种方法可以选择：通过 `javascriptChannels` 发送消息或使用路由委托（`navigationDelegate`）拦截 URL。 1. 使用 `javascriptChannels` 发送消息 首先，在Dart代码中定义一个名为 `_alertJavascriptChannel` 的JavaScript通道实例。该实例接收与JS端约定的字符串，用于实现信息传递。 ```dart JavascriptChannel _alertJavascriptChannel(BuildContext context) { return JavascriptChannel( name: Toast, onMessageReceived: (message) => showToast(message.message), ); } ``` 然后，在HTML中设置一个按钮以便用户点击后触发消息发送给Flutter。为此，需要在JavaScript代码内实现如下逻辑： ```html Call Flutter function callFlutter() { Toast.postMessage(JS 调用了 Flutter); } ``` 2. 使用路由委托 通过使用 `navigationDelegate` 可以拦截特定URL请求来达成从JS向Flutter发送信息的目的。例如，当用户点击一个按钮时触发跳转到约定的特殊 URL。 ```html Call Flutter function callFlutter() { document.location.href = js:webview?arg1=111&arg2=222; } ``` 在Dart代码中，通过 `navigationDelegate` 回调函数来处理上述URL请求，并将参数传递给相应的逻辑。 **二、Flutter 调用 JS** 实现从 Flutter 端向JS端发送消息或执行JavaScript同样有两条途径：使用 `javascriptChannels` 或者利用WebView的 `evaluateJavascript` 方法。 1. 使用 `javascriptChannels` 在Dart代码中定义一个名为 `_alertJavascriptChannel` 的实例，并将其添加到WebView组件配置中。 ```dart WebView( javascriptMode: JavascriptMode.unrestricted, javascriptChannels: [ _alertJavascriptChannel(context), ].toSet(), ); ``` 然后，在HTML或JavaScript文件内设置接收消息的函数，如下所示： ```javascript function receiveMessageFromFlutter(message) { console.log(Received from Flutter:, message); } ``` 2. 使用 `evaluateJavascript` 方法 在Dart代码中使用此方法可以执行任意一段JS脚本。 ```dart WebView( initialUrl: https://example.com, javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (webViewController) { webViewController.evaluateJavascript(alert(Flutter 调用了 JS)); }, ); ``` 在实际项目中，开发者应根据具体需求选择合适的方法来实现JS调用Flutter或反之。