Flutter - WebView 的使用以及与 JS 交互_flutter webview_flutter js交互

WebView 的使用，算得上是比较普遍的，特别是与 JS 的交互，今天整理一下在 flutter 中使用 WebView 的一些事~
重点讲解如下两个主流插件的使用：

官方插件：webview_flutter
pub 比较好用的插件：flutter_webview_plugin

任何一个插件的使用，都是两步走：
1.引入依赖
2.导入使用，应用组件(widget)

但是这个插件的使用过程中，在 IOS 里边需要单独设置一项，不然会报错。如下，在ios/Runner/Info.plist中添加

本篇重点先练习官方插件的使用。
为了便于区分，将两个插件的使用放到了一个 dart 文件里边，如下代码：

class WidgetWebview extends StatefulWidget {
  String remoteUrl = "https://www.baidu.com";
  String localUrl = "assets/html/login.html";
  bool useWebviewFlutter = true; // 是否使用 flutter 提供的插件
 
  @override
  _WidgetWebviewState createState() =>
      useWebviewFlutter ? _WebviewFlutterState() : _FlutterWebViewPluginState();
}
/// 方便将两个插件放在一起对比~
abstract class _WidgetWebviewState extends State<WidgetWebview> {}
 
class _WebviewFlutterState extends _WidgetWebviewState {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WebViewFlutter 与 JS 交互"),
      ),
    );
  }
}
 
class _FlutterWebViewPluginState extends _WidgetWebviewState {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FlutterWebViewPlugin 与 JS 交互"),
      ),
    );
  }
}

然后本文会对 _WebviewFlutterState 进行处理

基础使用

ios中在ios/Runner/Info.plist中添加 不然页面加载不出来滴…

首先用 WebView 来加载一个页面，很简单，只需要在 build() 方法中加入 WebView 组件即可,
如下是他的构造函数

  const WebView({
    Key key,
    this.onWebViewCreated, //WebView 创建完成之后的回调
    this.initialUrl, // 初始化 URL
    this.javascriptMode = JavascriptMode.disabled, // JS执行模式 默认是不调用
    this.javascriptChannels, // JS可以调用Flutter 的通道
    this.navigationDelegate, // 路由委托（可以通过在此处拦截url实现JS调用Flutter部分) 拦截 URL
    this.gestureRecognizers, // 手势相关
    this.onPageFinished, // 页面加载完成的回调
    this.debuggingEnabled = false,
    this.userAgent,
    this.initialMediaPlaybackPolicy =
        AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
  })

其实通过构造函数的简单了解，基本上学会了他的使用了，那么如何最简单的加载一个 URL 呢？

     body: WebView(
        initialUrl: widget.remoteUrl,
      ),

 

是不是很简单呢这就是最简单的使用，用来加载一个页面啦

进阶使用

上边说了怎么简单的加载一个页面，那么继续会有一些其他的用法可能会用到呢~
WebView 有一个控制器，叫做 WebViewController，用来处理一些事情，可以在 WebView.onWebViewCreated 中获取到他。

获取页面 title

很多时候，需要将当前 flutter 页面的appbar 标题，显示为网页里边的 title，那么该怎么获取这个 title 呢？前边说的 WebViewController 内有一个 getTitle() 方法，可以用来获取网页的 title，如下：

  /// 获取当前加载页面的 title
  _getTitle() async {
    String title = await _webViewController.getTitle();
    print("title---$title");
  }

 

从这获取到了 title 字符串，然后你就可以用来做处理了。

加载本地 HTML 文件

直接上代码，需要注意的地方是：
1.Bundle.loadString() 是异步执行，所以说需要用 FutureBuilder 对组件进行处理一下子。
2.要用 Uri 对文件进行转码，如代码所示
3.本地文件加入依赖时，要注意路径的准确性！此处我是在我的 assets 目录里边，创建了一个 html 的目录，将 HTML 文件放到这里边了，所以 依赖里边就得用具体到 html 路径。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder(
        future: _loadHtmlFile(),
        builder: (context, snapshot) {
          return WebView(
            initialUrl: Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
                      .toString(),
            onWebViewCreated: (WebViewController controller) {
              print("webview page: webview created...");
              _webViewController = controller;
              _webViewController.loadUrl(
                  new Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
                      .toString());
            },
            onPageFinished: (url) {
              print("webview page: load finished...url=$url");
              _getTitle();
            },
          );
        },
      ),
    );
  }

 

