Flutter插件之webview_flutter简要使用说明

时间 2019-11-09

标签 flutter 插件 webview 简要使用说明繁體版

原文原文链接

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

前言

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

使用方法

引包

在pubspec.yaml添加依赖java

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。web

WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        )
复制代码

加载html文本

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

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);
          }
        );
复制代码

也能够经过其余方式加载post

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

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

JS与Flutter交互

JS调用Flutter方法

写JavascriptChannelgoogle

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

WebView添加javascriptChannelslua

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插件的用法，更多的信息能够去查阅官方资料或者源码，但愿对新入坑、或者遇到问题的朋友能有所帮助。若有问题，欢迎指正。