CN117234513A - 页面的数据文件生成方法、装置、电子设备、介质及产品 - Google Patents

Abstract

本申请提供了一种页面的数据文件生成方法、装置、电子设备、计算机可读存储介质以及计算机程序产品，包括：显示目标页面对应的页面编辑界面，页面编辑界面中包括页面编辑区，页面编辑区，用于对目标页面中的组件进行编辑；在页面编辑区中，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区；响应于在组件配置区中针对目标组件的信息配置操作，对目标组件的组件信息进行配置；响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件，数据文件中记录有配置的目标页面中各组件的组件信息；其中，数据文件，用于指示供进行代码编译后得到目标页面的页面代码。通过本申请，能够提高页面的生成效率。

Description

页面的数据文件生成方法、装置、电子设备、介质及产品

技术领域

本申请涉及互联网技术领域，尤其涉及一种页面的数据文件生成方法、装置、电子设备、计算机可读存储介质以及计算机程序产品。

背景技术

相关技术在利用低代码平台生成页面时，大多采取一个巨大的元页面来统一渲染用户需要的页面，从而将渲染的页面呈现给用户。然而，这样的页面生成方式在每一次生成页面时都需要进行一次渲染，因此上述方式会导致页面的生成效率较低。

发明内容

本申请实施例提供一种页面的数据文件生成方法、装置、电子设备、计算机可读存储介质以及计算机程序产品，能够提高页面的生成效率。

本申请实施例的技术方案是这样实现的：

本申请实施例提供一种页面的数据文件生成方法，包括：

显示目标页面对应的页面编辑界面，所述页面编辑界面中包括页面编辑区，所述页面编辑区，用于对所述目标页面中的组件进行编辑；

在所述页面编辑区中，响应于针对所述目标页面中目标组件的选定操作，显示用于配置所述目标组件的组件信息的组件配置区；

响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置；

响应于针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件中记录有配置的所述目标页面中各组件的组件信息；

其中，所述数据文件，用于指示供进行代码编译后得到所述目标页面的页面代码。

本申请实施例提供一种页面的数据文件生成装置，包括：

第一显示模块，用于显示目标页面对应的页面编辑界面，所述页面编辑界面中包括页面编辑区，所述页面编辑区，用于对所述目标页面中的组件进行编辑；

第二显示模块，用于在所述页面编辑区中，响应于针对所述目标页面中目标组件的选定操作，显示用于配置所述目标组件的组件信息的组件配置区；

配置模块，用于响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置；

生成模块，用于响应于针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件中记录有配置的所述目标页面中各组件的组件信息；其中，所述数据文件，用于指示供进行代码编译后得到所述目标页面的页面代码。

在上述方案中，所述第一显示模块，还用于显示包括至少一个页面的目标服务所对应的页面管理界面，并在所述页面管理界面中，显示包括目标页面信息的各所述页面的页面信息；其中，所述页面信息与所述页面一一对应，所述目标页面信息对应所述目标页面，所述页面信息关联有编辑控件；响应于针对目标页面信息关联的目标编辑控件的触发操作，显示所述目标页面对应的页面编辑界面。

在上述方案中，所述页面信息还关联有删除控件，所述页面管理界面中还显示有除所述目标页面信息之外的其他页面信息，所述装置还包括删除模块，所述删除模块，用于响应于针对所述其他页面信息关联的删除控件的触发操作，在所述页面管理界面中删除所述其他页面信息，以删除所述目标服务中包括的所述其他页面信息对应的页面。

在上述方案中，所述页面编辑界面中还包括组件存储区，所述组件存储区中包括多个候选组件；所述装置还包括组件添加模块，所述组件添加模块，用于响应于针对所述多个候选组件中目标候选组件的拖动操作，显示所述目标候选组件被拖动的过程；当所述目标候选组件被拖动至所述页面编辑区中时，响应于针对所述目标候选组件的释放操作，在所述页面编辑区中显示所述目标候选组件，以将所述目标候选组件添加至所述页面中。

在上述方案中，所述装置还包括组件调整模块，所述组件调整模块，用于响应于针对所述页面编辑区中组件的位置调整操作，依据所述位置调整操作调整所述页面编辑区中组件的位置，以调整所述页面编辑区中组件的布局；其中，所述页面编辑区中组件的布局，用于指示所述目标页面中组件的布局。

在上述方案中，所述组件配置区中包括属性控件、样式控件及事件控件；其中，所述属性控件用于配置所述目标页面中组件的属性信息，所述样式控件用于配置所述组件的样式，所述事件控件用于配置所述组件关联的事件；所述配置模块，还用于在所述组件配置区中显示信息配置界面，所述信息配置界面为所述属性控件对应的属性配置界面、所述样式控件对应的样式配置界面及所述事件控件对应的事件配置界面中之一；响应于基于所述信息配置界面触发的针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置。

在上述方案中，所述信息配置操作包括所述属性信息对应的属性配置操作，所述信息配置界面为所述属性配置界面，所述配置模块，还用于响应于针对所述属性控件的触发操作，在所述组件配置区中，显示用于配置所述目标组件的属性信息的属性配置界面；其中，所述属性配置界面中包括针对目标组件的至少一个属性配置项，每个所述属性配置项用于配置所述目标组件的一种属性；在所述组件配置区中，响应于基于所述至少一个属性配置项触发的所述属性配置操作，对所述目标组件的属性信息进行配置。

在上述方案中，所述信息配置操作包括所述样式对应的样式配置操作，所述信息配置界面为所述样式配置界面，所述配置模块，还用于响应于针对所述样式控件的触发操作，在所述样式配置区中，显示用于配置所述目标组件的样式的样式配置界面；其中，所述样式包括针对所述目标组件的以下信息至少之一：组件大小、组件中字体样式、组件的动画效果；在所述组件配置区中，响应于基于所述样式配置界面触发的所述样式配置操作，对所述目标组件的样式进行配置。

在上述方案中，所述信息配置操作包括所述事件对应的事件配置操作，所述信息配置界面为所述事件配置界面，所述事件配置界面包括事件添加子界面；所述配置模块，还用于响应于针对所述事件控件的触发操作，在所述事件配置区中，显示用于配置所述目标组件所关联的事件的事件配置界面，所述事件配置界面中包括事件添加控件；响应于针对所述事件添加控件的触发操作，在所述事件配置界面中，显示用于为所述目标组件添加关联的事件的事件添加子界面；在所述组件配置区中，响应于基于所述事件添加子界面触发的所述事件配置操作，对所述目标组件关联的事件进行配置。

在上述方案中，所述事件添加子界面中包括事件创建控件；所述装置还包括代码编辑模块，所述代码编辑模块，用于响应于针对所述事件创建控件的触发操作，显示用于编辑事件的代码的代码编辑区域；响应于在所述代码编辑区域所编辑得到的事件代码，生成用于供关联至所述目标组件的事件。

在上述方案中，所述事件配置界面中包括条件设置选项，所述装置还包括选择模块，所述选择模块，用于响应于针对所述条件设置选项的选择操作，控制所述目标组件在所述目标页面的显示处于条件约束状态；所述条件约束状态用于指示在满足目标条件时，所述目标组件能够显示于所述目标页面。

在上述方案中，所述页面编辑区中包括保存控件，所述生成模块4554，还用于响应于基于所述保存控件触发的针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件具有目标数据交换格式。

在上述方案中，所述生成模块，还用于响应于针对所述目标页面的编辑完成指令，获取所述目标页面对应的多叉树结构；其中，所述多叉树结构中的根节点与所述目标页面相对应，所述多叉树结构中除所述根节点以外的节点与所述目标页面中的组件相对应，所述多叉树结构中的节点之间通过携带父属性或子属性的指针相关联；对所述目标页面对应的多叉树结构进行序列化，得到所述目标页面对应的数据文件。

在上述方案中，所述页面代码为可执行代码，所述装置还包括发送模块，所述发送模块，用于发送所述数据文件至代码编译装置，以使所述代码编译装置基于所述数据文件生成所述目标页面对应的源代码，并将所述源代码转化为所述目标页面对应的可执行代码。

本申请实施例提供一种电子设备，包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令时，实现本申请实施例提供的页面的数据文件生成方法。

本申请实施例提供一种计算机可读存储介质，存储有可执行指令，用于引起处理器执行时，实现本申请实施例提供的页面的数据文件生成方法。

本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该电子设备执行本申请实施例提供的页面的数据文件生成方法。

本申请实施例具有以下有益效果：

显示目标页面对应的包括页面编辑区域的页面编辑界面，再在页面编辑区中，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区，然后响应于在组件配置区中针对目标组件的信息配置操作，对目标组件的组件信息进行配置，最后响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件。如此，通过对目标组件的选定操作以及信息配置操作，完成对目标页面的编辑，同时，在完成对目标页面的编辑后，生成用于指示供进行代码编译后得到目标页面的页面代码的数据文件，相较于每一次生成页面时都需要进行一次渲染的页面生成过程，本申请直接生成对应目标页面的页面代码，以便于基于该页面代码，生成目标页面，大幅度降低了页面的生成时间，提高了的页面生成效率。

附图说明

图1是本申请实施例提供的页面的数据文件生成系统的架构示意图；

图2是本申请实施例提供的电子设备的结构示意图；

图3是本申请实施例提供的页面的数据文件生成方法的流程示意图；

图4是本申请实施例提供的目标页面的示意图；

图5是本申请实施例提供的页面管理界面的示意图；

图6是本申请实施例提供的页面编辑界面的示意图；

图7是本申请实施例提供的页面创建界面的示意图；

图8是本申请实施例提供的创建页面的过程的示意图；

图9是本申请实施例提供的基于删除控件删除页面信息的示意图；

图10是本申请实施例提供的页面编辑区与相应页面的示意图；

图11是本申请实施例提供的组件配置区的显示过程的示意图；

图12是本申请实施例提供的响应于在组件配置区中针对目标组件的信息配置操作对目标组件的组件信息进行配置的流程示意图；

图13是本申请实施例提供的属性控件对应的属性配置界面的示意图；

图14是本申请实施例提供的样式控件对应的样式配置界面的示意图；

