Flutter JavaScript互操作插件js_interop的使用

Flutter JavaScript互操作插件js_interop的使用

js_interop 是一个简单的工具包，用于帮助在文档中添加JavaScript脚本。下面是一个使用示例：

示例

Dart 代码

import 'package:js_interop/js_interop.dart';

void main() {
  // 你可以多次调用此函数，它会检查脚本是否已存在，然后再将其插入到DOM中。
  JsInterop.safeAddScript('MyCoolJS', 'console.log("hey")');
}

通过上述代码，我们可以看到如何将一个简单的JavaScript脚本添加到HTML文档中。该脚本会在控制台输出 “hey”。

完整示例

我们来看一个更完整的示例，展示如何将 WebFontLoader 这个JS库添加到DOM中。

文件结构

example/
├── main.dart
└── webfont.dart

Dart 代码

main.dart

import 'webfont.dart' as bundle;
import 'package:js_interop/js_interop.dart';

void main() {
  // 将WebFontLoader JS库添加到DOM中
  JsInterop.safeAddScript('WebFont', bundle.buffer).then((ev) {
    print('WebFont is loaded!');
  });
}

webfont.dart

// 这里是WebFontLoader的JS代码，为了简洁起见只展示了部分
const buffer = r'''
WebFontConfig = {
  google: { families: [ 'Roboto:400,700:latin' ] }
};
(function(d) {
  var wf = d.createElement('script'), s = d.scripts[0];
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.async = true;
  s.parentNode.insertBefore(wf, s);
}(document));
''';

更多关于Flutter JavaScript互操作插件js_interop的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在Flutter应用中，如果你需要与JavaScript进行互操作，可以使用js_interop包。这个包允许你在Flutter的Dart代码中调用JavaScript代码，反之亦然。以下是一个简单的代码案例，展示如何使用js_interop在Flutter和JavaScript之间进行互操作。

步骤 1: 添加依赖

首先，你需要在pubspec.yaml文件中添加js_interop的依赖（尽管js_interop本身通常不需要显式依赖，但确保你有一个平台通道来与JavaScript交互，如flutter_webview_plugin或webview_flutter，这里我们使用webview_flutter作为示例）。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4  # 确保使用最新版本

步骤 2: 创建JavaScript接口

创建一个Dart文件（例如js_interface.dart），用于定义JavaScript函数的接口。

import 'package:js/js.dart';

@JS()
library js_interface;

@JS('alert')
external void jsAlert(String message);

在这个例子中，我们导入了package:js/js.dart并定义了一个jsAlert函数，这个函数直接映射到JavaScript的alert函数。

步骤 3: 使用WebView加载JavaScript并调用Dart函数

接下来，在你的Flutter应用中，使用webview_flutter加载一个包含JavaScript代码的网页，并通过平台通道与Dart代码进行通信。这里我们假设你已经在你的应用中添加了webview_flutter。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'js_interface.dart'; // 导入你定义的JS接口

void main() => runApp(MyApp());

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Flutter Example'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          '''
          <!DOCTYPE html>
          <html>
            <head>
              <title>WebView Example</title>
              <script type="text/javascript">
                function callDartAlert() {
                  // 这里假设你有一个机制来调用Dart代码，比如通过postMessage
                  window.FlutterWebViewPlugin.postMessage('callDartAlertFromJS');
                }
              </script>
            </head>
            <body>
              <h1>Hello, WebView!</h1>
              <button onclick="callDartAlert()">Call Dart Alert</button>
            </body>
          </html>
          ''',
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _controller.setNavigationDelegate(
            NavigationDelegate(
              onPageStarted: (String url) {
                print("Page started loading: $url");
              },
              onPageFinished: (String url) async {
                print("Page finished loading: $url");

                // 监听来自JavaScript的消息
                _controller.evaluateJavascript('''
                  window.FlutterWebViewPlugin = {
                    postMessage: function(message) {
                      window.ReactNativeWebView.postMessage(message);
                    }
                  };
                ''');

                _controller.addJavascriptChannel(
                  JavascriptChannel(
                    name: 'FlutterWebViewPlugin',
                    onMessageReceived: (JavascriptMessage message) {
                      if (message.message == 'callDartAlertFromJS') {
                        jsAlert('Hello from Dart!'); // 调用Dart中的jsAlert函数
                      }
                    },
                  ).setMethodCallHandler((call) async {
                    // 这里可以处理从Dart到JavaScript的调用，如果需要的话
                  }),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

注意事项

  1. 平台限制：上述代码示例主要针对Android和iOS平台。如果你需要在Web平台上运行，可能需要不同的方法。
  2. 安全性：确保你理解并处理JavaScript和Dart之间通信的安全性，尤其是在处理用户输入和敏感数据时。
  3. 更新和维护：依赖包（如webview_flutter）可能会随时间更新，确保你的代码与最新版本的依赖包兼容。

这个示例展示了如何在Flutter应用中通过js_interop和webview_flutter与JavaScript进行基本的互操作。根据你的具体需求，你可能需要调整代码来实现更复杂的功能。

回到顶部