scalable-form-antd-mobile

（JSON Schema）和 ant-design-mobile 的前端表单渲染引擎sdk

A React component for rendering web forms in mobile browser from JSON schema using ant-design-mobile

查看文档 https://scalable-form-platform.github.io/#/

✨ 特性/features

• 🛳 企业级解决方案和高稳定性
• 📦 开箱即用的动态表单渲染sdk
• ⚙️ 完整的开发工具支持
• 🗄 服务端支持和用于管理表单的可独立部署站点

• 🛳 Enterprise-class Solutions for web form
• 📦 A set of high-quality react components for rendering web forms from JSON schema out of the box
• ⚙️ Whole package of development tools
• 🗄 Server support and independently deployable sites

• 更多特性请查看文档 https://scalable-form-platform.github.io/#/

快速开始

安装

使用 npm 安装

1npm i scalable-form-antd-mobile -S

如果你的网络环境不佳，推荐使用 cnpm。

引入使用

1import ScalableForm from "scalable-form-antd-mobile";

注意, scalable-form-antd组件外部依赖react、react-dom、prop-types、antd-mobile、scalable-form-core，这几个库需要在package.json或CDN中自行引入

注意，关于与antd的样式的适配：1. 组件中默认build出来的index.js包中没有打包antd-mobile的样式，需要自行加载对应的样式文件；2. 对于使用babel-plugin-import按需加载antd-mobile的工程，组件中提供build出来的index-with-antd-bundle.js，这个包中使用babel-plugin-import打包了组件中需要使用的antd-mobile样式

Hello World

在第一个例子中，我们需要渲染一个表单，支持用户填写name，并自行选择所在城市。 注意，scalable-form是一套基于表单数据协议（JSONSchema）的动态表单解决方案。所以我们需要按照react-jsonschema-form的规则书写一下表单规则描述（schema），并且将schema作为scalable-form的props转入组件。

写这个schema会很繁琐，不过放心，scalable-form的一大创新点就在于支持使用可视化的编排组件editor编排产生这个schema，您可以访问这里，查看editor的使用方法

1import React from "react";
2import ScalableForm from "scalable-form-antd-mobile";
3import "./styles.css";
4
5export default class FormExample extends React.PureComponent {
6  constructor(props) {
7    super(props);
8    this.state = {
9      formData: {
10        name: "",
11        city: "hangzhou"
12      }
13    };
14    this.jsonSchema = {
15      title: "Scalable Form render sdk with Ant Design components",
16      description: "",
17      type: "object",
18      required: ["name"],
19      properties: {
20        name: {
21          type: "string",
22          title: "名称",
23          default: "",
24          maxLength: 15
25        },
26        city: {
27          type: "string",
28          title: "请选择城市",
29          default: "",
30          enum: ["beijing", "shanghai", "hangzhou"],
31          enumNames: ["北京", "上海", "杭州"]
32        }
33      }
34    };
35    this.uiSchema = {
36      name: {
37        "ui:help": '关于"名称"字段的帮助说明',
38        "ui:options": {
39          placeholder: "请输入名称"
40        }
41      },
42      city: {
43        "ui:widget": "radio",
44        "ui:options": {
45          vertical: false,
46          validate: [
47            {
48              type: "empty",
49              message: "请选择"
50            }
51          ]
52        }
53      }
54    };
55  }
56
57  handleChanged = (formData, bizData) => {
58    console.log("ScalableForm Changed!", formData);
59    console.log("ScalableForm Changed!", bizData);
60    this.setState({
61      formData: { ...formData }
62    });
63  };
64
65  handleSubmit = (formData, bizData) => {
66    console.log("ScalableForm Submitted!", formData);
67    console.log("ScalableForm Submitted!", bizData);
68  };
69
70  render() {
71    return (
72      <div className="scalable-form-demo-element">
73        <ScalableForm
74          jsonSchema={this.jsonSchema} //jsonSchema用于表述表单字段信息
75          uiSchema={this.uiSchema} //uiSchema用于控制表单字段的UI组件
76          formData={this.state.formData} //formData是表单中填写的字段数据
77          onChange={this.handleChanged}
78          onSubmit={this.handleSubmit}
79        />
80      </div>
81    );
82  }
83}

查看更多文档

您可以访问 查看更多API文档

📦 包管理/Packages

我们使用Lerna来进行包管理，所以本仓库会发布多个包到npm，包括：

This repository is a monorepo that we manage using Lerna. That means that we actually publish several packages to npm from the same codebase, including:

Package	NPMVersions	Documents	Description
scalable-form-antd			基于react-jsonschema-form，结合ant-design的动态表单渲染sdk
scalable-form-antd-mobile			基于react-jsonschema-form，结合ant-design-mobile的动态表单渲染sdk，适用于移动端的渲染sdk
scalable-form-editor			表单可视化编辑器，可视化编排表单，产出scalable-form-antd和scalable-form-antd-mobile可用的schema
scalable-form-server			服务端sdk，用户可以基于scalable-form-server保存表单配置。服务端sdk提供一个可用的表单站点，提供表单编排，表单管理，表单投放，数据回流分析的能力。