图15是本申请实施例提供的事件控件对应的事件配置界面的示意图；

图16是本申请实施例提供的代码编辑区域的示意图；

图17是本申请实施例提供的保存控件的示意图；

图18是本申请实施例提供的多叉树的结构示意图；

图19是本申请实施例提供的一种代码融合开发以及拓展的低代码平台方法的过程示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

在以下的描述中，所涉及的术语“第一\第二\第三”仅仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。

1）客户端（Client），又称用户端，是指与服务器相对应的为用户提供本地服务的程序，除了一些只能在本地运行的应用程序之外，一般安装在普通的客户机上，需要与服务器相互配合运行，即需要网络中有相应的服务器和服务程序来提供相应的服务，这样在客户端和服务器端，需要建立特定的通信连接，来保证应用程序的正常运行，例如自动驾驶客户端（如地图导航客户端）。

2）人工智能（AI，Artificial Intelligence），是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法和技术及应用系统。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能。人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、预训练模型技术、操作/交互系统、机电一体化等。其中，预训练模型又称大模型、基础模型，经过微调后可以广泛应用于人工智能各大方向下游任务。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

3）前端，指的是一个完备的互联网产品当中，在用户的设备上运行，为用户展示界面的代码部分，区别于后端服务。

4）低代码平台（Low Code），是一种可视化的应用开发方法，允许让用户少写代码、甚至不写代码来创建项目也即服务，即通过可视化的界面，通过输入表单、拖拽组件、选择选项等来构建项目。

5）Schema，对某种事物的抽象，按照某种约定的规则，记录事物的重要属性，从而实现对事物的转换和保存，如有必要也可以将schema重新转换成对应的事物。

6）Vue，一个前端的开发框架，使用Vue，开发者可以更简单的构建前端应用。

7）GraphQL，一种查询语言，它有自己独特的语法，使用对应的语法，构造特定的语句，可以查询出完全不同的数据。

8）Json，一种文本格式的数据传输和保存格式，通信双方可以约定使用JSON格式通信，双方将需要发送的信息，按照JSON的格式编码和解码，进而实现通信。

9）元页面，元页面相当于一个页面函数，通过读取特定的页面schema信息，从而将读取的schema渲染成与该页面函数对应的页面给用户。

发明人发现，相关技术的页面的生成过程中，大多存在以下问题：第一，依赖元页面，页面代码体积大，加载慢，用户体验不好；第二，代码大部分无法跨端，也即所生成的页面代码无法在不同前端内运行；第三，数据源配置不够灵活，少数灵活的graphql对普通用户使用难度很大。

基于此，本申请实施例提供一种页面的数据文件生成方法、装置、电子设备、计算机可读存储介质以及计算机程序产品，针对第一个问题，本申请通过预处理json，使得用户访问的页面只是它需要的页面代码，没有其他任何复杂逻辑，页面大小不会相较于程序员手工编译的页面代码大太多，从而解决依赖元页面，页面代码体积大，加载慢，用户体验不好的问题；针对第二个问题，本申请先将json转换成uni-app代码，然后再将uni-app代码，打包成能运行在不同平台的代码，从而提高了所生成的页面代码的适用性；针对第三个问题，本申请中页面可以预先配置不同的graphql，从而拉取不同的数据实现页面展示，如此，将graphql抽象成一个更加语义化的schema，用户可以更简单的使用graphql。

参见图1，图1是本申请实施例提供的页面的数据文件生成系统的架构示意图，终端（示例性示出了终端400）上设置有页面的数据文件生成客户端401，在显示界面（示例性示出了图像界面401-1）显示，终端400通过网络300连接服务器200，其中，网络300可以是广域网或者局域网，又或者是二者的组合，使用无线或有线链路实现数据传输。

其中，服务器200用于，响应于终端发送的目标页面对应的页面编辑界面的界面数据获取请求，发送目标页面对应的页面编辑界面的界面数据至终端400；

终端400还用于，基于目标页面对应的页面编辑界面的界面数据，显示目标页面对应的页面编辑界面，页面编辑界面中包括页面编辑区，页面编辑区，用于对目标页面中的组件进行编辑；在页面编辑区中，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区；响应于在组件配置区中针对目标组件的信息配置操作，对目标组件的组件信息进行配置；响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件，数据文件中记录有配置的目标页面中各组件的组件信息；其中，数据文件，用于指示供进行代码编译后得到目标页面的页面代码。

一些实施例中，服务器200可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络（CDN，ContentDeliver Network）、以及大数据和人工智能平台等基础云计算服务的云服务器。终端400可以是智能手机、平板电脑、笔记本电脑、台式计算机、机顶盒、智能语音交互设备、智能家电、虚拟现实设备、车载终端、飞行器、便携式音乐播放器、个人数字助理、专用消息设备、便携式游戏设备、智能音箱及智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请实施例中不做限制。

接下来对实施本申请实施例提供的页面的数据文件生成方法的电子设备进行说明。参见图2，图2是本申请实施例提供的电子设备的结构示意图，该电子设备可以是服务器也可以是终端，以电子设备为图1中所示的终端为例，图2所示的电子设备包括：至少一个处理器410、存储器450、至少一个网络接口420和用户接口430。终端400中的各个组件通过总线系统440耦合在一起。可理解，总线系统440用于实现这些组件之间的连接通信。总线系统440除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图3中将各种总线都标为总线系统440。

处理器410可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器（DSP，Digital Signal Processor），或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。

用户接口430包括使得能够显示媒体内容的一个或多个输出装置431，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。

存储器450可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器450可选地包括在物理位置上远离处理器410的一个或多个存储设备。

存储器450包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器（ROM，Read Only Memory），易失性存储器可以是随机存取存储器（RAM，Random Access Memory）。本申请实施例描述的存储器450旨在包括任意适合类型的存储器。

在一些实施例中，存储器450能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。

操作系统451，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；

网络通信模块452，用于经由一个或多个（有线或无线）网络接口420到达其他电子设备，示例性的网络接口420包括：蓝牙、无线相容性认证（WiFi）、和通用串行总线（USB，Universal Serial Bus）等；

呈现模块453，用于经由一个或多个与用户接口430相关联的输出装置431（例如，显示屏、扬声器等）使得能够显示信息（例如，用于操作外围设备和显示内容和信息的用户接口）；

输入处理模块454，用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。

在一些实施例中，本申请实施例提供的装置可以采用软件方式实现，图2示出了存储在存储器450的页面的数据文件生成装置455，其可以是程序和插件等形式的软件，包括以下软件模块：第一显示模块4551、第二显示模块4552、配置模块4553以及生成模块4554，这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。

在另一些实施例中，本申请实施例提供的装置可以采用硬件方式实现，作为示例，本申请实施例提供的页面的数据文件生成装置可以是采用硬件译码处理器形式的处理器，其被编程以执行本申请实施例提供的页面的数据文件生成方法，例如，硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路（ASIC，Application SpecificIntegrated Circuit）、DSP、可编程逻辑器件（PLD，Programmable Logic Device）、复杂可编程逻辑器件（CPLD，Complex Programmable Logic Device）、现场可编程门阵列（FPGA，Field-Programmable Gate Array）或其他电子元件。

在一些实施例中，终端或服务器可以通过运行计算机程序来实现本申请实施例提供的页面的数据文件生成方法。举例来说，计算机程序可以是操作系统中的原生程序或软件模块；可以是本地（Native）应用程序（APP，Application），即需要在操作系统中安装才能运行的程序，如即时通信APP、网页浏览器APP；也可以是小程序，即只需要下载到浏览器环境中就可以运行的程序；还可以是能够嵌入至任意APP中的小程序。总而言之，上述计算机程序可以是任意形式的应用程序、模块或插件。

基于上述对本申请实施例提供的页面的数据文件生成系统及电子设备的说明，下面说明本申请实施例提供的页面的数据文件生成方法。在实际实施时，本申请实施例提供的页面的数据文件生成方法可以由终端或服务器单独实现，或者由终端及服务器协同实现，以由图1中的终端400单独执行本发明实施例提供的页面的数据文件生成方法为例进行说明。参见图3，图3是本申请实施例提供的页面的数据文件生成方法的流程示意图，将结合图3示出的步骤进行说明。

步骤101，终端显示目标页面对应的页面编辑界面，页面编辑界面中包括页面编辑区，页面编辑区，用于对目标页面中的组件进行编辑。

需要说明的是，这里的目标页面为目标服务对应的页面，不同服务对应不同的应用项目，例如，参见图4，图4是本申请实施例提供的目标页面的示意图。其中，一个目标服务包括至少一个页面，不同页面都存在对应的页面编辑界面，以基于该页面编辑界面，对相应页面进行编辑或生成。

在实际实施时，显示目标页面对应的页面编辑界面的过程，可以是，显示包括至少一个页面的目标服务所对应的页面管理界面，并在页面管理界面中，显示包括目标页面信息的各页面的页面信息；其中，页面信息与页面一一对应，目标页面信息对应目标页面，页面信息关联有编辑控件；响应于针对目标页面信息关联的目标编辑控件的触发操作，显示目标页面对应的页面编辑界面。

需要说明的是，当前显示的页面管理界面显示目标服务包括的所有页面的页面信息，页面信息包括页面标识、页面名称、页面创建者、页面创建时间、页面最后一次的编辑者、页面最后一次编辑时间等，至少一个页面以及各页面的页面信息可以是以列表的形式显示。示例性地，参见图5，图5是本申请实施例提供的页面管理界面的示意图，基于图5，图5中每一行对应一个页面即该目标服务包括10个页面，其中，虚线框501所指示的为这10个页面分别对应的页面信息，虚线框502至虚线框508所指示的分别为相应页面的页面标识、相应页面的页面标识、相应页面的页面内容、相应页面最后一次的编辑者、相应页面的创建者、相应页面最后一次的编辑时间以及相应页面的创建时间。

其中，各页面的页面信息均关联有对应编辑控件，如图5所示，虚线框509所指示的为各页面的页面信息关系的编辑控件，从而响应于针对目标页面信息关联的目标编辑控件的触发操作，显示目标页面对应的页面编辑界面。

