formily 简介

想必项目中偶尔会遇到动态表单的情况吧，阿里开源了一款比较好用的动态表单工具 Formily 。因为业务需要,一码多端也是对他进行了支持。

Formily 比较好用的特性主要有以下几点：

• 支持多端。组件还是走了 pc 的组件，但是布局做了适配
• 支持表单 no code 配置生成
• 支持根据 schema 渲染表单 （这个是比较好用的功能）

详细的动态表单方案请参考 Formily

formily 使用

引入 formily

安装

菜鸟统一使用的 fusion 的 next 组件库

	npm install --save @formily/core @formily/react @alifd/next moment @formily/next

使用

jsonschema 使用请参考 登录注册 DEMO 的 schema 实现源码

引入设计器

如果你的项目需要引入 formily 的设计器，请参考 https://formilyjs.org/zh-CN/guide/form-builder

一码多端使用

formily 提供了基于 fusion/next 的表单组件包@formily/next，考虑到无线的扩展性，针对@formily/next 开发了一套无线组件包 formily-meet-react-oc

到上面“引入 formily”操作完后，你的项目已经可以根据 schema 渲染表单了，同时也支持切换 pc 和无线显示，但是默认 formily 切换的无线，实际是 pc 的组件，交互并非纯无线的交互。为了保证搭建的 pc 表单能够转换成纯无线的表单，一码多端对此做了支持，接入如下：

安装@formily/next 对应的无线包

    npm install formily-meet-react-oc --save

build.json 配置

 "targets": ["web", "web-mobile"],
 "cone": {
    "oneCode": true,
    "pcToMobile": {
      "@alifd/next/lib/upload": "@alifd/next/lib/upload",
      "@formily/next": "formily-meet-react-oc"// 增加组件映射规则，无线使用formily-meet-react-oc替换
    },
  },
...

至此，formily 表单可以 pc 无线互转。

备注

目前无线组件库还还乜有经过完整的测试，还需要实践中迭代优化。

效果截图

搭建

pc

mobile