本指南深入浅出地讲解了如何在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
function callFlutter() {
Toast.postMessage(JS 调用了 Flutter);
}
```
2. 使用路由委托
通过使用 `navigationDelegate` 可以拦截特定URL请求来达成从JS向Flutter发送信息的目的。例如，当用户点击一个按钮时触发跳转到约定的特殊 URL。
```html
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或反之。
5星
