FuickJS
FuickJS 是一个基于 QuickJS 引擎实现的 Flutter 动态化渲染框架。它允许开发者使用 React 语法编写业务逻辑和 UI，并通过 Flutter 原生组件进行高性能渲染。
核心特性
- React 开发体验: 使用熟悉的 React 语法、Hooks 和生命周期。
- 高性能渲染: 并非使用 WebView，而是将 JS 描述的 UI 树通过 FFI 传递给 Flutter，映射为原生 Widget。
- 轻量级桥接: 采用 Dart FFI 直接与 C 层 QuickJS 交互，避免了 JSON 序列化的开销。
- 动态更新: JS 代码可动态下发，实现不发版即可更新 App 功能。
- 支持 android 、ios 、鸿蒙 、macos多平台
- 支持加载quickjs 字节码，实现页面秒开
- 支持分包加载，framework代码 & 业务代码独立
- 大批量数据渲染毫无压力，实测列表2000+数据，2s更新一次，无卡顿
- 支持js & flutter 混合栈
效果预览
-
支持四个平台
-
支持一个flutter页面加载同一个bundle的多个页面，共享一个jscontext
三个js页面任何一个地方修改值，其他页面自动同步
代码示例
import React from 'react';
import {
Column,
Container,
Text,
ListView,
Padding,
Row,
Image,
SizedBox,
Button,
Navigator,
SingleChildScrollView,
InkWell
} from 'fuick_js_framework';
export default function NewsDetailPage(props: any) {
const article = props.article;
if (!article) {
return (
<Container alignment="center">
<Text text="未找到文章内容" />
<Button text="返回" onTap={() => Navigator.pop()} />
</Container>
);
}
return (
<Column crossAxisAlignment="stretch">
{/* Header */}
<Container
height={60}
decoration={{ color: '#1976D2' }}
alignment="topLeft"
padding={{ horizontal: 16, top: 10 }}
>
<Row>
<InkWell onTap={() => Navigator.pop()}>
<Container padding={10}>
<Text text="<" fontSize={24} color="#FFFFFF" />
</Container>
</InkWell>
<SizedBox width={16} />
<Container padding={{ top: 8 }}>
<Text text="新闻详情" fontSize={20} color="#FFFFFF" fontWeight="bold" />
</Container>
</Row>
</Container>
<SingleChildScrollView>
<Column crossAxisAlignment="stretch">
<Image
url={article.image_url}
height={250}
fit="cover"
/>
<Padding padding={16}>
<Column crossAxisAlignment="start">
<Text
text={article.title}
fontSize={22}
fontWeight="bold"
/>
<SizedBox height={12} />
<Row mainAxisAlignment="spaceBetween">
<Text
text={article.news_site}
fontSize={14}
color="#1976D2"
/>
<Text
text={new Date(article.published_at).toLocaleString()}
fontSize={14}
color="#999999"
/>
</Row>
<SizedBox height={20} />
<Text
text={article.summary}
fontSize={16}
color="#333333"
/>
</Column>
</Padding>
</Column>
</SingleChildScrollView>
</Column>
);
}
运行流程
- JS 打包:
在
js目录下运行node esbuild.js。脚本会编译 JS 代码并将bundle.js自动拷贝到app/assets/js/目录。 - Flutter 运行:
在
app目录下运行flutter run。Flutter 容器会启动 QuickJS 引擎，加载bundle.js，并根据 JS 侧生成的 DSL 渲染 UI。
快速开始
1. 安装依赖
# JS 侧
cd js
npm install
# Flutter 侧
cd app
flutter pub get
2. 编译 JS
cd js
npm run build
3. 运行项目
使用 IDE 打开 app 目录，或在命令行运行：
cd app
flutter run
技术架构
- Engine: QuickJS (轻量级、高性能 JS 引擎)
- Bridge: Dart FFI (C-Style 接口调用)
- Framework: React (前端 UI 框架)
- Renderer: 自定义 Reconciler (DSL 转换器)
代码
demo代码
