CN117707530A - 应用程序页面的生成方法、装置、存储介质及电子设备 - Google Patents

Abstract

本发明公开了一种应用程序页面的生成方法、装置、存储介质及电子设备。涉及前端开发，尤其涉及应用页面搭建领域，该方法包括：响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中；响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系；基于目标组件的配置信息生成应用程序页面。本发明解决了相关技术中通过直接编写代码的方式进行应用程序页面搭建，存在的搭建效率低的技术问题。

Description

应用程序页面的生成方法、装置、存储介质及电子设备

技术领域

本发明涉及前端开发，尤其涉及应用页面搭建领域，具体而言，涉及一种应用程序页面的生成方法、装置、存储介质及电子设备。

背景技术

相关技术中主要通过低代码前端搭建平台实现应用程序页面的涉及与构建，但是相关技术中的低代码前端搭建平台目前还存在诸多的不足，例如，适用性差，无法支持超文本标记语言第五版H5页面的搭建；主要通过直接编写代码的方式进行应用程序页面搭建，应用程序页面搭建效率较低等。不方便编辑出满足业务逻辑的页面，难以满足开发人员的应用程序页面的开发、动态修改线上页面等需求。

针对上述相关技术中通过直接编写代码的方式进行应用程序页面搭建，存在的搭建效率低的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种应用程序页面的生成方法、装置、存储介质及电子设备，以至少解决相关技术中通过直接编写代码的方式进行应用程序页面搭建，存在的搭建效率低的技术问题。

根据本发明实施例的一个方面，提供了一种应用程序页面的生成方法，包括：响应于代码组件库中目标组件的拖拽操作，将所述目标组件拖拽至可视化页面搭建器的画布中；响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息，其中，所述页面表单模型库中至少包括所述目标组件与其他组件之间的联动关系；基于所述目标组件的配置信息生成应用程序页面。

可选的，所述响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息，包括：响应于针对所述画布中所述目标组件的所述第一配置操作，基于所述页面表单模型库配置所述目标组件的字段名，以及所述目标组件的组件状态与其他组件的组件状态之间的所述联动关系；基于所述字段名、所述联动关系，得到所述配置信息。

可选的，所述基于所述字段名、所述联动关系，得到所述配置信息，包括：响应于针对所述画布中所述目标组件的第二配置操作，配置所述目标组件的目标属性信息，其中，所述目标属性信息至少包括：所述目标组件对应的输入校验信息、事件信息，其中，所述输入校验信息用于指示所述目标组件对应的输入校验规则，所述事件信息至少用于指示针对所述目标组件的操作方式，以及所述操作方式触发的事件；基于所述目标属性信息，所述字段名以及所述联动关系，得到所述配置信息。

可选的，所述基于所述目标属性信息，所述字段名以及所述联动关系，得到所述配置信息，包括：响应于针对所述画布中所述目标组件的第三配置操作，配置所述目标组件的层叠样式表；基于所述层叠样式表，所述目标属性信息，所述字段名以及所述联动关系，得到所述配置信息。

可选的，所述第一配置操作、第二配置操作和所述第三配置操作是通过触发所述可视化页面搭建器中对应的控件实现的，或者通过在可视化页面搭建器的JSON编辑区进行对应代码的编辑实现的，或者通过将对应代码复制至所述JSON编辑区实现的。

可选的，在所述响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息之后，所述方法还包括：响应于所述可视化页面搭建器的页面切换操作，将所述画布切换至JSON编辑区；在所述JSON编辑区中以代码的形式显示所述画布中包括的组件分别对应的配置信息，其中，所述画布中包括所述目标组件，以及除所述目标组件之外的其他组件。

可选的，所述基于所述目标组件的配置信息生成应用程序页面，包括：对所述画布中包括的组件分别对应的配置信息进行解析处理，得到解析后的配置信息，其中，所述画布中包括所述目标组件，以及除所述目标组件之外的其他组件；将所述解析后的配置信息转换成所述应用程序页面。

根据本发明实施例的另一方面，还提供了一种应用程序页面的生成装置，包括：拖拽模块，用于响应于代码组件库中目标组件的拖拽操作，将所述目标组件拖拽至可视化页面搭建器的画布中；配置模块，用于响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息，其中，所述页面表单模型库中至少包括所述目标组件与其他组件之间的联动关系；页面生成模块，用于基于所述目标组件的配置信息生成应用程序页面。

