Formily教程 | formily是中後臺複雜場景的表單解決方案

前言

formily 不是一個簡單的前端輪子。Formily 是一個由阿里巴巴集團多 BU 共建的面向中後臺複雜場景的表單解決方案，它也是一個表單框架。它的前身是供應鏈平臺在 2019 年初對外開源的 UForm 解決方案，UForm 的前身又是在供應鏈平臺內部自研的某個表單框架。總體來看，Formily 是一個經過了漫長時間所磨鍊，沉澱出來的表單解決方案。

它解決什麼問題？

如果你們的後臺有超級多的表單，那麼選它沒得問題。中臺我覺得是一個複雜的概念，如果你們公司一直說這個事兒，那麼這個formily可以是你的技術池（備胎）。它有複雜的表單聯動，表單校驗，滿足大部分表單的需求，平時使用的都是非常簡單的表單。一份JSON就可以實現複雜的表單，開箱即用。

開箱即用的栗子

說實話，這玩意唯一的缺點不是文檔寫的不好，而是不管用VUE人的死活。除了@formily/vue裏面的栗子用了VUE，其他的所有栗子都是React。一個表單提交，我整整花了兩個小時（是我菜了），下面我會重點提出來的。npm啥的我就不說了。官方文檔都有
注意: 這裏的技術棧是 VUE + Formily + element UI

// form.vue 
<template>
  <ElForm class="flex flex-column" label-width="180px">
    <FormProvider :form="form">
      <SchemaField
        :schema="schema"
      />
      <FormConsumer>
      <!-- 非常重要！！！！ FormConsumer必須是這個位置 才能表單消費 -->
      <template #default="{ form }">
          <button @click='form.submit'></button> //官方文檔根本不管VUE的死活在這裏！！！
      </template>
    </FormConsumer>
    </FormProvider>
  </ElForm>
</template>

<script>
import { createForm, onFormValuesChange, onFormSubmit } from '@formily/core' //必須要引入
import { FormProvider, createSchemaField, FormConsumer } from '@formily/vue' //vue
import { Input } from 'element' //初次上手建議 就直接引用element UI 組件就可以了

const { SchemaField } = createSchemaField({
  Input
}) //代表你需要這個生成器給你生成什麼樣的表單組件

export default {
    components: { FormProvider, SchemaField, FormConsumer },
    data() {
        return {
            form: createForm({effects: this.useEffects}), //生成表單的方法，傳入監聽的參數
            schema: null
        }
    },
    mounted() {
        this.schema = {
            type: 'object',
            properties: {
              name: {
                type: 'string',
                title: '名稱',
                required: true,
                'x-component': 'Input'
              }
            }
        }
    },
    methods: {
        useEffects() {
          onFormValuesChange(form => { //監聽數據變化了
            console.log(form) //這個form 很重要 這裏你才能夠拿到表單的值
          })
          onFormSubmit(form => { //監聽表單提交
            console.log(form)
          })
        },
    }
}

避雷指南

我非常理解一個坑對於做這個功能的人，有多麼令人崩潰。官方文檔的栗子，要麼沒有告訴你怎麼提交的，要麼就是拿着@formily/nextSubmit，@formily/next 是基於 Fusion Design 封裝的針對表單場景專業級(Professional)組件庫。但我們不是有了element UI 組件了嗎？大可不必

總結

這是一個非常入門級的源碼，而且我的業務纔剛剛開始做，上百個表單等我實現，應該還有下一個避雷指南。而且對於element 二次封裝也很可以。複雜的表單有複雜的UI，不是一個element 單一組件就可以漂亮實現。下一期介紹formily 的一些概念，雖然我也是臨時抱佛腳，週末學習了formily,大家一起探討。不知道掘金有沒有問題答疑~我是真的沒有看到有很多formily文章輸出