zlib-formily-materials 中文文档教程

Question

Formily Materials

formily materials 是 lowcode engine 的 formily antd 资产包，用于表单搭建, 配置项与 formily 表单设计器基本相同。如果你对 formily 完全陌生，可以在此对 formily 进行快速学习。

部分代码直接来自 designable，感谢 Formily 作者

开发

1. 在根目录执行 yarn start
2. 进入 formily-materials 目录，yarn lowcode:dev
3. 配置 XSwitch 代理
4. 访问 http://localhost:8000

XSwitch 代理如下

{
  "proxy": [
    [
      "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/view.js",
      "http://localhost:5551/view.js"
    ],
    [
      "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/meta.js",
      "http://localhost:5551/meta.js"
    ]
  ]
}

how to use

1. 安装依赖以及注册插件

// formily相关依赖
npm install @formily/core @formily/react antd moment @formily/antd
// plugin
npm install @seada/antd-plugins

import { PluginFormily } from '@seada/antd-plugins';
import { plugins } from '@alilc/lowcode-engine';

async function registerFormilyPlugins() {
  await plugins.register(PluginFormily);
}

registerFormilyPlugins();

2. assets.json 中添加资产包

{
  "packages": [
    {
      "package": "@seada/formily-materials",
      "version": "0.1.1",
      "library": "SeadaFormilyMaterials",
      "urls": [
        "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/view.js",
        "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/view.css"
      ],
      "editUrls": [
        "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/view.js",
        "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/view.css"
      ]
    }
  ],
  "components": [
    {
      "exportName": "SeadaFormilyMaterialsMeta",
      "npm": {
        "package": "@seada/formily-materials",
        "version": "0.1.1"
      },
      "url": "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/meta.js",
      "urls": {
        "default": "https://unpkg.com/@seada/formily-materials@latest/build/lowcode/meta.js"
      }
    }
  ]
}

资产包可以自行构建并上传至你的 cdn，使用时替换链接即可。

formily expand

为了 lowcode engine 以及 formily 的无缝结合，我们在 formily 中扩展了一些新特性，辅助我们的搭建工作

formRef

为了在 lowcode engine 的页面 js 中使用 formily，我们为 formily 的 form 增加了 ref 属性，假设我们设置了 formily form 组件的 ref 属性为formily_name，那么我们可以在 js 面板中通过this.$('formily_name').form获取该表单的form 实例。因此，我们可以在 js 面板中使用 formily 的 form 实例进行表单验证，获取/设置表单值。

$this

为了在 formily 中获取 lowcode engine page 实例的数据，我们在 formily 中注入了$this变量，$this的使用与 formily 中的$self、$deps等使用方法相同。$this指向 page 实例，我们可以在 formily 组件中使用$this.state获取页面的 state，$this.setState触发数据更新等任意操作

VarInjectContainer 组件

为了使普通的 lowcode engine 组件获取一些 formily 组件运行时才会产生的数据，例如 ArrayCards 组件中子项的$record，我们新增了VarInjectContainer组件。VarInjectContainer组件的子元素都可以通过 this.vars.$record，this.vars.$index等获取 formily 运行时数据。

F&Q

A: setter 样式问题？

Q: 入口文件import 'antd/dist/antd.css'试试

A: formily 相关组件没有接入 lowcode engine 事件？

Q: 直接使用 formily 响应器配置解决

Contributors

因无法保留开源前的提交记录，这里列出开源前的贡献者：

@icecxh @twinkle77 @LysKing @haloworld007