根据本发明实施例的另一方面，还提供了一种非易失性存储介质，所述非易失性存储介质存储有多条指令，所述指令适于由处理器加载并执行任意一项所述的应用程序页面的生成方法。

根据本发明实施例的另一方面，还提供了一种电子设备，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现任意一项所述的应用程序页面的生成方法。

在本发明实施例中，通过响应于代码组件库中目标组件的拖拽操作，将所述目标组件拖拽至可视化页面搭建器的画布中；响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息，其中，所述页面表单模型库中至少包括所述目标组件与其他组件之间的联动关系；基于所述目标组件的配置信息生成应用程序页面，达到了基于代码组件库、可视化页面搭建器、页面表单模型库组合的方式高效进行应用程序页面的设置的目的，从而实现了提升应用程序页面搭建效率的技术效果，进而解决了相关技术中通过直接编写代码的方式进行应用程序页面搭建，存在的搭建效率低的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种应用程序页面的生成方法的示意图；

图2是根据本发明实施例的一种可选的系统架构示意图；

图3是根据本发明实施例的一种可选的应用程序页面的生成方法的示意图；

图4是根据本发明实施例的一种应用程序页面的生成装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本发明实施例，提供了一种应用程序页面的生成的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的应用程序页面的生成方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中。

可选的，该代码组件库可以为低代码组件库，低代码组件库是一种用于构建软件应用程序的工具集，其中包含了预先构建好的可重用组件和模块。该可视化页面搭建器左侧有组件列表、大纲树、历史记录面板，中间有画布、JSON编辑区、运行区面板，右侧有选中组件时该组件的属性编辑面板。其中，画布是用于显示页面布局和组件的区域。开发人员可以在画布上拖拽、放置和调整各种组件，以便快速构建页面布局。大纲树是用于显示页面结构的树形结构视图。它可以展示页面中各个组件的层级关系，同时也可以用于快速导航和定位到页面中的特定组件。历史记录面板用于记录页面编辑的历史操作，比如组件的添加、删除、移动等操作。通过历史记录面板，开发人员可以查看和管理页面编辑的历史记录，并进行撤销或重做操作。运行区面板用于预览和测试当前编辑的页面。开发人员可以在运行区面板中查看页面的最终呈现效果，以便及时调整和优化页面布局和组件样式。JSON编辑区是用于直接编辑页面布局和组件属性的区域。通过JSON编辑区，开发人员可以手动编写或修改页面布局和组件的JSON配置，包括组件的位置、大小、样式、属性等。通过在可视化页面搭建器中设置以上组件，为开发人员提供一个直观、便捷的页面构建和编辑环境，有效提升页面布局和设计效率。

可选的，目标组件为进行应用程序页面搭建时需要的任意一个组件，该目标组件可以但不限于为输入控件、展示组件、自增组件、布局组件中任意一种类型的组件。该应用程序页面可以为H5页面，也可以为小程序页面。

通过以上方式，在进行应用程序页面搭建时，从代码组件库中选取搭建页面需要的目标组件，并将该目标组件拖拽至可视化页面搭建起的画布中，使得使开发人员能够通过拖放、配置和少量的编程来快速开发应用程序，而无需进行大量的自定义编码。这种方法能够大大缩短应用程序的开发周期，同时降低了对开发技能的要求。

步骤S104，响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系。

可选的，该页面表单模型库可以单不限于为Formily表单模型库，Formily是一个基于响应React的表单解决方案，提供了一套表单模型库，旨在简化表单开发过程。基于该Formily表单模型库可以设置目标组件与其他组件之间的联动关系(也即联动逻辑)，使得开发人员可以更加灵活的构建出应用程序页面中各组件之间的联动关系，在提高应用程序页面搭建效率的同时，提升应用程序页面搭建的灵活性和可定制性。

需要说明的是，本发明实施例提供的应用程序页面的生成方法需要在使用可视化页面搭建器的基础上，引入代码组件库和页面表单模型库，因此，在执行上述步骤S102之前，还需要进行相关文件的引入与注册，例如，可以普通塔罗Taro客户端工程下载Formily表单模型库依赖和低代码组件库，在所需的页面文件中引入低代码组件库完成注册。其中，Taro客户端是一个开源的多端统一开发框架，可以帮助开发者使用一套代码同时开发小程序、H5、反应式原生框架React Native等多个平台的应用程序。Taro客户端可以大大提高开发效率，降低开发成本。

