Flutter JavaScript执行插件flutter_js_engine的使用

Flutter JavaScript执行插件flutter_js_engine的使用

JsEngine 是一个基于 webview_flutter 插件内置的 JS 运行时的 JavaScript 扩展。它允许动态执行 JavaScript 脚本，并且相比第三方库如 flutter_js 更加轻量。它不需要额外的大小，支持 JS HTTP 网络请求、SP 数据持久化和 Promise。由于它是基于 WebView 内核实现的，因此可以通过 Google 和 AppStore 的审核。

HTTP 请求

JsEngine 提供了内置的网络请求接口，并支持 Promise 语法。

JS HTTP 请求示例

HttpSender.sendRequest("https://www.baidu.com/s", null, null, {
    "wd": "%E6%97%A5%E5%8E%86"
}, "GET").then((value) => {
    console.log("sendRequest ok: ", value);
    run_callback(value);  // 返回数据到 Dart 层
});

数据存储

JsEngine 支持以键值对形式进行持久化数据存储，并且也支持 Promise 语法。

JS 存储和检索数据示例

SpStorage.set("ijk", "oh yep");
SpStorage.get("ijk").then((value) => {
    console.log("SpStorage got ijk promise value:", value);
});

参数传递

⚠️ JsEngine 使用带有 run_ 前缀的变量作为内置全局变量。

接口通过 params 传递参数，这些参数可以在 JS 脚本中通过内置的 run_params 访问：

Dart 代码

JsEngine.runCode('console.log("run_params:", run_params);', params: 'dadada');

JS 代码

console.log("run_params:", run_params);

运行时信息

获取 JS 运行环境信息：

Dart 代码

JsEngine.runCode('console.log("run_info:", run_info["system"]);');

支持的信息包括：

字段名 定义
system 系统
system_ver 系统版本
locale 语言代码
engine_ver 引擎版本

预加载全局库

默认情况下，JsEngine.runCode() 在隔离环境中运行，但 JsEngine 也支持全局模式：

Dart 代码

JsEngine.loadLib('');

代理日志输出

代理日志允许 JS 日志输出到 Dart 层：

Dart 代码

JsEngine.setLogProxy((tag, log) {
  print('$tag: $log');
});

JS 代码

run_log("hello world!");

完整示例

JsEngine.setDebugMode(true);
JsEngine.setLogProxy((tag, log) {
  print(log);
});

JsEngine.runCode('''
    console.log("run_params:", run_params);
    console.log("run_info:", run_info['system']);
    HttpSender.sendRequest("https://www.baidu.com/s", null, null, {
        "wd": "%E6%97%A5%E5%8E%86"
    }, "GET").then((value) => {
        console.log("sendRequest ok: ", value);
        run_callback(value);
    });
    SpStorage.set("abc", "என்ன Yogi இப்படி சொல்லிட்ட |");
    SpStorage.set("ijk", "oh yep");
    SpStorage.get("abc").then((value) => {
        console.log("SpStorage got abc promise value:", value);
    });
    SpStorage.get("ijk").then((value) => {
        console.log("SpStorage got ijk promise value:", value);
    });
''', params: 'dadada', callback: (json) {
    logI('JsEngine-console runJsCode res: $json');
}).then((json) {
    logI('JsEngine-console future runJsCode res: $json');
});

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

1 回复

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


flutter_js_engine 是一个 Flutter 插件，它允许你在 Flutter 应用中执行 JavaScript 代码。这个插件基于 QuickJS JavaScript 引擎，提供了在 Flutter 应用中嵌入和执行 JavaScript 的能力。以下是如何使用 flutter_js_engine 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_js_engine 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_js_engine: ^0.0.6  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 初始化 FlutterJsEngine

在你的 Dart 代码中，首先需要导入 flutter_js_engine 并初始化 FlutterJsEngine：

import 'package:flutter_js_engine/flutter_js_engine.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 JavaScript 引擎
  final jsEngine = FlutterJsEngine();

  // 执行 JavaScript 代码
  final result = jsEngine.evaluate('1 + 2');
  print('Result: ${result.result}');  // 输出: Result: 3

  // 释放资源
  jsEngine.dispose();
}

3. 执行 JavaScript 代码

你可以使用 evaluate 方法来执行 JavaScript 代码。evaluate 返回一个 JsEvalResult 对象，其中包含执行结果和可能的错误信息。

final result = jsEngine.evaluate('"Hello, " + "World!"');
print('Result: ${result.result}');  // 输出: Result: Hello, World!

4. 错误处理

如果 JavaScript 代码执行时发生错误，JsEvalResult 会包含错误信息：

final result = jsEngine.evaluate('undefinedVariable');
if (result.error != null) {
  print('Error: ${result.error}');
}

5. 释放资源

当你不再需要 FlutterJsEngine 实例时，应该调用 dispose 方法来释放资源：

jsEngine.dispose();
回到顶部