Flutter JavaScript执行插件 flutter_jscore 的使用

flutter_jscore 是一个用于在Flutter应用中执行JavaScript代码的插件。它利用了JavaScriptCore引擎，允许开发者直接在Dart代码中运行和操作JavaScript程序。

概述

• GitHub 仓库
• License
• Pub Package

主要功能

• 在Flutter应用中执行JavaScript代码。
• 支持iOS、macOS、Android、Windows和Linux平台。
• 使用dart:ffi进行高效的语言互操作。

快速开始

添加插件依赖

根据你的需求选择以下一种方式添加flutter_jscore到你的项目中：

dependencies:
  flutter_jscore: ^last_version # 使用最新版本

或者从本地路径或Git仓库导入：

dependencies:
  flutter_jscore:
    path: Your local path

dependencies:
  flutter_jscore:
    git:
      url: git://github.com/xuelongqy/flutter_jscore.git

添加动态库

由于上传包大小限制，需要手动添加JavaScriptCore动态库。具体步骤如下：

Android

1. 下载包含libjsc.so的aar文件并将其添加到项目的libs目录下。
2. 修改build.gradle文件以引用这些库。

示例配置：

android {
    repositories {
        flatDir {
            dirs 'libs'
        }
    }
}
dependencies {
    implementation(name:'your_aar_file', ext:'aar')
}

同时，确保添加libc++_shared.so依赖：

sourceSets {
    main {
        jniLibs.srcDirs = ['jniLibs']
    }
}

iOS 和 macOS

无需额外操作，因为JavaScriptCore已内置。

Windows 和 Linux

请参考官方文档中的详细说明来安装所需的动态库。

使用方法

下面是一个简单的例子展示如何在Flutter应用中使用flutter_jscore执行JavaScript代码：

import 'package:flutter/material.dart';
import 'package:flutter_jscore/flutter_jscore.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter_jscore',
      home: _JSCorePage(),
    );
  }
}

class _JSCorePage extends StatefulWidget {
  [@override](/user/override)
  _JSCorePageState createState() => _JSCorePageState();
}

class _JSCorePageState extends State<_JSCorePage> {
  late TextEditingController _jsInputController;
  late JSContext _jsContext;

  [@override](/user/override)
  void initState() {
    super.initState();
    _jsContext = JSContext.createInGroup();
    _jsInputController = TextEditingController(text: '1 + 1');
  }

  [@override](/user/override)
  void dispose() {
    _jsContext.release();
    _jsInputController.dispose();
    super.dispose();
  }

  String _runJs(String script) {
    var jsValue = _jsContext.evaluate(script);
    return jsValue.string ?? 'No result';
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('JavaScriptCore for Flutter')),
      body: TextField(
        maxLines: 50,
        decoration: InputDecoration(border: InputBorder.none),
        controller: _jsInputController,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('Result'),
                content: Text(_runJs(_jsInputController.text)),
              );
            },
          );
        },
        child: Icon(Icons.autorenew),
      ),
    );
  }
}