fuickjs 基于react的flutter动态化方案

wey608
1,202 阅读3分钟

FuickJS Framework 核心特性解析

什么是 FuickJS

FuickJS 是一个 Flutter 动态化框架，用 React 语法编写界面，JS 代码运行在 QuickJS 引擎中，通过 DSL 协议驱动 Flutter 原生渲染。架构分为三层：JS 框架层负责组件与 DSL 生成，Flutter 框架层负责解析与渲染，QuickJS 核心层通过 FFI 嵌入 Dart，提供高性能 JS 运行时。

效果预览

  • 支持 android, ios, desktop, 鸿蒙四个平台 image.png

核心特性

1. React 声明式 UI

所有 Flutter 组件都映射为 React 组件，支持嵌套、条件渲染、列表渲染。Column 对应垂直布局，Row 对应水平布局，Scaffold 提供完整页面结构。

2. 60+ Flutter 组件支持

覆盖基础布局（Container、Stack、Positioned、Wrap）、交互组件（Button、TextField、Checkbox、Switch）、动画组件（AnimatedContainer、SlideTransition、ScaleTransition）、滚动组件（ListView、GridView、PageView、CustomScrollView）、功能性组件（Scaffold、AppBar、Drawer、BottomNavigationBar）等。

3. JS ↔ Flutter 双向通信

  • NativeEvent 事件总线：异步发布订阅，JS 可监听原生事件或向原生发送消息
  • Fuick.expose：将 JS 对象暴露给原生，原生直接调用其中方法

4. 原生能力桥接

内置文件系统、剪贴板、设备信息、本地存储、网络请求等服务的 JS 封装，直接调用无需写平台通道代码。

5. Web 标准 API 兼容

内置 fetch、localStorage、WebSocket、setTimeout 等浏览器 API，Web 代码迁移成本低。

6. 智能缓存与性能优化

  • 缓存失效机制：props 变化自动标记 dirty，结构变化向上传播失效
  • 页面预热（Prewarm）：Bundle 加载期间即可开始渲染
  • 增量更新（PatchOps）：复杂页面支持精细化的节点变更

7. 错误边界与调试

内置 ErrorBoundary 捕获渲染异常，console 日志自动路由到 Flutter 日志系统，支持自定义错误兜底 UI。

8. 混合栈管理

FuickJS 支持 JS 页面与 Flutter 原生页面的混合导航，两者可以无缝互相跳转，并且支持参数传递和返回值。

核心能力：

  • JS 页面可以打开 Flutter 原生页面，原生页面返回时带参数回调
  • Flutter 原生页面也可以打开 JS 页面，获取 JS 页面的返回结果
  • 支持页面栈的完整管理（push、pop、replace）
  • 支持模态窗（BottomSheet）和对话框（Dialog）

多视图支持：可以在同一个 Flutter 页面中嵌入多个独立的 JS 容器，各自维护独立的页面栈：

Row(
  children: [
    Expanded(
      child: FuickAppView(appName: 'bundle', initialRoute: '/home'),
    ),
    Expanded(
      child: FuickAppView(appName: 'bundle', initialRoute: '/news'),
    ),
  ],
)

Demo 示例

Flutter 入口

MaterialApp(
  home: FuickAppPage(entryPath: 'assets/js/bundle.qjc'),
);

JS 端注册路由

import React from "react";
import { Router } from "fuickjs";
import HomePage from "./pages/HomePage";
import DetailPage from "./pages/DetailPage";

Router.register("/", () => <HomePage />);
Router.register("/detail", (params) => <DetailPage id={params.id} />);

基础 UI

import { Text, Scaffold, AppBar, Column, Container, SizedBox } from "fuickjs";

export default function HomePage() {
  return (
    <Scaffold appBar={<AppBar title="首页" />}>
      <Column padding={16}>
        <Text text="欢迎" fontSize={24} fontWeight="bold" />
        <SizedBox height={16} />
        <Container
          padding={12}
          decoration={{ color: "#F5F5F5", borderRadius: 8 }}
        >
          <Text text="卡片内容" />
        </Container>
      </Column>
    </Scaffold>
  );
}

总结

FuickJS 适合需要动态更新页面模块、跨团队开发、或已有 React 代码迁移的场景。其混合栈能力使得 JS 动态模块与 Flutter 原生页面可以协同工作，兼顾动态灵活性与原生性能。

demo代码 github

avatar
文章
阅读
粉丝