Flutter与WebView通信方案示例详解

针对“Flutter与WebView通信方案示例详解”，我将按以下步骤来详细讲解：

1. 简述Flutter与WebView的通信方案
2. 示例一：Flutter通过JavaScriptChannel调用WebView中的JavaScript函数
3. 示例二：WebView通过UrlLauncher调用Flutter函数

接下来，我将详细讲解这些内容。

1. 简述Flutter与WebView的通信方案

在Flutter应用中，我们经常需要通过WebView来承载网页或web应用。Flutter中提供了WebView组件来实现这种需求，而WebView组件与Flutter的通信涉及到三个主要方面：

• Flutter如何通过JavaScriptChannel调用WebView中的JavaScript函数
• WebView如何通过UrlLauncher调用Flutter中的函数或调用Flutter RedirectionUri的处理
• WebView如何通过UrlLauncher获取Flutter中的返回值

2. 示例一：Flutter通过JavaScriptChannel调用WebView中的JavaScript函数

在这个示例中，我们将演示如何通过JavaScriptChannel实现Flutter调用WebView中的JavaScript函数。

首先，我们需要在WebView中添加一个JavaScriptChannel。代码如下：

WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: <JavascriptChannel>[
    _flutterJavascriptChannel(context),
  ].toSet(),
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
)

JavascriptChannel _flutterJavascriptChannel(BuildContext context) {
  return JavascriptChannel(
      name: 'FlutterJavascriptChannel',
      onMessageReceived: (JavascriptMessage message) {
        print('Message received: ${message.message}');
      });
}

在上述代码中，我们通过设置WebView的javascriptChannels属性来添加一个JavascriptChannel。其中name属性是指JavaScript中的通道名称，而onMessageReceived属性是指返回来自该通道的消息时的回调。这里，在onMessageReceived回调中，我们只是简单地使用print函数输出了消息。

现在，Flutter可以通过JavaScriptChannel来调用WebView中的JavaScript函数。我们来看一下代码：

final webView = await _controller.future;
webView.evaluateJavascript('callFromFlutter();');

在上述代码中，我们使用WebViewController中的evaluateJavascript方法来调用从Flutter发送的JavaScript函数callFromFlutter()。这将触发JavaScriptChannel中的onMessageReceived回调，并展示消息。

3. 示例二：WebView通过UrlLauncher调用Flutter函数

在这个示例中，我们将演示如何使用UrlLauncher来从WebView中调用Flutter函数。

首先，我们需要在Flutter应用中定义一个用来处理URL调用的回调函数。代码如下：

// Define a function that will be called from the WebView.
void handleUrlCall(String url) {
  final parsedUrl = Uri.parse(url);
  // Check the path to decide which function to call.
  if (parsedUrl.path == '/helloWorld') {
    print('Hello, world!');
  }
}

在上述代码中，我们定义了名为handleUrlCall的函数。这将被WebView通过UrlLauncher调用。我们在函数中检查URL的路径，然后执行相应的Flutter函数。

接下来，在Flutter中，我们需要将刚才定义的函数注册到UrlLauncher中以供WebView调用。代码如下：

import 'package:url_launcher/url_launcher.dart';

_launchURL() async {
  String url = 'https://example.com/helloWorld';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

在上述代码中，我们使用url_launcher库中的launch方法来调用URL。如果url可以被启动，则打开url；否则抛出异常。

现在，让我们来看一下WebView中如何调用Flutter中的函数。下面的JavaScript代码演示了如何通过UrlLauncher触发handleUrlCall函数：

function callFromWebView() {
    window.location.href = "myapp://action?helloWorld";
}

现在，在WebView中调用callFromWebView()函数将会触发handleUrlCall函数，并打印输出“Hello, world!”。