在一种可选的实施例中，响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，包括：响应于针对画布中目标组件的第一配置操作，基于页面表单模型库配置目标组件的字段名，以及目标组件的组件状态与其他组件的组件状态之间的联动关系；基于字段名、联动关系，得到配置信息。

可选的，可以配置目标组件在表单模型库中的字段名，以及配置目标组件与其他组件之间的联动关系，以实现目标组件的组件状态与其他组件的组件状态的联动变化。例如，目标组件为开关组件，对应的其他组件为图片组件，基于该表单模型库，可以快速配置开关组件的打开状态与图片组件的显示状态之间的联动关系，以及开关组件的关闭状态与图片组件的隐藏状态之间的联动关系。在构建好的应用程序页面中触发开关组件的关闭操作，此时通过该表单模型库可以快速找到与该开关组件的关闭状态对应的图片组件的隐藏状态，并将应用程序页面中显示的图片组件进行隐藏。通过以上方式，基于该表单模型库，可以实现组件间联动状态的快速灵活配置，提升应用程序页面的搭建效率和搭建的灵活性。

在一种可选的实施例中，基于字段名、联动关系，得到配置信息，包括：响应于针对画布中目标组件的第二配置操作，配置目标组件的目标属性信息，其中，目标属性信息至少包括：目标组件对应的输入校验信息、事件信息，其中，输入校验信息用于指示目标组件对应的输入校验规则，事件信息至少用于指示针对目标组件的操作方式，以及操作方式触发的事件；基于目标属性信息，字段名以及联动关系，得到配置信息。

可选的，在进行目标组件的配置时，除了配置目标组件与其他组件之间的联动逻辑，还需要对目标组件进行输入校验信息、事件信息以及默认值等属性信息。其中，配置输入校验信息是指为特定的输入组件(如输入框、下拉框等)定义校验规则，以确保用户输入的数据符合特定的格式、长度或其他要求，可以但不限于包括对输入内容的是否合规、格式、最小/最大长度、是否必填等进行配置。配置输入校验信息可以确保输入的数据符合预期，并提供友好的错误提示。配置事件是指为特定的组件定义各种交互行为所触发的事件，比如点击、鼠标悬停、输入变化等。通过配置事件，可以为组件添加交互功能，使其能够响应用户操作。例如，可以配置一个按钮组件的点击事件，当用户点击按钮时，触发特定的操作。配置默认值是指为组件的初始状态或默认属性值进行配置。例如，对于输入框组件，可以配置其初始显示的文本内容或默认的占位符文本。配置默认值可以确保组件在初始加载时具有预期的默认状态或展示内容。基于以上配置项有助于更灵活地定制和管理页面组件的行为和外观，以满足特定的业务需求和用户体验要求。

在一种可选的实施例中，基于目标属性信息，字段名以及联动关系，得到配置信息，包括：响应于针对画布中目标组件的第三配置操作，配置目标组件的层叠样式表；基于层叠样式表，目标属性信息，字段名以及联动关系，得到配置信息。

可选的，在进行目标组件的配置时，还可以为该目标组件设置层叠样式表(Cascading Style Sheets，CSS)，在应用程序页面开发的过程中，使用CSS来描述和定义网页的布局、颜色、字体、大小和其他视觉方面的样式。通过配置组件的CSS，可以为目标组件定义样式，以实现自定义的外观和风格。

在一种可选的实施例中，第一配置操作、第二配置操作和第三配置操作是通过触发可视化页面搭建器中对应的控件实现的，或者通过在可视化页面搭建器的JSON编辑区进行对应代码的编辑实现的，或者通过将对应代码复制至JSON编辑区实现的。

可选的，本发明实施例中的可视化页面搭建器中包括画布、JSON编辑区等多种组件，在进行目标组件的配置时，可以通过触发对应的组件，通过点击、拖拽等操作方式进行目标组件的配置，还可以通过直接在JSON编辑区编辑或复制代码来完成页面布局和组件配置，而无需依赖于拖放、调整等操作。通过以上方式可以实现多种方式进行目标组件的配置，提升组件配置操作的灵活性，以更好的适应开发人员的操作习惯和操作需求。

