CN114995803A - 人机界面的开发方法、低代码开发平台、终端以及介质 - Google Patents

Abstract

本申请属于工业互联网技术领域，尤其涉及一种人机界面的开发方法、低代码开发平台、终端以及介质。该人机界面的开发方法包括：根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区；响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系；检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码；根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。如此，本申请提供的人机界面的开发方法，降低了HMI系统开发对于用户编码能力的要求，且无需在开发过程中重复进行编码，因此能够提高HMI系统的开发便捷性。

Description

人机界面的开发方法、低代码开发平台、终端以及介质

技术领域

本申请涉及工业互联网领域，尤其涉及一种人机界面的开发方法、低代码开发平台、终端以及介质。

背景技术

HMI称为人机界面，是系统与用户之间进行信息交互的媒介。HMI可以通过控制PLC(可编程逻辑控制器)来控制工业生产的各个环节。随着智能化生产的发展，工业产线变得越来越复杂，开发不同的HMI系统以适配不同的应用场景成为工业生产的重要部分。

然而，在目前的HMI系统开发技术中，不同的厂商对于不同的应用场景，需要开发不同的HMI界面，在开发过程中需要重复编写HMI代码；或者需要用户自行编写代码，导致使用时涉及的工作量大，且对用户的编码能力要求高。

如此，如何提高HMI系统的开发便捷性，从而适应当前工业生产对于HMI系统的开发需求，是工业互联网领域亟需解决的难题。

发明内容

本申请的主要目的在于提供一种人机界面的开发方法、低代码开发平台、终端以及介质，旨在基于低代码框架使用组件化HMI工具对HMI系统进行低代码开发，降低HMI系统开发对于用户编码能力的要求，且无需在开发过程中重复进行编码，从而提高HMI系统的开发便捷性。

为实现上述目的，本申请提供一种人机界面的开发方法，所述方法应用于低代码开发平台，所述低代码开发平台包括组件库和编辑区，所述组件库用于存放目标组件，所述编辑区应用低代码开发框架，所述低代码开发框架用于供用户对所述目标组件进行拖拽组合以生成源文件，所述目标组件为能够实现预设功能的代码块，所述方法包括：

根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区；

响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系；

检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码；

根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。

在本申请的一些实施例中，基于以上技术方案，所述编辑区包括画布区，所述画布区为所述编辑区中用于显示和移动所述目标组件的区域，根据第一用户指令从所述组件库获取目标组件，并将所述目标组件导入所述编辑区，包括：

根据所述第一用户指令从所述组件库获取对应的基础组件，并将所述基础组件对应的组件参数由默认值修改为指定值；

根据修改后的组件参数对所述数据库内与所述基础组件对应的组件代码进行修改；

对修改后的组件代码进行渲染生成目标组件，并将所述目标组件导入所述画布区。

在本申请的一些实施例中，基于以上技术方案，所述编辑区还包括日志区，所述日志区用于显示所述数据库的数据变动痕迹，在根据修改后的组件参数对所述数据库内与所述基础组件对应的组件代码进行修改之后，所述方法还包括：

检测所述数据库的数据变动痕迹，并根据所述数据变动痕迹生成数据编辑副本；

将所述数据编辑副本在所述日志区进行显示，以供用户进行追溯参考。

在本申请的一些实施例中，基于以上技术方案，在根据所述第一用户指令从所述组件库获取对应的基础组件之前，所述方法还包括：

根据第二用户指令从组件开源平台获取所述基础组件，所述组件开源平台用于通过低代码编辑的形式生成所述基础组件；

将通过所述组件开源平台生成的所述基础组件导入至所述组件库。

在本申请的一些实施例中，基于以上技术方案，所述第二用户指令包括第一组件生成指令和第二组件生成指令，根据第二用户指令从组件开源平台获取所述基础组件，包括：

根据所述第一组件生成指令选取所述组件开源平台的组件模板以生成所述基础组件；或者，

根据所述第二组件生成指令在所述组件开源平台对组件文件进行修改，以生成所述基础组件，所述组件文件包含实现组件功能的代码。

在本申请的一些实施例中，基于以上技术方案，在对所述源文件进行渲染生成目标人机界面之后，所述方法还包括：

发送协议确定指令至协议转换平台，以确定所述目标人机界面对应的目标协议；

根据所述目标协议对所述目标人机界面进行协议转换得到新的目标人机界面。

