Skip to content

ufjs 是什么 ​

ufjs 让你用 Vue 3 / TypeScript 写界面,用 Flutter 负责原生渲染。同一份源码还能编译成浏览器静态站点和微信小程序。

它由三样东西组成:

组成发布位置作用
@ufjs/clinpm命令行 fjs:创建项目、dev server、打包、生成 Flutter 宿主、编译小程序
@ufjs/runtimenpm打进你 bundle 的运行时:内置标签、路由、Vue 渲染器、CSS 引擎
flutter_fjspub.devFlutter 插件:内嵌 JS 引擎(默认 PrimJS,可切 quickjs-ng),把 JS 发来的节点操作画成 Flutter Widget

你平时只和前两个打交道,第三个由 fjs run 自动放进生成的 Flutter 工程里。

一张图看懂 ​

text
Vue 3 / TypeScript / Vite                你写的代码
        │
        ▼
fjs CLI:create / dev / run / build
        │
        ├─ fjs build        → Flutter 应用(引擎字节码,Android / iOS / 鸿蒙 / 桌面)
        ├─ fjs build --web  → 浏览器静态站点 dist/web
        └─ fjs build --mp   → 微信小程序 dist/mp(Skyline + glass-easel)
        │
        ▼
@ufjs/runtime:内置标签 + 路由 + Vue 渲染器 + CSS 引擎
        │
        ▼
flutter_fjs:PrimJS(默认引擎)+ Dart FFI + Flutter Widget

和其它方案有什么不同 ​

WebView 套壳React Nativeufjs
渲染浏览器排版原生控件Flutter Widget
JS 与原生通信字符串桥,异步JSI / 旧版异步桥C 函数直调,同步
写法HTML / CSSReactVue 3 SFC
小程序另写一份不支持同一份源码编译
包体增量系统 WebViewHermes 等约 1 MB 的 libfjs

代价也要说清楚:Flutter 端没有 DOM、没有浏览器排版引擎,ufjs 自己实现了一个 CSS 子集(flex 布局为主),能用和不能用的边界是明确列出来的,见样式。

支持的平台 ​

平台状态怎么跑
Web(浏览器)✅ 已支持fjs build --web 或 vite build
微信小程序✅ 已支持fjs build --mp,用微信开发者工具打开
Android✅ 已测试fjs run android
iOS✅ 已测试fjs run ios
macOS✅ 已测试Flutter 桌面
鸿蒙(HarmonyOS)✅ 已测试需 OpenHarmony fork 的 Flutter SDK,fjs run ohos
Windows / Linux理论支持Flutter 桌面可编译,未实测

你需要会什么 ​

  • 必须:Vue 3 组合式 API、TypeScript 基础、npm。
  • 做 App 时需要:装好 Flutter(≥ 3.38)。不需要会写 Dart —— 除非你要写原生模块。
  • 不需要:CMake、NDK、Xcode 工程配置(引擎是预编译好随 flutter_fjs 发布的)。

这份文档怎么读 ​

文档按由浅入深组织:

  1. 开始:快速开始 → 读懂项目结构 → 写第一个页面。半小时内在浏览器和手机上都跑起来。
  2. 基础:路由、组件、样式、事件、资源、多端差异。写业务需要的全部知识。
  3. 扩展:添加插件、三方 UI 组件库、创建模块、配置 Flutter 宿主。需要三方库或原生能力时读。
  4. 调试与发布:打包 APK、字节码、小程序上线。
  5. 原理:ufjs 为什么这样设计,一次点击从手指到屏幕经过了什么。
  6. 源码导读:想读 ufjs 自身的源码、给它提 PR 时看。

基于 MIT 协议发布