阅读之前
本文档属于高阶实战文档，已假定你了解了所有必读文档中的全部内容，并了解过界面设计器的一些基本操作。
如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录
概述
平台提供的字段组件（以下简称组件）是通过SPI机制进行查找并最终渲染在页面中。虽然平台内置了众多组件，但无法避免的是，对于业务场景复杂多变的实际情况下，我们无法完全提供所有组件。
面对这样的困境，我们提供了外部注册组件的方式。在之前文章中，我们了解到组件注册后需要应用到页面中，需要配合DSL才能实现。其实，在平台中还提供了一种SAAS化的组件注册方式，配合界面设计器的设计能力，可以将组件在设计器页面中引入，从而更近一步的满足不同的业务场景。
通过界面设计器可以创建自定义组件，并为组件添加对应的元件。
界面设计器可以为元件设计其在指定视图下的属性面板，在页面设计时，可以使用该属性面板为元件设置相关属性。
在界面设计器的设计页面中拖入的组件，将通过SPI机制获取到一个唯一的元件，并渲染在页面中，提供给业务使用。
界面设计器-组件管理
名词解释
- 页面设计：使用界面设计器设计页面的页面。
- 属性面板设计：使用界面设计器设计属性面板的页面。
- 设计页面：页面设计和属性面板设计的统称。
- 组件库：展示在设计页面左侧的全部可拖拽组件。
- 组件：在组件库中可拖拽的最小单元。
- 元件：一个组件中的具体实现，是组件的最小单元。
- 属性面板：展示在设计页面右侧的元件属性。
页面设计
属性面板设计
组件管理入口
进入界面设计器后，可通过上方标签页切换至【组件】管理页面。
创建第一个组件
点击【添加组件】，在弹窗中输入组件名称【文本输入框】后，点击【确定】。
创建第一个元件
点击【组件卡片】或点击【管理元件】按钮进入【元件】管理页面。
点击【添加元件】，可以看到如下【创建元件】弹窗。
表单字段解释
- 元件名称：显示名称，仅在管理页面做展示使用。
- API名称：SPI中的widget属性。
- 支持字段业务类型：SPI中的ttype属性。
- 支持多值：SPI中的multi属性。
- 支持视图类型：SPI中的viewType属性。
- 元件描述：元件功能描述内容，仅在管理页面做展示使用。
填入以下内容，并点击【确定】。
设计元件属性面板
点击【元件卡片】或点击【设计元件属性】按钮进入【属性面板设计】页面。
从【模型】中搜索【标题】，将【标题】和【隐藏标题】拖放至设计区域。如果想实现的相对美观，可以额外添加【分组】组件拖放至设计区域，并修改标题为【基础】，如下图所示。
点击【发布】按钮进行页面的发布。
至此，我们设计了第一个元件属性面板，接下来，我们需要在页面设计中使用这个组件。
在页面中使用【文本输入框】
由于我们之前选择的支持的视图类型是【表单】，因此我们在【表单】页面进行接下来的操作，此处略去创建视图的过程。
从【模型】中将【名称】拖放至设计区域。并通过点击【切换】按钮切换至我们的组件【文本输入框】，并且将标题改为【这是文本输入框组件】查看其展示效果。
属性变化
在组件切换后，属性面板发生了变化，原有属性会根据当前属性面板中现有字段进行【裁剪】，相同属性名称（字段）的值会被保留，其他属性值会被丢弃。
由于我们并没有在当前属性面板添加【宽度】属性，因此原有属性的宽度被丢弃，组件会自动变成默认【宽度】，默认宽度为1。
组件变化
由于我们并没有在【低无一体】中上传对应元件的代码实现，因此展示了默认的【单行文本】组件，目前组件的展示效果不会发生变化。
组件可切换规则
只有【组件】中包含与【当前选中字段】匹配的【元件】，才会将对应【组件】的名称展示在【可切换列表】中。
【当前选中字段】中包含了如下三个属性，这三个属性和【创建元件】时设置的属性一一对应。
（右侧属性面板切换至字段后，可查看当前选中字段的相关元数据信息。）
- 所在视图类型：根据字段在视图中的位置进行推断，当前所在位置为【表单】。当【支持视图类型】包含【表单】时条件成立。
- 字段业务类型：文本。当【支持字段业务类型】包含【文本】时条件成立。
- 是否多值：否。当【支持多值】相同时条件成立。
使用低无一体为组件上传代码实现
进入【组件】管理页面，点击【低无一体】，打开【低无一体】弹窗。
按照步骤，在【生成SDK】后，可以【下载模板工程】。在本地进行npm相关操作后，会在packages/kunlun-plugin目录下生成dist目录。在dist目录中，会有对应的kunlun-sdk.umd.js文件，使用【上传JS文件】进行上传。如果工程中包含了css，使用【上传CSS文件】进行上传。上传完成后点击【确定】进行保存。
PS：在模板工程中，我们提供了最简化的Hello World示例，即使不添加任何代码也可以看到组件的具体效果，为了方便演示，我们暂时不介绍代码实现的相关内容，仅需直接上传对应js文件，看到效果即可。如果遇到相关问题，请点击查看【前端】低无一体部署常见问题。
结语
至此，我们已经完整体验了从【创建组件】到【属性面板设计】再到【使用组件】以及【实现组件】的全部流程。
通过这一流程我们不难发现，【自定义组件】并非仅仅用于【页面设计】，在【属性面板设计】时，我们同样可以使用【自定义组件】来设计【自定义组件】的属性面板。这样便形成了一个完整的设计闭环，使得开发者可以更大程度的发挥自身创造力，开发出符合业务需求的【自定义组件】。
Oinone社区 作者：数式-海波原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/53.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
