Flutter插件之webview_flutter简要使用说明

本文以官方插件及代码为例，简要说明webview_flutter插件的使用,包括基本的使用，加载本地html文本，以及Flutter调用js、js调用Flutter等。

前言

使用方法

引包

在pubspec.yaml添加依赖

dependencies:
     webview_flutter: ^0.3.14+1

参数介绍

参数	类型	默认值	备注
onWebViewCreated	Function		web view创建完成调用
initialUrl	String
javascriptMode	JavascriptMode	JavascriptMode.disabled	JS运行模式
javascriptChannels	Set		JS调用Dart的接口
navigationDelegate	NavigationDelegate		请求拦截
gestureRecognizers	Set		手势
onPageFinished	Function		页面加载完成调用
debuggingEnabled	bool	false	webview debug 是否可用
userAgent	String
initialMediaPlaybackPolicy	AutoMediaPlaybackPolicy

基本使用

最简单的使用方式，创建一个WebView,完成后直接加载initialUrl提供的URL。

        WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            
          },
        )

加载html文本

html文本，这里也可以是<body>标签内的内容，只是界面什么的就比较丑。

const String htmlString = '''
<!DOCTYPE html><html>
<head><title>Navigation Delegate Example</title></head>
<body>
<p>
The navigation delegate is set to block navigation to the youtube website.
</p>
<ul>
<ul><a 
<ul><a 
</ul>
</body>
</html>
''';

初始化后加载

    WebView(
          initialUrl: 'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlString))}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            
          }
        );

也可以通过其他方式加载

 final String contentBase64 = base64Encode(const Utf8Encoder().convert(htmlString));
    webViewController.loadUrl('data:text/html;base64,$contentBase64');

出现乱码可添加charset=utf-8,如：
webViewController.loadUrl('data:text/html;c> harset=utf-8;base64,$contentBase64');

JS与Flutter交互

JS调用Flutter方法

写JavascriptChannel

 JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toaster',
        onMessageReceived: (JavascriptMessage message) {
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
  }

WebView添加javascriptChannels

  WebView(
          initialUrl: 'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlString))}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            
          },
          javascriptChannels: <JavascriptChannel>[
            _toasterJavascriptChannel(context),
          ].toSet(),
        );

Web端的js函数调用

function jsCallFlutter(){
   Toaster.postMessage("msg from js");
}

JavascriptChannel中的name可以自定义，但js中必须与之相对应：name.postMessage(),postMessage是固定，看包源码可知，目前该插件知定义了这么一个接口

Flutter调用JS方法

可以通过WebViewController.evaluateJavascript()来执行js函数

    controller.evaluateJavascript('flutterCallJs("msg from flutter")');

Js函数

function flutterCallJs(String msg){
    //do something here
}

最后

简单的记录了一下webview_flutter插件的用法，更多的信息可以去查阅官方资料或者源码，希望对新入坑、或者遇到问题的朋友能有所帮助。如有问题，欢迎指正。