Flutter中如何使用flutter_js

在Flutter项目中集成flutter_js插件时遇到问题，按照官方文档配置后仍然无法正常运行。具体表现为调用evaluate方法时总是返回空值，且控制台没有报错信息。想请教：

  1. 正确的集成步骤是怎样的？是否需要额外配置？
  2. 如何调试flutter_js的执行错误？
  3. 是否支持ES6语法或需要特殊处理？
  4. 在Android/iOS上是否有兼容性差异？
    希望能提供一个完整的示例代码，谢谢！
2 回复

在Flutter中使用flutter_js，首先在pubspec.yaml添加依赖：

dependencies:
  flutter_js: ^0.7.0

然后导入包：

import 'package:flutter_js/flutter_js.dart';

创建JavascriptRuntime实例并执行JS代码：

final js = JavascriptRuntime();
var result = js.evaluate('1 + 1');
print(result); // 输出2

更多关于Flutter中如何使用flutter_js的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用flutter_js插件可以执行JavaScript代码，实现与Web技术的交互。以下是基本步骤和示例：

1. 添加依赖

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_js: ^0.7.0

运行flutter pub get安装。

2. 初始化JavascriptRuntime

创建JavaScript运行时环境：

import 'package:flutter_js/flutter_js.dart';

final jsRuntime = getJavascriptRuntime();

3. 执行JavaScript代码

使用evaluate方法执行JS代码：

// 执行简单表达式
var result = jsRuntime.evaluate("2 + 3");
print(result.rawResult); // 输出: 5

// 执行函数
jsRuntime.evaluate("""
  function greet(name) {
    return "Hello, " + name;
  }
""");
var greeting = jsRuntime.evaluate("greet('World')");
print(greeting.rawResult); // 输出: Hello, World

4. 与Dart交互

通过setGlobalHandler实现JS调用Dart：

jsRuntime.setGlobalHandler('callDart', (args) {
  return "来自Dart的响应";
});

// JS中调用
jsRuntime.evaluate("callDart()");

5. 释放资源

使用完毕后释放运行时：

jsRuntime.dispose();

注意事项：

  • 适用于轻量级JS任务，复杂场景建议使用WebView
  • 支持ES6语法和Promise
  • 可通过quickjs或javascriptcore后端（不同平台）

这样就能在Flutter应用中嵌入JavaScript执行能力了。

回到顶部