CN116627391B - 一种ui组件探测方法、装置、设备及存储介质 - Google Patents
一种ui组件探测方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN116627391B CN116627391B CN202310898724.1A CN202310898724A CN116627391B CN 116627391 B CN116627391 B CN 116627391B CN 202310898724 A CN202310898724 A CN 202310898724A CN 116627391 B CN116627391 B CN 116627391B
- Authority
- CN
- China
- Prior art keywords
- component
- current element
- attribute
- target
- current
- 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.)
- Active
Links
- 238000001514 detection method Methods 0.000 title claims abstract description 30
- 238000012544 monitoring process Methods 0.000 claims abstract description 14
- 238000009877 rendering Methods 0.000 claims description 55
- 239000003550 marker Substances 0.000 claims description 43
- 238000000034 method Methods 0.000 claims description 43
- 238000004590 computer program Methods 0.000 claims description 15
- 230000002459 sustained effect Effects 0.000 claims description 4
- 230000000694 effects Effects 0.000 abstract description 12
- 241000699666 Mus <mouse, genus> Species 0.000 description 69
- 238000010586 diagram Methods 0.000 description 13
- 230000008569 process Effects 0.000 description 12
- 230000006870 function Effects 0.000 description 7
- 239000000835 fiber Substances 0.000 description 5
- 230000002159 abnormal effect Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例提供一种UI组件探测方法、装置、设备及存储介质，涉及软件开发技术领域。所述UI组件探测方法包括：在全局文件对象上监听所有鼠标事件，当监听到任一所述鼠标事件时，获取当前元素；从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；根据所述目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件。本发明实施例能够实现兼容探测低代码开发平台中各种类型的UI组件的技术效果。
Description
技术领域
本发明涉及软件开发技术领域，具体而言，涉及一种用户界面（User Interface，UI）组件探测方法、装置、设备及存储介质。
背景技术
低代码开发平台（Low-Code Development Platform，LCDP）是无需编码或通过少量代码就可以快速生成应用程序的开发平台。低代码开发平台内部注册有一些UI组件，为开发人员提供图形用户界面（Graphics User Interface，GUI），使得不同经验水平的开发人员可以在图形用户界面上采用“拖拽拉”的方式组合不同的UI组件，基于组合后的模型的驱动逻辑来生成应用程序。
而要实现UI组件的“拖拉拽”功能，最重要的是根据浏览器原生的鼠标事件找到低代码开发平台里对应的UI组件。根据鼠标事件探测UI组件的技术至少在两种典型场景中有应用：1、鼠标移动到某个UI组件上时，需要找到这个UI组件，给这个UI组件绘制一个虚线边框，以提示开发人员；2、鼠标点击某个UI组件时，需要找到这个UI组件，呈现这个UI组件的选中效果，以提示开发人员。
目前，常用的解决方案主要是在低代码开放平台编写UI组件时，在UI组件的外层套一个div标签，在div标签上绑定鼠标事件。采用这种解决方案，容易出现UI组件原有的dom结构和css样式被div标签破坏、某些弹出层类的UI组件不能被选中等异常情况。
发明内容
本发明实施例的目的在于提供一种UI组件探测方法、装置、设备及存储介质，用以实现兼容探测低代码开发平台中各种类型的UI组件的技术效果。
第一方面，本发明实施例提供一种UI组件探测方法，包括：
在全局文件对象上监听所有鼠标事件，当监听到任一所述鼠标事件时，获取当前元素；
在所述在全局文件对象上监听所有鼠标事件之前，还包括：
对于每一UI组件，当低代码开发平台渲染所述UI组件对应的元素时，在所述UI组件对应的元素的属性中添加一个唯一的组件标识码；
从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；
根据所述目标元素的组件标识码，探测所述低代码开发平台中的所有所述UI组件，得到目标UI组件。
在上述实现过程中，通过直接在全局文件对象上监听所有鼠标事件，在监听到任一鼠标事件时，从该鼠标事件对应的当前元素及当前元素的所有祖先元素中查询出目标元素，基于目标元素的组件标识码探测低代码开发平台中的所有UI组件，得到目标UI组件，无需改变低代码开发平台中UI组件原有的结构和样式即可进行UI组件探测，能够有效避免出现UI组件原有的结构和样式被破坏、部分UI组件不能被选中等异常情况，从而实现兼容探测低代码开发平台中各种类型的UI组件的技术效果。
进一步地，在所述在全局文件对象上监听所有鼠标事件之前，还包括：
对于每一所述UI组件，当所述低代码开发平台渲染所述UI组件对应的元素时，在所述UI组件对应的元素的属性中添加一个渲染标记符。
在上述实现过程中，通过在低代码开发平台渲染好的各个元素的属性中添加一个唯一的组件标识码和一个渲染标记符，能够保证后续进行UI组件探测时，可利用渲染好的各个元素的唯一组件标识码和渲染标记符快速准确地查询出目标元素，从而实现快速准确地探测低代码开发平台中各种类型的UI组件的技术效果。
进一步地，所述从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体包括：
判断所述当前元素的属性中是否有渲染标记符；
当所述当前元素的属性中没有渲染标记符时，将所述当前元素更新为所述当前元素的父级元素，重新判断所述当前元素的属性中是否有渲染标记符，直至遍历完所述目标元素和所述当前元素的所有祖先元素；
当所述当前元素的属性中有渲染标记符时，继续判断所述当前元素的属性中是否有组件标识码；
若所述当前元素的属性中没有组件标识码，则将所述当前元素更新为所述当前元素的父级元素，重新判断所述当前元素的属性中是否有组件标识码，直至遍历完所述当前元素和所述当前元素的所有祖先元素；
若所述当前元素的属性中有组件标识码，则确定所述当前元素为所述目标元素。
在上述实现过程中，通过利用渲染好的各个元素的唯一组件标识码和渲染标记符从当前元素和当前元素的所有祖先元素中向上查询出目标元素，能够快速准确地查询出目标元素，从而实现快速准确地探测低代码开发平台中各种类型的UI组件的技术效果。
进一步地，所述从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体还包括：
当所述当前元素和所述当前元素的所有祖先元素的属性中均没有渲染标记符，或者所述当前元素和所述当前元素的所有祖先元素均没有所述组件标识码时，发送所述鼠标事件不对应任一所述UI组件的提示信息。
在上述实现过程中，通过在当前元素和当前元素的所有祖先元素的属性中均没有渲染标记符，或者当前元素和当前元素的所有祖先元素均没有组件标识码时，发送鼠标事件不对应任一UI组件的提示信息，能够提示用户鼠标操作UI组件失败，有利于用户及时做出应对措施。
进一步地，所述根据所述目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件，具体包括：
获取所有所述UI组件的标识码，将标识码与所述目标元素的组件标识码相同的UI组件作为所述目标UI组件。
在上述实现过程中，通过分别将低代码开发平台中每一UI组件的标识码与目标元素的标识码进行对比，根据对比结果确定目标UI组件，能够面向低代码开发平台中的所有UI组件定位出目标UI组件，从而实现准确探测低代码开发平台中各种类型的UI组件。
进一步地，所有所述鼠标事件包括鼠标按下时持续触发事件、鼠标按下触发事件；所述UI组件为React组件。
在上述实现过程中，通过选择鼠标按下时持续触发事件、鼠标按下触发事件等作为所有鼠标事件，选择React组件作为UI组件，能够很好地适应低代码开发平台的应用范围，从而实现更好地兼容探测低代码开发平台中各种类型的UI组件的技术效果。
第二方面，本发明实施例提供一种UI组件探测装置，包括：
鼠标事件监听模块，用于在全局文件对象上监听所有鼠标事件，当监听到任一所述鼠标事件时，获取当前元素；
组件元素渲染模块，用于在所述在全局文件对象上监听所有鼠标事件之前，对于每一UI组件，当低代码开发平台渲染所述UI组件对应的元素时，在所述UI组件对应的元素的属性中添加一个唯一的组件标识码；
目标元素查询模块，用于从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；
UI组件探测模块，用于根据所述目标元素的组件标识码，探测所述低代码开发平台中的所有所述UI组件，得到目标UI组件。
进一步地，所述组件元素渲染模块，还用于在所述在全局文件对象上监听所有鼠标事件之前，对于每一所述UI组件，当所述低代码开发平台渲染所述UI组件对应的元素时，在所述UI组件对应的元素的属性中添加一个渲染标记符。
第三方面，本发明实施例提供一种电子设备，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序；所述存储器与所述处理器耦接，且所述处理器执行所述计算机程序时实现如上所述的UI组件探测方法。
第四方面，本发明实施例提供一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的计算机程序；其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如上所述的UI组件探测方法。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本发明第一实施例提供的一种UI组件探测方法的流程示意图；
图2为本发明第一实施例中一可选实施例提供的一种UI组件探测方法的流程示意图；
图3为本发明第一实施例中一示例提供的一种UI组件探测方法的数据流图；
图4为本发明第二实施例提供的一种UI组件探测装置的结构示意图；
图5为本发明第二实施例中一可选实施例提供的一种UI组件探测装置的结构示意图；
图6为本发明第三实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。
应注意到：在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。同时，文中的步骤编号，仅为了方便本发明实施例的解释，不作为限定步骤执行先后顺序的作用。本发明实施例提供的方法可以由相关的终端设备执行，且下文均以处理器作为执行主体为例进行说明。
请参看图1，图1为本发明第一实施例提供的一种UI组件探测方法的流程示意图。本发明第一实施例提供一种UI组件探测方法，包括步骤S101~S103：
S101、在全局文件对象上监听所有鼠标事件，当监听到任一鼠标事件时，获取当前元素；
S102、从当前元素和当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；
S103、根据目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件。
作为示例性地，在步骤S101中，在全局文件对象上注册鼠标按下时持续触发事件onmousemove、鼠标按下触发事件onmousedown等鼠标事件，实时在全局文件对象上监听所有鼠标事件，当监听到任一鼠标事件时，获取此时鼠标指示的页面元素，得到当前元素。
在步骤S102中，获取当前元素和当前元素的所有祖先元素，其中，当前元素的祖先元素包括当前元素的父级元素、当前元素的父级元素的父级元素等。从当前元素和当前元素的所有祖先元素中查询出具有组件标识码nodeID的元素，将查询出的元素作为目标元素。
在步骤S103中，获取目标元素的组件标识码，根据目标元素的组件标识码，从低代码开发平台中的所有UI组件定位出目标UI组件，完成UI组件探测。
本发明实施例通过直接在全局文件对象上监听所有鼠标事件，在监听到任一鼠标事件时，从该鼠标事件对应的当前元素及当前元素的所有祖先元素中查询出目标元素，基于目标元素的组件标识码探测低代码开发平台中的所有UI组件，得到目标UI组件，无需改变低代码开发平台中UI组件原有的结构和样式即可进行UI组件探测，能够有效避免出现UI组件原有的结构和样式被破坏、部分UI组件不能被选中等异常情况，从而实现兼容探测低代码开发平台中各种类型的UI组件的技术效果。
请参看图2，图2为本发明第一实施例中一可选实施例提供的一种UI组件探测方法的流程示意图。在可选的实施例当中，所述UI组件探测方法，还包括步骤S104：
S104、在所述在全局文件对象上监听所有鼠标事件之前，对于每一UI组件，当低代码开发平台渲染UI组件对应的元素时，在UI组件对应的元素的属性中添加一个唯一的组件标识码和一个渲染标记符。
作为示例性地，在进行UI组件探测之前，需要在低代码开发平台渲染其内部任一UI组件对应的元素时，在该UI组件对应的元素的属性中添加一个唯一的组件标识码nodeID和一个渲染标记符。其中，不同UI组件对应的元素的属性中的渲染标记符可以是相同的也可以是不同的。
本发明实施例通过在低代码开发平台渲染好的各个元素的属性中添加一个唯一的组件标识码和一个渲染标记符，能够保证后续进行UI组件探测时，可利用渲染好的各个元素的唯一组件标识码和渲染标记符快速准确地查询出目标元素，从而实现快速准确地探测低代码开发平台中各种类型的UI组件的技术效果。
在可选的实施例当中，所述从当前元素和当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体包括：判断当前元素的属性中是否有渲染标记符；当当前元素的属性中没有渲染标记符时，将当前元素更新为当前元素的父级元素，重新判断当前元素的属性中是否有渲染标记符，直至遍历完目标元素和当前元素的所有祖先元素；当当前元素的属性中有渲染标记符时，继续判断当前元素的属性中是否有组件标识码；若当前元素的属性中没有组件标识码，则将当前元素更新为当前元素的父级元素，重新判断当前元素的属性中是否有组件标识码，直至遍历完当前元素和当前元素的所有祖先元素；若当前元素的属性中有组件标识码，则确定当前元素为目标元素。
作为示例性地，获取当前元素和当前元素的所有祖先元素，例如，在监听到任一鼠标事件时获取的当前元素为E1，E1的祖先元素仅包括其父级元素E2、其父级元素的父级元素E3。从E1、E2、E3中向上查询出具有组件标识码nodeID的元素，将查询出的元素作为目标元素，具体操作过程包括：
1、判断E1的属性中是否有渲染标记符；
2、当E1的属性中没有渲染标记符时，认为E1未被低代码开发平台渲染，将当前元素更新为E1的父级元素E2，重新判断E2的属性中是否有渲染标记符；
2.1、若E2的属性中没有渲染标记符，认为E2未被低代码开发平台渲染，则将当前元素更新为E2的父级元素E3，重新判断E3的属性中是否有渲染标记符；
2.1.1、若E3的属性中没有渲染标记符，由于此时已遍历完E1、E2、E3，认为E1、E2、E3均未被低代码开发平台渲染，则停止进行UI组件探测；
2.1.2、若E3的属性中有渲染标记符，认为E3已被低代码开发平台渲染，则可继续判断E3的属性中是否有组件标识码nodeID，并在判定E3的属性中没有组件标识码nodeID时停止进行UI组件探测，在判定E3的属性中有组件标识码nodeID时直接将E3确定为目标元素；
2.2、若E2的属性中有渲染标记符，认为E2已被低代码开发平台渲染，则可继续判断当前元素的属性中是否有组件标识码nodeID；
2.2.1、若E2的属性中没有组件标识码nodeID，则将当前元素更新为E2的父级元素E3，重新判断E3的属性中是否有组件标识码nodeID；
2.2.1.1、若E3的属性中没有组件标识码nodeID，由于此时已遍历完E1、E2、E3，认为E1、E2、E3均未被低代码开发平台渲染且赋予唯一的组件标识码nodeID，则停止进行UI组件探测；
2.2.1.2、若E3的属性中有组件标识码nodeID，则可直接将E3确定为目标元素；
3、当E1的属性中有渲染标记符时，认为E1已被低代码开发平台渲染，继续判断E1的属性中是否有组件标识码nodeID；
3.1、若E1的属性中没有组件标识码nodeID，则将当前元素更新为E1的父级元素E2，重新判断E2的属性中是否有组件标识码nodeID；
3.1.1、若E2的属性中没有组件标识码nodeID，则将当前元素更新为E2的父级元素E3，重新判断E3的属性中是否有组件标识码nodeID；
3.1.1.1、若E3的属性中没有组件标识码nodeID，由于此时已遍历完E1、E2、E3，认为E1、E2、E3均未被低代码开发平台渲染且赋予唯一的组件标识码nodeID，则停止进行UI组件探测；
3.1.1.2、若E3的属性中有组件标识码nodeID，则可直接将E3确定为目标元素；
3.1.2、若E2的属性中有组件标识码nodeID，则可直接将E2确定为目标元素。
本发明实施例通过利用渲染好的各个元素的唯一组件标识码和渲染标记符从当前元素和当前元素的所有祖先元素中向上查询出目标元素，能够快速准确地查询出目标元素，从而实现快速准确地探测低代码开发平台中各种类型的UI组件的技术效果。
在可选的实施例当中，所述从当前元素和当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体还包括：当当前元素和当前元素的所有祖先元素的属性中均没有渲染标记符，或者当前元素和当前元素的所有祖先元素均没有组件标识码时，发送鼠标事件不对应任一UI组件的提示信息。
作为示例性地，获取当前元素和当前元素的所有祖先元素，例如，在监听到任一鼠标事件时获取的当前元素为E1，E1的祖先元素仅包括其父级元素E2、其父级元素的父级元素E3。从E1、E2、E3中向上查询出具有组件标识码nodeID的元素，将查询出的元素作为目标元素，具体操作过程还包括：
2.1.1、若E3的属性中没有渲染标记符，由于此时已遍历完E1、E2、E3，认为E1、E2、E3均未被低代码开发平台渲染，则停止进行UI组件探测，发送鼠标事件不对应任一UI组件的提示信息；
3.1.1.1、若E3的属性中没有组件标识码nodeID，由于此时已遍历完E1、E2、E3，认为E1、E2、E3均未被低代码开发平台渲染且赋予唯一的组件标识码nodeID，则停止进行UI组件探测，发送鼠标事件不对应任一UI组件的提示信息。
本发明实施例通过在当前元素和当前元素的所有祖先元素的属性中均没有渲染标记符，或者当前元素和当前元素的所有祖先元素均没有组件标识码时，发送鼠标事件不对应任一UI组件的提示信息，能够提示用户鼠标操作UI组件失败，有利于用户及时做出应对措施。
在可选的实施例当中，所述根据目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件，具体包括：获取所有UI组件的标识码，将标识码与目标元素的组件标识码相同的UI组件作为目标UI组件。
作为示例性地，在查询出目标元素后，获取目标元素的组件标识码nodeID，以及获取低代码开发平台中所有UI组件的标识码，分别将每一UI组件的标识码与目标元素的组件标识码nodeID进行对比，若有一UI组件的标识码与目标元素的组件标识码nodeID相同，则认为该UI组件对应的元素为目标元素，将该UI组件作为目标UI组件。
本发明实施例通过分别将低代码开发平台中每一UI组件的标识码与目标元素的标识码进行对比，根据对比结果确定目标UI组件，能够面向低代码开发平台中的所有UI组件定位出目标UI组件，从而实现准确探测低代码开发平台中各种类型的UI组件。
在可选的实施例当中，所有鼠标事件包括鼠标按下时持续触发事件、鼠标按下触发事件；UI组件为React组件。
可以理解的是，鼠标按下时持续触发事件onmousemove、鼠标按下触发事件onmousedown等均是低代码开发平台中常见的用户交互操作。React是一个用于构建用户界面的JavaScript库，是主流的UI框架。
本发明实施例通过选择鼠标按下时持续触发事件、鼠标按下触发事件等作为所有鼠标事件，选择React组件作为UI组件，能够很好地适应低代码开发平台的应用范围，从而实现更好地兼容探测低代码开发平台中各种类型的UI组件的技术效果。
请参看图3，图3为本发明第一实施例中一示例提供的一种UI组件探测方法的数据流图。为了更清楚地说明本发明第一实施例提供的一种UI组件探测方法，作为示例性地，应用本发明第一实施例所述的UI组件探测方法进行UI组件探测，应用过程具体包括：
1、在低代码开发平台里，每个React组件都有一个唯一的标识码ID，我们可以根据这个标识码ID找到唯一的对应的React组件；
2、在低代码开发平台渲染每个React组件对应的页面元素时，给每个React组件对应的页面元素的props上增加一个属性nodeID，这个组件标识码nodeID与该页面元素对应的React组件的标识码ID相同；
3、在全局document对象上注册并监听所有鼠标事件，比如鼠标按下时持续触发事件onmousemove、鼠标按下触发事件onmousedown；
4、当任一鼠标事件触发时，可以通过e.target 拿到当前element元素，查询当前element元素的属性上有没有渲染标记符，比如reactFiber的引用（一个以reactFiber$开头的属性，React会在自己渲染的element上加上），如果没有的话，就查询当前element元素的parent元素，一直向上查询，直到查询到第一个有reactFiber引用的element元素，如果经过上述步骤，一直找到document都没有找不到任何拥有reactFiber引用的element元素，则说明当前事件不对应任何React组件，如果找到了，则进行下一步；
5、当找到了拥有reactFiber引用的element元素时，在当前fiber中查询memoizedProps，判断memoizedProps里面有没有nodeID属性，如果没有，则查询当前fiber的return对象（该fiber的父fiber节点），重复此步骤，一直向上查询，直到查询到某个fiber的memoizedProps上有nodeID这个属性，如果经过上述步骤，一直找到document都没有找不到任何拥有nodeID的element元素，则说明当前事件不对应任何React组件，如果找到了，则进行下一步；
6、此时，这个nodeID就是我们想要的在低代码开发平台中的React组件的ID，我们可以通过这个ID定位到对应的React组件。
请参看图4，图4为本发明第二实施例提供的一种UI组件探测装置的结构示意图。本发明第二实施例提供一种UI组件探测装置，包括：鼠标事件监听模块201，用于在全局文件对象上监听所有鼠标事件，当监听到任一鼠标事件时，获取当前元素；目标元素查询模块202，用于从当前元素和当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；UI组件探测模块203，用于根据目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件。
请参看图5，图5为本发明第二实施例提供的一种UI组件探测装置的结构示意图。本发明第二实施例提供一种UI组件探测装置，还包括：组件元素渲染模块204，用于在所述在全局文件对象上监听所有鼠标事件之前，对于每一UI组件，当低代码开发平台渲染UI组件对应的元素时，在UI组件对应的元素的属性中添加一个渲染标记符和一个唯一的组件标识码。
在可选的实施例当中，所述从当前元素和当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体包括：判断当前元素的属性中是否有渲染标记符；当当前元素的属性中没有渲染标记符时，将当前元素更新为当前元素的父级元素，重新判断当前元素的属性中是否有渲染标记符，直至遍历完目标元素和当前元素的所有祖先元素；当当前元素的属性中有渲染标记符时，继续判断当前元素的属性中是否有组件标识码；若当前元素的属性中没有组件标识码，则将当前元素更新为当前元素的父级元素，重新判断当前元素的属性中是否有组件标识码，直至遍历完当前元素和当前元素的所有祖先元素；若当前元素的属性中有组件标识码，则确定当前元素为目标元素。
在可选的实施例当中，所述从当前元素和当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体还包括：当当前元素和当前元素的所有祖先元素的属性中均没有渲染标记符，或者当前元素和当前元素的所有祖先元素均没有组件标识码时，发送鼠标事件不对应任一UI组件的提示信息。
在可选的实施例当中，所述根据目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件，具体包括：获取所有UI组件的标识码，将标识码与目标元素的组件标识码相同的UI组件作为目标UI组件。
在可选的实施例当中，所有鼠标事件包括鼠标按下时持续触发事件、鼠标按下触发事件；UI组件为React组件。
上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。
请参看图6，图6为本发明第三实施例提供的一种电子设备的结构示意图。本发明第三实施例提供一种电子设备30，包括处理器301、存储器302以及存储在存储器302中且被配置为由处理器301执行的计算机程序；存储器302与处理器301耦接，且处理器301执行计算机程序时实现如本发明第一实施例所述的UI组件探测方法。
其中，处理器301通过总线303从存储器302读取计算机程序并执行计算机程序时可实现如本发明第一实施例所述的UI组件探测方法包括的任意实施例的方法。
处理器301可以处理数字信号，可以包括各种计算结构。例如复杂指令集计算机结构、结构精简指令集计算机结构或者一种实行多种指令集组合的结构。在一些示例中，处理器301可以是微处理器。
存储器302可以用于存储由处理器301执行的指令或指令执行过程中相关的数据。这些指令和/或数据可以包括代码，用于实现本发明实施例描述的一个或多个模块的一些功能或者全部功能。本公开实施例的处理器301可以用于执行存储器302中的指令以实现如本发明第一实施例所述的UI组件探测方法。存储器302包括动态随机存取存储器、静态随机存取存储器、闪存、光存储器或其它本领域技术人员所熟知的存储器。
本发明第四实施例提供一种计算机可读存储介质，计算机可读存储介质包括存储的计算机程序；其中，在计算机程序运行时控制计算机可读存储介质所在设备执行如本发明第一实施例所述的UI组件探测方法，且能达到与之相同的有益效果。
综上所述，本发明实施例提供一种UI组件探测方法、装置、设备及存储介质，所述方法包括：在全局文件对象上监听所有鼠标事件，当监听到任一鼠标事件时，获取当前元素；从当前元素和当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；根据目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件。本发明实施例通过直接在全局文件对象上监听所有鼠标事件，在监听到任一鼠标事件时，从该鼠标事件对应的当前元素及当前元素的所有祖先元素中查询出目标元素，基于目标元素的组件标识码探测低代码开发平台中的所有UI组件，得到目标UI组件，无需改变低代码开发平台中UI组件原有的结构和样式即可进行UI组件探测，能够有效避免出现UI组件原有的结构和样式被破坏、部分UI组件不能被选中等异常情况，从而实现兼容探测低代码开发平台中各种类型的UI组件的技术效果。
在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。
Claims (7)
1.一种用户界面UI组件探测方法，其特征在于，包括：
在全局文件对象上监听所有鼠标事件，当监听到任一所述鼠标事件时，获取当前元素；
在所述在全局文件对象上监听所有鼠标事件之前，还包括：
对于每一UI组件，当低代码开发平台渲染所述UI组件对应的元素时，在所述UI组件对应的元素的属性中添加一个唯一的组件标识码和一个渲染标记符；
从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；
所述从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体包括：
判断所述当前元素的属性中是否有渲染标记符；
当所述当前元素的属性中没有渲染标记符时，将所述当前元素更新为所述当前元素的父级元素，重新判断所述当前元素的属性中是否有渲染标记符，直至遍历完所述当前元素和所述当前元素的所有祖先元素；
当所述当前元素的属性中有渲染标记符时，继续判断所述当前元素的属性中是否有组件标识码；
若所述当前元素的属性中没有组件标识码，则将所述当前元素更新为所述当前元素的父级元素，重新判断所述当前元素的属性中是否有组件标识码，直至遍历完所述当前元素和所述当前元素的所有祖先元素；
若所述当前元素的属性中有组件标识码，则确定所述当前元素为所述目标元素；
根据所述目标元素的组件标识码，探测所述低代码开发平台中的所有所述UI组件，得到目标UI组件。
2.根据权利要求1所述的UI组件探测方法，其特征在于，所述从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体还包括：
当所述当前元素和所述当前元素的所有祖先元素的属性中均没有渲染标记符，或者所述当前元素和所述当前元素的所有祖先元素均没有所述组件标识码时，发送所述鼠标事件不对应任一所述UI组件的提示信息。
3.根据权利要求1所述的UI组件探测方法，其特征在于，所述根据所述目标元素的组件标识码，探测低代码开发平台中的所有UI组件，得到目标UI组件，具体包括：
获取所有所述UI组件的标识码，将标识码与所述目标元素的组件标识码相同的UI组件作为所述目标UI组件。
4.根据权利要求1所述的UI组件探测方法，其特征在于，所有所述鼠标事件包括鼠标按下时持续触发事件、鼠标按下触发事件；所述UI组件为React组件。
5.一种UI组件探测装置，其特征在于，包括：
鼠标事件监听模块，用于在全局文件对象上监听所有鼠标事件，当监听到任一所述鼠标事件时，获取当前元素；
组件元素渲染模块，用于在所述在全局文件对象上监听所有鼠标事件之前，对于每一UI组件，当低代码开发平台渲染所述UI组件对应的元素时，在所述UI组件对应的元素的属性中添加一个唯一的组件标识码和一个渲染标记符；
目标元素查询模块，用于从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素；
所述从所述当前元素和所述当前元素的所有祖先元素中查询出具有组件标识码的元素，得到目标元素，具体包括：
判断所述当前元素的属性中是否有渲染标记符；
当所述当前元素的属性中没有渲染标记符时，将所述当前元素更新为所述当前元素的父级元素，重新判断所述当前元素的属性中是否有渲染标记符，直至遍历完所述当前元素和所述当前元素的所有祖先元素；
当所述当前元素的属性中有渲染标记符时，继续判断所述当前元素的属性中是否有组件标识码；
若所述当前元素的属性中没有组件标识码，则将所述当前元素更新为所述当前元素的父级元素，重新判断所述当前元素的属性中是否有组件标识码，直至遍历完所述当前元素和所述当前元素的所有祖先元素；
若所述当前元素的属性中有组件标识码，则确定所述当前元素为所述目标元素；
UI组件探测模块，用于根据所述目标元素的组件标识码，探测所述低代码开发平台中的所有所述UI组件，得到目标UI组件。
6.一种电子设备，其特征在于，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序；所述存储器与所述处理器耦接，且所述处理器执行所述计算机程序时实现根据权利要求1至4任一项所述的UI组件探测方法。
7.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的计算机程序；其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行根据权利要求1至4任一项所述的UI组件探测方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310898724.1A CN116627391B (zh) | 2023-07-21 | 2023-07-21 | 一种ui组件探测方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310898724.1A CN116627391B (zh) | 2023-07-21 | 2023-07-21 | 一种ui组件探测方法、装置、设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116627391A CN116627391A (zh) | 2023-08-22 |
| CN116627391B true CN116627391B (zh) | 2023-10-27 |
Family
ID=87613780
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310898724.1A Active CN116627391B (zh) | 2023-07-21 | 2023-07-21 | 一种ui组件探测方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116627391B (zh) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103748584A (zh) * | 2011-08-26 | 2014-04-23 | 国际商业机器公司 | 网页中的项目列表的自动检测 |
| CN111679828A (zh) * | 2020-05-25 | 2020-09-18 | 泰康保险集团股份有限公司 | 一种数据处理的方法及装置、电子设备、存储介质 |
| CN112083992A (zh) * | 2020-09-02 | 2020-12-15 | 李振 | Ui自动化测试方法 |
| CN112711418A (zh) * | 2021-02-05 | 2021-04-27 | 北京宇信科技集团股份有限公司 | 多组件的前端界面布局方法、装置、电子设备和存储介质 |
| US11443098B1 (en) * | 2017-02-08 | 2022-09-13 | Amazon Technologies, Inc. | Federated recursive user interface element rendering |
| CN115756598A (zh) * | 2022-10-17 | 2023-03-07 | 网易（杭州）网络有限公司 | 应用于低代码平台的组件检测方法、系统及装置 |
| CN115826963A (zh) * | 2022-12-20 | 2023-03-21 | 浪潮云信息技术股份公司 | 基于低代码开发平台进行的流程事件开发复用方法及系统 |
| WO2023078053A1 (zh) * | 2021-11-03 | 2023-05-11 | 北京字节跳动网络技术有限公司 | 一种代码生成方法、装置、计算机设备及存储介质 |
| CN116301500A (zh) * | 2023-02-28 | 2023-06-23 | 上海数禾信息科技有限公司 | 组件拖拽方法、装置、计算机设备和存储介质 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7395456B2 (en) * | 2005-08-17 | 2008-07-01 | Microsoft Corporation | Query-based identification of user interface elements |
| US20230146421A1 (en) * | 2021-11-08 | 2023-05-11 | Servicenow, Inc. | Low-Code and No-Code Customization User Interface Components |
| US20230169138A1 (en) * | 2021-12-01 | 2023-06-01 | Salesforce.Com, Inc. | Rendering primitive child elements corresponding to child components of a user interface without instantiating the child components |
-
2023
- 2023-07-21 CN CN202310898724.1A patent/CN116627391B/zh active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103748584A (zh) * | 2011-08-26 | 2014-04-23 | 国际商业机器公司 | 网页中的项目列表的自动检测 |
| US11443098B1 (en) * | 2017-02-08 | 2022-09-13 | Amazon Technologies, Inc. | Federated recursive user interface element rendering |
| CN111679828A (zh) * | 2020-05-25 | 2020-09-18 | 泰康保险集团股份有限公司 | 一种数据处理的方法及装置、电子设备、存储介质 |
| CN112083992A (zh) * | 2020-09-02 | 2020-12-15 | 李振 | Ui自动化测试方法 |
| CN112711418A (zh) * | 2021-02-05 | 2021-04-27 | 北京宇信科技集团股份有限公司 | 多组件的前端界面布局方法、装置、电子设备和存储介质 |
| WO2023078053A1 (zh) * | 2021-11-03 | 2023-05-11 | 北京字节跳动网络技术有限公司 | 一种代码生成方法、装置、计算机设备及存储介质 |
| CN115756598A (zh) * | 2022-10-17 | 2023-03-07 | 网易（杭州）网络有限公司 | 应用于低代码平台的组件检测方法、系统及装置 |
| CN115826963A (zh) * | 2022-12-20 | 2023-03-21 | 浪潮云信息技术股份公司 | 基于低代码开发平台进行的流程事件开发复用方法及系统 |
| CN116301500A (zh) * | 2023-02-28 | 2023-06-23 | 上海数禾信息科技有限公司 | 组件拖拽方法、装置、计算机设备和存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116627391A (zh) | 2023-08-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107644286B (zh) | 工作流处理方法及装置 | |
| US20120192051A1 (en) | Formatting data by example | |
| CN102664925B (zh) | 一种展现搜索结果的方法及装置 | |
| CN103778373A (zh) | 病毒检测方法及装置 | |
| CN111475161B (zh) | 一种访问组件的方法、装置及设备 | |
| CN107729452B (zh) | 网页加载方法、装置、电子设备及计算机可读存储介质 | |
| CN109740041B (zh) | 网页爬取方法、装置、存储介质和计算机设备 | |
| CN110737892B (zh) | 一种针对apc注入的检测方法和相关装置 | |
| CN111475401A (zh) | 一种测试方法及相关设备 | |
| US20130081010A1 (en) | Template and server content download using protocol handlers | |
| CN110633220A (zh) | 调试信息显示方法、装置、存储介质及电子设备 | |
| CN113377458B (zh) | 插件管理方法、装置、电子设备和存储介质 | |
| CN115328759A (zh) | 表单的校验方法及装置 | |
| CN113360379B (zh) | 程序测试环境创建方法和程序测试环境创建装置 | |
| CN109240664B (zh) | 一种采集用户行为信息的方法及终端 | |
| CN109558548B (zh) | 一种消除css样式冗余的方法及相关产品 | |
| CN116627391B (zh) | 一种ui组件探测方法、装置、设备及存储介质 | |
| US9361210B2 (en) | Capturing domain validations and domain element initializations | |
| US20150334159A1 (en) | Method, System and Browser for Executing Active Object of Browser | |
| CN112258295A (zh) | 记录处理方法、装置及设备 | |
| CN111176987A (zh) | 前端日志统一输出的方法、装置、计算机设备及存储介质 | |
| CN113935847A (zh) | 线上流程的风险处理方法、装置、服务器及介质 | |
| CN113076084A (zh) | 资源文件处理方法、装置、设备及存储介质 | |
| CN110704483A (zh) | 用户路由流程定位方法、设备、存储介质及装置 | |
| CN108108369B (zh) | 公用接口库调用错误处理方法和装置 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240612 Address after: 201203, Zone A, North 2nd Floor, No. 625 Zhangjiang Road, China (Shanghai) Pilot Free Trade Zone, Pudong New Area, Shanghai Patentee after: Shanghai Weida Information Technology Co.,Ltd. Country or region after: China Address before: 201203 3rd floor, building 2, No. 200, zhangheng Road, Pudong New Area pilot Free Trade Zone, Shanghai Patentee before: SHANGHAI BINGJIANG INFORMATION TECHNOLOGY CO.,LTD. Country or region before: China |