在本申请的一些实施例中，基于以上技术方案，所述源文件为网页源文件，所述目标人机界面应用于网页端。

根据本申请实施例的一方面，公开了一种低代码开发平台，所述低代码开发平台包括：

导入模块，被配置为根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区；

调整模块，被配置为响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系；

生成模块，被配置为检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码；

渲染模块，被配置为根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。

根据本申请实施例的一个方面，提供一种计算机可读介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如以上技术方案中的人机界面的开发方法。

根据本申请实施例的一个方面，提供一种电子设备，该电子设备包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器被配置为经由执行所述可执行指令来执行如以上技术方案中的人机界面的开发方法。

根据本申请实施例的一个方面，提供一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行如以上技术方案中的人机界面的开发方法。

本申请实施例中，基于低代码开发平台对HMI系统进行开发，其中低代码开发平台包括组件库和编辑区，组件库用于存放目标组件，编辑区应用低代码开发框架，低代码开发框架用于供用户对所述目标组件进行拖拽组合以生成源文件，目标组件为能够实现预设功能的代码块，用户在基于该低代码开发平台在组件库中获取所需的目标组件并导入编辑区，然后通过拖拽组合操作对该目标组件进行编辑操作，并且将该目标组件与数据库中的组件代码进行绑定，在完成编辑后将数据库的组件代码导出生成源文件，最后对该源文件进行渲染，从而生成用户所需的目标人机界面。

如此，本申请提供的人机界面的开发方法，基于低代码框架使用组件化HMI工具对HMI系统进行低代码开发，降低HMI系统开发对于用户编码能力的要求，且无需在开发过程中重复进行编码，用户可以直接对代码块进行图形化拖拽操作来编辑生成人机界面的源文件，因此能够提高HMI系统的开发便捷性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了本申请一个实施例中的人机界面的开发方法的步骤流程图。

图2示出了本申请一个实施例中的修改组件参数的步骤流程图。

图3示出了本申请一个实施例中的组件参数的传递过程示意图。

图4示出了本申请一个实施例中的低代码HMI开发系统的结构示意图图。

图5示出了本申请一个实施例中的生成基础组件的步骤流程图。

图6示出了本申请一个实施例中的基于组件文件生成基础组件的操作示意图。

图7示出了本申请一个实施例中的对目标人机界面进行协议转换的步骤流程图。

图8示出了本申请一个实施例中的人机界面协议转换的过程示意图。

图9示意性地示出了本申请实施例提供的人机界面的开发平台的结构框图。

图10示意性示出了适于用来实现本申请实施例的电子设备的计算机系统结构框图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本申请将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本申请的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本申请的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

下面结合具体实施方式对本申请提供的人机界面的开发方法、低代码开发平台、终端以及介质等技术方案做出详细说明。

图1示出了本申请一个实施例中的人机界面的开发方法的步骤流程图，如图1所示，该人机界面的开发方法主要可以包括如下的步骤S100至步骤S400。

步骤S100，根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区。

步骤S200，响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系。

步骤S300，检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码。

步骤S400，根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。

在本申请实施例提供的人机界面的开发方法中，通过基于低代码开发平台对HMI系统进行开发，其中低代码开发平台包括组件库和编辑区，组件库用于存放目标组件，编辑区应用低代码开发框架，低代码开发框架用于供用户对所述目标组件进行拖拽组合以生成源文件，目标组件为能够实现预设功能的代码块，用户在基于该低代码开发平台在组件库中获取所需的目标组件并导入编辑区，然后通过拖拽组合操作对该目标组件进行编辑操作，并且将该目标组件与数据库中的组件代码进行绑定，在完成编辑后将数据库的组件代码导出生成源文件，最后对该源文件进行渲染，从而生成用户所需的目标人机界面。

如此，本申请提供的人机界面的开发方法，基于低代码框架使用组件化HMI工具对HMI系统进行低代码开发，降低HMI系统开发对于用户编码能力的要求，且无需在开发过程中重复进行编码，用户可以直接对代码块进行图形化拖拽操作来编辑生成人机界面的源文件，因此能够提高HMI系统的开发便捷性。

下面分别对人机界面的开发方法中的各个方法步骤做详细说明。

步骤S100，根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区。

在上述低代码开发平台的组件库存储着相当数量的目标组件，该目标组件是能够实现各种预设功能的代码块，用户根据实际需要选取目标组件，如仪表盘、水位线、数据区域缩放组件等，然后导入至编辑区以供后续进行编辑使用，无需用户为实现上述目标组件的功能而重新进行编码，节省了用户的编辑时间以及降低了用户的编辑难度。

