新版「自定义组件」能力增强
相比之前版本，新版核心增强的能力：
- 视图模型
组件可以通过「视图模型」暴露变量，官方组件属性或流程入参可消费（调用组件方法动作传参即将支持，敬请期待）。
价值：组件间不再需要通过页面变量通信。组件耦合度低，复用度高。
- 样式配置
仅需声明需要需要使用的样式模块，即可生成样式面板。运行时通过 style 获取样式数据。
价值：样式配置开发成本大幅下降，样式配置交互得到统一。
- 属性配置
支持对象类型，支持数组、对象多级嵌套。数组对象的插槽属性移除，同步移除大纲树节点。联动能力更灵活，支持主动联动，支持数组、对象类型属性整体的显示隐藏联动。属性表单布局更灵活，分组支持嵌套。
小程序和流程表单
基础规范
功能点 | 功能说明 | |
| 新版页面 | 旧版页面 |
目录结构 | 目录结构 . ├── components // 组件目录 │ ├── package.json // 组件包的元信息（必填） │ ├── tsconfig.json // ts 编译配置(可选，如果不使用ts) │ └── yarn.lock // 依赖包版本锁文件（自动生成) │ ├── component1 // 具体某个组件的目录 │ │ ├── index.tsx // 组件视图入口文件（必填） │ │ ├── index.meta.json // 组件的元信息描述，基础信息（必填） │ │ ├── meta.(ts|tsx) // 组件的核心信息描述（必填） │ │ ├── simulator.tsx // 搭建时画布中组件，没有则默认使用index.tsx(可选) │ │ ├── icon.svg // 组件的 icon (可选)， cli创建的时候会默认帮助创建 │ └── component2 │ │ ├── ... 备注：
| 目录结构 . ├── components │ ├── package.json │ ├── tsconfig.json │ ├── yarn.lock │ ├── component1 │ │ ├── index.tsx │ │ ├── index.meta.json │ │ ├── configPanel │ │ │ └── index.ts │ └── component2 │ │ ├── ... |
组件基本信息 | index.meta.json 仅支持这三个属性： { "apiName": "ItemList", // 组件的标识 "label": { // 组件的名字，在组件面板中使用 "zh_CN": "商品列表", "en_US": "Item List" }, "icon": "./assets/icon_table.svg", // 组件 icon url 地址，优先级高于文件夹下的 icon 文件 } 备注： 页面目前不消费 description，但是在低代码-自定义组件列表下仍消费，所以在 ae component create 新建组件时仍会默认包含 description 字段。 | index.meta.json { "apiName": "ItemList", "label": { "zh_CN": "商品列表", "en_US": "Item List" }, "description": { "zh_CN": "商品列表", "en_US": "Item List" }, "icon": "./assets/icon_table.svg", "targets": { "scenes": [ "Page" ] } } |
视图模型（组件的数据和方法） | model.ts 名词解释：model，特指组件的视图模型。组件的视图模型可以注册到全局，供其他组件消费其数据和方法。 新版页面的组件视图模型，完全符合 MVVM 架构的视图模型的定义。 250px|700px|reset 250px|700px|reset 左图为调用组件方法；右图为消费组件数据。 model.ts 非必选，仅以下场景需要： 组件需要提供属性中没有的响应式数据、或需要提供方法。 详情参考下方段落：《组件方法的暴露》 | 不具备此能力 |
组件元数据描述 | ➕ meta.ts 在新版页面中，组件的属性、样式、事件、数据、方法、属性面板、设计器的体验增强，全部统一到 meta.ts 中来描述 interface IMeta { // 组件视图所需要的信息 ➕props: Record<string, MetaPropType>, // 组件属性的搭建态配置 ➕data?: Record<string, IType> // 组件状态数据定义 ➕methods?: Record<string, IType> // 组件暴露方法定义 ➕designerEnhance?: IDesignEnhanceSettings // 设计器定制配置 } | 没有此文件。configPanel/index.ts 会在后面“属性面板”里对比 |
属性面板和 Setter