在一种可选的实施例中，在响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息之后，该方法还包括：响应于可视化页面搭建器的页面切换操作，将画布切换至JSON编辑区；在JSON编辑区中以代码的形式显示画布中包括的组件分别对应的配置信息，其中，画布中包括目标组件，以及除目标组件之外的其他组件。

可选的，在该可视化页面搭建器中，通过画布执行组件的配置操作，与通过JSON编辑区执行组件的配置操作之间是同步的，即在通过画布进行组件配置时，得到相关的配置信息之后，在JSON编辑区会以代码的同步显示对应的配置信息。同时如果在JSON编辑区以编写代码的形式进行组件配置，画布中显示的组件信息也会同步进行更新。例如，当开发人员在检查JSON编辑区中的代码，发现其中缺少某一个组件的配置信息时，直接在JSON编辑区的对应位置通过编写代码的形式进行该组件配置信息的添加即可，无需返回至画布页面；当开发人员正在观察画布中呈现的组件的配置信息时，发现缺少某一组件的配置信息，此时直接通过拖放、调整等操作在画布中进行操作即可，无需返回至JSON编辑区。以上方式可以提供更加灵活的组件配置方式，提升组件配置效率。

步骤S106，基于目标组件的配置信息生成应用程序页面。

可选的，该目标组件的配置信息配置完成之后，即可基于该目标组件的配置信息，结合画布中其他组件的配置信息，解析生成应用程序页面。

在一种可选的实施例中，基于目标组件的配置信息生成应用程序页面，包括：对画布中包括的组件分别对应的配置信息进行解析处理，得到解析后的配置信息，其中，画布中包括目标组件，以及除目标组件之外的其他组件；将解析后的配置信息转换成应用程序页面。

可选的，当画布中已配置有应用程序页面构建需要的所有组件，以及所有组件的配置信息均配置完成之后，可以对画布中所有的配置信息进行解析，基于解析后的应用程序页面转换生成应用程序页面。

上述步骤S102至步骤S106提供的应用程序页面的生成方法可应用于Taro客户端框架中，通过上述步骤S102至步骤S106，可以达到代码组件库、可视化页面搭建器、页面表单模型库组合的方式高效进行应用程序页面的设置的目的，从而实现提升应用程序页面搭建效率的技术效果，进而解决相关技术中通过直接编写代码的方式进行应用程序页面搭建，存在的搭建效率低的技术问题。

基于上述实施例和可选实施例，本发明提出一种可选实施方式，图2是根据本发明实施例的一种可选的系统架构示意图，该系统架构可用于实现任意一项上述的应用程序页面的生成方法，图2所示，该框架主要包括Taro客户端、低代码组件库、Formily表单模型库以及可视化页面搭建器，其中，该Taro客户端支持H5、小程序的编译与运行；Formily表单模型库中包括以下内容：

1)表单的关系图Form Graph，包含表单的结构、字段之间的关系等以便于理解和管理表单的整体结构。2)表单模型Models，用于描述表单的结构和行为。3)路径系统PathSystem，用于定位表单中的字段和数据。4)表单的生命周期Form Lifecycles，包括表单创建、初始化、销毁等各个阶段。5)验证器Validator，用于验证表单数据是否合规。6)共享Shared，表示表单中共享的一些数据或逻辑。7)响应式Reactive，用于指示表单数据的变化会触发相应的更新。8)JSON模式Schema，用于描述JSON数据的结构和约束。

图3是根据本发明实施例的一种可选的应用程序页面的生成方法的流程图，如图3所示，该方法包括：

步骤S1，Taro客户端工程下载Formily表单模型库依赖和低代码组件库，在所需的页面文件中引入低代码组件库完成注册。

步骤S2，可以参照低代码组件库来开发扩展所需的业务组件和业务应用程序接口(Application Programming Interface，API)，并注册到低代码组件库。

步骤S3，低代码可视化页面搭建器左侧有组件列表、大纲树、历史记录面板，中间有画布、JSON编辑区(数据交换格式编辑区)、运行区面板，右侧有选中组件时该组件的属性编辑面板。组件类型分为输入控件、展示组件、自增组件、布局组件。

