flutter中实现网页（H5）展示及交互（三方库：webVie

一、展示WebView（URL）

1、首先在pubspec.yaml文件中添加webview_flutter:这个三方库。

2、在.dart文件里导入所需文件名

import 'package:webview_flutter/webview_flutter.dart';

3、在initState方法里初始化controller（WebviewPageWithURL是我创建的用于接收URL来展示的网页类）
webView通过WebViewController来控制网页功能。

代码示例

4、创建WebViewWidget

代码示例

5、在需要展示webview的地方，调用getContentWebView()就可以了。

二、展示WebView（HTML）

上述代码都不变，只需要将..loadRequest()方法替换为..loadHtmlString()，并且把里面的代码改成html字符串就行了。

代码示例

三、flutter中与WebView交互

1、flutter读取H5内容：
（1）H5通过URL向flutter传递数据（通过setNavigationDelegate的NavigationDelegate）

代码示例

（2）通过定义特殊字段传递数据（通过添加JavaScriptChannel）

flutter中代码处理

H5中的定义：
keyButton.addEventListener('click', function () {
     //通过注册的key channel向flutter发送消息
     key.postMessage("value");
}, false)

2、flutter向H5传递数据
（1）拼接Url

代码示例

（2）使用runJavaScript方法传递
（比如点击flutter中一个按钮，调用sendMessageToH5()方法，在这方法里执行JS代码）

flutter中处理

H5中设置
<script type="text/javascript">
    function getParams(params) {
       document.getElementById('result').innerHTML = 'flutter传递的数据：' + params;
    }
    function getParamsCallBack(value) {
      return '处理结果'+value;
    }
</script>