一、展示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)
H5中的定义:
keyButton.addEventListener('click', function () {
//通过注册的key channel向flutter发送消息
key.postMessage("value");
}, false)
2、flutter向H5传递数据
(1)拼接Url
(2)使用runJavaScript方法传递
(比如点击flutter中一个按钮,调用sendMessageToH5()方法,在这方法里执行JS代码)
H5中设置
<script type="text/javascript">
function getParams(params) {
document.getElementById('result').innerHTML = 'flutter传递的数据:' + params;
}
function getParamsCallBack(value) {
return '处理结果'+value;
}
</script>