flutter如何执行js代码

在Flutter中如何执行JavaScript代码？有没有现成的插件或方法可以实现这个功能？例如通过WebView或者其他方式。如果有具体的代码示例就更好了。

2 回复

Flutter中可通过flutter_js或webview_flutter插件执行JS代码。前者是纯Dart实现的JS引擎，后者在WebView中执行。例如使用flutter_js：JSEvaluator.evaluate('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文件

// 执行JavaScript代码
void executeJS(String jsCode) async {
  String result = await controller.runJavaScriptReturningResult(jsCode) as String;
  print('JS执行结果: $result');
}

// 调用示例
executeJS('document.title = "Flutter JS";');
executeJS('2 + 2'); // 返回 4

2. 使用 flutter_js 插件

专门为Flutter设计的JS执行引擎：

import 'package:flutter_js/flutter_js.dart';

final JavascriptRuntime jsRuntime = getJavascriptRuntime();

void executeJSCode() {
  // 执行简单JS代码
  JsEvalResult result1 = jsRuntime.evaluate('2 + 2');
  print(result1.stringResult); // 输出: 4
  
  // 执行复杂JS函数
  JsEvalResult result2 = jsRuntime.evaluate('''
    function multiply(a, b) {
      return a * b;
    }
    multiply(5, 3);
  ''');
  print(result2.stringResult); // 输出: 15
}

使用步骤

  1. 添加依赖：
dependencies:
  webview_flutter: ^4.4.2
  # 或
  flutter_js: ^0.7.0
  1. 权限配置（Android）： 在 android/app/src/main/AndroidManifest.xml 中添加：
<uses-permission android:name="android.permission.INTERNET" />

选择建议

  • webview_flutter：适合需要完整浏览器环境或与网页交互的场景
  • flutter_js：适合纯JS计算，性能更好，包体积更小

根据你的具体需求选择合适的方案即可。

回到顶部