步骤S4，在低代码可视化页面搭建器拖拽组件到画布，可以调整组件顺序，并且部分组件可以嵌套组件。

步骤S5，在页面搭建器中选中组件作为目标组件，配置目标组件的层叠样式表CSS，配置目标组件在表单模型库中的字段名，配置目标组件与其他组件之间的联动逻辑，配置输入校验信息，配置事件信息和默认值等属性。这些组件配置在客户端的低代码组件库的解析后就会渲染用户界面(User Interface，UI)，把目标组件的组件状态与表单模型中指定的字段名绑定起来，建立目标组件的组件状态与其他组件的组件状态之间的联动逻辑，并且用户操作目标组件可以改变表单模型库中对应的值，通过数据响应式触发了对应的联动逻辑，基于该联动逻辑，对应的其他组件的组件状态同步进行更新。通过表单模型库的模型-视图-视图模型MVVM架构和路径系统可以在JSON配置复杂的业务逻辑而不需要编写相应的代码。

步骤S6，在页面搭建器中切换到JSON编辑区，可以直接编辑JSON，按需求编辑完后可以保存到数据库(存储获取等后端服务自行开发)或保存到客户端工程中。

步骤S7，使用Taro客户端工程的打包命令Webpack打包出小程序产物或H5产物进行发布上线。

步骤S8，还可以把已有JSON复制到页面搭建器的JSON编辑区，还原出可视化界面继续搭建应用程序页面，应用程序页面修改完成后把新的JSON更新到数据库中。线上H5或小程序通过后端服务获取到新JSON模式，动态更新应用程序页面。

本发明实施例可以实现如下效果中的至少之一：1)既支持H5又支持小程序，避免了代码重复编写问题。2)支持配置联动逻辑、配置输入校验、配置事件，即使是复杂的业务逻辑也可以通过低代码配置实现，并且支持线上应用通过加载不同的JSON模式来加载不同的页面和逻辑，达到少些业务代码、动态更新的目的。3)提供了低代码可视化搭建应用程序页面，可以通过拖拽组件来构建页面结构，通过修改组件样式来美化应用程序页面，还可以配置业务逻辑，方便开发人员快速完成应用程序页面搭建。

在本实施例中还提供了一种应用程序页面的生成装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”“装置”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

根据本发明实施例，还提供了一种用于实施上述应用程序页面的生成方法的装置实施例，图4是根据本发明实施例的一种应用程序页面的生成装置的结构示意图，如图4所示，上述应用程序页面的生成装置，包括：拖拽模块400、配置模块402、页面生成模块404，其中：

拖拽模块400，用于响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中；

配置模块402，连接于拖拽模块400，用于响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系；

页面生成模块404，连接于配置模块402，用于基于目标组件的配置信息生成应用程序页面。

在本发明实施例中，通过设置拖拽模块400，用于响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中；配置模块402，连接于拖拽模块400，用于响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系；页面生成模块404，连接于配置模块402，用于基于目标组件的配置信息生成应用程序页面，达到了基于代码组件库、可视化页面搭建器、页面表单模型库组合的方式高效进行应用程序页面的设置的目的，从而实现了提升应用程序页面搭建效率的技术效果，进而解决了相关技术中通过直接编写代码的方式进行应用程序页面搭建，存在的搭建效率低的技术问题。

在一种可选的实施例中，上述配置模块，包括：第一配置子模块，用于响应于针对画布中目标组件的第一配置操作，基于页面表单模型库配置目标组件的字段名，以及目标组件的组件状态与其他组件的组件状态之间的联动关系；第一获取子模块，用于基于字段名、联动关系，得到配置信息。

在一种可选的实施例中，上述第一获取子模块，包括：第二配置子模块，用于响应于针对画布中目标组件的第二配置操作，配置目标组件的目标属性信息，其中，目标属性信息至少包括：目标组件对应的输入校验信息、事件信息，其中，输入校验信息用于指示目标组件对应的输入校验规则，事件信息至少用于指示针对目标组件的操作方式，以及操作方式触发的事件；第二获取子模块，用于基于目标属性信息，字段名以及联动关系，得到配置信息。

在一种可选的实施例中，上述第二获取子模块，包括：第三配置子模块，用于响应于针对画布中目标组件的第三配置操作，配置目标组件的层叠样式表；第三获取子模块，用于基于层叠样式表，目标属性信息，字段名以及联动关系，得到配置信息。

