目前，移动跨平台开发作为移动开发的重要组成部分，是移动开发者必须掌握的技能，也是自我提升的重要手段。作为Google推出的跨平台技术方案，Flutter具有诸多的优势，已经或正在被广大开发者应用在移动应用开发中。在过去的2019年，我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用，对于移动应用开发来说，Flutter能够满足几乎所有的业务开发需求，所以，学习Flutter正当时。
众所周知，使用Flutter进行项目开发时，就免不了要加载H5页面，在移动开发中打开H5页面需要使用WebView组件。同时，为了和H5页面进行数据交换，有时候还需要借助JSBridge来实现客户端与H5之间的通讯。除此之外，Hybrid开发模式也需要Webview与JS做频繁的交互。
安装
本文使用的是Flutter官方的webview_flutter组件，目前的最新版本是0.3.19+9。使用前需要先添加webview_flutter插件依赖，如下所示。
webview_flutter: 0.3.19+9
复制代码然后，使用flutter packages get命令将插件拉取到本地并保持依赖。由于加载WebView需要使用网络，所以还需要在android中添加网络权限。打开目录android/app/src/main/AndroidManifest.xml，然后添加如下代码即可。
<uses-permission android:name="android.permission.INTERNET"/>
复制代码由于iOS在9.0版本默认开启了Https，所以要运行Http的网页，还需要在ios/Runner/Info.plist文件中添加如下代码。
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
复制代码基本使用
打开WebView组件的源码，WebView组件的构造函数如下所示。
const WebView({
Key key,
this.onWebViewCreated,
this.initialUrl,
this.javascriptMode = JavascriptMode.disabled,
this.javascriptChannels,
this.navigationDelegate,
this.gestureRecognizers,
this.onPageStarted,
this.onPageFinished,
this.debuggingEnabled = false,
this.gestureNavigationEnabled = false,
this.userAgent,
this.initialMediaPlaybackPolicy =
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
}) : assert(javascriptMode != null),
assert(initialMediaPlaybackPolicy != null),
super(key: key);
复制代码其中，比较常见的属性的含义如下：
- onWebViewCreated：在WebView创建完成后调用，只会被调用一次；
- initialUrl：初始load的url；
- javascriptMode：JS执行模式（是否允许JS执行）；
- javascriptChannels：JS和Flutter通信的Channel；
- navigationDelegate：路由委托（可以通过在此处拦截url实现JS调用Flutter部分）；
- gestureRecognizers：手势监听；
- onPageFinished：WebView加载完毕时的回调。import 'dart:async';
使用Webview加载网页时，很多时候需要与JS进行交互，即JS调用Flutter和Flutter调用JS。Flutter调用JS比较简单，直接调用 _controller.evaluateJavascript()函数即可。而JS调用Flutter则比较烦一点，之所以比较烦，是因为javascriptChannels目录只支持字符串类型，并且JS的方法是固定的，即只能使用postMessage方法，对于iOS来说没问题，但是对于Android来说就有问题，当然也可以通过修改源码来实现。
JS调用Flutter
javascriptChannels方式
javascriptChannels方式也是推荐的方式，主要用于JS给Flutter传递数据。例如，有如下JS代码。
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
Toast.postMessage("JS调用了Flutter");
}
复制代码使用postMessage方式 Toast 是定义好的名称，在接受的时候要拿这个名字 去接收，Flutter端的代码如下。
WebView(
javascriptChannels: <JavascriptChannel>[
_alertJavascriptChannel(context),
].toSet(),
)
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}
复制代码navigationDelegate
除此之外，另一种方式是navigationDelegate，主要是加载网页的时候进行拦截，例如有下面的JS协议。
document.location = "js://webview?arg1=111&args2=222";
复制代码对应的Flutter代码如下。
navigationDelegate: (NavigationRequest request) {
if
