Formily是一个与框架无关的表单解决方案，Form表单构建器，渲染引擎
描述表单结构的schema语言，通过schema嵌套来快速生成表单。
前端动态表单引擎：用json来描述表单；减少表单开发成本，提高开发效率
自定义表单引擎中台，前后端公用的 JSON规范，来描述表单，页面定制化，用户习惯填写表单
https://designable-antd.formilyjs.org/
Github https://github.com/alibaba/designable

可读性好
通用性
动态表单机制，就是 jsonSchema渲染的表单
动态表单的目标主要是为了服务可视化搭建，核心能力基于上面的表单实现
w3c 对表单每项的术语就是 field，概念不会被淘汰

表单解决方案

  1. 表单协议
  2. 渲染引擎
  3. 表单生成器， json schema动态化配置

表单领域多端一致性，统一标准表单Schema描述协议，提升表单开发效率及动态化需求

  • 简单的页面，可以用表单设计器拖拖拽拽搭建，然后有渲染引擎统一渲染
  • 常用的方法抽象成表单库复用，提升开发效率

https://segmentfault.com/a/1190000023694206
https://www.yuque.com/chengkuan/vscode/cz75ze

formily 技术选型

antd技术栈，以下都是必须安装的 npm包

  1. yarn add moment
  2. yarn add @formily/antd # 组件库
  3. yarn add @formily/core # 核心库
  4. yarn add @formily/react # 链接UI
  5. yarn add @monaco-editor/react
  7. yarn add @designable/core
  8. yarn add @designable/react
  9. yarn add @designable/react-settings-form
  11. yarn add @designable/formily-setters
  12. yarn add @designable/formily-transformer
  13. yarn add @designable/formily-antd # 表单设计器
  15. yarn add react-resize-detector
  16. yarn add react-color @types/react-color
  17. yarn add ahooks

场景组件：
ArrayCards/ArrayTable/FormStep 这类组件只支持 Schema 模式，不支持纯 JSX 模式
好处：场景化抽象

formily表单设计器

Formily 表单设计器是基于designable而扩展出来的扩展包，提供了 Formily 基础表单的搭建和配置能力

  1. 提供一套通用的 Formily 表单设计器使用范式
  2. 在现有表单设计器的基础上，进行扩展并与业务深度集成
    1. formily自定义组件
  3. 将设计器组件抽离并独立发布与维护
    1. 前端按领域划分，小而美
    2. 表单领域也同样适用，功能越强大的表单上手难度越高
  4. 开发的成本就是：UI 的适配与业务组件的研发成本，样式风格统一，用户体验一致性更好
  5. formily缺点
    1. 想解决的问题很大，但感觉力不从心

formily特点

Formily解决了表单的核心问题，主要有
1. 表单数据管理
2. 表单字段管理
3. 表单校验
4. 表单联动
5. Antd表单重复渲染，引起的性能问题
6. 日常工作开发，推荐使用 Formily，因为 formily实现了表单的闭环

  • 表单 JsonSchema 解析引擎
  • JSON 渲染存储引擎

表单设计器

  1. 自定义表单的新增，修改页面
  2. 可拖拽的页面
  3. 自定义表单的渲染引擎
  4. 表单设计器的输出是一份描述表单字段的 JSON Schema，接存储到后端
  5. 表单发布后，前端再根据 JSON Schema 渲染表单，每次对表单的更新都是修改 Schema 中的内容
  6. 借助协议，可以做场景化抽象，相反，JSX 不可解析性

https://juejin.cn/post/6967207843669737509

钉钉宜搭
https://www.yuque.com/yida/support/wql6d2
https://www.zhihu.com/column/uform

formily 表单设计器案例

https://github.com/alibaba/designable/tree/main/formily/antd/playground
本地运行

  1. 直接下载 designable压缩包
  2. 找到 formily/antd/playground 运行就会看到以下界面
    1. 【提示】构建过程中会提示有些 npm包没有，那就安装下就行了
  1. antd.version
  2. // '4.24.7'
  4. React.version
  5. // '18.2.0'
  7. moment.version
  8. // '2.29.4'

image.png

  1. 左侧
    1. 组件库
    2. 模板库
      1. 表单模板
      2. 运营活动
    3. 数据源
      1. 新建，同步数据源
  2. 中间画布
    1. 编辑，预览，发布
  3. 右侧属性
    1. 组件 props，
    2. Event
    3. 数据绑定

image.png
image.png