需要说明的是，编辑控件用于对已被创建的页面的页面内容进行编辑操作，而显示的目标页面对应的页面编辑界面中的页面编辑区会呈现目标页面的页面布局，但是不会呈现页面的具体内容。示例性地，继续参见图5并参见图6，图6是本申请实施例提供的页面编辑界面的示意图，基于图5，响应于针对如虚线框509所指示的目标页面信息关联的目标编辑控件的触发操作，显示如图6所示的目标页面对应的页面编辑界面，基于图6，601所指示的为页面编辑区，其中，页面编辑区会指示目标页面的布局，但不会显示具体页面内容，如具体标题名称以及具体文章标题等。

在一些实施例中，还可以创建页面，具体地，在页面管理界面中显示创建控件，响应于针对创建控件的触发操作，显示页面创建界面；在页面创建界面中显示对应待创建页面的页面编辑控件，响应于针对页面编辑控件的触发操作，显示待创建页面对应的页面编辑界面，然后在页面编辑界面的页面编辑区中，响应于针对待创建页面的页面编辑操作，显示所编辑的待创建页面的页面布局；响应于针对待创建页面的编辑完成指令，生成待创建页面对应的数据文件。

需要说明的是，页面编辑操作包括针对目标组件的选定操作以及针对目标组件的信息配置操作；页面创建界面中还包括待创建页面的页面信息输入栏，从而在响应于针对待创建页面的编辑完成指令，生成待创建页面对应的数据文件之后，显示包括待创建页面对应的数据文件以及待创建页面的页面信息输入栏的页面创建界面，响应于针对待创建页面的页面信息输入栏的输入操作，显示所输入的针对待创建页面的页面信息，然后响应于针对所输入的页面信息以及所显示的待创建页面对应的数据文件的确定指令，创建该页面，从而在页面管理界面中会显示创建的该页面的页面信息以及相应的编辑控件。

示例性地，参见图7和图8，图7是本申请实施例提供的页面创建界面的示意图，图8是本申请实施例提供的创建页面的过程的示意图，响应于针对创建控件的触发操作，显示如图7所示的页面创建界面，响应于针对如701所指示的页面编辑控件的触发操作，显示如图8中a所指示的待创建页面对应的页面编辑界面，响应于针对待创建页面的页面编辑操作，显示如图8中b所指示的所编辑的待创建页面的页面布局，从而在响应于针对待创建页面的编辑完成指令，生成待创建页面对应的数据文件之后，显示如图7所指示的页面创建界面，其中，702所指示输入栏显示的为待创建页面对应的数据文件，虚线框703所指示的待创建页面的页面信息输入栏，从而响应于针对虚线框703所指示的待创建页面的页面信息输入栏的输入操作，显示所输入的针对待创建页面的页面信息，然后响应于基于704所指示的确定控件触发的针对所输入的页面信息以及所显示的待创建页面对应的数据文件的确定指令，创建该页面。

在一些实施例中，还可以批量创建页面，具体地，在页面管理界面显示批量创建控件，响应于针对批量创建控件的触发操作，显示页面数量输入栏以及确定控件，响应于针对页面数量输入栏的输入操作，显示批量创建的页面的目标数量，然后响应于针对确定控件的触发操作，采用默认的页面信息以及默认的页面布局，创建目标数量的页面。

需要说明的是，默认的页面信息以及默认的页面布局可以是预先设置的，创建完目标数量的页面后，在页面管理界面显示目标数量的页面对应的页面信息以及各页面信息关联的编辑控件。

在实际实施时，对于显示包括至少一个页面的目标服务所对应的页面管理界面的过程，可以是，显示页面管理界面的显示控件，响应于针对显示控件的触发操作，显示至少一个服务，然后响应于针对至少一个服务中目标服务的选择操作，显示包括至少一个页面的目标服务所对应的页面管理界面。

在一些实施例中，页面信息还关联有删除控件，页面管理界面中还显示有除目标页面信息之外的其他页面信息，从而还可以响应于针对其他页面信息关联的删除控件的触发操作，在页面管理界面中删除其他页面信息，以删除目标服务中包括的其他页面信息对应的页面。

示例性地，参见图9，图9是本申请实施例提供的基于删除控件删除页面信息的示意图，基于图9，a中虚线框901中所指示的为页面信息关联的删除控件，然后响应于针对902所指示的页面信息关联的删除控件的触发操作，在页面管理界面中删除902所指示的页面信息，显示如图9中b所指示的页面管理界面，同时，该页面管理界面对应的服务中902所指示的页面信息对应的页面也被删除。

在一些实施例中，页面编辑界面中还包括组件存储区，组件存储区中包括多个候选组件；从而，基于组件存储区以及页面编辑区，对目标页面中的组件进行编辑，也即当对目标页面中的组件进行编辑指示用户向目标页面添加组件时，还可以，响应于针对多个候选组件中目标候选组件的拖动操作，显示目标候选组件被拖动的过程；当目标候选组件被拖动至页面编辑区中时，响应于针对目标候选组件的释放操作，在页面编辑区中显示目标候选组件，以将目标候选组件添加至页面中。

示例性地，继续参见图6，图6中602所指示的区域为组件存储区，其中，组件存储区包括预先设定的用作布局模板的布局组件以及单个功能组件，布局组件包括至少一个子组件也即单个功能组件，例如图6，虚线框603所指示的为布局组件，而虚线框604所指示的为单个功能组件也即子组件，从而将组件存储区选择任意一个组件拖动至页面编辑区，以将该组件添加至页面中。

需要说明的是，组件存储区中的组件为预先设置的，可以是用户自行编译开发的组件，也可以是其他用户所编译开发的组件，如此，不仅提高了用户使用组件时的便捷性，还可以方便用户实现个性化的功能定制，提高了组件的可扩展性。

在一些实施例中，当对目标页面中的组件进行编辑指示用户调整目标页面中组件位置时，还可以，响应于针对页面编辑区中组件的位置调整操作，依据位置调整操作调整页面编辑区中组件的位置，以调整页面编辑区中组件的布局；其中，页面编辑区中组件的布局，用于指示目标页面中组件的布局。

需要说明的是，位置调整操作可以是拖动操作，从而将组件从当前位置调整至另一个位置，以调整页面编辑区中组件的布局，也即调整目标页面中组件的布局；针对组件的位置调整操作可以指示针对一个组件实现位置的调整，还可以是针对多个组件实现位置的调整，例如，如前文所述的布局组件包括至少一个子组件，响应于针对该布局组件的位置调整操作，实现针对多个组件也即布局组件包括的多个子组件的位置调整，或者，如前文所述的单个功能组件，响应于针对该单个功能组件的位置调整操作，实现针对一个组件也即单个功能组件的位置调整。

需要说明的是，页面编辑区中组件的布局，用于指示目标页面中组件的布局，但是页面编辑区中组件的数量并不与目标页面中组件的数量完全对应，示例性地，参见图10，图10是本申请实施例提供的页面编辑区与相应页面的示意图，基于图10，a所指示的页面编辑区与b所指示的页面相对应，也即b所指示的页面为基于a所指示的页面编辑区中组件所生成的，a中虚线框1001所指示的为两个导航组件，而b中虚线框1002所指示的为四个导航组件，其中，a所指示的两个导航组件仅用于指示目标页面的对应位置存在导航组件，而不能指示相应页面的对应位置也存在两个导航组件，相应页面的对应位置存在的导航组件的数量以及内容为导航组件的组件信息进行配置时确定的。如此，当页面中组件数量过多时，无需再页面编辑区域中逐一添加对应的组件，而仅需确定组件的位置以及组件的组件信息即可，减少了数据处理量并提高了组件的编辑效率，从而提高了页面的生成效率。

步骤102，在页面编辑区中，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区。

在实际实施时，组件配置区可以显示于页面编辑界面中，示例性地，如图11所示，图11是本申请实施例提供的组件配置区的显示过程的示意图，基于图11，在接收到针对目标页面中目标组件的选定操作之前，显示如a所指示的包括组件存储区和页面编辑区的页面编辑界面，然后在页面编辑区中，响应于针对目标页面中目标组件的选定操作，显示如b中1101所指示的用于配置目标组件的组件信息的组件配置区。同时，基于用户的设置，目标页面中目标组件的选定操作存在多种实现方式，接下来，以其中三种为例，对响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区的过程进行说明。

在一些实施例中，当用户拖动目标组件，如将目标组件从组件存储区拖动至页面编辑区，或者将目标组件从页面编辑区的一个位置拖动至另一个位置时，可以将针对目标组件的释放操作，确定为针对目标页面中目标组件的选定操作，从而响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区的过程，具体包括，在拖动目标组件的过程中，响应于针对目标组件的释放操作，显示用于配置目标组件的组件信息的组件配置区。

在另一些实施例中，还可以将用户针对目标组件的点击操作，确定为针对目标页面中目标组件的选定操作，也即，响应于针对页面编辑区中目标组件的触发操作如点击操作，显示用于配置目标组件的组件信息的组件配置区。

例如，当用户拖动目标组件，如将目标组件从组件存储区拖动至页面编辑区，或者将目标组件从页面编辑区的一个位置拖动至另一个位置之后，还可以将针对目标组件的点击操作，确定为针对目标页面中目标组件的选定操作，具体地，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区的过程，具体包括，响应于针对目标组件的拖动操作，在页面编辑区显示拖动后的目标组件，然后响应于针对目标组件的触发操作如点击操作，显示用于配置目标组件的组件信息的组件配置区；

又或者，页面编辑区域已存在目标组件，且用户并没有拖动该目标组件，而是点击该组件是时，可以将针对目标组件的点击操作，确定为针对目标页面中目标组件的选定操作，具体地，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区的过程，具体包括，响应于针对页面编辑区中目标组件的触发操作如点击操作，显示用于配置目标组件的组件信息的组件配置区。

需要说明的是，基于用户的设置，目标页面中目标组件的选定操作的多种实现方式包括但不限于以上三种，对此，本申请实施例不做限定。

步骤103，响应于在组件配置区中针对目标组件的信息配置操作，对目标组件的组件信息进行配置。

