@aliretail/react-dynamic-delivery/demo/Page/README.md

动态下发引擎

---
title: 数据格式
order: 50
category: UI
description: 动态下发页面
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
---

## 接口格式：

```
{
  "success": true,
  "result": {
    // 举例描述：页面上需要一个表示姓名的输入框
    // name 就是key，即平时前后端传输约定值key 这就是一个DataItem
    "name": {
        // 类比常见前后端接口中VO中的value值，最后会被收集起来以VO的形式提交给后端
        "value": "",
        // 无需和后端传输的页面展示内容
        "others": {
          // 通用来说对于前端就是组件的props，会传送到组件中，比如这里的组件就是 Input 组件
          // 设置input的最大长度
          "maxLength": 16
        },
        // 表单项自己的属性，比如标题是什么、是否必填等
        "formItemConfig": {
          // 页面上显示的label
          "title": "用户姓名",
          // 是否是必填项
          "required": true
        }
    }
  }
}
```

### dataItem

data 是指页面上和前端对好的**表单项**，无序

#### 数据格式

```typescript
// data中的每一个项
interface DataItem {
  value: any; // 该组件的值, 也是前端后期收集数据转成VO模式提交给后端时候对应的value
  others: Record<string, any>; // others指的是这个组件支持配置的参数， 每个UIType对应的可配置字段都是固定的
  formItemConfig: IRetailFormItemProps & IFormItemDefault; // 表单项自己的属性，比如标题是什么、是否必填等
}
```

others 的相关配置请看 本目录下的「UIType」菜单

#### 通用 formItemConfig 配置：

```typescript
type formItemConfig = IRetailFormItemProps & IFormItemDefault;

interface IRetailFormItemProps {
  // 显示帮助信息 跟在title后面 格式为 $title（$explanation）
  explanation?: string | ReactNode;
  // 是否启用显示帮助信息
  emphasizeExplanation?: boolean;
  showTipsExpand?: boolean;
  // 输入内容后面带的文字
  addonTextAfter?: string;
  // 输入框长度 l-满框 s-半框 number-px string-%
  inputAreaWidth?: 'l' | 's' | number | string;
}

interface IFormItemDefault {
  // 标题
  title?: string;
  // 是否必填
  required?: boolean;
  // 该字段是否可以编辑
  editable?: boolean;
  // 字段是否显示（纯视觉，不影响 value）value还是照样提交
  display?: boolean;
  // 字段是否显示（伴随 value 的显示和隐藏）若设置成false 提交数据时该字段不会被提交
  visible?: boolean;
  // 是否只读 （不推荐使用，好像有问题，建议使用 editable 字段代替，设置之后组件接收到的值是 readOnly字段）
  readOnly?: boolean;
}
```

例子：

```
{
  "data": {
      "others": {
        "isStrictMode": false,
        "mode": "fixed"
      }
  },
  "name": {
      "value": "小明",
      "formItemConfig": {
        // 页面上显示的label
        "title": "用户姓名",
        // 是否是必填项
        "required": true
      }
  },
  "age": {
      "value": 16,
      "formItemConfig": {
        "title": "用户年龄"
      }
  },
  "className": {
    "value": "三年一班",
    "formItemConfig": {
      "title": "班级名"
    }
  }
}
```