CN117806755A - 组件的处理方法、装置、存储介质及电子装置 - Google Patents
组件的处理方法、装置、存储介质及电子装置 Download PDFInfo
- Publication number
- CN117806755A CN117806755A CN202311806326.9A CN202311806326A CN117806755A CN 117806755 A CN117806755 A CN 117806755A CN 202311806326 A CN202311806326 A CN 202311806326A CN 117806755 A CN117806755 A CN 117806755A
- Authority
- CN
- China
- Prior art keywords
- target
- component
- configuration information
- configuration
- displaying
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 48
- 238000012545 processing Methods 0.000 title claims abstract description 40
- 238000003860 storage Methods 0.000 title claims abstract description 16
- 230000000694 effects Effects 0.000 claims abstract description 82
- 238000009877 rendering Methods 0.000 claims abstract description 75
- 230000004044 response Effects 0.000 claims abstract description 60
- 230000002452 interceptive effect Effects 0.000 claims abstract description 50
- 230000009471 action Effects 0.000 claims description 150
- 230000001960 triggered effect Effects 0.000 claims description 24
- 230000003993 interaction Effects 0.000 claims description 22
- 238000004590 computer program Methods 0.000 claims description 16
- 238000003672 processing method Methods 0.000 abstract description 11
- 230000018109 developmental process Effects 0.000 description 34
- 238000011161 development Methods 0.000 description 27
- 230000000875 corresponding effect Effects 0.000 description 16
- 230000006870 function Effects 0.000 description 13
- 239000000243 solution Substances 0.000 description 10
- 230000000007 visual effect Effects 0.000 description 10
- 238000005516 engineering process Methods 0.000 description 9
- 238000004891 communication Methods 0.000 description 8
- 230000001276 controlling effect Effects 0.000 description 8
- 238000010586 diagram Methods 0.000 description 8
- 230000008859 change Effects 0.000 description 7
- 230000005540 biological transmission Effects 0.000 description 6
- 230000009466 transformation Effects 0.000 description 6
- 230000008569 process Effects 0.000 description 4
- 238000013473 artificial intelligence Methods 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 3
- 230000008846 dynamic interplay Effects 0.000 description 3
- 230000000712 assembly Effects 0.000 description 2
- 238000000429 assembly Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 238000002347 injection Methods 0.000 description 2
- 239000007924 injection Substances 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000003825 pressing Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 230000002860 competitive effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013524 data verification Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 230000005489 elastic deformation Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000004927 fusion Effects 0.000 description 1
- 230000014509 gene expression Effects 0.000 description 1
- 230000000670 limiting effect Effects 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000003058 natural language processing Methods 0.000 description 1
- 230000036961 partial effect Effects 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例提供了一种组件的处理方法和装置、存储介质及电子设备，该方法包括：显示待使用的组件集合，响应于对目标组件执行的第一交互操作，在目标区域显示目标组件，并显示与目标组件关联的初始配置界面，响应于在初始配置界面执行的第二交互操作，为目标组件设置目标配置信息，并在目标区域显示目标组件的目标渲染效果。通过本申请，解决了由于组件的处理流程过于复杂，导致组件的处理效率偏低的技术问题。
Description
技术领域
本申请实施例涉及计算机领域，具体而言，涉及一种组件的处理方法、装置、存储介质及电子装置。
背景技术
目前，相关技术中往往采用脚本注入的方式，通过特定执行工具实现应用页面的搭建，也就是说，用户需要预先录入脚本代码，将脚本代码转化为功能函数，根据该功能函数在应用开发页面处理组件，这种组件的处理方法执行时间过长，且流程复杂，导致组件的处理效率偏低。
针对上述的问题，目前尚未提出有效的解决方案。
发明内容
本申请实施例提供了一种组件的处理方法、装置、存储介质及电子装置，以至少解决由于组件的处理流程过于复杂，导致组件的处理效率偏低的问题。
根据本申请的一个方面，提供了一种组件的处理方法，包括：显示待使用的组件集合；响应于对目标组件执行的第一交互操作，在目标区域显示所述目标组件，并显示与所述目标组件关联的初始配置界面，其中，所述组件集合包括所述目标组件，所述目标区域用于显示所述目标组件依据配置信息产生的渲染效果，所述初始配置界面用于获取所述配置信息；响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果，其中，所述目标渲染效果由所述目标配置信息确定，所述目标配置信息包括为所述目标组件设置的关联数据源和/或关联组件。
根据本申请的另一个方面，提供了一种组件的处理装置，包括：第一显示模块，用于显示待使用的组件集合；第二显示模块，用于响应于对目标组件执行的第一交互操作，在目标区域显示所述目标组件，并显示与所述目标组件关联的初始配置界面，其中，所述组件集合包括所述目标组件，所述目标区域用于显示所述目标组件依据配置信息产生的渲染效果，所述初始配置界面用于获取所述配置信息；设置模块，用于响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果，其中，所述目标渲染效果由所述目标配置信息确定，所述目标配置信息包括为所述目标组件设置的关联数据源和/或关联组件。
可选地，所述装置用于通过如下方式响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果：响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息；在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置数据源参数配置，其中，所述数据源参数配置用于表示所述目标组件与所述关联数据源的数据交互方式；根据所述数据源参数配置更新所述目标区域中的所述目标组件，并在所述目标区域显示所述目标组件的目标渲染效果。
可选地，所述装置用于通过如下方式在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置数据源参数配置：在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置输出参数配置，其中，所述输出参数配置表示所述目标组件用于从所述关联数据源获取数据并进行显示；在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置输入参数配置，其中，所述输入参数配置表示所述目标组件用于向所述关联数据源输入数据。
可选地，所述装置用于通过如下方式响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果：响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息；在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置动作配置，其中，所述动作配置用于表示所述目标组件与所述关联组件的联动方式；根据所述动作配置更新所述目标区域中的所述目标组件，并在所述目标区域显示所述目标组件的目标渲染效果，其中，所述目标渲染效果包括所述关联组件。
可选地，所述装置用于通过如下方式在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置动作配置，包括以下至少之一：在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置点击动作配置，其中，所述点击动作配置表示响应于对所述目标组件执行点击动作，触发对所述关联组件执行所述点击动作；在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置手势动作配置，其中，所述手势动作配置表示响应于对所述目标组件执行手势动作，触发对所述关联组件执行所述手势动作；在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置拖拽动作配置，其中，所述拖拽动作配置表示响应于对所述目标组件执行拖拽动作，触发对所述关联组件执行所述拖拽动作。
可选地，所述装置还用于：在第一区域显示所述组件集合；响应于所述第一交互操作，在所述目标区域显示所述目标组件，并在第二区域显示所述初始配置界面，其中，所述第一区域、所述第二区域与所述目标区域均互相独立，所述目标区域显示有第一组件和第二组件，所述第一组件预先设置有第一配置信息，所述第二组件预先设置有第二配置信息，所述第一配置信息用于指示所述第一组件用于向所述目标数据源输入数据，所述第二配置信息用于指示所述第二组件用于从目标数据源获取数据并进行显示；响应于第三交互操作，将所述目标组件的关联组件设置为所述第二组件，所述目标组件和所述第二组件的联动触发动作设置为目标动作；在所述目标区域显示所述目标渲染效果，其中，所述目标渲染结果包括在所述第一组件被触发时，向所述目标数据源输入数据，在所述目标组件被所述目标动作触发时，通过所述第二组件显示所述目标数据源中的数据。
可选地，所述装置还用于：获取派发器和存储器，其中，所述派发器用于负责组件之间联动时的动作路由转发，所述存储器用于负责维护组件实例；响应于所述第一交互操作，在所述存储器初始化与所述目标组件对应的目标组件实例，其中，所述目标组件实例用于在所述目标区域显示与所述目标组件对应的渲染效果；响应于所述第二交互操作，将所述目标配置信息更新至所述存储器，并控制所述派发器响应所述目标配置信息显示所述目标渲染效果；在所述目标配置信息指示所述目标组件设置有所述关联组件的情况下，响应于为所述目标组件实例配置的关联动作，控制所述派发器根据所述目标配置信息从所述存储器中查找所述关联组件的关联组件实例，并控制所述关联组件实例执行所述关联动作。
根据本申请的又一个实施例，还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。
根据本申请的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。
在本申请实施例中，通过显示待使用的组件集合，响应于对目标组件执行的第一交互操作，在目标区域显示目标组件，并显示与目标组件关联的初始配置界面，其中，组件集合包括目标组件，目标区域用于显示目标组件依据配置信息产生的渲染效果，初始配置界面用于获取配置信息，响应于在初始配置界面执行的第二交互操作，为目标组件设置目标配置信息，并在目标区域显示目标组件的目标渲染效果，其中，目标渲染效果由目标配置信息确定，目标配置信息包括为目标组件设置的关联数据源和/或关联组件，简化组件的使用和配置过程，达到了提高组件开发效率的技术效果，进而解决了组件的处理效率偏低的技术问题。
附图说明
图1是根据本申请实施例的一种组件的处理方法的移动终端的硬件结构框图；
图2是根据本申请实施例的一种组件的处理方法的流程图；
图3是根据本申请实施例的一种组件的处理方法的流程示意图；
图4是根据本申请实施例的又一种组件的处理方法的流程示意图；
图5是根据本申请实施例的又一种组件的处理方法的流程示意图；
图6是根据本申请实施例的又一种组件的处理方法的流程示意图；
图7是根据本申请实施例的一种组件的处理装置的结构框图。
具体实施方式
下文中将参考附图并结合实施例来详细说明本申请的实施例。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。
首先，在对本申请实施例进行描述的过程中出现的部分名词或者术语适用于如下解释：
低代码：一种软件开发方法，通过使用图形化界面和少量的编码，快速构建应用程序，提供了一种易于使用的开发环境，可以减少开发过程中的编码工作量，提高开发效率，低代码开发平台通常包含了可视化的工具和预先定义好的组件，开发者只需通过拖拽和配置这些组件，就能快速搭建应用程序的界面和逻辑。低代码开发还提供了自动生成代码、自动化测试和部署等功能，简化了整个开发周期，适用于快速开发简单的业务应用，减少了对专业开发人员的依赖，降低了开发成本和风险。
组件：独立且可复用的模块，用于构建软件系统。组件具有自己的接口和功能，可以与其他组件交互并共同完成特定的任务。
视图：是一个组件呈现给用户可见的界面显示，通过超文本标记语言原生实现或在elementUI(UI组件库)等开源库基础上二次封装实现，可以绑定属性和样式变量及事件响应方法，可被解析渲染并能接收指令以实现动态的交互。
属性：一个组件的参数配置项，除了组件名称、类型、描述等基本属性外，还包括数据源和入参、出参变量绑定设置项，使用时可根据实际配置具体值。
样式：组件视图显示时的样式控制，一般包括宽度、高度、内外边距、边框设置、背景以及文字大小、颜色等，可根据实际配置具体值。
动作：用于查询或改变组件内部状态的方法，可响应视图的事件调用，并对外提供通信方法，实现组件间联动。
硬编码：在程序设计中，将某些数据、常量或变量直接赋值给另一个变量，或者将它们直接写入代码中，使得数据与代码紧密耦合在一起，不易于维护和修改。
本申请实施例中所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。以运行在移动终端上为例，图1是本申请实施例的一种组件的处理方法的移动终端的硬件结构框图。如图1所示，移动终端可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)和用于存储数据的存储器104，其中，上述移动终端还可以包括用于通信功能的传输设备106以及终端设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述移动终端的结构造成限定。例如，移动终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。
存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本申请实施例中的组件的处理方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至移动终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括移动终端的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。
可选地，在本实施例中，上述组件的处理方法还可以通过服务器实现，或由终端设备和服务器共同实现。
上述仅是一种示例，本实施例不做具体的限定。
可选地，作为一种可选的实施方式，图2是根据本申请实施例的一种组件的处理方法的流程图，如图2所示，上述组件的处理方法包括：
S202，显示待使用的组件集合；
可选地，在本实施例中，上述组件集合可以包括但不限于用户界面组件、业务逻辑组件、数据处理组件、数据库组件、网络通信组件、硬件控制组件、人工智能组件、安全组件、云计算组件、消息处理组件等。
具体而言，用户界面组件负责展示和接收用户输入，例如按钮、文本框、菜单、对话框等；业务逻辑组件负责处理应用程序的核心功能，例如数据验证、计算、数据存储等；数据处理组件负责处理和转换数据，例如数据过滤、排序、聚合等；数据库组件负责与数据库进行交互，例如查询、插入、更新、删除等；网络通信组件负责处理网络通信，例如发送和接收数据包、处理协议等；硬件控制组件负责控制和监控硬件设备，例如传感器、电机、显示屏等；人工智能组件负责处理和实现人工智能算法，例如机器学习、自然语言处理等；安全组件负责处理应用程序的安全性，例如身份验证、访问控制、加密等；云计算组件负责与云平台进行交互，例如部署、监控、调度等；消息处理组件：这些组件负责处理和发送消息，例如邮件、短信、即时通讯等。
其中，云技术(Cloud technology)是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。
云计算(cloud computing)指IT基础设施的交付和使用模式，指通过网络以按需、易扩展的方式获得所需资源；广义云计算指服务的交付和使用模式，指通过网络以按需、易扩展的方式获得所需服务。这种服务可以是IT和软件、互联网相关，也可是其他服务。云计算是网格计算(Grid Computing)、分布式计算(DistributedComputing)、并行计算(Parallel Computing)、效用计算(Utility Computing)、网络存储(Network StorageTechnologies)、虚拟化(Virtualization)、负载均衡(Load Balance)等传统计算机和网络技术发展融合的产物。
随着互联网、实时数据流、连接设备多样化的发展，以及搜索服务、社会网络、移动商务和开放协作等需求的推动，云计算迅速发展起来。不同于以往的并行分布式计算，云计算的产生从理念上将推动整个互联网模式、企业管理模式发生革命性的变革。
需要说明的是，上述组件集合可以包括多个组件，这多个组件可以相同，也可以不同，或者上述组件集合只有一个组件，本申请对组件集合所包括的组件的数量不做具体限定。
S204，响应于对目标组件执行的第一交互操作，在目标区域显示目标组件，并显示与目标组件关联的初始配置界面，其中，组件集合包括目标组件，目标区域用于显示目标组件依据配置信息产生的渲染效果，初始配置界面用于获取配置信息；
可选地，在本实施例中，上述目标组件可以包括但不限于布局类，基础类，表单类，高级类组件，其中，布局类可以包括但不限于布局容器、选项卡、折叠面板等；基础类可以包括但不限于按钮、文本、图片、标签等；表单类可以包括但不限于输入框、选择框、日期选择等；高级类组件可以包括但不限于电子表格、视频播放、内嵌网页等，目标组件还可以是内部嵌套了其他组件的组件，例如，目标组件是一个输入框，在该输入框内还存在一个按钮，那么将这个按钮视为目标组件的一部分，也就是说，目标组件即为一个内部存在按钮的输入框，该目标组件的配置信息包括按钮配置信息，输入框配置信息。
需要说明的是，在上述组件集合中获取目标组件，也就是说，上述组件集合中的一个组件就是目标组件，上述第一交互动作可以包括但不限于单次点击，重复点击，拖拽，语音输入，触控输入等。
示例性地，上述目标区域即为上述目标组件显示的区域，本申请不限定上述目标区域的范围，假设第一交互操作是拖拽，组件集合中有3个组件，分别是按钮，输入框，表格，从组件集合中选择按钮作为目标组件，执行第一交互操作，该按钮在目标区域显示的过程如下：
S1，将鼠标指针移动到按钮上，并按下鼠标；
S2，通过移动鼠标将按钮放置在目标区域；
S3，完成拖动操作后，松开鼠标按钮。
可选地，在本实施例中，执行上述第一交互操作，将显示上述初始配置界面，该初始配置界面用于显示上述目标组件的配置信息，可以包括但不限于视图、属性、样式和动作，其中，视图可以包括但不限于布局，定位，转换等，转换即为两个不同类型的组件之间进行转变，例如，将文本框组件转换为输入框；属性可以包括但不限于显示状态属性，文本内容属性，嵌套属性，数据绑定属性等，其中，显示状态属性可以包括但不限于隐藏、显示、半透明等；文本内容属性可以包括但不限于标题、描述、标签等；嵌套属性可以理解为在一个组件内部设置其他组件，例如，在输入框组件中嵌套一个按钮组件；数据绑定属性可以包括但不限于通过表达式绑定数据值、绑定计算属性等，样式可以包括但不限于字体、颜色、边框、背景、动画效果等，动作可以包括但不限于触发动作，结束动作，停止动作等，其中，触发动作即使得目标组件开始状态变更的动作；结束动作可以理解为使得目标组件结束状态变更的动作；停止动作可以理解为使得目标组件暂停状态变更的动作；此外，触发动作，结束动作，停止动作可以包括但不限于单次点击，重复点击，拖拽，语音输入，触控输入等。
在一个示例性的实施例中，在上述初始配置界面为上述目标组件的背景设置为红色，数据来源设置为数组[1，2，3，4，5，6]中的随机一个，即上述配置信息包括红色背景，[1，2，3，4，5，6]的数据源，例如，上述目标组件是一个文本框，在目标区域双击文本框之后，显示文本框的初始配置界面，在初始配置界面显示上述配置信息，并且目标区域的文本框的背景为红色，且文本框中出现字符6。
需要说明的是，上述目标组件产生的渲染效果可以包括但不限于淡入淡出，滑动，缩放，旋转，弹性变形，渐变，折叠等动画效果，或者改变尺寸，改变颜色等样式效果，再或者数据显示，数据删除等属性效果。
示例性地，图3是根据本申请实施例的一种组件的处理方法的流程示意图，如图3所示：在第一区域302中选择按钮304，将按钮304拖拽至第二区域306，点击按钮304，在第三区域308显示初始配置界面，设置按钮304的数据来源属性310。
S206，响应于在初始配置界面执行的第二交互操作，为目标组件设置目标配置信息，并在目标区域显示目标组件的目标渲染效果，其中，目标渲染效果由目标配置信息确定，目标配置信息包括为目标组件设置的关联数据源和/或关联组件；
可选地，在本实施例中，上述第二交互操作可以包括但不限于单次点击，重复点击，拖拽，语音输入，触控输入等，上述关联组件可以包括但不限于布局类，基础类，表单类，高级类组件，其中，布局类可以包括但不限于布局容器、选项卡、折叠面板等；基础类可以包括但不限于按钮、文本、图片、标签等；表单类可以包括但不限于输入框、选择框、日期选择等；高级类组件可以包括但不限于电子表格、视频播放、内嵌网页等，关联组件还可以是内部嵌套了其他组件的组件，例如，关联组件是一个输入框，在该输入框内还存在一个按钮，那么将这个按钮视为关联组件的一部分，也就是说，关联组件即为一个内部存在按钮的输入框，该关联组件的配置信息包括按钮配置信息，输入框配置信息。
具体而言，在初始配置界面执行第二交互操作，可以理解为显示初始配置界面，并且在初始配置界面为目标组件设置动作，组件样式，组件属性等，例如，将一个初始长度为10厘米，初始宽度为20厘米的按钮当作上述目标组件，初始长度与初始宽度可以理解为从上述组件集合中拖拽出来的按钮的原本尺寸，在初始配置界面设置按钮的尺寸，在长度对应的输入框输入100厘米，宽度输入框输入200厘米，输入动作即为上述第二交互动作，100厘米和200厘米即为上述目标配置信息，完成目标配置信息的设置后，将在目标区域将渲染按钮，将按钮的长度由10厘米更新为100厘米，宽度由20厘米更新为200厘米，按钮尺寸的变化即上述目标渲染效果。
示例性地，上述关联数据源可以包括但不限于文本、图像、音频、视频等，可以通过如下方式获取关联数据源，包括但不限于从数据库中获取，从URL(Uniform ResourceLocator)定位的网络资源获取，从SDK(Software Development Kit)中获取等。
其中，SDK(Software Development Kit，软件开发工具包)是一组用于开发软件的工具、库、框架和文档的集合，SDK可以包括但不限于提供用于开发应用程序的代码库，包括预编译的模块、函数和类；为一组任务提供解决方案的实用程序，如代码编辑器、编译器、调试器和版本控制系统；为一类应用程序提供基础结构和规范的软件架构；为一类应用程序提供开发指南、使用说明和示例等。
在一个示例性的实施例中，如图3所示，按钮304为目标组件，文本框312为上述关联组件，在第三区域308设置目标配置信息，为按钮304设置数据源为一个数据库中的人员信息表，点击按钮304之后，处于第二区域中的按钮304上将显示该人员信息表中的第一行第一列的人员编号。
在又一个示例性的实施例中，上述目标配置信息还可以包括上述关联组件，如图3所示，按钮304为目标组件，文本框312为上述关联组件，在第三区域308设置目标配置信息，为按钮304设置关联组件为文本框312，并且文本框312已预先设置了数据源为一个数据库中的人员信息表，点击按钮304之后，处于第二区域中的文本框312上将显示该人员信息表中的第一行的人员信息，例如，在文本框312中显示“001李华自动化部部门经理”。
可选地，在本实施例中，上述组件的处理方法可以应用于注册信息录入界面搭建的应用场景中，图4是根据本申请实施例的又一种组件的处理方法的流程示意图，如图4所示：
S402，新建一个社交类型应用；
S404，在第二区域显示应用的用户注册页面；
S406，从第一区域拖拽一个按钮，一个文本框和两个输入框(输入框A和输入框B)到S404中提出的用户注册页面上；
S408，依次点击S406中提出的按钮，文本框和输入框(输入框A和输入框B)，进行属性及样式配置，如下：
S408-1，点击按钮，在第三区域进行按钮的属性配置，将按钮名称修改为注册按钮，显示文本为“注册”，将文本框，输入框A与输入框B同时设置为按钮的关联组件；
S408-2，点击文本框，在第三区域进行文本框的属性配置，将文本框名称修改为提示信息，默认显示文本为“请先注册”，注册成功的情况下将显示“注册成功！”；
S408-3，点击输入框A，在第三区域进行输入框A的属性配置，将输入框A的名称修改为账号输入框，并且在输入框A的数据源配置为S402提出的社交应用的后台数据库中的人员信息表中列名为账号的一列数据；
S408-4，点击输入框B，在第三区域进行输入框B的属性配置，将输入框B的名称修改为账号密码输入框，并且在输入框B的数据源配置为S402提出的社交应用的后台数据库中的人员信息表中列名为账号密码的一列数据；
S410，保存S408中在第三区域设置的内容，预览该社交应用。
具体而言，可以通过如下步骤预览该社交应用的用户注册页面效果：
S1，在账号输入框输入字符“1010210304”；
S2，在账号密码输入框输入字符“asdfgf”；
S3，点击注册按钮；
S4，文本框的显示文本由默认的“请先注册”变为“注册成功！”，后台数据库中的人员信息表中新增了一条记录为[账号：1010210304，账号密码：asdfgf]。
需要说明的是，处于上述第二区域的目标组件可以有多个相同的类型，可以通过如下方式区分，包括但不限于设置组件编号，例如，将按钮A的编号设置为011，将另一个与按钮A具有相同类型的按钮B的编号设置为022，或者，为不同类型的组件之间设置不同的组件编号，例如，将按钮C的编号设置为033，将输入框D的编号设置为044。
在本申请实施例中，通过显示待使用的组件集合，响应于对目标组件执行的第一交互操作，在目标区域显示目标组件，并显示与目标组件关联的初始配置界面，其中，组件集合包括目标组件，目标区域用于显示目标组件依据配置信息产生的渲染效果，初始配置界面用于获取配置信息，响应于在初始配置界面执行的第二交互操作，为目标组件设置目标配置信息，并在目标区域显示目标组件的目标渲染效果，其中，目标渲染效果由目标配置信息确定，目标配置信息包括为目标组件设置的关联数据源和/或关联组件，简化组件的使用和配置过程，达到了提高组件开发效率的技术效果，进而解决了组件的处理效率偏低的技术问题。
作为一种可选的方案，上述响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息，并在上述目标区域显示上述目标组件的目标渲染效果，包括：响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息；在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置数据源参数配置，其中，上述数据源参数配置用于表示上述目标组件与上述关联数据源的数据交互方式；根据上述数据源参数配置更新上述目标区域中的上述目标组件，并在上述目标区域显示上述目标组件的目标渲染效果。
可选地，在本实施例中，上述数据源参数配置可以包括但不限于数据库参数，URL(Uniform Resource Locator)定位的网络资源参数，SDK(Software Development Kit)参数等，换句话说，上述目标组件是根据数据源参数配置来确定数据源的路径。
示例性地，将上述关联数据源的数据源参数配置为数据库参数，即上述目标组件将通过数据库来获取数据，或者输入数据至该数据库中的任一张表中，在这张表里新增一条记录，这条记录对应于目标组件输入的数据，根据提供的数据源参数配置，对目标区域中的目标组件进行更新，并在目标区域中展示目标组件新的目标渲染效果，例如，目标组件原本与数据库A的人员信息表绑定，显示数据库A中的人员信息表第1条记录，通过设置数据源参数配置，目标组件与数据库A的人员信息表解除绑定关系，与数据库B的人员信息表绑定，在目标区域显示数据库B中的人员信息表第2条记录，即为上述目标渲染效果。
在本申请实施例中，通过响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息；在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置数据源参数配置，其中，上述数据源参数配置用于表示上述目标组件与上述关联数据源的数据交互方式；根据上述数据源参数配置更新上述目标区域中的上述目标组件，并在上述目标区域显示上述目标组件的目标渲染效果，达到了提高组件配置灵活性的目的。
作为一种可选的方案，上述在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置数据源参数配置，包括：在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置输出参数配置，其中，上述输出参数配置表示上述目标组件用于从上述关联数据源获取数据并进行显示；在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置输入参数配置，其中，上述输入参数配置表示上述目标组件用于向上述关联数据源输入数据。
可选地，在本实施例中，上述输出参数配置可以理解为，上述目标组件获取上述关联数据源中的数据进行显示，例如，为目标组件设置输出参数配置，与数据库A的人员信息表绑定，此时，由于目标组件被触发，将获取数据库A中的人员信息表前10条记录，在目标区域进行显示。
示例性地，上述输入参数配置可以理解为，上述目标组件将获取到的数据存入上述关联数据源，例如，为目标组件设置输入参数配置，与数据库B的人员信息表绑定，输入参数配置中包括“姓名：王二，工作部门：软件开发部，工号：18675”，根据该输入参数配置，数据库B中的人员信息表原本有2010条记录，此时，由于目标组件被触发，数据库B中的人员信息表将新增一条记录，由原本的2010条记录变为2011条记录，第2011条记录即为“姓名：王二，工作部门：软件开发部，工号：18675”。
在本申请实施例中，通过在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置输出参数配置，在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置输入参数配置，达到了的目的，实现了降低开发成本，优化数据处理和传输过程的技术效果。
作为一种可选的方案，上述响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息，并在上述目标区域显示上述目标组件的目标渲染效果，包括：响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息；在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置动作配置，其中，上述动作配置用于表示上述目标组件与上述关联组件的联动方式；根据上述动作配置更新上述目标区域中的上述目标组件，并在上述目标区域显示上述目标组件的目标渲染效果，其中，上述目标渲染效果包括上述关联组件。
可选地，在本实施例中，上述动作配置可以理解为上述目标组件与上述关联组件之间的联动方式，也即，为上述目标组件设置目标配置信息，其中，目标配置信息中包括关联组件的执行动作。
需要说明的是，上述目标组件可以有多个不同类型的关联组件，不同类型的关联组件的动作配置可以相同，也可以不同，相同类型的关联组件的动作配置可以相同，也可以不同，本申请不做具体限定。
在一个示例性的实施例中，如图3所示：
S1，选中按钮304为目标组件；
S2，在第三区域308设置目标配置信息，为按钮304设置关联组件为文本框312；
S3，在第三区域308设置文本框312的数据源为数据库C中的人员信息表；
S4，点击按钮304之后，对应的关联组件文本框312的动作配置为显示该人员信息表中的第一行的人员信息。
示例性地，点击按钮304，在文本框312中显示“005张三自动化部自动化工程师”，上述目标渲染效果即为文本框312中的人员信息的显示。
在本申请实施例中，通过响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息，在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置动作配置，根据上述动作配置更新上述目标区域中的上述目标组件，并在上述目标区域显示上述目标组件的目标渲染效果，提高了通过组件搭建页面的可扩展性，满足不同业务场景和需求。
作为一种可选的方案，上述在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置动作配置，包括以下至少之一：在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置点击动作配置，其中，上述点击动作配置表示响应于对上述目标组件执行点击动作，触发对上述关联组件执行上述点击动作；在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置手势动作配置，其中，上述手势动作配置表示响应于对上述目标组件执行手势动作，触发对上述关联组件执行上述手势动作；在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置拖拽动作配置，其中，上述拖拽动作配置表示响应于对上述目标组件执行拖拽动作，触发对上述关联组件执行上述拖拽动作。
可选地，在本实施例中，上述点击动作配置可以理解为上述目标组件与上述关联组件之间的联动方式为点击动作，也就是说，通过点击目标组件，关联组件也将进行相应的处理，本申请不做点击次数的具体限定，也就是说，可以只点击1次目标组件，也可以点击多次目标组件，例如，点击1次目标组件，关联组件背景色由红色变为绿色。
示例性地，上述手势动作配置可以理解为上述目标组件与上述关联组件之间的联动方式为特定手势，也就是说，通过点击上述目标组件，关联组件也将进行相应的处理，这里的特殊手势可以包括但不限于三个手指同时触屏，或者同时按住鼠标左键及右键等，例如，三个手指同时触屏，触发目标组件，关联组件放大为原本尺寸的10倍。
在一个示例性的实施例中，上述拖拽动作配置可以理解为上述目标组件与上述关联组件之间的联动方式为拖拽动作，也就是说，通过拖拽目标组件，关联组件也将进行相应的处理，例如，拖拽目标组件，关联组件显示一条数据，该数据是从与关联组件绑定的数据库中的关联信息表中获取。
在本申请实施例中，通过在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置点击动作配置，在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置手势动作配置，在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置拖拽动作配置，实现了组件之间的交互式操作，提高用户的操作效率。
作为一种可选的方案，上述方法还包括：在第一区域显示上述组件集合；响应于上述第一交互操作，在上述目标区域显示上述目标组件，并在第二区域显示上述初始配置界面，其中，上述第一区域、上述第二区域与上述目标区域均互相独立，上述目标区域显示有第一组件和第二组件，上述第一组件预先设置有第一配置信息，上述第二组件预先设置有第二配置信息，上述第一配置信息用于指示上述第一组件用于向上述目标数据源输入数据，上述第二配置信息用于指示上述第二组件用于从目标数据源获取数据并进行显示；响应于第三交互操作，将上述目标组件的关联组件设置为上述第二组件，上述目标组件和上述第二组件的联动触发动作设置为目标动作；在上述目标区域显示上述目标渲染效果，其中，上述目标渲染结果包括在上述第一组件被触发时，向上述目标数据源输入数据，在上述目标组件被上述目标动作触发时，通过上述第二组件显示上述目标数据源中的数据。
可选地，在本实施例中，在上述第一区域获取目标组件，将目标组件在上述第二区域进行显示，并且在上述第二区域还存在两个组件，分别为上述第一组件和上述第二组件，上述第一配置信息与第一组件对应，上述第二配置信息与第二组件对应。
需要说明的是，上述第一区域，上述第二区域，上述第三区域相关独立，可以理解为，这三个区域之间均不重叠，本申请对第一区域，第二区域与第三区域的位置关系不做限定，也就是说上述第一区域可以与上述第二区域相邻，还可以与上述第三区域相邻。
示例性地，上述目标数据源可以包括但不限于数据库，URL(Uniform ResourceLocator)定位的网络资源，SDK(Software Development Kit)等，上述第一组件根据上述第一配置信息从目标数据源获取数据，在目标区域进行显示，上述第二组件根据上述第二配置信息向上述目标数据源输入数据。
在一个示例性的实施例中，上述第三交互操作可以包括但不限于单次点击，重复点击，拖拽，语音输入，触控输入等，上述目标动作可以理解为上述目标组件与上述第二组件之间的联动方式，可以包括但不限于手动点击，语音播报，图像显示，视频播放，文本显示等，也即，为上述目标组件设置目标配置信息，其中，目标配置信息中包括第二组件的执行动作，上述目标渲染效果可以包括但不限于目标组件产生的渲染效果，第一组件产生的渲染效果，第二组件产生的渲染效果等。
示例性地，假设上述目标组件为一个按钮，上述第一组件为一个输入框，上述第二组件为一个表格，点击按钮为第三交互操作，目标数据源为数据库D中的商品价格信息表，其中只有2条记录，在输入框输入一条记录为“名称：水杯，价格：50块”，点击按钮之后，商品价格信息表中新增了一条“名称：水杯，价格：50块”的记录，商品价格信息表现在有了3条记录，并且在表格中显示了新的1条商品价格记录，也就是“名称：水杯，价格：50块”，还可以是在表格中显示商品价格信息表上的3条商品价格记录，其中就包括“名称：水杯，价格：50块”。
在本申请实施例中，通过在第一区域显示上述组件集合；响应于上述第一交互操作，在上述目标区域显示上述目标组件，并在第二区域显示上述初始配置界面，响应于第三交互操作，将上述目标组件的关联组件设置为上述第二组件，上述目标组件和上述第二组件的联动触发动作设置为目标动作；在上述目标区域显示上述目标渲染效果，达到了实现特定的应用页面功能，优化用户体验的目的。
作为一种可选的方案，上述方法还包括：获取派发器和存储器，其中，上述派发器用于负责组件之间联动时的动作路由转发，上述存储器用于负责维护组件实例；响应于上述第一交互操作，在上述存储器初始化与上述目标组件对应的目标组件实例，其中，上述目标组件实例用于在上述目标区域显示与上述目标组件对应的渲染效果；响应于上述第二交互操作，将上述目标配置信息更新至上述存储器，并控制上述派发器响应上述目标配置信息显示上述目标渲染效果；在上述目标配置信息指示上述目标组件设置有上述关联组件的情况下，响应于为上述目标组件实例配置的关联动作，控制上述派发器根据上述目标配置信息从上述存储器中查找上述关联组件的关联组件实例，并控制上述关联组件实例执行上述关联动作。
可选地，在本实施例中，上述派发器可以理解为一种将物品或信息从一个地方传递到另一个地方的设备或系统，可以包括但不限于无线通信模块、智能控制器等，上述存储器可以包括随机读写存储器，硬盘存储器等，上述关联动作可以理解为上述目标组件与上述关联组件之间的联动方式，可以包括但不限于手动点击，语音播报，图像显示，视频播放，文本显示等。
具体而言，图5是根据本申请实施例的又一种组件的处理方法的流程示意图，如图5所示，在调度中心502中存在存储器504与派发器506，上述存储器中存在目标组件实例，目标组件实例与目标组件508具有对应关系，存储器负责保存和维护目标组件实例的配置信息510，可以包括但不限于动作，属性和状态，本申请对该目标组件实例的数量不做具体限定。
需要说明的是，上述目标组件与上述关联组件关联，上述派发器将根据上述目标配置信息从上述存储器中查找上述关联组件的关联组件实例，将存储器中查询到的关联组件实例对应于上述关联组件，使得关联组件执行关联动作。
示例性地，图6是根据本申请实施例的又一种组件的处理方法的流程示意图，如图6所示：
S602，触发目标组件；
S604，通知处于控制中心的派发器获取关联组件以及关联组件的相应动作；
S606，关联组件执行相应的关联动作；
S608，关联组件产生渲染效果，刷新组件视图。
在本申请实施例中，通过获取派发器和存储器，响应于上述第一交互操作，在上述存储器初始化与上述目标组件对应的目标组件实例，在上述目标配置信息指示上述目标组件设置有上述关联组件的情况下，响应于为上述目标组件实例配置的关联动作，控制上述派发器根据上述目标配置信息从上述存储器中查找上述关联组件的关联组件实例，并控制上述关联组件实例执行上述关联动作，提高了组件的处理效率。
上述仅是一种示例，本申请不做任何具体的限定。
显然，上述所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。
下面结合具体实施例对本申请进行具体说明：
本申请主要涉及计算机通信技术、低代码开发等技术领域，主要关注在低代码开发领域用户通过拖拽编排组件的方式创建应用。
近年来，数字技术与实体经济已经深度融合，成为了国家中长期重大战略。传统产业数字化转型已经成为关键问题，企业数字化转型已经不是一种选择而是一种出路，企业只有进行数字化转型才能有利于企业降本增效，打造企业的竞争力，才能在各行业中脱颖而出成为行业佼佼者。
众多企业虽然意识到了数字化的好处和重要性，但往往感觉无从下手，低代码平台的出现成为一种新的解决方案。低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，低代码能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。另一方面，低代码能够让不懂代码的人员，通过“拖拉拽”开发组件，就能完成应用程序的搭建。低代码可以弥补日益扩大的专业技术人才缺口，同时促成业务与技术深度协作的终极敏捷形态。
显然，低代码开发成为助力企业数字化转型的一种新的解决方案。然而，用户在低代码应用开发过程中需要搭建页面作为应用的展示界面；传统解决方案一般预置一些组件，然后选择合适的组件编排组合成页面或者通过输入脚本代码并执行生成功能页面；传统方案生成的页面通常是静态页面，仅用于展示数据，缺少动态交互，用于营销活动类页面推广展示还行，可对于灵活的自定义条件参数查询分析展示的场景(又称BI，BusinessIntelligence)可能就不能完成，因此需要一套新的方案来解决此类问题，弥补传统解决方案的不足，进一步增强低代码开发模式的敏捷性。
可选地，在本实施例中，基于页面开发常用场景内置了若干通用元组件，分成布局类(包括但不限于布局容器、选项卡、折叠面板等)、基础类(包括但不限于按钮、文本、图片、标签等)、表单类(包括但不限于输入框、选择框、日期选择等)和高级类组件(包括但不限于电子表格、视频播放、内嵌网页等)。内置的通用元组件在应用开发窗口页面打开时自动加载显示在第一区域，如图3所示。
示例性地，定义一个元组件包含视图、属性、样式和动作，在搭建页面时，用户将所述元组件从所述编辑页面的第一区域拖拽至第二区域(上述目标区域)，在所述编辑页面的第三区域向用户展示所述目标组件的配置面板(上述初始配置界面)；获取用户在所述配置面板上对所述目标组件的配置信息，基于所述目标组件的配置信息，对所述目标组件进行渲染，以生成目标页面。
具体实施步骤如下：
S1，将元组件拖拽至工作区画布中，每个元组件自动注册为画布中的最小粒度的拖拽单元，支持像素级别的任意位置拖拽；
S2，对元组件进行布局编排，任意摆放位置、容器类组件可嵌套其他类型组件、对话框组件可以配置显示隐藏等；
S3，画布中的每个元组件都支持可视化的配置，选中并双击元组件，在应用开发窗口的第三区域显示组件配置面板，对元组件的属性、样式进行配置，常用属性包括但不限于标题、默认值、最大最小行数限制、选项配置等，一般不同的元组件根据其抽象定义不同具有个性化的属性配置项。流程图如下。
可选地，在本实施例中，可以但不限于生成的目标页面需要有一定的交互能力，传统解决方式一般通过注入javascript(一种脚本程序)事件脚本来实现，实现脚本功能的技术门槛高且容易出错，亦存在脚本注入安全问题。
为实现页面的动态交互能力，在本申请实施例中，组件支持可视化的配置一个或多个动作，并关联到画布中的某一个或多个目标组件实现联动，就如同传统前端开发写代码做出的页面效果一样，只需可视化配置，不要写脚本代码，完全零代码实现。场景举例如下：
S1，对按钮组件(还可以是其他组件，本申请对组件类型不做限定)，可添加一个单击动作，关联到画布中的某个对话框元组件的打开行为(一个元组件根据功能不同可以有多个行为动作可选)；
S2，当页面预览时，单击按钮即会触发对话框的打开。
此外，生成的目标页面需要显示业务数据，传统解决方案一般是将数据录入或上传后和页面一同打包部署或者硬编码数据接口，通过调用接口获取数据，此类方式在需要数据更新或接口变更时，需要重新上传数据或者修改代码适配接口的变化，不够灵活，且效率低。
示例性地，可以包括但不限于任意为组件配置动态数据源，不需要硬编码，仅通过可视化配置的方式配置数据接口以及接口的传入参数、输出参数绑定，在页面预览时即可调用服务端接口获取动态数据；包括但不限于输入框、日期选择框等组件可以绑定同一个服务端接口的不同传入参数，在页面预览时可作为条件输入，传递给接口调用，使得绑定该接口的输出参数的文本组件或表格组件能动态的根据条件查询展示数据。
具体实现原理如图5所示：
S1，定义一个调度中心，由派发器和存储器组成；其中，派发器负责组件之间联动时的动作路由转发，存储器负责持有维护组件实例引用。当在画布中拖入一个组件进行布局编排时会初始化一个组件实例，同时将组件实例的引用更新注册到调度中心的存储器中；
S2，双击画布中组件，在应用开发窗口的第三区域显示组件配置面板；配置面板中显示该组件的属性和样式配置项。修改样式时会触发配置面板的编辑动作，将配置项更新保存到存储器中，同时通知派发器，路由回调第二区域画布中组件实例的样式更新动作，更新样式状态，再通过状态更新驱动视图显示；
S3，修改属性配置，可按照实际需求选择性给组件配置动态数据源和绑定传入参数、输出参数变量，数据源一般是第三方提供的数据接口，本实施例在数据源管理模块统一维护数据源的配置，主要涉及接口的路径、请求类型等，配置好的数据源会暴露出接口的传入参数和输出参数列表供组件绑定使用，组件属性配置时只需要选择特定数据源，绑定相应传入参数和输出参数；用户对属性的配置同样会触发编辑动作，将配置项更新保存到存储器中。其次，可以为组件实例配置一个或多个动作，并关联到画布中的某一个或多个目标组件。页面渲染后，当组件的视图接收到用户的交互指令时，组件视图借助原生DOM(文档对象模型)事件触发事先配置好的组件动作；该组件动作携带配置的关联组件信息，调用控制中心的派发器，委托派发器根据配置参数从存储器中查找对应的组件实例引用，即可查找到关联组件实例，再回调关联组件的目标动作；关联组件响应动作调用，更新组件的本地状态，最后通过状态更新驱动视图的局部刷新。关联动作流程如图6所示，在画布(上述目标区域)中拖入一个输入框组件、一个按钮组件和一个表格组件。先为表格组件配置数据源，即该表格需要从配置的数据源接口获取数据，主要绑定接口输出参数，指定需要在表格中显示的数据列；
S4，给输入框组件绑定相同数据源接口的传入参数，用于接收用户的输入；最后为按钮组件配置一个单击动作，关联到表格组件。页面渲染后，在输入框中输入比如身份证号，单击按钮查询，即会触发接口调用，并将接口的响应结果按照需要展示的列显示到表格中；
S5，单击页面中某按钮，本质是视图接收到用户单击事件，会触发按钮组件的单击动作，调用派发器回调触发该按钮组件配置关联的表格组件的行为动作即触发接口调用，更新表格组件内部的状态，进而驱动表格组件视图的刷新，达到组件间的联动效果。
可选地，本申请实施例的技术优点可以包括但不限于：
S1，组件支持可视化的配置一个或多个动作，并关联到画布中的某一个或多个目标组件实现联动，就如同传统前端开发写代码做出的页面效果一样，只需可视化配置，不要写脚本代码，完全零代码实现，简单易用、技术门槛低。
S2，可自由灵活地给组件配置动态数据源，无需上传数据也不需要硬编码，仅通过可视化配置的方式配置数据接口以及接口的传入参数、输出参数，在页面预览时即可调用服务端接口获取动态数据。
S3，通过可视化配置的方式为组件添加关联动作，完全零代码实现了组件间的联动，提高了页面的交互能力，简单易用、技术门槛低。
S4，通过给组件配置动态数据源以及传入参数、输出参数变量绑定，自由灵活的实现了动态数据的获取和展示，无需上传数据或硬编码数据接口，操作简单高效。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台前端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例的方法。
根据本申请实施例的另一个方面，还提供了一种系统访问的装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
图7是根据本申请实施例的一种组件的处理装置的结构框图，如图7所示，该装置包括：
第一显示模块702，用于显示待使用的组件集合；
第二显示模块704，用于响应于对目标组件执行的第一交互操作，在目标区域显示目标组件，并显示与目标组件关联的初始配置界面，其中，组件集合包括目标组件，目标区域用于显示目标组件依据配置信息产生的渲染效果，初始配置界面用于获取配置信息；
设置模块706，用于响应于在初始配置界面执行的第二交互操作，为目标组件设置目标配置信息，并在目标区域显示目标组件的目标渲染效果，其中，目标渲染效果由目标配置信息确定，目标配置信息包括为目标组件设置的关联数据源和/或关联组件。
作为一种可选的方案，上述装置用于通过如下方式响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息，并在上述目标区域显示上述目标组件的目标渲染效果：响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息；在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置数据源参数配置，其中，上述数据源参数配置用于表示上述目标组件与上述关联数据源的数据交互方式；根据上述数据源参数配置更新上述目标区域中的上述目标组件，并在上述目标区域显示上述目标组件的目标渲染效果。
作为一种可选的方案，上述装置用于通过如下方式在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置数据源参数配置：在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置输出参数配置，其中，上述输出参数配置表示上述目标组件用于从上述关联数据源获取数据并进行显示；在上述目标配置信息包括上述关联数据源的情况下，为上述关联数据源设置输入参数配置，其中，上述输入参数配置表示上述目标组件用于向上述关联数据源输入数据。
作为一种可选的方案，上述装置用于通过如下方式响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息，并在上述目标区域显示上述目标组件的目标渲染效果：响应于在上述初始配置界面执行的第二交互操作，为上述目标组件设置目标配置信息；在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置动作配置，其中，上述动作配置用于表示上述目标组件与上述关联组件的联动方式；根据上述动作配置更新上述目标区域中的上述目标组件，并在上述目标区域显示上述目标组件的目标渲染效果，其中，上述目标渲染效果包括上述关联组件。
作为一种可选的方案，上述装置用于通过如下方式在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置动作配置，包括以下至少之一：在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置点击动作配置，其中，上述点击动作配置表示响应于对上述目标组件执行点击动作，触发对上述关联组件执行上述点击动作；在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置手势动作配置，其中，上述手势动作配置表示响应于对上述目标组件执行手势动作，触发对上述关联组件执行上述手势动作；在上述目标配置信息包括上述关联组件的情况下，为上述关联组件设置拖拽动作配置，其中，上述拖拽动作配置表示响应于对上述目标组件执行拖拽动作，触发对上述关联组件执行上述拖拽动作。
作为一种可选的方案，上述装置还用于：在第一区域显示上述组件集合；响应于上述第一交互操作，在上述目标区域显示上述目标组件，并在第二区域显示上述初始配置界面，其中，上述第一区域、上述第二区域与上述目标区域均互相独立，上述目标区域显示有第一组件和第二组件，上述第一组件预先设置有第一配置信息，上述第二组件预先设置有第二配置信息，上述第一配置信息用于指示上述第一组件用于向上述目标数据源输入数据，上述第二配置信息用于指示上述第二组件用于从目标数据源获取数据并进行显示；响应于第三交互操作，将上述目标组件的关联组件设置为上述第二组件，上述目标组件和上述第二组件的联动触发动作设置为目标动作；在上述目标区域显示上述目标渲染效果，其中，上述目标渲染结果包括在上述第一组件被触发时，向上述目标数据源输入数据，在上述目标组件被上述目标动作触发时，通过上述第二组件显示上述目标数据源中的数据。
作为一种可选的方案，上述装置还用于：获取派发器和存储器，其中，上述派发器用于负责组件之间联动时的动作路由转发，上述存储器用于负责维护组件实例；响应于上述第一交互操作，在上述存储器初始化与上述目标组件对应的目标组件实例，其中，上述目标组件实例用于在上述目标区域显示与上述目标组件对应的渲染效果；响应于上述第二交互操作，将上述目标配置信息更新至上述存储器，并控制上述派发器响应上述目标配置信息显示上述目标渲染效果；在上述目标配置信息指示上述目标组件设置有上述关联组件的情况下，响应于为上述目标组件实例配置的关联动作，控制上述派发器根据上述目标配置信息从上述存储器中查找上述关联组件的关联组件实例，并控制上述关联组件实例执行上述关联动作。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。
本申请的实施例还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。
在一个示例性实施例中，上述计算机可读存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。
本申请的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
在一个示例性实施例中，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
本实施例中的具体示例可以参考上述实施例及示例性实施方式中所描述的示例，本实施例在此不再赘述。
显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。
以上仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。
Claims (10)
1.一种组件的处理方法，其特征在于，包括：
显示待使用的组件集合；
响应于对目标组件执行的第一交互操作，在目标区域显示所述目标组件，并显示与所述目标组件关联的初始配置界面，其中，所述组件集合包括所述目标组件，所述目标区域用于显示所述目标组件依据配置信息产生的渲染效果，所述初始配置界面用于获取所述配置信息；
响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果，其中，所述目标渲染效果由所述目标配置信息确定，所述目标配置信息包括为所述目标组件设置的关联数据源和/或关联组件。
2.根据权利要求1所述的方法，其特征在于，所述响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果，包括：
响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息；
在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置数据源参数配置，其中，所述数据源参数配置用于表示所述目标组件与所述关联数据源的数据交互方式；
根据所述数据源参数配置更新所述目标区域中的所述目标组件，并在所述目标区域显示所述目标组件的目标渲染效果。
3.根据权利要求2所述的方法，其特征在于，所述在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置数据源参数配置，包括：
在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置输出参数配置，其中，所述输出参数配置表示所述目标组件用于从所述关联数据源获取数据并进行显示；
在所述目标配置信息包括所述关联数据源的情况下，为所述关联数据源设置输入参数配置，其中，所述输入参数配置表示所述目标组件用于向所述关联数据源输入数据。
4.根据权利要求1所述的方法，其特征在于，所述响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果，包括：
响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息；
在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置动作配置，其中，所述动作配置用于表示所述目标组件与所述关联组件的联动方式；
根据所述动作配置更新所述目标区域中的所述目标组件，并在所述目标区域显示所述目标组件的目标渲染效果，其中，所述目标渲染效果包括所述关联组件。
5.根据权利要求4所述的方法，其特征在于，所述在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置动作配置，包括以下至少之一：
在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置点击动作配置，其中，所述点击动作配置表示响应于对所述目标组件执行点击动作，触发对所述关联组件执行所述点击动作；
在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置手势动作配置，其中，所述手势动作配置表示响应于对所述目标组件执行手势动作，触发对所述关联组件执行所述手势动作；
在所述目标配置信息包括所述关联组件的情况下，为所述关联组件设置拖拽动作配置，其中，所述拖拽动作配置表示响应于对所述目标组件执行拖拽动作，触发对所述关联组件执行所述拖拽动作。
6.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在第一区域显示所述组件集合；
响应于所述第一交互操作，在所述目标区域显示所述目标组件，并在第二区域显示所述初始配置界面，其中，所述第一区域、所述第二区域与所述目标区域均互相独立，所述目标区域显示有第一组件和第二组件，所述第一组件预先设置有第一配置信息，所述第二组件预先设置有第二配置信息，所述第一配置信息用于指示所述第一组件用于向所述目标数据源输入数据，所述第二配置信息用于指示所述第二组件用于从目标数据源获取数据并进行显示；
响应于第三交互操作，将所述目标组件的关联组件设置为所述第二组件，所述目标组件和所述第二组件的联动触发动作设置为目标动作；
在所述目标区域显示所述目标渲染效果，其中，所述目标渲染结果包括在所述第一组件被触发时，向所述目标数据源输入数据，在所述目标组件被所述目标动作触发时，通过所述第二组件显示所述目标数据源中的数据。
7.根据权利要求1所述的方法，其特征在于，所述方法还包括：
获取派发器和存储器，其中，所述派发器用于负责组件之间联动时的动作路由转发，所述存储器用于负责维护组件实例；
响应于所述第一交互操作，在所述存储器初始化与所述目标组件对应的目标组件实例，其中，所述目标组件实例用于在所述目标区域显示与所述目标组件对应的渲染效果；
响应于所述第二交互操作，将所述目标配置信息更新至所述存储器，并控制所述派发器响应所述目标配置信息显示所述目标渲染效果；
在所述目标配置信息指示所述目标组件设置有所述关联组件的情况下，响应于为所述目标组件实例配置的关联动作，控制所述派发器根据所述目标配置信息从所述存储器中查找所述关联组件的关联组件实例，并控制所述关联组件实例执行所述关联动作。
8.一种组件的处理装置，其特征在于，包括：
第一显示模块，用于显示待使用的组件集合；
第二显示模块，用于响应于对目标组件执行的第一交互操作，在目标区域显示所述目标组件，并显示与所述目标组件关联的初始配置界面，其中，所述组件集合包括所述目标组件，所述目标区域用于显示所述目标组件依据配置信息产生的渲染效果，所述初始配置界面用于获取所述配置信息；
设置模块，用于响应于在所述初始配置界面执行的第二交互操作，为所述目标组件设置目标配置信息，并在所述目标区域显示所述目标组件的目标渲染效果，其中，所述目标渲染效果由所述目标配置信息确定，所述目标配置信息包括为所述目标组件设置的关联数据源和/或关联组件。
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，其中，所述计算机程序被处理器执行时实现所述权利要求1至7任一项中所述的方法的步骤。
10.一种电子装置，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现所述权利要求1至7任一项中所述的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311806326.9A CN117806755A (zh) | 2023-12-25 | 2023-12-25 | 组件的处理方法、装置、存储介质及电子装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311806326.9A CN117806755A (zh) | 2023-12-25 | 2023-12-25 | 组件的处理方法、装置、存储介质及电子装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117806755A true CN117806755A (zh) | 2024-04-02 |
Family
ID=90423002
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311806326.9A Pending CN117806755A (zh) | 2023-12-25 | 2023-12-25 | 组件的处理方法、装置、存储介质及电子装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117806755A (zh) |
-
2023
- 2023-12-25 CN CN202311806326.9A patent/CN117806755A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7448024B2 (en) | System and method for software application development in a portal environment | |
| AU2014202725B2 (en) | Methods and apparatus for translating forms to native mobile applications | |
| CN107391134B (zh) | 一种通用移动应用交互界面自动生成与动态变换方法与装置 | |
| CN1950765B (zh) | 过程环境中的关联图形显示 | |
| CN105700888A (zh) | 一种基于jbpm工作流引擎的可视化快速开发平台 | |
| Paternò et al. | A unified method for designing interactive systems adaptable to mobile and stationary platforms | |
| CN105528418B (zh) | 一种设计文档生成方法及装置 | |
| CN109634603B (zh) | 一种基于Canvas画布的H5页面制作方法和装置 | |
| CN105094832A (zh) | 一种所见即所得的动态生成用户界面的方法和系统 | |
| US20120221998A1 (en) | Screenflow designer with automatically changing view | |
| CN103984818A (zh) | 基于Flex技术的AUV设计流程可视化建模方法 | |
| CN113268233B (zh) | 一种页面生成方法、装置、计算机设备及存储介质 | |
| Pidd et al. | Simulation software: not the same yesterday, today or forever | |
| KR20150058237A (ko) | 간략화된 지식공학 방법 및 시스템 | |
| CN113391808A (zh) | 页面的配置方法、装置及电子设备 | |
| CN116382643A (zh) | 一种基于低代码平台的运行系统 | |
| CN101295382A (zh) | 一种实现业务对象属性之间业务逻辑关系的方法及装置 | |
| CN113515275A (zh) | 一种所见即所得的云端工业组态软件系统及其开发方法 | |
| CN101714080A (zh) | 实现web多语言控件的方法及系统 | |
| US7337440B1 (en) | Methodology for generating accessing functions for programmed execution of panel-driven business applications | |
| Ferguson et al. | MetaMOOSE—an object-oriented framework for the construction of CASE tools | |
| CN112181409A (zh) | 一种应用构建方法、应用渲染方法及装置 | |
| CN117806755A (zh) | 组件的处理方法、装置、存储介质及电子装置 | |
| de Lange et al. | Collaborative wireframing for model-driven web engineering | |
| Sprogis | ajoo: WEB based framework for domain specific modeling tools |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |