Skip to content

ufjs 是什么

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

它由三样东西组成:

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

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

一张图看懂

text
Vue 3 / TypeScript / Vite                你写的代码


fjs CLI:create / dev / run / build

        ├─ fjs build        → Flutter 应用(QuickJS 字节码,Android / iOS / 鸿蒙 / 桌面)
        ├─ fjs build --web  → 浏览器静态站点 dist/web
        └─ fjs build --mp   → 微信小程序 dist/mp(Skyline + glass-easel)


@ufjs/runtime:内置标签 + 路由 + Vue 渲染器 + CSS 引擎


flutter_fjs:QuickJS-ng + 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 --webvite 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. 扩展添加插件创建模块配置 Flutter 宿主。需要原生能力时读。
  4. 调试与发布:打包 APK、字节码、小程序上线。
  5. 原理:ufjs 为什么这样设计,一次点击从手指到屏幕经过了什么。
  6. 源码导读:想读 ufjs 自身的源码、给它提 PR 时看。

基于 MIT 协议发布