Formily官網：https://formilyjs.org/
源碼地址：https://github.com/alibaba/formily
知乎作者介紹：https://zhuanlan.zhihu.com/p/364750033
本文信息都來自上述官方文檔和自己的實踐總結，因為本人確切的說是一名后端，對于前端是對文檔嚴重依賴的，當然逼急了也會去看源碼，所以難免會出現(xiàn)前端專業(yè)缺失的問題，如有錯誤請指點。
簡介
Formily是一個與框架無關的表單解決方案，使用了JSON Schema，多端適配,目前社區(qū)已經有React、Vue方案，更是支持了眾多流行前端框架如ant、next、element、element-plus、antdv、vant、semi、tdesign-react等。按照作者的說法是：定位是 面向復雜場景的表單解決方案， 面向企業(yè)級表單的專業(yè)解決方案，有如下特色：
- 業(yè)內領先的思想
- 豐富的使用場景
- 極致的細節(jié)優(yōu)化
- 完善的文檔周邊
Formily前后有兩版本，前后不兼容，但是我沒趕上1.0，直接享受2.0，下面是我自己的使用實踐。
實踐總結
因為本人是后端，所以采用了Ant recat方案，下文全是如此。
快速開始
這里我按照自己的實踐，使用ant pro 為項目工程模板。
<pre id="GXR1v" class="wp-block-preformatted hljs language-css" style="box-sizing: border-box; margin-top: 0px; overflow: auto; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.25px; margin-bottom: 1rem; display: block; color: rgb(171, 178, 191); padding: 0.5em; border-radius: 5px; white-space: pre-wrap; background: rgb(40, 44, 52); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">npm i @ant-design/pro-cli -g
pro create formilyant
cd formilyant
yarn</pre>
基礎工作準備完畢，開始引用formily組件。當然是按照官方文檔走了，https://formilyjs.org/zh-CN/guide/upgrade
<pre id="GkUUt" class="wp-block-preformatted hljs language-sql" style="box-sizing: border-box; margin-top: 0px; overflow: auto; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.25px; margin-bottom: 1rem; display: block; color: rgb(171, 178, 191); padding: 0.5em; border-radius: 5px; white-space: pre-wrap; background: rgb(40, 44, 52); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">yarn add @formily/core
yarn add @formily/react
yarn add @formily/antd </pre>
@formily/core是formily核心庫，formily能力所在之處，因為不依賴具體框架所以就是上文所說的框架無關性從而有了那么多的社區(qū)實現(xiàn)，負責管理表單的狀態(tài)，表單校驗，聯(lián)動等等。
@formily/reactUI橋接庫，使用react的項目必須安裝它
@formily/antd Formily組件庫，注意，這個組件庫是用來給formily使用的，這個庫是按照formily要求所封裝的UI組件庫，即Formily不能直接消費UI組件庫需要按照formily的格式所封裝，也屬于UI組件庫的橋接庫（這里我想過一個問題，為什么Formily不能直接消費框架組件庫呢，因為另一個解決方案 XRender 就可以，看了formily的實現(xiàn)后就明白了 ）。當然了，formily封裝UI組件庫也是很簡單的正如官網那樣，
[圖片上傳失敗...(image-bd4a5e-1665626053087)]
打開看還真是這么簡單，以Input為例，
<pre id="zGDPG" class="wp-block-preformatted hljs language-typescript" style="box-sizing: border-box; margin-top: 0px; overflow: auto; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.25px; margin-bottom: 1rem; display: block; color: rgb(171, 178, 191); padding: 0.5em; border-radius: 5px; white-space: pre-wrap; background: rgb(40, 44, 52); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">import React from 'react'
import { connect, mapProps, mapReadPretty } from '@formily/react'
import { Input as AntdInput } from 'antd'
import { InputProps, TextAreaProps } from 'antd/lib/input'
import { PreviewText } from '../preview-text'
import { LoadingOutlined } from '@ant-design/icons'
type ComposedInput = React.FC<React.PropsWithChildren<InputProps>> & {
TextArea?: React.FC<React.PropsWithChildren<TextAreaProps>>
}
export const Input: ComposedInput = connect(
AntdInput,
mapProps((props, field) => {
return {
...props,
suffix: (
<span>
{field?.['loading'] || field?.['validating'] ? (
<LoadingOutlined />
) : (
props.suffix
)}
</span>
),
}
}),
mapReadPretty(PreviewText.Input)
)
Input.TextArea = connect(AntdInput.TextArea, mapReadPretty(PreviewText.Input))
export default Input</pre>
是不是很簡單，稍后我再下文會寫一個我自己封裝的組件作詳細說明。
官網實例上手實踐
Formily 實踐 自定義組件、自定義表單設計器：https://www.xiaowanghu.com/archives/169
