通过低代码可视化方式搭建可跨页面复用的组件,该组件内部可包含变量、逻辑流、JS方法等构成复杂的组件逻辑。本文介绍如何新建、编排、使用和删除组件等操作。
前提条件
当前应用为轻应用。
当前应用版本处于开发状态,尚未发布。
当前账号具有应用开发权限。
新建组件
在应用列表页面,单击目标轻应用名称。
在目标轻应用导航栏中,选择 。
在组件编排页面,单击新建组件。
在新建组件面板,完成组件名称、组件编码和描述(非必填)设置后,单击创建。
说明组件编码为英文字母和数字的组合,以字母开头,且项目内唯一,创建后不支持修改。编码长度不得超过80个字符。
编排组件
在组件编排页面,单击目标组件或其右侧操作列下的编排组件。
如果您在创建轻应用时应用场景配置为PC端+H5端,您可以单击或图标切换端侧。
说明本文以仅应用场景配置为PC端为例说明如何编排组件。
在新打开的编排组件画布,构建业务组件。单击画布左侧的图标,在标准组件或自定义组件页签下,您可以拖拽目标组件至画布右侧然后构建业务组件。
业务组件是根据场景需求,将多个基本组件按照一定顺序、样式或逻辑组合成为一个可在多处重复利用的组件。在后续开发过程中如果遇到类似需求,您可以直接使用该业务组件,而不需要从基本组件重新开始构建。
配置组件属性。单击组件编排画布右上角的组件定义,您可以参考以下步骤配置组件属性。
在属性页签下的属性定义区域,您可以通过单击添加一项添加组件属性。
例如,下图添加了title,intro,image三个属性,您可以单击目标属性名称左侧的图标编辑属性类型、设置器、支持动态配置和默认值等。
业务组件支持属性自定义操作,丰富了组件的属性,您可以通过配置的属性来定制符合业务需求的组件。
在属性页签下的事件定义区域,您可以通过单击添加一项添加事件类型的属性。
单击属性名称左侧的图标编辑事件标题和事件入参等。
业务组件在触发某一事件时会执行该属性。
绑定属性。
绑定基础属性。将步骤3中设置的属性绑定到业务组件内部需要外部控制的基础组件的属性上。例如,将业务组件的title属性绑定到其内部卡片组件的标题属性上。
单击卡片组件标题属性右侧的图标,在绑定变量对话框中,选择
,完成后单击确定。您后续如果再配置更新该业务组件的title属性,则该卡片组件的标题属性也会同步更新。绑定事件属性(您需进入到逻辑流面板绑定事件属性)。
单击目标基础组件的事件页签,选择
。在onClick点击时对话框中,单击逻辑编排,页面会自动跳转至逻辑流编排页面。
在逻辑流编排画布右侧的流程图中单击图标,在弹出的编排节点框中,选择执行组件事件。
在执行组件事件面板,选择步骤3中已配置的目标业务组件事件,且完成入参相关配置项设置后,单击保存。
上图中被绑定的组件在触发点击动作时,就会执行该事件属性。
完成业务组件构建后,单击组件编排页面右上角的保存。
使用组件
在页面编排页面,单击目标页面名称或目标页面名称右侧操作列下的编排页面。
在页面编排画布中,单击画布左侧的图标,在区块面板的低代码组件页签下,您可以拖拽目标业务组件至画布右侧然后进行页面编排。
具体操作,请参见可视化编排页面。
根据具体场景的需要,配置业务组件的属性,通过给每一个属性传入具体的值,内部接收到后会将值传入到被绑定的具体属性上。
编辑组件属性
在组件编排页面,单击目标组件右侧操作列下的编辑属性。
在编辑组件面板,按需完成相关设置后,单击保存。
删除组件
在组件编排页面,单击目标组件右侧操作列下的删除。
重要删除组件****,会导致调用了该组件的页面在运行时无法正常渲染,请您谨慎操作。
在二次确认对话框中,单击删除。