步骤S200，响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系。

当用户在低代码开发平台的组件库选取目标组件并导入编辑区后，通过拖拽组合操作的方式对该目标组件进行编辑操作，以对所需的目标人机界面添加对应的功能模块，由于在编辑过程中用户是针对图形进行拖拽操作，因此编辑过程直观且便于识别。

作为一种可选的实施方式，上述编辑区应用的低代码框架为React框架，上述拖拽组合目标组件的操作是基于React dnd库实现的，即将目标组件包装在DragDropContext中的Draggable和Droppable中，从而实现目标组件的拖拽和放置。

作为一种可选的实施方式，上述编辑区还可应用除React框架以外的低代码框架如vue等，在此不作具体限定。

步骤S300，检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码。

当用户在组件库中选取目标组件并将该目标组件导入编辑区后，上述低代码开发平台连接的数据库会生成该目标组件对应的组件代码，以使该目标组件与后端数据进行绑定。

步骤S400，根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。

当用户对编辑区中的目标组件编辑完成后，通过上述低代码开发平台选择导出源文件，则可以根据上述数据库的组件代码生成源文件，接着对该源文件进行渲染生成用户所需的目标人机界面，从而完成人机界面的开发过程。

如图2所示，在以上实施例的基础上，所述编辑区包括画布区，所述画布区为所述编辑区中用于显示和移动所述目标组件的区域，在步骤S100中的根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区，包括如下的步骤S101至步骤S103。

步骤S101，根据所述第一用户指令从所述组件库获取对应的基础组件，并将所述基础组件对应的组件参数由默认值修改为指定值。

用户在组件库里选取实现预设功能的基础组件，此时该基础组件对应的组件参数为默认值，该默认值为0或者为行业常规值，用户可以直接该组件参数以改变该基础组件对应的组件属性。

步骤S102，根据修改后的组件参数对所述数据库内与所述基础组件对应的组件代码进行修改。

在用户从组件库里选取基础组件后，与该低代码开发平台连接的数据库会生成与该基础组件对应的组件代码，当用户对基础组件的组件参数修改后，数据库内对应的组件代码也会自动进行更新修改。

步骤S103，对修改后的组件代码进行渲染生成目标组件，并将所述目标组件导入所述画布区。

数据库在对更新修后的组件代码进行渲染后会生成能够满足用户需求的新的组件，即目标组件，并且将该目标组件导入画布区进行显示，以供用户进行后续的编辑操作。

作为一种可选的实施方式，如图3所示，上述低代码开发平台基于画布区监听canvasData(画布数据)，如果画布区新增组件就把组件的参数添加到canvasData里，同时Mysql数据库中将添加一条组件默认属性。用户对组件的参数进行自定义设置，将同步修改Mysql数据库中保存的属性，最后低代码开发平台会将上述组件渲染成用户设置得到的自定义组件，并将自定义组件应用于React框架的画布区。对于OT工程师而言，上述对组件的编辑设置过程涉及的代码量会大量降低，从而降低了技术难度。

在以上实施例的基础上，如图4所示，上述低代码开发平台的应用React框架的编辑区还包括代码区和日志区，此外低代码开发平台还包括存储组件的组件库，以及用于对人机界面进行协议转换的协议转换模块。其中所述代码区用于存储编辑生成的代码，所述日志区用于显示所述数据库的数据变动痕迹，在上述步骤S102中根据修改后的组件参数对所述数据库内与所述基础组件对应的组件代码进行修改之后，所述方法还包括如下步骤S104和步骤S105。

步骤S104，检测所述数据库的数据变动痕迹，并根据所述数据变动痕迹生成数据编辑副本。

当用户在编辑区的画布区添加、删除或者修改组件的参数时，数据库内与该组件对应的组件代码也会同步更新修改，此时上述低代码开发平台会监测数据库内的数据变动痕迹并生成用于记录画布区的组件变化的数据编辑副本。

步骤S105，将所述数据编辑副本在所述日志区进行显示，以供用户进行追溯参考。

上述低代码开发平台的编辑区还包括日志区，在根据数据库内的数据变动痕迹并生成用于记录画布区的组件变化的数据编辑副本后，会将该数据编辑副本在该日志区进行显示，以供用户进行追溯参考。在实际应用中，用户可以在上述低代码开发平台的编辑区界面点击日志区按钮，从而切换到日志区查看画布区中组件变化的记录。