在一种可选的实施例中，第一配置操作、第二配置操作和第三配置操作是通过触发可视化页面搭建器中对应的控件实现的，或者通过在可视化页面搭建器的JSON编辑区进行对应代码的编辑实现的，或者通过将对应代码复制至JSON编辑区实现的。

在一种可选的实施例中，上述装置还包括：第一切换子模块，用于响应于可视化页面搭建器的页面切换操作，将画布切换至JSON编辑区；第一显示子模块，用于在JSON编辑区中以代码的形式显示画布中包括的组件分别对应的配置信息，其中，画布中包括目标组件，以及除目标组件之外的其他组件。

在一种可选的实施例中，上述页面生成模块，包括：第一解析子模块，用于对画布中包括的组件分别对应的配置信息进行解析处理，得到解析后的配置信息，其中，画布中包括目标组件，以及除目标组件之外的其他组件；第一转换子模块，用于将解析后的配置信息转换成应用程序页面。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，例如，对于后者，可以通过以下方式实现：上述各个模块可以位于同一处理器中；或者，上述各个模块以任意组合的方式位于不同的处理器中。

此处需要说明的是，上述拖拽模块400、配置模块402、页面生成模块404对应于实施例中的步骤S102至步骤S106，上述模块与对应的步骤所实现的实例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在计算机终端中。

需要说明的是，本实施例的可选或优选实施方式可以参见实施例中的相关描述，此处不再赘述。

上述的应用程序页面的生成装置还可以包括处理器和存储器，上述拖拽模块400、配置模块402、页面生成模块404等均作为程序模块存储在存储器中，由处理器执行存储在存储器中的上述程序模块来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序模块，上述内核可以设置一个或以上。存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

根据本申请实施例，还提供了一种非易失性存储介质的实施例。可选的，在本实施例中，上述非易失性存储介质包括存储的程序，其中，在上述程序运行时控制上述非易失性存储介质所在设备执行上述任意一种应用程序页面的生成方法。

可选的，在本实施例中，上述非易失性存储介质可以位于计算机网络中计算机终端群中的任意一个计算机终端中，或者位于移动终端群中的任意一个移动终端中，上述非易失性存储介质包括存储的程序。

可选的，在程序运行时控制非易失性存储介质所在设备执行以下功能：响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中；响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系；基于目标组件的配置信息生成应用程序页面。

根据本申请实施例，还提供了一种处理器的实施例。可选的，在本实施例中，上述处理器用于运行程序，其中，上述程序运行时执行上述任意一种应用程序页面的生成方法。

可选的，上述处理器，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中；响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系；基于目标组件的配置信息生成应用程序页面。

根据本申请实施例，还提供了一种计算机程序产品的实施例，当在数据处理设备上执行时，适于执行初始化有上述任意一种的应用程序页面的生成方法步骤的程序。

可选的，上述计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中；响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系；基于目标组件的配置信息生成应用程序页面。

可选的，上述计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：响应于针对画布中目标组件的第一配置操作，基于页面表单模型库配置目标组件的字段名，以及目标组件的组件状态与其他组件的组件状态之间的联动关系；基于字段名、联动关系，得到配置信息。

可选的，上述计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：响应于针对画布中目标组件的第二配置操作，配置目标组件的目标属性信息，其中，目标属性信息至少包括：目标组件对应的输入校验信息、事件信息，其中，输入校验信息用于指示目标组件对应的输入校验规则，事件信息至少用于指示针对目标组件的操作方式，以及操作方式触发的事件；基于目标属性信息，字段名以及联动关系，得到配置信息。

可选的，上述计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：响应于针对画布中目标组件的第三配置操作，配置目标组件的层叠样式表；基于层叠样式表，目标属性信息，字段名以及联动关系，得到配置信息。

可选的，上述计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：响应于可视化页面搭建器的页面切换操作，将画布切换至JSON编辑区；在JSON编辑区中以代码的形式显示画布中包括的组件分别对应的配置信息，其中，画布中包括目标组件，以及除目标组件之外的其他组件。

可选的，上述计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：对画布中包括的组件分别对应的配置信息进行解析处理，得到解析后的配置信息，其中，画布中包括目标组件，以及除目标组件之外的其他组件；将解析后的配置信息转换成应用程序页面。

