flutter如何执行js

在Flutter中如何执行JavaScript代码？有没有现成的插件或方法可以实现这个功能？我需要在Flutter应用中动态运行一些JS脚本，最好能支持与Dart代码的交互。求推荐稳定可靠的解决方案，最好能附带简单示例代码。

2 回复

Flutter 可通过 flutter_js 或 webview_flutter 插件执行 JavaScript。前者提供轻量级 JS 引擎，后者在 WebView 中运行 JS。

更多关于flutter如何执行js的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中执行JavaScript代码，可以通过以下两种主要方式实现：

1. 使用 webview_flutter 插件

这是最常用的方法，通过WebView来执行JS代码：

import 'package:webview_flutter/webview_flutter.dart';

WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadFlutterAsset('assets/index.html') // 加载本地HTML文件
  ..addJavaScriptChannel('Flutter', onMessageReceived: (message) {
    // 处理从JS发送到Flutter的消息
    print('收到JS消息: ${message.message}');
  });

// 执行JS代码
void executeJS() async {
  String result = await controller.runJavaScriptReturningResult('''
    // 你的JS代码
    document.title = "Flutter执行JS";
    return "执行成功";
  ''');
  print('JS执行结果: $result');
}

2. 使用 flutter_js 插件

专门为Flutter设计的JS引擎，无需WebView：

import 'package:flutter_js/flutter_js.dart';

void executeJS() {
  final js = getJavascriptRuntime();
  
  // 执行简单JS代码
  var result = js.evaluate('1 + 1');
  print('计算结果: ${result.rawResult}'); // 输出: 2
  
  // 执行复杂JS函数
  js.evaluate('''
    function greet(name) {
      return "Hello, " + name + "!";
    }
  ''');
  
  var greeting = js.evaluate('greet("Flutter")');
  print('问候语: ${greeting.rawResult}'); // 输出: Hello, Flutter!
  
  js.dispose(); // 记得释放资源
}

使用建议

  • webview_flutter: 适合需要完整浏览器环境或与现有网页交互的场景
  • flutter_js: 适合轻量级的JS计算和逻辑处理，性能更好

选择哪种方式取决于你的具体需求，如果需要完整的DOM操作和浏览器API，推荐使用webview_flutter；如果只是需要执行一些JS逻辑计算，flutter_js是更好的选择。

回到顶部