Flutter WebView与JavaScript交互插件webview_javascript_bridge的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter WebView与JavaScript交互插件webview_javascript_bridge的使用

特性

  • 处理从JavaScript发送的消息。
  • 更容易地向JavaScript发送消息。

使用方法

在使用此包之前，你需要设置Flutter和JavaScript。

Flutter

首先，在你的pubspec.yaml文件中添加webview_javascript_bridge作为依赖。只需运行：

flutter pub add webview_javascript_bridge

然后创建桥实例并初始化：

late final _bridge = WebViewJavaScriptBridge();
late WebViewController _webviewController = WebViewController()
  // 你的代码
  ..addJavaScriptChannel(
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  )
  // 你的代码

@override
void initState() {
  super.initState();
  // 你的代码
  _bridge.updateWebViewController(_webviewController);
  // 你的代码
}

最后，不要忘记为JavaScript添加消息处理器，例如Toaster：

@override
void initState() {
  super.initState();
  /// 添加处理器
  _bridge.addMessageHandler(ClosureMessageHandler(
    resolver: (message, controller) => message.action == "toaster",
    handler: (message, controller) {
      // TODO: 显示Toast
      print(message);
      return null;
    },
  ));
}

JavaScript

首先，安装webview-javascript-bridge包。只需运行：

yarn add webview-javascript-bridge

或者使用npm：

npm install webview-javascript-bridge

接下来，根据需要导入webViewJavaScriptBridge：

import webViewJavaScriptBridge from 'webview-javascript-bridge';

最后，发送消息！

async function sendingMessage() {
  let response = await webViewJavaScriptBridge.sendMessage({
    action: 'tester',
    params: 123456,
  });
  console.log("tester's response", response);
}

如果你使用TypeScript，请查看示例以获取更多细节。

提示

1. 在Flutter中实现BridgeJavascriptMessageHandler时，必须返回一个可JSON化的类型

_bridge.addMessageHandler(
  ClosureMessageHandler(
    resolver: (m, c) => m.action == "toaster",
    handler: (m, c) {
      // ❗️❗️❗️❗️
      return "this value will response to JavaScript, and it must be jsonable";
    },
  ),
);

2. 如果JavaScript函数返回null或undefined，你将遇到异常

final ret = await _bridge.sendMessage(function:"aJavaScriptFunctionReturningNullOrUndefined");
////// ⬆️ 将会是空字符串。

更多关于Flutter WebView与JavaScript交互插件webview_javascript_bridge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter WebView与JavaScript交互插件webview_javascript_bridge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用中，如果你需要实现WebView与JavaScript之间的交互，webview_javascript_bridge是一个非常有用的插件。下面是一个简单的示例，展示如何使用这个插件来实现Flutter与WebView中的JavaScript代码的双向通信。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加webview_javascript_bridge依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_javascript_bridge: ^2.1.4 # 请确保使用最新版本

然后运行flutter pub get来安装依赖。

2. 创建Flutter UI

在你的Flutter应用中，创建一个包含WebView的页面。下面是一个简单的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  final WebViewController? _controller = WebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView with JavaScript Bridge'),
      ),
      body: WebView(
        initialUrl: 'about:blank', // 可以替换为你的网页URL
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _loadHtmlFromAssets(webViewController);
          _setupJavascriptBridge(webViewController);
        },
      ),
    );
  }

  Future<void> _loadHtmlFromAssets(WebViewController webViewController) async {
    // 从assets加载HTML内容（你也可以直接从URL加载）
    String htmlContent = await rootBundle.loadString('assets/index.html');
    webViewController.loadUrl(Uri.dataFromString(
      htmlContent,
      mimeType: 'text/html',
      encoding: Encoding.getByName('utf-8')
    ).toString());
  }

  void _setupJavascriptBridge(WebViewController webViewController) {
    webViewController.evaluateJavascript('''
      // 注册一个JavaScript函数，供Flutter调用
      window.Flutter.postMessageToFlutter = function(message) {
        if (window.WebViewJavascriptBridge) {
          window.WebViewJavascriptBridge.callHandler('fromJS', { 'message': message });
        }
      };
    ''');

    // 设置Flutter接收JavaScript消息的监听器
    WebViewJavascriptBridge()
      ..registerHandler('fromFlutter', (data) {
        // 处理从Flutter发送到JavaScript的消息
        print('Received from Flutter: ${data['message']}');
      })
      ..listen((event) {
        if (event.call.arguments['handler'] == 'fromJS') {
          final message = event.call.arguments['data']['message'];
          print('Received from JavaScript: $message');
          // 在这里处理从JavaScript接收到的消息
        }
      });
  }
}

3. 创建HTML文件

在assets文件夹中创建一个index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView JavaScript Bridge</title>
</head>
<body>
    <h1>Hello from WebView</h1>
    <button onclick="sendMessageToFlutter()">Send Message to Flutter</button>

    <script>
        function sendMessageToFlutter() {
            const message = 'Hello from JavaScript!';
            window.Flutter.postMessageToFlutter(message);
        }
    </script>
</body>
</html>

4. 从Flutter发送消息到WebView

你可以通过调用WebViewJavascriptBridge的callHandler方法来从Flutter发送消息到WebView中的JavaScript：

void sendMessageToWebView() {
  _controller?.evaluateJavascript('''
    if (window.WebViewJavascriptBridge) {
      window.WebViewJavascriptBridge.callHandler('fromFlutter', {'message': 'Hello from Flutter!'});
    }
  ''');
}

你可以将这个函数调用绑定到一个按钮点击事件或其他事件上，以便在需要时发送消息。

总结

这个示例展示了如何使用webview_javascript_bridge插件在Flutter与WebView中的JavaScript代码之间进行双向通信。你可以根据需要扩展这个示例，以实现更复杂的功能。

回到顶部