Flutter WebView与JS交互指南：实现简便的双向调用

2023-11-03 16:58:38

前言

在Flutter应用程序中，经常需要与WebView进行交互，例如加载网页、获取网页内容，或者在Flutter与JS之间传递数据。WebView与JS的交互是Flutter开发中的一个常见需求，但网上现有的文章往往讲解得不够深入，让人难以理解。本文将详细介绍如何实现Flutter WebView与JS的交互，帮助您轻松掌握双向通信技巧。

JS调用Flutter

准备工作
- 在Flutter项目中添加webview_flutter插件。
- 在要使用WebView的页面中，导入webview_flutter库。
创建WebView
- 使用WebView()方法创建一个WebView。
- 设置WebView的URL。
注册JS回调
- 使用WebView().jsRegister()方法注册一个JS回调函数。
- 在JS回调函数中，可以调用Flutter方法。
调用Flutter方法
- 在JS代码中，使用window.flutter_inappwebview.callHandler()方法调用Flutter方法。
- 传入要调用的Flutter方法名和参数。
接收JS回调
- 在Flutter中，使用JSChannel()类来接收JS回调。
- 为JSChannel()类注册一个回调函数。
- 在回调函数中，可以处理来自JS的调用。

Flutter调用JS

准备工作
- 在Flutter项目中添加webview_flutter插件。
- 在要使用WebView的页面中，导入webview_flutter库。
创建WebView
- 使用WebView()方法创建一个WebView。
- 设置WebView的URL。
获取JS Context
- 使用WebView().runJavascriptReturningResult()方法获取JS Context。
调用JS方法
- 使用JS Context调用JS方法。
- 传入要调用的JS方法名和参数。

示例

以下是一个Flutter WebView与JS交互的示例代码：

// Flutter代码

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  const MyWebView({Key? key}) : super(key: key);

  @override
  State<MyWebView> createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  final WebViewController _controller = WebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView与JS交互'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        onWebViewCreated: (WebViewController controller) {
          _controller = controller;

          // 注册JS回调
          controller.jsRegister(
              name: 'showFlutterToast',
              callback: (List<dynamic> arguments) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(arguments[0]),
                  ),
                );
              });
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 调用JS方法
          _controller.runJavascriptReturningResult(
              'window.flutter_inappwebview.callHandler('
              '"showToast", '
              '["Hello from Flutter!"]'
              ');');
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

// JS代码

function showFlutterToast(message) {
  window.flutter_inappwebview.callHandler('showFlutterToast', [message]);
}