本发明实施例提供了一种电子设备，该电子设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：响应于代码组件库中目标组件的拖拽操作，将目标组件拖拽至可视化页面搭建器的画布中；响应于针对画布中目标组件的第一配置操作，基于页面表单模型库得到目标组件的配置信息，其中，页面表单模型库中至少包括目标组件与其他组件之间的联动关系；基于目标组件的配置信息生成应用程序页面。

上述本发明实施例顺序仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如上述模块的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，模块或模块的间接耦合或通信连接，可以是电性或其它的形式。

上述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。

上述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取非易失性存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个非易失性存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的非易失性存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种应用程序页面的生成方法，其特征在于，包括：

响应于代码组件库中目标组件的拖拽操作，将所述目标组件拖拽至可视化页面搭建器的画布中；

响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息，其中，所述页面表单模型库中至少包括所述目标组件与其他组件之间的联动关系；

基于所述目标组件的配置信息生成应用程序页面。

2.根据权利要求1所述的方法，其特征在于，所述响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息，包括：

响应于针对所述画布中所述目标组件的所述第一配置操作，基于所述页面表单模型库配置所述目标组件的字段名，以及所述目标组件的组件状态与其他组件的组件状态之间的所述联动关系；

基于所述字段名、所述联动关系，得到所述配置信息。

3.根据权利要求2所述的方法，其特征在于，所述基于所述字段名、所述联动关系，得到所述配置信息，包括：

响应于针对所述画布中所述目标组件的第二配置操作，配置所述目标组件的目标属性信息，其中，所述目标属性信息至少包括：所述目标组件对应的输入校验信息、事件信息，其中，所述输入校验信息用于指示所述目标组件对应的输入校验规则，所述事件信息至少用于指示针对所述目标组件的操作方式，以及所述操作方式触发的事件；

基于所述目标属性信息，所述字段名以及所述联动关系，得到所述配置信息。

4.根据权利要求3所述的方法，其特征在于，所述基于所述目标属性信息，所述字段名以及所述联动关系，得到所述配置信息，包括：

响应于针对所述画布中所述目标组件的第三配置操作，配置所述目标组件的层叠样式表；

基于所述层叠样式表，所述目标属性信息，所述字段名以及所述联动关系，得到所述配置信息。

5.根据权利要求4所述的方法，其特征在于，

所述第一配置操作、第二配置操作和所述第三配置操作是通过触发所述可视化页面搭建器中对应的控件实现的，或者通过在可视化页面搭建器的JSON编辑区进行对应代码的编辑实现的，或者通过将对应代码复制至所述JSON编辑区实现的。

6.根据权利要求1至5中任意一项所述的方法，其特征在于，在所述响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息之后，所述方法还包括：

响应于所述可视化页面搭建器的页面切换操作，将所述画布切换至JSON编辑区；

在所述JSON编辑区中以代码的形式显示所述画布中包括的组件分别对应的配置信息，其中，所述画布中包括所述目标组件，以及除所述目标组件之外的其他组件。

7.根据权利要求1至5中任意一项所述的方法，其特征在于，所述基于所述目标组件的配置信息生成应用程序页面，包括：

对所述画布中包括的组件分别对应的配置信息进行解析处理，得到解析后的配置信息，其中，所述画布中包括所述目标组件，以及除所述目标组件之外的其他组件；

将所述解析后的配置信息转换成所述应用程序页面。

8.一种应用程序页面的生成装置，其特征在于，包括：

拖拽模块，用于响应于代码组件库中目标组件的拖拽操作，将所述目标组件拖拽至可视化页面搭建器的画布中；

配置模块，用于响应于针对所述画布中所述目标组件的第一配置操作，基于页面表单模型库得到所述目标组件的配置信息，其中，所述页面表单模型库中至少包括所述目标组件与其他组件之间的联动关系；

页面生成模块，用于基于所述目标组件的配置信息生成应用程序页面。

9.一种非易失性存储介质，其特征在于，所述非易失性存储介质存储有多条指令，所述指令适于由处理器加载并执行权利要求1至7中任意一项所述的应用程序页面的生成方法。

10.一种电子设备，其特征在于，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至7中任意一项所述的应用程序页面的生成方法。