在本实施例中，低代码开发平台的编辑区包括画布区和日志区，其中画布区用于显示和编辑组件，用户在开发过程中可以在画布区进行添加组件、删除组件、修改组件的参数以及对组件进行拖拽组合等操作，同时由于用户的操作导致画布区中组件变动的过程会记录在数据编辑副本，并且该数据编辑副本会在日志区进行显示，用户可以随时在编辑区的页面点击日志区按钮来切换至日志区界面来查看组件变动的过程，进行追溯和参考。如此，用户在上述低代码开发平台的编辑区进行的开发操作直观且便捷，降低了用户的开发难度，提高了上述低代码开发平台的实用性。

如图5所示，在以上实施例的基础上，在上述步骤S101中根据所述第一用户指令从所述组件库获取对应的基础组件之前，所述方法还包括如下的步骤S106和步骤S107。

步骤S106，根据第二用户指令从组件开源平台获取所述基础组件，所述组件开源平台用于通过低代码编辑的形式生成所述基础组件。

本申请中低代码开发平台的组件库用于存放基础组件以供用户选取使用，而上述基础组件则是由用户在组件开源平台进行编辑生成，并且该组件开源平台能够通过低代码编辑的形式生成该基础组件，降低用户编辑生成基础组件的技术难度，从而进一步降低用户对于目标人机界面的开发难度。

步骤S107，将通过所述组件开源平台生成的所述基础组件导入至所述组件库。

用户在上述组件开源平台通过低代码编辑的形式生成实现预设功能的代码块，即基础组件后，将该基础组件由该组件开源平台导入至组件库存放，以供后续选取使用。

需要说明的是，上述组件开源平台优选lowdefy平台，代码简洁且上手速度快，便于开发人员学习使用；此外，上述组件开源平台还可以采用amis等其他平台，在此不作具体限定。

在以上实施例的基础上，所述第二用户指令包括第一组件生成指令和第二组件生成指令，上述步骤S106中根据第二用户指令从组件开源平台获取所述基础组件，包括如下的步骤A1或者步骤A2。

步骤A1，根据所述第一组件生成指令选取所述组件开源平台的组件模板以生成所述基础组件。

作为可以通过低代码编辑形式生成组件的组件开源平台，如lowdefy平台，会配置有相当数量的组件模板，用户对该组件模板进行简单编辑即可生成对应的基础组件。

步骤A2，根据所述第二组件生成指令在所述组件开源平台对组件文件进行修改，以生成所述基础组件，所述组件文件包含实现组件功能的代码。

用户在不使用上述组件开源平台自带的组件模块的情况下编辑生成基础组件时，也可以在该组件开源平台上修改编辑用于生成基础组件的组件文件，如图6所示，基于lowdefy平台编辑修改json文件，从而生成用户自定义的基础组件。

本实施例提供了用户通过组件开源平台编辑生成基础组件并导入至组件库进行存放的具体过程和方法，其中组件开源平台能够通过低代码编辑的形式生成组件，优选为lowdefy平台，降低了用户编辑生成基础组件的技术难度，从而进一步降低了对于目标人机界面的开发难度，提高了本申请人机界面的开发方法的实用性。

如图7所示，在以上实施例的基础上，在步骤S400中的对所述源文件进行渲染生成目标人机界面之后，所述方法还包括如下的步骤S501和步骤S502。

步骤S501，发送协议确定指令至协议转换平台，以确定所述目标人机界面对应的目标协议。

步骤S502，根据所述目标协议对所述目标人机界面进行协议转换得到新的目标人机界面。

在本申请中由于低代码开发平台的编辑区应用了低代码开发框架进行人机界面的开发，如图8所示将人机界面基于http协议转换为tcp协议。而传统的人机界面基于MODBUS协议，而低代码开发框架通常不能直接存在MODBUS协议，基于上述低代码开发平台开发得到的目标人机界面通常基于http协议，需要通过协议转换平台进行协议转换得到基于MODBUS协议的人机界面，以应用于工业生产的Windous端。

在实际应用中，用户通过上述低代码开发平台开发得到源文件，并将该源文件渲染生成目标人机界面后，通过协议转换平台，优选node-red平台，对该目标人机界面选择对应的协议设置，即可将通过该node-red平台将该目标人机界面由http协议转换为MODBUS协议以供使用。