JS 调用 flutter 方法

重头戏来了，在 HTML 里边来调用 flutter 中的方法，前边讲过，JS调用Flutter有两种方法：使用javascriptChannels 发送消息和使用路由委托navigationDelegate 拦截url 实现交互。
拦截的实现暂时不讲，个人觉得比较鸡肋，感兴趣的小伙伴可以自己去研究研究哈(偷笑…)

使用 javascriptChannels 发送消息

javascriptChannels 参数是一个数组形式的，意味着可以给每一个要交互的方法创建一个对应的对象(JavascriptChannel)，扔到这数组里边。但是我觉得也可以考虑就创建一个对象，后续通过 JavascriptChannel 里边的键来区分处理，但是暂时不行，因为 JavascriptMessage 里边只有一个参数，还是个 string 类型，所以不太好容易处理。。。本文使用第一种方法
比如现在我要在 js 里边调用一个 flutter 的 toast 方法来显示一个 toast，那么第一步就是创建一个 JavascriptChannel如下：

  // 创建 JavascriptChannel
  JavascriptChannel _toastJsChannel(BuildContext context) => JavascriptChannel(
      name: 'show_flutter_toast',
      onMessageReceived: (JavascriptMessage message) {
        print("get message from JS, message is: ${message.message}");
        T.show(message.message);
      });

 

要说明的地方是：
1.name 参数，对应的是一个 String 类型的键，这个就是在 JS 里边要调用的(postMessage(“xxx”))，必须一致。
2.onMessageReceived 回调了一个 JavascriptMessage 对象，接收来自 JS 的回调信息。目前这里边只有一个 message(String) 属性。只支持 String 类型的参数，数据过多的话可以考虑 JSON 的 String 类型参数~
接下来就是去书写简单的 JS 代码啦~~

<div class = "rect" style="margin-top: 50px;" onclick="flutterShowToast()">JS调用Flutter</div>
  /// 调用 flutter 的方法
  /// -name:show_flutter_toast
  function flutterShowToast() {
    show_flutter_toast.postMessage("message from JS...");
  }

 

HTML 里边的代码很简单，就是给一个 div 设置了点击事件，调了 flutterShowToast 这个方法，特别需要注意的一点是show_flutter_toast 一定不要写错了！(此处应该知道为什么必须用这个字符串哈~)

flutter 调用 JS

在WebView创建完成之后，我们可以拿到一个WebViewController，通过它的evaluateJavascript()方法，我们可以执行JS语句

WebViewController _webViewController;
...
onWebViewCreated: (WebViewController controller) {
              print("webview page: webview created...");
              _webViewController = controller;
              _webViewController.loadUrl(new Uri.dataFromString(snapshot.data,
                      mimeType: 'text/html',
                      encoding: Encoding.getByName('utf-8'))
                  .toString());
            }
...
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          _webViewController.evaluateJavascript("flutterCallJsMethod('message from Flutter!')");
        },
      ),

通过在页面里边添加了一个 FloatingActionButton 来触发传递事件，如上所说，调用了evaluateJavascript 方法，内容就是 JS 里边的方法以及参数，然后在 HTML 里边对应的写一个同名的 function，就可以实现 从 flutter 到 jS 的传递了，HTML 代码如下：

  /// Flutter 调用 JS 的此方法
  /// 在 Flutter 中通过 _webViewController.evaluateJavascript("flutterCallJsMethod('message from Flutter!')") 调用
  function flutterCallJsMethod(message) {
      document.getElementById("show_info").innerText = message;
  }

 

同时 evaluateJavascript 返回了一个 Future 对象，可以用来接手 JS 回传的内容。
注意一点：evaluateJavascript()方法**，Flutter建议我们在onPageFinished回调之后去执行**，以保证所有的HTML都已经加载完毕了。因此在实际开发中，建议参考我的写法，将 WebView 放到 FutureBuilder 里边~