需要说明的是，如前文所述，页面编辑区主要对目标页面中组件的布局进行编辑，而组件的组件信息如组件的数量、内容、样式等，则需要在组件配置区进行配置。其中，组件配置区中包括属性控件、样式控件及事件控件；其中，属性控件用于配置目标页面中组件的属性信息，样式控件用于配置组件的样式，事件控件用于配置组件关联的事件；示例性地，如图11所示，b中虚线框1102中所指示的为组件配置区中包括的属性控件、样式控件及事件控件。基于此，可以基于组件配置区中包括的属性控件、样式控件及事件控件，对目标组件的组件信息进行配置。具体地，参见图12，图12是本申请实施例提供的响应于在组件配置区中针对目标组件的信息配置操作对目标组件的组件信息进行配置的流程示意图，基于图12，步骤103可以通过以下步骤所实现。

步骤1031，在组件配置区中显示信息配置界面，信息配置界面为属性控件对应的属性配置界面、样式控件对应的样式配置界面及事件控件对应的事件配置界面中之一。

在一些实施例中，信息配置操作包括属性信息对应的属性配置操作，信息配置界面为属性配置界面，从而在组件配置区中显示信息配置界面的过程，可以是，响应于针对属性控件的触发操作，在组件配置区中，显示用于配置目标组件的属性信息的属性配置界面；其中，属性配置界面中包括针对目标组件的至少一个属性配置项，每个属性配置项用于配置目标组件的一种属性。

需要说明的是，显示用于配置目标组件的组件信息的组件配置区时，可以显示预先设定的默认信息配置界面，即属性控件对应的属性配置界面、样式控件对应的样式配置界面及事件控件对应的事件配置界面中之一，这里，当默认信息配置界面不为属性控件对应的属性配置界面时，在组件配置区中显示信息配置界面的过程，可以是，响应于针对属性控件的触发操作，在组件配置区中，显示用于配置目标组件的属性信息的属性配置界面；当默认信息配置界面为属性控件对应的属性配置界面时，在组件配置区中显示信息配置界面的过程，即是显示用于配置目标组件的属性信息的属性配置界面。

又或者，显示用于配置目标组件的组件信息的组件配置区时，显示的是只包括属性控件、样式控件及事件控件的界面，从而在组件配置区中显示信息配置界面的过程，可以是，响应于针对属性控件的触发操作，在组件配置区中，显示用于配置目标组件的属性信息的属性配置界面。

其中，属性配置界面中包括针对目标组件的至少一个属性配置项，如数据配置项、组件对齐方式配置项、组件自定义样式配置项等，每个属性配置项用于配置目标组件的一种属性，例如数据配置项，用于获取相应组件所关联的数据，如采用预先设置的数据配置项所特定的查询语句，获取相应组件所关联的数据，而组件对齐方式配置项则是针对当该组件包括多个子组件时，多个子组件的对齐方式，如水平对齐或垂直对齐，而组件自定义样式配置项则用于自定义组件的样式，这里的样式不是指组件本身的样式，而是指组件之间的样式，例如当组件包括多个子组件时，可以通过组件自定义样式配置项来设置多个子组件的布局、以及各子组件之间的间隙等，又或者当组件为单一功能组件是，可以通过组件自定义样式配置项来设置该组件与相邻组件间的最小间隙等。

示例性地，参见图13，图13是本申请实施例提供的属性控件对应的属性配置界面的示意图，基于图13，虚线框1301中所指示的为数据配置项，在数据配置项对应的输入栏中输入特定的查询语句，从而基于该查询语句获取相应组件所关联的数据，如标题内容，文章内容等；虚线框1302中所指示的为组件自定义样式配置项，在组件自定义样式对应的输入栏中输入自定义的代码，从而确定相应组件的自定义样式；虚线框1303中所指示的为组件对齐方式配置项，从而当组件包括多个子组件时，基于该属性配置项确定多个子组件的对齐方式。

在另一些实施例中，信息配置操作包括样式对应的样式配置操作，信息配置界面为样式配置界面，从而在组件配置区中显示信息配置界面的过程，可以是，响应于针对样式控件的触发操作，在样式配置区中，显示用于配置目标组件的样式的样式配置界面；其中，样式包括针对目标组件的以下信息至少之一：组件大小、组件中字体样式、组件的动画效果。

需要说明的是，显示用于配置目标组件的组件信息的组件配置区时，可以显示预先设定的默认信息配置界面，即属性控件对应的属性配置界面、样式控件对应的样式配置界面及事件控件对应的事件配置界面中之一，这里，当默认信息配置界面不为样式控件对应的样式配置界面时，在组件配置区中显示信息配置界面的过程，可以是，响应于针对样式控件的触发操作，在样式配置区中，显示用于配置目标组件的样式的样式配置界面；当默认信息配置界面为样式控件对应的样式配置界面时，在组件配置区中显示信息配置界面的过程，即是显示用于配置目标组件的样式的样式配置界面。

又或者，显示用于配置目标组件的组件信息的组件配置区时，显示的是只包括属性控件、样式控件及事件控件的界面，从而在组件配置区中显示信息配置界面的过程，可以是，响应于针对样式控件的触发操作，在样式配置区中，显示用于配置目标组件的样式的样式配置界面。

其中，样式包括针对目标组件的以下信息至少之一：组件大小、组件中字体样式、组件的动画效果。

示例性地，参见图14，图14是本申请实施例提供的样式控件对应的样式配置界面的示意图，基于图14，通过如图14所示的样式配置界面，对相应控件的尺寸也即大小、字体、模板也即动画效果进行配置。

在另一些实施例中，信息配置操作包括事件对应的事件配置操作，信息配置界面为事件配置界面，事件配置界面包括事件添加子界面；从而在组件配置区中显示信息配置界面的过程，可以是，响应于针对事件控件的触发操作，在事件配置区中，显示用于配置目标组件所关联的事件的事件配置界面，事件配置界面中包括事件添加控件；响应于针对事件添加控件的触发操作，在事件配置界面中，显示用于为目标组件添加关联的事件的事件添加子界面。

需要说明的是，显示用于配置目标组件的组件信息的组件配置区时，可以显示预先设定的默认信息配置界面，即属性控件对应的属性配置界面、样式控件对应的样式配置界面及事件控件对应的事件配置界面中之一，这里，当默认信息配置界面不为事件控件对应的事件配置界面时，在组件配置区中显示信息配置界面的过程，可以是，响应于针对事件控件的触发操作，在事件配置区中，显示用于配置目标组件所关联的事件的事件配置界面，事件配置界面中包括事件添加控件；响应于针对事件添加控件的触发操作，在事件配置界面中，显示用于为目标组件添加关联的事件的事件添加子界面；当默认信息配置界面为事件控件对应的事件配置界面时，在组件配置区中显示信息配置界面的过程，即是显示用于配置目标组件所关联的事件的事件配置界面，事件配置界面中包括事件添加控件；响应于针对事件添加控件的触发操作，在事件配置界面中，显示用于为目标组件添加关联的事件的事件添加子界面。

又或者，显示用于配置目标组件的组件信息的组件配置区时，显示的是只包括属性控件、样式控件及事件控件的界面，从而在组件配置区中显示信息配置界面的过程，可以是，响应于针对事件控件的触发操作，在事件配置区中，显示用于配置目标组件所关联的事件的事件配置界面，事件配置界面中包括事件添加控件；响应于针对事件添加控件的触发操作，在事件配置界面中，显示用于为目标组件添加关联的事件的事件添加子界面。

其中，事件用于指示相应控件所支持的操作如点击、切换、拖动、滑动等以及该操作所触发的数据处理逻辑。

示例性地，参见图15，图15是本申请实施例提供的事件控件对应的事件配置界面的示意图，基于图15，响应于a中1501所指示的事件添加控件的触发操作，显示如b所指示的用于为目标组件添加关联的事件的事件添加子界面。从而基于事件添加子界面，为目标组件添加关联的事件，如图15的b所示，为相应目标添加在目标区域中可以被点击的事件，再在虚线框1502所指示的位置设置点击操作所触发的数据处理逻辑，也即所调用的方法以及涉及的参数和最终的输出。

步骤1032，响应于基于信息配置界面触发的针对目标组件的信息配置操作，对目标组件的组件信息进行配置。

在实际实施时，如前文所述，信息配置界面包括属性控件对应的属性配置界面、样式控件对应的样式配置界面及事件控件对应的事件配置界面中之一，基于此，在一些实施例中，当信息配置操作包括属性信息对应的属性配置操作，信息配置界面为所述属性配置界面时，响应于基于信息配置界面触发的针对目标组件的信息配置操作，对目标组件的组件信息进行配置的过程，可以是，在组件配置区中，响应于基于至少一个属性配置项触发的属性配置操作，对目标组件的属性信息进行配置。

例如，如图13所示，属性配置操作可以是为在虚线框1301中所指示的数据配置项对应的输入栏中输入特定的查询语句的输入操作，从而基于该查询语句获取相应组件所关联的数据，如标题内容，文章内容等，和/或，属性配置操作为在虚线框1302中所指示的组件自定义样式对应的输入栏中输入自定义的代码的输入操作，从而确定相应组件的自定义样式，和/或，当组件包括多个子组件时，属性配置操作为基于虚线框1303中所指示的属性配置项所执行的针对多个子组件的对齐方式的设置操作。

在另一些实施例中，当信息配置操作包括样式对应的样式配置操作，信息配置界面为样式配置界面时，响应于基于信息配置界面触发的针对目标组件的信息配置操作，对目标组件的组件信息进行配置的过程，可以是，在组件配置区中，响应于基于样式配置界面触发的样式配置操作，对目标组件的样式进行配置。例如，如图14所示，样式配置操作可以是针对尺寸的调整操作，和/或针对字体的设置操作，和/或针对样式模板的选择操作等。

在另一些实施例中，当信息配置操作包括事件对应的事件配置操作，信息配置界面为事件配置界面，事件配置界面包括事件添加子界面时，响应于基于信息配置界面触发的针对目标组件的信息配置操作，对目标组件的组件信息进行配置的过程，可以是，在组件配置区中，响应于基于事件添加子界面触发的事件配置操作，对目标组件关联的事件进行配置。例如，如图15所示，事件配置操作可以是针对b中虚线框1502所指示的部分中相应控件所支持的操作的设置操作以及该操作所触发的数据处理逻辑的设置操作，如方法名的输入操作、相应控件所支持的操作的选择等。