本实施例提供了基于低代码开发平台开发得到目标人机界面后，对目标人机界面进行协议转换的具体方式，提高了本申请人机界面的开发方法的实用性。

进一步地，在以上实施例的基础上，所述源文件为网页源文件，所述目标人机界面应用于网页端。

用户基于上述低代码开发平台编辑开发得到网页源文件，将该网页源文件进行渲染生成应用于网页端的目标人机界面，从而扩大该目标人机界面的应用范围。

具体说来，现有工厂使用的HMI基本都是针对PLC实现，基于MODBUS协议实现HMI与PLC的通信，MODBUS协议交互需要通过寄存器地址和功能码实现，过程不直观且容易出错；而不同厂家开发的、不同型号的HMI系统，其寄存器类型的划分是各不相同的，对于HMI系统的应用形成了较大的限制。

通过本申请低代码开发平台基于网页端开发的HMI，可以直接使用多种现有的控制组件，便于通过协议转换平台进行协议转换，从而支持多种通信接口，实现跨平台应用，用户通过浏览器访问上述基于网页端开发的HMI，与PLC连接和信息交互，以达到工业控制的目的。因此，通过本申请低代码开发平台基于网页端开发的HMI，对于降低开发难度以及提高实用性，均存在较大的积极意义。

以下介绍本申请的装置实施例，可以用于执行本申请上述实施例中的人机界面的开发方法。图9示意性地示出了本申请实施例提供的低代码开发平台的结构框图。如图9所示，低代码开发平台包括：

导入模块，被配置为根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区；

调整模块，被配置为响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系；

生成模块，被配置为检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码；

渲染模块，被配置为根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。

在本申请的一个实施例中，基于以上实施例，低代码开发平台还包括：

修改模块，被配置为根据所述第一用户指令从所述组件库获取对应的基础组件，并将所述基础组件对应的组件参数由默认值修改为指定值；根据修改后的组件参数对所述数据库内与所述基础组件对应的组件代码进行修改；对修改后的组件代码进行渲染生成目标组件，并将所述目标组件导入所述画布区。

在本申请的一个实施例中，基于以上实施例，低代码开发平台还包括：

副本生成模块，被配置为检测所述数据库的数据变动痕迹，并根据所述数据变动痕迹生成数据编辑副本；将所述数据编辑副本在所述日志区进行显示，以供用户进行追溯参考。

在本申请的一个实施例中，基于以上实施例，低代码开发平台还包括：

获取模块，被配置为根据第二用户指令从组件开源平台获取所述基础组件，所述组件开源平台用于通过低代码编辑的形式生成所述基础组件；将通过所述组件开源平台生成的所述基础组件导入至所述组件库。

在本申请的一个实施例中，基于以上实施例，获取模块包括：

第一组件生成单元，被配置为根据所述第一组件生成指令选取所述组件开源平台的组件模板以生成所述基础组件。

第二组件生成单元，被配置为根据所述第二组件生成指令在所述组件开源平台对组件文件进行修改，以生成所述基础组件，所述组件文件包含实现组件功能的代码。

在本申请的一个实施例中，基于以上实施例，低代码开发平台还包括：

协议转换模块，被配置为发送协议确定指令至协议转换平台，以确定所述目标人机界面对应的目标协议；根据所述目标协议对所述目标人机界面进行协议转换得到新的目标人机界面。

图10示意性地示出了用于实现本申请实施例的电子设备的计算机系统结构框图。

需要说明的是，图10示出的电子设备的计算机系统1000仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图10所示，计算机系统1000包括中央处理器1001(Central Processing Unit，CPU)，其可以根据存储在只读存储器1002(Read-Only Memory，ROM)中的程序或者从存储部分1008加载到随机访问存储器1003(Random Access Memory，RAM)中的程序而执行各种适当的动作和处理。在随机访问存储器1003中，还存储有系统操作所需的各种程序和数据。中央处理器1001、在只读存储器1002以及随机访问存储器1003通过总线1004彼此相连。输入/输出接口1005(Input/Output接口，即I/O接口)也连接至总线1004。

