Formily官網(wǎng)：https://formilyjs.org/
源碼地址：https://github.com/alibaba/formily
知乎作者介紹：https://zhuanlan.zhihu.com/p/364750033
本文信息都來(lái)自上述官方文檔和自己的實(shí)踐總結(jié)，因?yàn)楸救舜_切的說(shuō)是一名后端，對(duì)于前端是對(duì)文檔嚴(yán)重依賴(lài)的，當(dāng)然逼急了也會(huì)去看源碼，所以難免會(huì)出現(xiàn)前端專(zhuān)業(yè)缺失的問(wèn)題，如有錯(cuò)誤請(qǐng)指點(diǎn)。
簡(jiǎn)介
Formily是一個(gè)與框架無(wú)關(guān)的表單解決方案，使用了JSON Schema，多端適配,目前社區(qū)已經(jīng)有React、Vue方案，更是支持了眾多流行前端框架如ant、next、element、element-plus、antdv、vant、semi、tdesign-react等。按照作者的說(shuō)法是：定位是 面向復(fù)雜場(chǎng)景的表單解決方案， 面向企業(yè)級(jí)表單的專(zhuān)業(yè)解決方案，有如下特色：
- 業(yè)內(nèi)領(lǐng)先的思想
- 豐富的使用場(chǎng)景
- 極致的細(xì)節(jié)優(yōu)化
- 完善的文檔周邊
Formily前后有兩版本，前后不兼容，但是我沒(méi)趕上1.0，直接享受2.0，下面是我自己的使用實(shí)踐。
實(shí)踐總結(jié)
因?yàn)楸救耸呛蠖耍圆捎昧薃nt recat方案，下文全是如此。
快速開(kāi)始
這里我按照自己的實(shí)踐，使用ant pro 為項(xiàng)目工程模板。
<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>
基礎(chǔ)工作準(zhǔn)備完畢，開(kāi)始引用formily組件。當(dāng)然是按照官方文檔走了，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核心庫(kù)，formily能力所在之處，因?yàn)椴灰蕾?lài)具體框架所以就是上文所說(shuō)的框架無(wú)關(guān)性從而有了那么多的社區(qū)實(shí)現(xiàn)，負(fù)責(zé)管理表單的狀態(tài)，表單校驗(yàn)，聯(lián)動(dòng)等等。
@formily/reactUI橋接庫(kù)，使用react的項(xiàng)目必須安裝它
@formily/antd Formily組件庫(kù)，注意，這個(gè)組件庫(kù)是用來(lái)給formily使用的，這個(gè)庫(kù)是按照f(shuō)ormily要求所封裝的UI組件庫(kù)，即Formily不能直接消費(fèi)UI組件庫(kù)需要按照f(shuō)ormily的格式所封裝，也屬于UI組件庫(kù)的橋接庫(kù)（這里我想過(guò)一個(gè)問(wèn)題，為什么Formily不能直接消費(fèi)框架組件庫(kù)呢，因?yàn)榱硪粋€(gè)解決方案 XRender 就可以，看了formily的實(shí)現(xiàn)后就明白了 ）。當(dāng)然了，formily封裝UI組件庫(kù)也是很簡(jiǎn)單的正如官網(wǎng)那樣，
[圖片上傳失敗...(image-bd4a5e-1665626053087)]
打開(kāi)看還真是這么簡(jiǎn)單，以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>
是不是很簡(jiǎn)單，稍后我再下文會(huì)寫(xiě)一個(gè)我自己封裝的組件作詳細(xì)說(shuō)明。
官網(wǎng)實(shí)例上手實(shí)踐
Formily 實(shí)踐 自定義組件、自定義表單設(shè)計(jì)器：https://www.xiaowanghu.com/archives/169