在一些实施例中，当信息配置操作包括事件对应的事件配置操作，信息配置界面为事件配置界面，事件配置界面包括事件添加子界面时，事件添加子界面中还可以包括事件创建控件；从而在对目标组件的组件信息进行配置之前，还可以，响应于针对事件创建控件的触发操作，显示用于编辑事件的代码的代码编辑区域；响应于在代码编辑区域所编辑得到的事件代码，生成用于供关联至目标组件的事件。

需要说明的是，如前文所述，可以基于事件添加子界面设置控件所支持的操作以及该操作所触发的数据处理逻辑，如在图15中虚线框1502所指示的位置设置点击操作所触发的数据处理逻辑，也即所调用的方法以及涉及的参数和最终的输出，而这里输入的方法名对应的方法也即所调用的方法为预先所编译的，也即通过输入的方法名，调用相应的方法，若当前所需调用的方法没有实现编译时，则无法输入所调用的方法名，此时，则需要用户自定义去编译所调用的方法，基于此，响应于针对事件创建控件的触发操作，显示用于编辑事件的代码也即所调用的方法的代码编辑区域；响应于在代码编辑区域所编辑得到的事件代码也即所调用的方法，生成用于供关联至目标组件的事件。

示例性地，参见图16，图16是本申请实施例提供的代码编辑区域的示意图，基于图16，响应于针对事件创建控件的触发操作，显示如图16所指示的用于编辑事件的代码也即所调用的方法的代码编辑区域，从而响应于在代码编辑区域所编辑得到的事件代码也即所调用的方法，生成用于供关联至目标组件的事件。

需要说明的是，这里的事件创建控件可以位于事件添加子界面中，也可以位于页面编辑界面中的其它位置，对此，本申请实施例不做限定。

在一些实施例中，当信息配置操作包括事件对应的事件配置操作，信息配置界面为事件配置界面，事件配置界面包括事件添加子界面时，事件配置界面中还包括条件设置选项，从而响应于针对条件设置选项的选择操作，控制目标组件在目标页面的显示处于条件约束状态；条件约束状态用于指示在满足目标条件时，目标组件能够显示于目标页面。

需要说明的是，当目标组件在目标页面的显示处于条件约束状态时，只有在满足目标条件时，目标组件能够显示于目标页面，若不满足目标条件时，目标组件不能够显示于目标页面；目标组件在目标页面的显示不处于条件约束状态时，目标组件无论是否满足目标条件，都能够显示于目标页面。这里的目标条件为预先设置的，例如可以是用户在目标页面的浏览时长是否达到目标浏览时长，当浏览时长达到目标浏览时长时，确定满足目标条件，也即目标组件能够显示于目标页面，当浏览时长未达到目标浏览时长时，确定不满足目标条件，也即目标组件不能够显示于目标页面。

示例性地，继续参见图15，图15中虚线框1503所指示的为条件设置选项，当接收到针对条件设置选项的选择操作，控制相应组件在目标页面的显示处于条件约束状态，也即只有在满足目标条件时，相应组件能够显示于目标页面，若不满足目标条件时，相应组件不能够显示于目标页面。

需要说明的是，虽然组件配置区包括属性控件、样式控件及事件控件，但是在配置组件的组件信息时，并不是相应组件的属性信息、样式信息以及事件信息都会配置，可以对相应组件的属性信息、样式信息以及事件信息中至少之一进行配置，从而完成对相应组件的组件信息的配置，对此，本申请实施例不做限定。

步骤104，响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件，数据文件中记录有配置的目标页面中各组件的组件信息；其中，数据文件，用于指示供进行代码编译后得到目标页面的页面代码。

在实际实施时，页面编辑区中还包括保存控件，从而响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件的过程，可以是，响应于基于保存控件触发的针对目标页面的编辑完成指令，生成目标页面对应的数据文件，其中，数据文件具有目标数据交换格式。

示例性地，参见图17，图17是本申请实施例提供的保存控件的示意图，基于图17，完成目标页面的编辑后，响应于基于如1701所指示的保存控件触发的针对目标页面的编辑完成指令，生成目标页面对应的数据文件。

需要说明的是，目标数据交换格式可以是预先设置的，例如可以是针对特定服务平台所适配的数据格式，例如当服务平台为h5时，这里的数据文件具有的目标数据交换格式可以是HTML+CSS+JS格式，当服务平台为小程序时，这里的数据文件具有的目标数据交换格式可以是WXML+WXSS+JS格式；又或者可以是针对所有服务平台所适配的中间数据格式，从而将数据文件发送至不同服务平台时，不同服务平台都可以编译该数据文件所对应的页面代码。

需要说明的是，响应于基于保存控件触发的针对目标页面的编辑完成指令，生成目标页面对应的数据文件，从而将该数据文件进行保存，然后在对数据文件进行保存后，可以将保存的数据文件发送至线上，如发送至服务器。

在一些实施例中，还可以直接将生成的数据文件发送至线上，具体地，页面编辑区中还包括发布控件，从而响应于针对发布控件的触发操作，生成目标页面对应的数据文件，并将生成的数据文件发送至线上。

示例性地，继续参见图17，基于图17，完成目标页面的编辑后，响应于针对如1702所指示的发布控件的触发操作，生成目标页面对应的数据文件，并将生成的数据文件发送至线上。

在一些实施例中，当完成目标页面的编辑时，还可以显示提示信息，具体地，响应于编辑完成指令，显示提示信息，其中，提示信息用于提示用户已生成数据文件。

在一些实施例中，响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件的过程，可以是，响应于针对目标页面的编辑完成指令，获取目标页面对应的多叉树结构；其中，多叉树结构中的根节点与目标页面相对应，多叉树结构中除根节点以外的节点与目标页面中的组件相对应，多叉树结构中的节点之间通过携带父属性或子属性的指针相关联；对目标页面对应的多叉树结构进行序列化，得到目标页面对应的数据文件。

需要说明的是，在对目标页面中的组件进行编辑如拖动时，当拖动一个组件时，组件本身触发事件里会携带组件对应的标识，因此，基于标识遍历多叉树，查询对应的组件，其中，如果该组件被拖动到其他组件内，则可以依次对原布局组件、被拖动的组件以及新布局组件进行修改，具体地，对原布局组件包括的指向被拖动组件的对象指针进行删除，也即删除原布局组件中相应子属性的指针；对被拖动组件所归属的布局组件的对象指针进行修改，也即将被拖动组件中父属性的指针由指向原布局组件修改为指向新布局组件；增加新布局组件中子属性的指针，也即将新布局组件中增加指向被拖动组件的对象指针。

示例性地，参见图18，图18是本申请实施例提供的多叉树的结构示意图，基于图18，多叉树指示一个页面，该页面中包括2个布局组件，一个单一功能组件，其中，每一个布局组件包括若干个功能组件，其中，多叉树结构中的节点之间通过携带父属性或子属性的指针相关联。

在实际实施时，由于这棵多叉树存在循环引用，一个节点的父属性指向了父节点，父节点的子属性的某一项又指回去，这导致如果直接序列化成字符串格式的信息，那么将无限嵌套。因此，在对目标页面对应的多叉树结构进行序列化时，将多叉树中父属性的指针进行删除，得到目标多叉树，从而对目标多叉树进行序列化，得到目标页面对应的数据文件。如此，避免了出现无限嵌套的情况，解除了循环引用。

在实际实施时，数据文件可以是页面代码，如源代码或者可执行代码，又或者可以是Vue代码，也即用于生成页面代码。具体地，当数据文件是Vue代码，也即用于生成页面代码时，生成目标页面对应的数据文件之后，还可以，发送数据文件至代码编译装置，以使代码编译装置基于数据文件生成页面代码。

在一些实施例中，页面代码为可执行代码，从而生成目标页面对应的数据文件之后，还可以，发送数据文件至代码编译装置，以使代码编译装置基于数据文件生成目标页面对应的源代码，并将源代码转化为目标页面对应的可执行代码。其中，可执行代码可以是与服务平台相适配的静态代码文件，因此，在从数据文件后，通过将数据文件至代码编译装置，以使代码编译装置基于数据文件生成目标页面对应的源代码，并将源代码转化为目标页面对应的静态代码文件，从而基于该静态代码文件也即可执行代码，生成相应的目标页面。

在另一些实施例中，页面代码可以为源代码，从而生成目标页面对应的数据文件之后，还可以，发送数据文件至代码编译装置，以使代码编译装置基于数据文件生成目标页面对应的源代码。从而再将源代码转化为目标页面对应的静态代码文件，进而基于该静态代码文件也即可执行代码，生成相应的目标页面。对此，本申请实施例不做限定。

应用本申请上述实施例，显示目标页面对应的包括页面编辑区域的页面编辑界面，再在页面编辑区中，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区，然后响应于在组件配置区中针对目标组件的信息配置操作，对目标组件的组件信息进行配置，最后响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件。如此，通过对目标组件的选定操作以及信息配置操作，完成对目标页面的编辑，同时，在完成对目标页面的编辑后，生成用于指示供进行代码编译后得到目标页面的页面代码的数据文件，相较于每一次生成页面时都需要进行一次渲染的页面生成过程，本申请直接生成对应目标页面的页面代码，以便于基于该页面代码，生成目标页面，大幅度降低了页面的生成时间，提高了的页面生成效率。

下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。

相关技术的页面的生成过程中，大多存在以下问题：第一，依赖元页面，页面代码体积大，加载慢，用户体验不好；第二，代码大部分无法跨端，也即所生成的页面代码无法在不同前端内运行；第三，数据源配置不够灵活，少数灵活的graphql对普通用户使用难度很大。

基于此，本申请实施例提供一种代码融合开发以及拓展的低代码平台方法，首先定义了一个页面该有的属性，用户通过在一个可视化平台上进行拖拽组件、为组件输入属性等操作，生成出记录了页面属性的JSON文件作为页面的schema，然后通过代码生成器，将这个schema重新转换成一个页面的源代码，并将它部署在服务端。