以下部件连接至输入/输出接口1005：包括键盘、鼠标等的输入部分1006；包括诸如阴极射线管(Cathode Ray Tube，CRT)、液晶显示器(Liquid Crystal Display，LCD)等以及扬声器等的输出部分1007；包括硬盘等的存储部分1008；以及包括诸如局域网卡、调制解调器等的网络接口卡的通信部分1009。通信部分1009经由诸如因特网的网络执行通信处理。驱动器1010也根据需要连接至输入/输出接口1005。可拆卸介质1011，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1010上，以便于从其上读出的计算机程序根据需要被安装入存储部分1008。

特别地，根据本申请的实施例，各个方法流程图中所描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1009从网络上被下载和安装，和/或从可拆卸介质1011被安装。在该计算机程序被中央处理器1001执行时，执行本申请的系统中限定的各种功能。

需要说明的是，本申请实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本申请实施方式的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种人机界面的开发方法，其特征在于，所述方法应用于低代码开发平台，所述低代码开发平台包括组件库和编辑区，所述组件库用于存放目标组件，所述编辑区应用低代码开发框架，所述低代码开发框架用于供用户对所述目标组件进行拖拽组合以生成源文件，所述目标组件为能够实现预设功能的代码块，所述方法包括：

根据第一用户指令从所述组件库获取多个目标组件，并将所述多个目标组件导入所述编辑区；

响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系；

检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码；

根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。

2.如权利要求1所述的人机界面的开发方法，其特征在于，所述编辑区包括画布区，所述画布区为所述编辑区中用于显示和移动所述目标组件的区域，根据第一用户指令从所述组件库获取目标组件，并将所述目标组件导入所述编辑区，包括：

根据所述第一用户指令从所述组件库获取对应的基础组件，并将所述基础组件对应的组件参数由默认值修改为指定值；

根据修改后的组件参数对所述数据库内与所述基础组件对应的组件代码进行修改；

对修改后的组件代码进行渲染生成目标组件，并将所述目标组件导入所述画布区。

3.如权利要求2所述的人机界面的开发方法，其特征在于，所述编辑区还包括日志区，所述日志区用于显示所述数据库的数据变动痕迹，在根据修改后的组件参数对所述数据库内与所述基础组件对应的组件代码进行修改之后，所述方法还包括：

检测所述数据库的数据变动痕迹，并根据所述数据变动痕迹生成数据编辑副本；

将所述数据编辑副本在所述日志区进行显示，以供用户进行追溯参考。

4.如权利要求2所述的人机界面的开发方法，其特征在于，在根据所述第一用户指令从所述组件库获取对应的基础组件之前，所述方法还包括：

根据第二用户指令从组件开源平台获取所述基础组件，所述组件开源平台用于通过低代码编辑的形式生成所述基础组件；

将通过所述组件开源平台生成的所述基础组件导入至所述组件库。

5.如权利要求4所述的人机界面的开发方法，其特征在于，所述第二用户指令包括第一组件生成指令和第二组件生成指令，根据第二用户指令从组件开源平台获取所述基础组件，包括：

根据所述第一组件生成指令选取所述组件开源平台的组件模板以生成所述基础组件；或者，

根据所述第二组件生成指令在所述组件开源平台对组件文件进行修改，以生成所述基础组件，所述组件文件包含实现组件功能的代码。

6.如权利要求1所述的人机界面的开发方法，其特征在于，在对所述源文件进行渲染生成目标人机界面之后，所述方法还包括：

发送协议确定指令至协议转换平台，以确定所述目标人机界面对应的目标协议；

根据所述目标协议对所述目标人机界面进行协议转换得到新的目标人机界面。

7.如权利要求1至6任一项所述的人机界面的开发方法，其特征在于，所述源文件为网页源文件，所述目标人机界面应用于网页端。

8.一种低代码开发平台，其特征在于，所述低代码开发平台包括：

导入模块，被配置为根据第一用户指令从组件库获取多个目标组件，并将所述多个目标组件导入编辑区；

调整模块，被配置为响应作用于所述多个目标组件的拖拽组合操作，调整所述多个目标组件在所述编辑区内的组合关系；

生成模块，被配置为检测所述多个目标组件的组合关系，并根据所述组合关系在数据库内生成与所述多个目标组件对应的组件代码；

渲染模块，被配置为根据所述组件代码生成源文件，并对所述源文件进行渲染生成目标人机界面。

9.一种终端设备，其特征在于，所述终端设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的人机界面的开发程序，所述人机界面的开发程序被所述处理器执行时实现如权利要求1至7中任一项所述的人机界面的开发方法的步骤。

10.一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的人机界面的开发方法的步骤。

Images