陈建华的博客
专注web开发
Flutter插件之webview_flutter简要使用说明
2020-05-20 16:33:10   阅读145次

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


前言

最近项目使用到官方的webview_flutter插件,虽然官方有提供Example但并没有提供什么说明文档,这里记录一下自己的使用情况。以官方代码为例,方便使用。


使用方法

引包

在pubspec.yaml添加依赖


dependencies:

     webview_flutter: ^0.3.14+1

参数介绍

image.png

基本使用

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


 WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(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 href="https://www.youtube.com/">https://www.youtube.com/</a></ul>
<ul><a href="https://www.google.com/">https://www.google.com/</a></ul>
</ul>
</body>
</html>
''';

初始化后加载


    WebView(
          initialUrl: 'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlString))}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(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) {
            _controller.complete(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
}

关于js与flutter的交互大佬的这篇Flutter WebView与JS交互简易指南更为详细,也提出了不同的方式


最后

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





-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航