如此，用户只需要少量的代码，就可以实现一个前端程序的开发，而且专业用户也可以编写功能复杂的组件，并和其他组件一样，这些组件也可以通过可视化的方式参与到页面开发当中去，保留了足够的扩展能力。同时，用户可以使用更直观的方式来描述自己需要的查询语句，这不仅降低了GraphQL的使用门槛，同时也增加了页面数据源的可配置性，将页面的数据和页面的呈现相互分离，提高页面的灵活度。此外，相较于其他低代码编程中采取一个巨大的元页面来统一渲染用户需要的页面的方案，本申请直接将最终呈现的页面输出为代码，不仅方便用户使用，从而大幅度降低了加载时间。

接下来，从产品侧对本申请的技术方案进行说明。

在实际实施时，本申请技术方案在产品侧由三部分所实现，即管理平台、低代码平台以及流水线平台。对于管理平台，如图5所示，在管理平台可以管理页面，包括配置页面标题、页面路径等信息，用户也可以在这里新建、管理、删除页面。用户可以在这里，进入下一部分的低代码平台进行低代码开发，实现页面的功能。

对于低代码平台，低代码平台是一个交付给用户使用的服务。用户可以在其中拖拽组件组合页面，配置组件的属性、数据源，以及事件处理来处理用户的操作，从而生成一个可交互的页面。同时，如果用户本身具备正常开发组件的能力，低代码拖拽平台也可以支持自定义组件拓展。用户可以和开发普通组件一样开发给低代码平台使用的组件，只需要为每一个组件增加一个meta.js描述组件来配置相应组件的属性，从而在低代码平台使用过程中会呈现相应组件的基本样式给用户，如此，将这个组件引入低代码平台，那用户在使用低代码平台时就可以使用自己开发的组件了，更加方便用户实现自己个性化的功能定制。

在实际实施时，对于用户从管理平台转至低代码平台的过程，具体地，当用户点击管理平台中目标页面对应的编辑控件时，响应于针对编辑控件的触发操作，显示低代码编辑区域，也即转至低代码平台。其中，低代码编辑区域分成三个部分：组件物料区（组件存储区）、画布区（页面编辑区）、组件配置区。如图6所示，低代码编辑区域的最左侧为物料区，可以将物料仓库当中的组件拖拽到画布界面，从而在页面当中添加组件。低代码编辑区域的中间为画布区，可以拖动组件改变其位置。低代码编辑区域的右侧为配置区，其会根据用户选中的组件不同，展示不同的配置项，用户在这里可以完善组件的逻辑。

需要说明的是，当涉及到相对复杂的逻辑，使用低代码无法很好表述时，用户还可以直接使用传统方式编码并在低代码当中调用内部方法。如图16所示，通过显示如图16所指示的用于编辑所调用的方法的代码编辑区域，从而响应于在代码编辑区域所编辑得到的代码调用相应代码对应的方法。

在实际实施时，当用户完成页面编辑之后，点击保存即可，如图17所示，当接收用户针对如1701所指示的保存控件的触发操作，生成对应用户所编辑的页面的代码，并对代码进行保存，或者，如图17所示，当接收用户针对如1702所指示的发布控件的触发操作，生成对应用户所编辑的页面的代码，并将代码发布到线上，以使用户可在线上查看相关页面。

对于流水线平台，当用户修改完页面信息之后，一键启动流水线，如图17所示，当接收到用户针对如1702所指示的发布控件的触发操作是，用自动将最新的代码同步到线上。其中，如果项目（服务）对应是H5端，则用户只需要点击部署，如果项目对应是小程序端，则用户还需要在流水线完毕之后，将最新的小程序提交审核，审核通过就会自动部署到线上。

接下来，从技术侧对本申请的技术方案进行说明。

参见图19，图19是本申请实施例提供的一种代码融合开发以及拓展的低代码平台方法的过程示意图，基于图19，本申请的技术方案主要包括三部分，即可视化界面（页面编辑界面）、代码生成器（代码编译装置）、构建工具（代码编译装置），其中，本申请的技术方案通过步骤1901至步骤1905所实现，具体地，在用户执行完针对组件的可视化操作如拖动等之后，可视化界面负责生成json文件（数据文件）也即页面Schema，并将该文件传给代码生成器，代码生成器负责生成代码并将更改代码传给构建工具，构建工具也即流水线负责对代码的编译和打包，形成可以在相应项目环境当中运行的代码，最后再基于该代码生成页面，并将该页面发送至用户。

在实际实施时，可视化界面提供了一套与用户交互的界面，用户可以通过拖拽等方式，使用组件拼接出需要的页面样式，使用多种输入表单，指定组件的数据、逻辑和事件处理。同时，用户对可视化界面的操作，都会让可视化界面同步修改页面对应的schema，当用户在可视化界面点击保存时，将最终的schema保存到数据库当中，以供后续使用。

在实际实施时，代码生成器和构建工具集成在一起（代码编译装置），负责将scheme转换成实际可在相应项目环境当中运行的代码，只是两者负责了这一工作的不同环节。前者将schema构造成开发人员可读的源代码，但是源代码无法直接使用，需要后者将代码转换成可直接在相应项目环境当中运行的静态代码。

对于可视化界面，也即页面schema的设计。这里，通过分析许多个页面的代码，寻找页面之间的共性，可以确定，一个页面只需要以下几个元素就可以组成，即视图、模型以及样式。其中，视图是用户看到的页面呈现，比如当用户在页面上看到一个文章，那么这个文章内部就可能包含了标题、作者信息和正文。作者信息又可能包含了作者头像和作者姓名，正文部分又包含了多个自然段。页面的视图部分可以看作是一个又一个组件的嵌套、排列形成的。

在实际实施时，视图中包括至少一个组件，而组件又存在组件属性以及组件事件，组件的属性可能是提前设置好不会被改变的，也可能是需要改变的。比如一个文章组件，文章是否展示作者信息这个属性，可能是我们根据自己的需求定好的，不会被改变的，任何页面都需要展示文章的信息。但文章内容显然不能定死，我们需要根据页面的参数，去获取不同的文章内容来展示，所以是一个可以被改变的属性。而组件的事件则用于允许组件之间通信，或者处理用户 的操作。比如当用户点击作者头像时，就产生了一个针对作者头像的点击事件，通过代码逻辑处理这一个事件，比如把页面跳转到这个作者的主页，帮助用户查看更多的文章。

对于模型，这里指的是数据模型，任何页面的展示都需要自己的数据模型，文章详情需要文章的数据、作者详情需要作者的数据。这些数据的定义、数据获取、处理等一系列流程，和在一起形成页面的数据模型。

对于样式，则是对页面呈现式样的调整，比如某一个组件有多大，字体有多粗，甚至是一个组件的动画效果，这都是页面的样式。

基于此，再复杂的页面也都是通过这些元素组合而成的，而页面schema的设计则用于指示基于上述三种元素来描绘任何一个页面的方式。

在实际实施时，因为已经将一个页面抽象成了一系列属性的集合（即上文提到的schema）。因此需要一个UI部分，它的目的是，当用户修改一个组件属性、或者一个页面属性的时候，可以同步的修改整体的schema，并且不断将最新的样式同步呈现给用户。所以UI部分存在以下几部分的功能：

（1）组件可以正确在UI的画布当中展示。

当用户将一个组件拖动到中间的画布区域时，中间的画布效果需要同步呈现一个对应的组件，来展示页面效果，因此要求组件可以在浏览器当中运行、展示。

（2）组件可以在正确位置显示。

整个画布默认的布局样式为flex，即放入其中的组件，会自动从左到右、从上到下瀑布式排列。如此，方便了进行页面排版。也不需要计算某一个组件距离四周的距离。

（3）维护每一个组件的属性。

当用户拖拽出一个组件到画布界面时，这个组件才真的被创建。此时，代码会为它创造一个对象来维护它的属性，同时，每一个组件的属性对象，都会有一个唯一的，不重复的id。同时，组件与组件会呈现一个嵌套的树形关系。最根部的位置是画布代表的最外层节点，一个画布下会有一个或者多个并排的组件。每一个组件内部都可以插入子组件。每一个组件的属性对象都只保留了一份，它们之间的嵌套关系是通过维护指针来实现的。子属性内保存子组件的对象指针，而父属性内保存的则是父组件的指针。形成了一个类似多叉树的结构，如图18所示。

在实际实施时，当拖拽一个组件时，组件本身触发事件里会携带其id。我们基于ID遍历多叉树，从其中寻找对应的组件，如果组件被拖动到其他组件内，则可以依次修改原父组件的子属性，被拖动组件的父属性，修改新父组件的子属性。

（4）将这棵多叉树序列化为json。

需要说明的是，由于这棵多叉树存在循环引用，一个节点的父属性指向了父节点，父节点的子属性的某一项又指回去，这导致如果直接序列化成字符串格式的信息，那么将无限嵌套。因此，在将这棵多叉树序列化为json时，需要遍历这棵多叉树，将父属性删除，解除循环引用，从而再将删除父属性后的多叉树序列化为json文件。

对于代码生成器，由于每一个页面的schema都是独立的，有多少个页面，就存在多少个schema。因此，将schema本身的内容、页面id、页面路径等信息保存在管理端，方便代码生成器可以读取所有的页面信息。具体地，首先基于项目id，拉取当前项目的所有页面，然后，依次将每一个页面的schema还原成对应的uni-app的代码（具有目标数据交换格式的数据文件），最后，根据页面本身的路径关系，将生成的代码文件也放在对应的路径下。

需要说明的是，代码生成器会独立的去生成模板也即视图、脚本也即模型和样式部分。对于模板部分，最重要的就是还原组件的嵌套关系和组件本身的属性。这里，可以使用一个递归函数去求解，从而将对应组件的属性，还原成一个代码。对于脚本部分，分为多个部分，分别是：1.公共变量（保存页面需要的变量），2.事件处理钩子（处理组件的时间，钩子可以用于执行其他组件的方法，也可以改变中间变量等等），3.公共方法（公共方法会被多个事件处理钩子使用，方便代码复用）。对于变量和方法，用户需要制定名称和内容，这部分可直接读取并生成。而事件钩子，则根据模板部分对每一个组件的每一个事件，基于组件id+事件方法定位到具体的钩子。

