Flutter QuickJS 引擎使用教程

1. 项目介绍

flutter_qjs 是一个为 Flutter 开发的 QuickJS 引擎插件。QuickJS 是一个轻量级的 JavaScript 引擎，支持 ES2020 规范。flutter_qjs 插件基于 dart:ffi，支持除 Web 以外的所有平台。通过该插件，开发者可以在 Flutter 应用中嵌入 JavaScript 引擎，实现 Dart 与 JavaScript 之间的无缝交互。

2. 项目快速启动

2.1 安装依赖

首先，在 pubspec.yaml 文件中添加 flutter_qjs 依赖：

dependencies:
  flutter_qjs: ^0.3.7

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

2.2 基本使用

以下是一个简单的示例，展示如何在 Flutter 应用中使用 flutter_qjs 引擎：

import 'package:flutter_qjs/flutter_qjs.dart';

void main() async {
  // 创建 FlutterQjs 对象
  final engine = FlutterQjs(stackSize: 1024 * 1024); // 设置堆栈大小

  // 建立事件循环
  engine.dispatch();

  try {
    // 运行 JavaScript 脚本
    final result = engine.evaluate("1 + 2");
    print("JavaScript 执行结果: $result");
  } catch (e) {
    print("执行错误: ${e.toString()}");
  }

  // 关闭引擎
  engine.port.close(); // 停止事件循环
  engine.close(); // 关闭引擎
}

2.3 数据转换规则

Dart 与 JavaScript 之间的数据转换遵循以下规则：

• Bool -> boolean
• Int -> number
• Double -> number
• String -> string
• Uint8List -> ArrayBuffer
• List -> Array
• Map -> Object
• Function -> JSInvokable

3. 应用案例和最佳实践

3.1 动态脚本执行

在某些场景下，开发者可能需要在运行时动态执行 JavaScript 脚本。flutter_qjs 提供了一个简单的方式来实现这一点：

final script = "function add(a, b) { return a + b; }";
engine.evaluate(script);
final result = engine.evaluate("add(1, 2)");
print("动态脚本执行结果: $result");

3.2 与 Dart 函数交互

flutter_qjs 允许将 Dart 函数传递给 JavaScript 环境，并在 JavaScript 中调用这些函数：

void dartFunction(int a, int b) {
  print("Dart 函数被调用: ${a + b}");
}

engine.evaluate("function callDartFunction(fn) { fn(1, 2); }");
engine.evaluate("callDartFunction", dartFunction);

4. 典型生态项目

4.1 Flutter 插件生态

flutter_qjs 可以与其他 Flutter 插件结合使用，例如与 flutter_webview 插件结合，实现 Web 与原生代码的混合开发。

4.2 动态配置管理

在某些应用中，可能需要通过远程配置文件动态调整应用行为。flutter_qjs 可以用于解析和执行这些配置文件中的 JavaScript 代码，从而实现动态配置管理。

4.3 游戏开发

在游戏开发中，flutter_qjs 可以用于实现脚本化的游戏逻辑，允许开发者通过 JavaScript 编写游戏规则和行为，从而提高开发效率和灵活性。

通过以上内容，您应该已经对 flutter_qjs 有了基本的了解，并能够开始在 Flutter 项目中使用它。