需要说明的是，页面与页面之间，关系独立，每一个页面都存在对应的json文件。当生成所有页面之后，还需要生成路由，其中，路由的作用是，指定用户访问特定路径的时候，基于特定代码，来渲染特定内容给用户。

对于流水线，由于源代码是无法直接使用的，因此需要打包、编译拿到一个可执行的代码，然后将代码部署到特定的服务器，此时代码才可以被使用。而流水线，就是将这一整套步骤一键化，让用户可以通过很少的操作完成整个步骤。具体地，流水线本质上仍然是通过执行提前写好的服务端脚本，在实际实施时，流水线可以基于上述的代码生成器，获得页面的uni-app规范的源代码；也可以基于uni-app的编译工具，将源代码转为可以直接运行的代码。同时，如果是h5项目，流水线将会直接将编译产物，上传到服务器的http服务容器当中，这样当用户访问网站时，http容器就会将最新的代码传递给用户，代码在用户的浏览器当中执行，呈现最新的页面给用户，而如果是小程序项目，编译产物会被直接上传给相应服务器，并自动设置为体验版，此时，管理小程序人员可以将最新的小程序提交给官方审核，审核通过之后，用户访问小程序时将自动呈现最新版；

需要说明的是，由于对于不同的平台，需要的静态代码格式不同，比如小程序需要WXML+WXSS+JS格式的代码，而h5则使用HTML+CSS+JS格式的代码。因此，将代码编译过程分成两部分，前端负责解析代码，生成一个特定的中间格式（目标数据交换格式）的数据（数据文件），而后端，则可以按需使用，不同的后端可以将相同的中间格式的数据，基于自身的逻辑重新组织为文本状态，得到相适配的静态代码。

在实际实施时，由于不同项目的接口不兼容，因此，在生成可执行代码的过程中，通过将适配所有项目的调用对象的代码注入到静态代码里，并在代码实际运行时，将该调用对象挂载到全局方便调用。从而实现了跨平台编译和运行。

如此，通过本申请，对于组成页面的组件，不需要特别的要求，可以是用户自行编译开发的组件，也可以是其他用户所编译开发的组件，不仅提高了用户使用组件时的便捷性，还可以方便用户实现个性化的功能定制，提高了组件的可扩展性；同时，无论是页面配置还是数据配置都很灵活，从而提高了页面生成过程中的灵活性；此外，可视化界面大大提高了开发速度和效率，并且可以让原本专业能力不足的人进入到开发过程，可以帮助快速实现页面生成。

应用本申请上述实施例，显示目标页面对应的包括页面编辑区域的页面编辑界面，再在页面编辑区中，响应于针对目标页面中目标组件的选定操作，显示用于配置目标组件的组件信息的组件配置区，然后响应于在组件配置区中针对目标组件的信息配置操作，对目标组件的组件信息进行配置，最后响应于针对目标页面的编辑完成指令，生成目标页面对应的数据文件。如此，通过对目标组件的选定操作以及信息配置操作，完成对目标页面的编辑，同时，在完成对目标页面的编辑后，生成用于指示供进行代码编译后得到目标页面的页面代码的数据文件，相较于每一次生成页面时都需要进行一次渲染的页面生成过程，本申请直接生成对应目标页面的页面代码，以便于基于该页面代码，生成目标页面，大幅度降低了页面的生成时间，提高了的页面生成效率。

下面继续说明本申请实施例提供的页面的数据文件生成装置455的实施为软件模块的示例性结构，在一些实施例中，如图2所示，存储在存储器450的页面的数据文件生成装置455中的软件模块可以包括：

第一显示模块4551，用于显示目标页面对应的页面编辑界面，所述页面编辑界面中包括页面编辑区，所述页面编辑区，用于对所述目标页面中的组件进行编辑；

第二显示模块4552，用于在所述页面编辑区中，响应于针对所述目标页面中目标组件的选定操作，显示用于配置所述目标组件的组件信息的组件配置区；

配置模块4553，用于响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置；

生成模块4554，用于响应于针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件中记录有配置的所述目标页面中各组件的组件信息；其中，所述数据文件，用于指示供进行代码编译后得到所述目标页面的页面代码。

在一些实施例中，所述第一显示模块4551，还用于显示包括至少一个页面的目标服务所对应的页面管理界面，并在所述页面管理界面中，显示包括目标页面信息的各所述页面的页面信息；其中，所述页面信息与所述页面一一对应，所述目标页面信息对应所述目标页面，所述页面信息关联有编辑控件；响应于针对目标页面信息关联的目标编辑控件的触发操作，显示所述目标页面对应的页面编辑界面。

在一些实施例中，所述页面信息还关联有删除控件，所述页面管理界面中还显示有除所述目标页面信息之外的其他页面信息，所述装置还包括删除模块，所述删除模块，用于响应于针对所述其他页面信息关联的删除控件的触发操作，在所述页面管理界面中删除所述其他页面信息，以删除所述目标服务中包括的所述其他页面信息对应的页面。

在一些实施例中，所述页面编辑界面中还包括组件存储区，所述组件存储区中包括多个候选组件；所述装置还包括组件添加模块，所述组件添加模块，用于响应于针对所述多个候选组件中目标候选组件的拖动操作，显示所述目标候选组件被拖动的过程；当所述目标候选组件被拖动至所述页面编辑区中时，响应于针对所述目标候选组件的释放操作，在所述页面编辑区中显示所述目标候选组件，以将所述目标候选组件添加至所述页面中。

在一些实施例中，所述装置还包括组件调整模块，所述组件调整模块，用于响应于针对所述页面编辑区中组件的位置调整操作，依据所述位置调整操作调整所述页面编辑区中组件的位置，以调整所述页面编辑区中组件的布局；其中，所述页面编辑区中组件的布局，用于指示所述目标页面中组件的布局。

在一些实施例中，所述组件配置区中包括属性控件、样式控件及事件控件；其中，所述属性控件用于配置所述目标页面中组件的属性信息，所述样式控件用于配置所述组件的样式，所述事件控件用于配置所述组件关联的事件；所述配置模块4553，还用于在所述组件配置区中显示信息配置界面，所述信息配置界面为所述属性控件对应的属性配置界面、所述样式控件对应的样式配置界面及所述事件控件对应的事件配置界面中之一；响应于基于所述信息配置界面触发的针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置。

在一些实施例中，所述信息配置操作包括所述属性信息对应的属性配置操作，所述信息配置界面为所述属性配置界面，所述配置模块4553，还用于响应于针对所述属性控件的触发操作，在所述组件配置区中，显示用于配置所述目标组件的属性信息的属性配置界面；其中，所述属性配置界面中包括针对目标组件的至少一个属性配置项，每个所述属性配置项用于配置所述目标组件的一种属性；在所述组件配置区中，响应于基于所述至少一个属性配置项触发的所述属性配置操作，对所述目标组件的属性信息进行配置。

在一些实施例中，所述信息配置操作包括所述样式对应的样式配置操作，所述信息配置界面为所述样式配置界面，所述配置模块4553，还用于响应于针对所述样式控件的触发操作，在所述样式配置区中，显示用于配置所述目标组件的样式的样式配置界面；其中，所述样式包括针对所述目标组件的以下信息至少之一：组件大小、组件中字体样式、组件的动画效果；在所述组件配置区中，响应于基于所述样式配置界面触发的所述样式配置操作，对所述目标组件的样式进行配置。

在一些实施例中，所述信息配置操作包括所述事件对应的事件配置操作，所述信息配置界面为所述事件配置界面，所述事件配置界面包括事件添加子界面；所述配置模块4553，还用于响应于针对所述事件控件的触发操作，在所述事件配置区中，显示用于配置所述目标组件所关联的事件的事件配置界面，所述事件配置界面中包括事件添加控件；响应于针对所述事件添加控件的触发操作，在所述事件配置界面中，显示用于为所述目标组件添加关联的事件的事件添加子界面；在所述组件配置区中，响应于基于所述事件添加子界面触发的所述事件配置操作，对所述目标组件关联的事件进行配置。

在一些实施例中，所述事件添加子界面中包括事件创建控件；所述装置还包括代码编辑模块，所述代码编辑模块，用于响应于针对所述事件创建控件的触发操作，显示用于编辑事件的代码的代码编辑区域；响应于在所述代码编辑区域所编辑得到的事件代码，生成用于供关联至所述目标组件的事件。

在一些实施例中，所述事件配置界面中包括条件设置选项，所述装置还包括选择模块，所述选择模块，用于响应于针对所述条件设置选项的选择操作，控制所述目标组件在所述目标页面的显示处于条件约束状态；所述条件约束状态用于指示在满足目标条件时，所述目标组件能够显示于所述目标页面。

在一些实施例中，所述页面编辑区中包括保存控件，所述生成模块4554，还用于响应于基于所述保存控件触发的针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件具有目标数据交换格式。

在一些实施例中，所述生成模块4554，还用于响应于针对所述目标页面的编辑完成指令，获取所述目标页面对应的多叉树结构；其中，所述多叉树结构中的根节点与所述目标页面相对应，所述多叉树结构中除所述根节点以外的节点与所述目标页面中的组件相对应，所述多叉树结构中的节点之间通过携带父属性或子属性的指针相关联；对所述目标页面对应的多叉树结构进行序列化，得到所述目标页面对应的数据文件。

在一些实施例中，所述页面代码为可执行代码，所述装置还包括发送模块，所述发送模块，用于发送所述数据文件至代码编译装置，以使所述代码编译装置基于所述数据文件生成所述目标页面对应的源代码，并将所述源代码转化为所述目标页面对应的可执行代码。

本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该电子设备执行本申请实施例上述的页面的数据文件生成方法。

本申请实施例提供一种存储有可执行指令的计算机可读存储介质，其中存储有可执行指令，当可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的页面的数据文件生成方法，例如，如图3示出的页面的数据文件生成方法。

在一些实施例中，计算机可读存储介质可以是只读存储器（Read-Only Memory，ROM）、随即存储器（Random Access Memory，RAM）、可擦写可编程只读存储器（ErasableProgrammable Read-Only Memory，EPROM）、电可擦可编程只读存储器（Electrically Erasable Programmable Read-Only Memory，EEPROM）、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。

在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言（包括编译或解释语言，或者声明性或过程性语言）来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。

作为示例，可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言（HTML，Hyper TextMarkup Language）文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件（例如，存储一个或多个模块、子程序或代码部分的文件）中。

作为示例，可执行指令可被部署为在一个电子设备上执行，或者在位于一个地点的多个电子设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个电子设备上执行。

综上所述，通过本申请实施例具有以下有益效果：

（1）通过对目标组件的选定操作以及信息配置操作，完成对目标页面的编辑，同时，在完成对目标页面的编辑后，生成用于指示供进行代码编译后得到目标页面的页面代码的数据文件，相较于每一次生成页面时都需要进行一次渲染的页面生成过程，本申请直接生成对应目标页面的页面代码，以便于基于该页面代码，生成目标页面，大幅度降低了页面的生成时间，提高了的页面生成效率。

（2）当页面中组件数量过多时，无需再页面编辑区域中逐一添加对应的组件，而仅需确定组件的位置以及组件的组件信息即可，减少了数据处理量并提高了组件的编辑效率，从而提高了页面的生成效率。

（3）用户只需要少量的代码，就可以实现一个前端程序的开发，而且专业用户也可以编写功能复杂的组件，并和其他组件一样，这些组件也可以通过可视化的方式参与到页面开发当中去，保留了足够的扩展能力。同时，用户可以使用更直观的方式来描述自己需要的查询语句，这不仅降低了GraphQL的使用门槛，同时也增加了页面数据源的可配置性，将页面的数据和页面的呈现相互分离，提高页面的灵活度。此外，相较于其他低代码编程中采取一个巨大的元页面来统一渲染用户需要的页面的方案，本申请直接将最终呈现的页面输出为代码，不仅方便用户使用，从而大幅度降低了加载时间。

需要说明的是，在本申请实施例中，涉及到用户的操作等相关的数据，当本申请实施例运用到具体产品或技术中时，需要获取相应的许可或者同意，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

以上所述，仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。

Claims (18)

1.一种页面的数据文件生成方法，其特征在于，所述方法包括：

显示目标页面对应的页面编辑界面，所述页面编辑界面中包括页面编辑区，所述页面编辑区，用于对所述目标页面中的组件进行编辑；

在所述页面编辑区中，响应于针对所述目标页面中目标组件的选定操作，显示用于配置所述目标组件的组件信息的组件配置区；

响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置；

响应于针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件中记录有配置的所述目标页面中各组件的组件信息；

其中，所述数据文件，用于指示供进行代码编译后得到所述目标页面的页面代码。

2.如权利要求1所述的方法，其特征在于，所述显示目标页面对应的页面编辑界面，包括：

显示包括至少一个页面的目标服务所对应的页面管理界面，并在所述页面管理界面中，显示包括目标页面信息的各所述页面的页面信息；

其中，所述页面信息与所述页面一一对应，所述目标页面信息对应所述目标页面，所述页面信息关联有编辑控件；

响应于针对目标页面信息关联的目标编辑控件的触发操作，显示所述目标页面对应的页面编辑界面。

3.如权利要求2所述的方法，其特征在于，所述页面信息还关联有删除控件，所述页面管理界面中还显示有除所述目标页面信息之外的其他页面信息，所述方法还包括：

响应于针对所述其他页面信息关联的删除控件的触发操作，在所述页面管理界面中删除所述其他页面信息，以删除所述目标服务中包括的所述其他页面信息对应的页面。

4.如权利要求1所述的方法，其特征在于，所述页面编辑界面中还包括组件存储区，所述组件存储区中包括多个候选组件；所述方法还包括：

响应于针对所述多个候选组件中目标候选组件的拖动操作，显示所述目标候选组件被拖动的过程；

当所述目标候选组件被拖动至所述页面编辑区中时，响应于针对所述目标候选组件的释放操作，在所述页面编辑区中显示所述目标候选组件，以将所述目标候选组件添加至所述页面中。

5.如权利要求1所述的方法，其特征在于，所述方法还包括：

响应于针对所述页面编辑区中组件的位置调整操作，依据所述位置调整操作调整所述页面编辑区中组件的位置，以调整所述页面编辑区中组件的布局；

其中，所述页面编辑区中组件的布局，用于指示所述目标页面中组件的布局。

6.如权利要求1所述的方法，其特征在于，所述组件配置区中包括属性控件、样式控件及事件控件；其中，所述属性控件用于配置所述目标页面中组件的属性信息，所述样式控件用于配置所述组件的样式，所述事件控件用于配置所述组件关联的事件；

所述响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置，包括：

在所述组件配置区中显示信息配置界面，所述信息配置界面为所述属性控件对应的属性配置界面、所述样式控件对应的样式配置界面及所述事件控件对应的事件配置界面中之一；

响应于基于所述信息配置界面触发的针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置。

7.如权利要求6所述的方法，其特征在于，所述信息配置操作包括所述属性信息对应的属性配置操作，所述信息配置界面为所述属性配置界面，所述在所述组件配置区中显示信息配置界面，包括：

响应于针对所述属性控件的触发操作，在所述组件配置区中，显示用于配置所述目标组件的属性信息的属性配置界面；

其中，所述属性配置界面中包括针对目标组件的至少一个属性配置项，每个所述属性配置项用于配置所述目标组件的一种属性；

所述响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置，包括：

在所述组件配置区中，响应于基于所述至少一个属性配置项触发的所述属性配置操作，对所述目标组件的属性信息进行配置。

8.如权利要求6所述的方法，其特征在于，所述信息配置操作包括所述样式对应的样式配置操作，所述信息配置界面为所述样式配置界面，所述在所述组件配置区中显示信息配置界面，包括：

响应于针对所述样式控件的触发操作，在所述样式配置区中，显示用于配置所述目标组件的样式的样式配置界面；

其中，所述样式包括针对所述目标组件的以下信息至少之一：组件大小、组件中字体样式、组件的动画效果；

所述响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置，包括：

在所述组件配置区中，响应于基于所述样式配置界面触发的所述样式配置操作，对所述目标组件的样式进行配置。

9.如权利要求6所述的方法，其特征在于，所述信息配置操作包括所述事件对应的事件配置操作，所述信息配置界面为所述事件配置界面，所述事件配置界面包括事件添加子界面；

所述在所述组件配置区中显示信息配置界面，包括：

响应于针对所述事件控件的触发操作，在所述事件配置区中，显示用于配置所述目标组件所关联的事件的事件配置界面，所述事件配置界面中包括事件添加控件；

响应于针对所述事件添加控件的触发操作，在所述事件配置界面中，显示用于为所述目标组件添加关联的事件的事件添加子界面；

所述响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置，包括：

在所述组件配置区中，响应于基于所述事件添加子界面触发的所述事件配置操作，对所述目标组件关联的事件进行配置。

10.如权利要求9所述的方法，其特征在于，所述事件添加子界面中包括事件创建控件；在对所述目标组件的组件信息进行配置之前，所述方法还包括：

响应于针对所述事件创建控件的触发操作，显示用于编辑事件的代码的代码编辑区域；

响应于在所述代码编辑区域所编辑得到的事件代码，生成用于供关联至所述目标组件的事件。

11.如权利要求9所述的方法，其特征在于，所述事件配置界面中包括条件设置选项，所述方法还包括：

响应于针对所述条件设置选项的选择操作，控制所述目标组件在所述目标页面的显示处于条件约束状态；

所述条件约束状态用于指示在满足目标条件时，所述目标组件能够显示于所述目标页面。

12.如权利要求1所述的方法，其特征在于，所述页面编辑区中包括保存控件，所述响应于针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，包括：

响应于基于所述保存控件触发的针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件具有目标数据交换格式。

13.如权利要求1所述的方法，其特征在于，所述响应于针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，包括：

响应于针对所述目标页面的编辑完成指令，获取所述目标页面对应的多叉树结构；

其中，所述多叉树结构中的根节点与所述目标页面相对应，所述多叉树结构中除所述根节点以外的节点与所述目标页面中的组件相对应，所述多叉树结构中的节点之间通过携带父属性或子属性的指针相关联；

对所述目标页面对应的多叉树结构进行序列化，得到所述目标页面对应的数据文件。

14.如权利要求1所述的方法，其特征在于，所述页面代码为可执行代码，所述生成所述目标页面对应的数据文件之后，所述方法还包括：

发送所述数据文件至代码编译装置，以使所述代码编译装置基于所述数据文件生成所述目标页面对应的源代码，并将所述源代码转化为所述目标页面对应的可执行代码。

15.一种页面的数据文件生成装置，其特征在于，所述装置包括：

第一显示模块，用于显示目标页面对应的页面编辑界面，所述页面编辑界面中包括页面编辑区，所述页面编辑区，用于对所述目标页面中的组件进行编辑；

第二显示模块，用于在所述页面编辑区中，响应于针对所述目标页面中目标组件的选定操作，显示用于配置所述目标组件的组件信息的组件配置区；

配置模块，用于响应于在所述组件配置区中针对所述目标组件的信息配置操作，对所述目标组件的组件信息进行配置；

生成模块，用于响应于针对所述目标页面的编辑完成指令，生成所述目标页面对应的数据文件，所述数据文件中记录有配置的所述目标页面中各组件的组件信息；其中，所述数据文件，用于指示供进行代码编译后得到所述目标页面的页面代码。

16.一种电子设备，其特征在于，包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令时，实现权利要求1至14任一项所述的页面的数据文件生成方法。

17.一种计算机可读存储介质，其特征在于，存储有可执行指令，用于引起处理器执行时，实现权利要求1至14任一项所述的页面的数据文件生成方法。

18.一种计算机程序产品，包括计算机程序或指令，其特征在于，所述计算机程序或指令被处理器执行时，实现权利要求1至14任一项所述的页面的数据文件生成方法。