CN115291871A - 页面生成方法、电子设备、存储介质 - Google Patents

Abstract

本申请涉及计算机技术领域，尤其是涉及一种页面生成方法、电子设备、存储介质。本申请实施例中的页面生成方法，需要先获取控件选取指令与布局输入指令，并基于控件选取指令获取多个控件标识元素，进一步基于布局输入指令对多个控件标识元素进行排列布局，得到页面布局信息，再根据页面布局信息，获取控件元素关联信息，而后根据多个控件标识元素与控件元素关联信息，得到目标代码文件，最终基于目标代码文件，生成目标页面。本申请中的页面生成方法，从页面布局信息对多个控件标识元素的控件元素关联信息进行获取，而后根据多个控件标识元素与控件元素关联信息形成目标代码文件，最终生成目标页面，能够提升页面生成方法的生成效率。

Description

页面生成方法、电子设备、存储介质

技术领域

本申请涉及计算机技术领域，尤其是涉及一种页面生成方法、电子设备、存储介质。

背景技术

近年来，随着信息技术的飞速发展，人们已经越来越习惯于从互联网获取信息以方便自己的生活，而人们又主要是从智能终端上的页面获取信息。需要说明，页面开发配置的主要作用是将网站、应用程序(APP)或者React Native等平台上的展示页面更好地呈现给用户，方便用户获取有用信息的同时吸引用户。相关技术中，为了应对不同的业务场景，目标页面对应的业务需求也趋于多样化，然而传统的页面制作主要依靠前端工程师基于业务需求来编写代码，故而以此种方式进行页面生成所耗费的人力成本较大、网页生成效率低下。因此，如何提升页面生成方法的生成效率，成为业内亟待解决的一大难题。

发明内容

本申请旨在至少解决现有技术中存在的技术问题之一。为此，本申请提出一种页面生成方法、电子设备、存储介质，能够提升页面生成方法的生成效率。

根据本申请的第一方面实施例的页面生成方法，包括：

获取控件选取指令与布局输入指令，并基于所述控件选取指令获取多个控件标识元素；

基于所述布局输入指令对多个所述控件标识元素进行排列布局，得到页面布局信息；

根据所述页面布局信息，获取多个所述控件标识元素之间的控件元素关联信息；

根据多个所述控件标识元素与所述控件元素关联信息，得到与所述页面布局信息对应的目标代码文件；

基于所述目标代码文件，生成目标页面。

根据本申请的一些实施例，所述根据所述页面布局信息，获取多个所述控件标识元素之间的控件元素关联信息，包括：

根据所述页面布局信息，得到多个所述控件标识元素之间的控件层级关系；

基于所述控件层级关系，获取多个所述控件标识元素之间的所述控件元素关联信息。

根据本申请的一些实施例，所述根据所述页面布局信息，得到多个所述控件标识元素之间的控件层级关系，包括：

根据所述页面布局信息，将具有单层包含关系的一组所述控件标识元素确定为父子控件元素关系，并将同层级中具有相离关系的一组所述控件标识元素确定为同胞控件元素关系；

基于所述父子控件元素关系与所述同胞控件元素关系，得到多个所述控件标识元素之间的所述控件层级关系。

根据本申请的一些实施例，所述获取控件选取指令与布局输入指令，并基于所述控件选取指令获取多个控件标识元素之前，还包括：

基于多种业务需求，对多种预设控件元素进行配置；

根据预设平台类型和多种所述预设控件元素，建立控件映射关系，所述控件映射关系用以基于所述预设平台类型进行平台适配转换；

将配置好的所述预设控件元素与所述控件映射关系纳入预设控件数据库。

根据本申请的一些实施例，所述基于多种业务需求，对多种预设控件元素进行配置，包括：

基于多种所述业务需求，确定多种预设控件类型，并为各种所述预设控件类型配置预设触发事件与预设控件样式。

根据本申请的一些实施例，所述根据预设平台类型和多种所述预设控件元素，建立控件映射关系，包括：

根据所述预设平台类型获取多种平台适配控件，所述平台适配控件与所述预设平台类型的运行环境兼容适配；

对于每个所述预设控件元素，在多种所述平台适配控件中，匹配得到与所述预设控件元素作用一致的所述平台适配控件；

基于作用一致的所述预设控件元素与所述平台适配控件，建立所述控件映射关系。

根据本申请的一些实施例，所述根据多个所述控件标识元素与所述控件元素关联信息，得到与所述页面布局信息对应的目标代码文件，包括：

将所述控件标识元素在所述预设控件数据库中进行匹配，得到与所述控件标识元素对应的所述控件映射关系；

基于与所述控件标识元素对应的所述控件映射关系，对所述控件标识元素进行所述平台适配转换，得到目标页面控件；

根据所述目标页面控件与所述控件元素关联信息，得到适配于目标平台的目标代码文件。

根据本申请的一些实施例，所述基于与所述控件标识元素对应的所述控件映射关系，对所述控件标识元素进行所述平台适配转换，得到目标页面控件，包括：

基于所述控件映射关系，获取与所述控件标识元素作用一致的所述平台适配控件；

将与所述控件标识元素作用一致的所述平台适配控件，确定为所述平台适配转换得到的所述目标页面控件。

第二方面，本申请实施例提供了一种电子设备，包括：存储器、处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现如本申请第一方面实施例中任意一项所述的页面生成方法。

第三方面，本申请实施例提供了一种计算机可读存储介质，所述存储介质存储有程序，所述程序被处理器执行实现如本申请第一方面实施例中任意一项所述的页面生成方法。

根据本申请实施例的页面生成方法、电子设备、存储介质，至少具有如下有益效果：

本申请实施例中的页面生成方法，需要先获取控件选取指令与布局输入指令，并基于控件选取指令获取多个控件标识元素，进一步基于布局输入指令对多个控件标识元素进行排列布局，得到页面布局信息，再根据页面布局信息，获取多个控件标识元素之间的控件元素关联信息，而后根据多个控件标识元素与控件元素关联信息，得到与页面布局信息对应的目标代码文件，最终基于目标代码文件，生成目标页面。本申请中的页面生成方法，从页面布局信息对多个控件标识元素的控件元素关联信息进行获取，而后根据多个控件标识元素与控件元素关联信息形成目标代码文件，最终生成目标页面，能够提升页面生成方法的生成效率。

本申请的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本申请的实践了解到。

附图说明

本申请的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1为本申请实施例提供的页面生成方法流程示意图；

图2为本申请实施例提供的控件元素关联信息示意图；

图3为本申请实施例提供的页面生成方法另一流程示意图；

图4为本申请实施例提供的页面生成方法另一流程示意图；

图5为本申请实施例提供的页面生成方法另一流程示意图；

图6为本申请实施例提供的页面生成方法另一流程示意图；

图7为本申请实施例提供的页面生成方法另一流程示意图；

图8为本申请实施例提供的页面生成方法另一流程示意图；

图9为执行本申请实施例提供的页面生成方法的电子设备示意图。

具体实施方式

下面详细描述本申请的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能理解为对本申请的限制。

在本申请的描述中，若干的含义是一个或者多个，多个的含义是两个以上，大于、小于、超过等理解为不包括本数，以上、以下、以内等理解为包括本数。如果有描述到第一、第二只是用于区分技术特征为目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。

在本申请的描述中，需要理解的是，涉及到方位描述，例如上、下、左、右、前、后等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本申请和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本申请的限制。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示意性实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

本申请的描述中，需要说明的是，除非另有明确的限定，设置、安装、连接等词语应做广义理解，所属技术领域技术人员可以结合技术方案的具体内容合理确定上述词语在本申请中的具体含义。另外，下文中对于具体步骤的标识并不代表对于步骤顺序与执行逻辑的限定，各个步骤之间的执行顺序与执行逻辑应参照实施例所表述的内容进行理解与推定。

近年来，随着信息技术的飞速发展，人们已经越来越习惯于从互联网获取信息以方便自己的生活，而人们又主要是从智能终端上的页面获取信息。需要说明，页面开发配置的主要作用是将网站、应用程序(APP)或者React Native等平台上的展示页面更好地呈现给用户，方便用户获取有用信息的同时吸引用户。相关技术中，为了应对不同的业务场景，目标页面对应的业务需求也趋于多样化，然而传统的页面制作主要依靠前端工程师基于业务需求来编写代码，故而以此种方式进行页面生成所耗费的人力成本较大、网页生成效率低下。因此，如何提升页面生成方法的生成效率，成为业内亟待解决的一大难题。

本申请旨在至少解决现有技术中存在的技术问题之一。为此，本申请提出一种页面生成方法、电子设备、存储介质，能够提升页面生成方法的生成效率。

下面参照附图作出进一步说明。

参照图1，根据本申请的第一方面实施例的页面生成方法，包括：

步骤S101，获取控件选取指令与布局输入指令，并基于控件选取指令获取多个控件标识元素；

根据本申请提供的一些实施例，控件选取指令为用于选取所需要用到的目标页面控件的指令，而布局输入指令则是用于对所需要用到的目标页面控件进行排列布局的指令。应理解，控件是指对数据和方法的封装，因此控件可以具备各自的属性及方法，其中属性是用于对特定控件进行标识的数据信息，方法则指的是控件的一些简单而可见的功能，需要明确，创建控件的意义在于封装重复的工作，其次是可以扩充现有控件的功能。基于控件选取指令可以获取的控件标识元素可以包括，但不限于用户界面控件、图表控件、报表控件、表格控件、条形码控件、图像处理控件、文档处理控件，其中用户界面控件用于开发构建用户界面的控件，帮助完成软件开发中视窗、文本框、按钮、下拉式菜单等界面元素的开发；图表控件用于开发图表的控件，帮助软件实现数据可视化，实现开发时较难独立完成的复杂图表；表控件用于开发报表的控件，在软件中实现报表的浏览查看、设计、编辑、打印等功能；表格控件专门用于开发表格(CELL)的控件，主要实现网格中数据处理和操作的功能；条形码控件用于用与条形码生成、扫描、读取和打印的控件；图像处理控件一般是指帮助软件实现图像浏览与简单编辑功能的控件；文档处理控件一般指实现文档文件的浏览、编辑功能的控件。需要说明的是，获取控件选取指令与布局输入指令能够通过多种方式完成，可以包括，但不限于通过智能终端触摸屏获取用户输入的控件选取指令与布局输入指令、通过键鼠设备获取控件选取指令与布局输入指令。

步骤S102，基于布局输入指令对多个控件标识元素进行排列布局，得到页面布局信息；

根据本申请提供的一些实施例，页面布局信息，指的是多个控件标识元素进行排列布局后，反映页面中各个目标页面控件位置的信息。应理解，目标页面中各个目标页面控件的位置排布是按照页面布局信息所示出的控件标识元素位置排布而生成的。需要明确，目标页面控件与控件标识元素的区别在于，控件标识元素是与目标页面控件对应的映射元素，映射元素可以但不限于是图片、文字等类型。需要说明的是，为了应对不同的业务场景，目标页面对应的业务需求也趋于多样化，因此，本申请一些实施例中的页面生成方法可以基于多种多样的控件选取指令以及多种多样的布局输入指令，来生成各式各样的页面布局信息，以满足不同业务场景所对应的业务需求。一些较为具体的实施例中，用户可以在智能终端中拖动多个控件标识元素(如目标页面控件所对应的控件图标)而形成布局输入指令，进而基于布局输入指令对多个控件标识元素进行排列布局，以形成符合用户业务需求的布局图，故而再进一步即可根据前述步骤中的布局图得到页面布局信息。应理解，基于布局输入指令对多个控件标识元素进行排列布局可以包括，但不限于上述举出的具体实施例。

步骤S103，根据页面布局信息，获取多个控件标识元素之间的控件元素关联信息；

根据本申请提供的一些实施例，控件元素关联信息，指的是控件标识元素之间布局位置关系所反映出的、目标页面控件之间的控件逻辑关系。本申请一些实施例中，目标页面控件之间的控件逻辑关系可以包括祖孙控件关系、父子控件关系、同胞控件关系以及无牵连控件关系。

下面参照图2(a)、图2(b)、图2(c)、图2(d)对控件逻辑关系作出说明。其中A控件元素是与A控件对应的映射元素、B控件元素是与B控件对应的映射元素、C控件元素是与C控件对应的映射元素、D控件元素是与D控件对应的映射元素。

根据图2(a)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素，并且B控件元素在布局位置关系上包含C控件元素，那么A控件元素在布局位置关系上多层包含C控件元素，在控件逻辑关系中，A控件与C控件随即形成祖孙控件关系，A控件为C控件的祖先节点、C控件为A控件的子孙节点。

根据图2(b)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素，并且A控件元素与B控件元素在布局位置关系上不包含其他控件，那么A控件元素在布局位置关系上单层包含B控件元素，在控件逻辑关系中，A控件与B控件随即形成父子控件关系，A控件为B控件的父节点、B控件为A控件的子节点。

根据图2(c)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素和C控件元素，并且B控件元素与C控件元素在布局位置关系上相离，那么B控件元素与C控件元素处于同一层级，在控件逻辑关系中，B控件与C控件之间随即形成同胞控件关系，B控件与C控件互为同胞节点。

根据图2(d)实施例示出的页面布局信息，若D控件元素与E控件元素在布局位置关系上既不互相包含、也不在同层级相离，那么在控件逻辑关系中，D控件与E控件之间随即形成无牵连控件关系，D控件与E控件互为无牵连节点，D控件与E控件之间互不相干。

需要说明的是，控件标识元素之间的控件逻辑关系可以按照上述方式划分类型，也可以按照其他方式划分类型，控件标识元素之间的控件逻辑关系可以包括，但不限于上述举出的具体实施例。

步骤S104，根据多个控件标识元素与控件元素关联信息，得到与页面布局信息对应的目标代码文件；

步骤S105，基于目标代码文件，生成目标页面。

根据本申请提供的一些实施例，目标页面指的是符合用户业务需求的页面，而目标代码文件，则是用于生成目标页面的程序代码文件。需要说明的是，目标页面可以包括，但不限于是网站页面、应用程序页面或者React Native等平台上的展示页面。本申请一些实施例中，根据页面布局信息，获取多个控件标识元素之间的控件元素关联信息之后，即可进一步根据多个控件标识元素与控件元素关联信息，得到与页面布局信息对应的目标代码文件。需要说明的是，由于控件元素关联信息指的是控件标识元素之间布局位置关系所反映出的、目标页面控件之间的控件逻辑关系，因此根据控件元素关联信息，即可在控件逻辑关系的基础上将多个控件标识元素转化成符合编程逻辑的目标代码文件，故而，最终基于目标代码文件，生成目标页面。

本申请实施例中的页面生成方法，需要先获取控件选取指令与布局输入指令，并基于控件选取指令获取多个控件标识元素，进一步基于布局输入指令对多个控件标识元素进行排列布局，得到页面布局信息，再根据页面布局信息，获取多个控件标识元素之间的控件元素关联信息，而后根据多个控件标识元素与控件元素关联信息，得到与页面布局信息对应的目标代码文件，最终基于目标代码文件，生成目标页面。本申请中的页面生成方法，从页面布局信息对多个控件标识元素的控件元素关联信息进行获取，而后根据多个控件标识元素与控件元素关联信息形成目标代码文件，最终生成目标页面，能够提升页面生成方法的生成效率。

参照图3，根据本申请的一些实施例，根据页面布局信息，获取多个控件标识元素之间的控件元素关联信息，包括：

步骤S301，根据页面布局信息，得到多个控件标识元素之间的控件层级关系；

根据本申请提供的一些实施例，页面布局信息，指的是多个控件标识元素进行排列布局后，反映页面中各个目标页面控件位置的信息。应理解，目标页面中各个目标页面控件的位置排布是按照页面布局信息所示出的控件标识元素位置排布而生成的。需要说明，控件标识元素之间的控件层级关系由控件标识元素之间在布局位置关系上的包含关系决定。

下面参照图2(a)、图2(c)对控件层级关系作出说明。其中A控件元素是与A控件对应的映射元素、B控件元素是与B控件对应的映射元素、C控件元素是与C控件对应的映射元素、D控件元素是与D控件对应的映射元素。根据图2(a)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素，并且B控件元素在布局位置关系上包含C控件元素，那么A控件元素在布局位置关系上多层包含C控件元素，其中的控件层级关系为：A控件元素处于B控件元素的上一层级、B控件元素处于C控件元素的上一层级。根据图2(c)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素和C控件元素，并且B控件元素与C控件元素在布局位置关系上相离，那么其中的控件层级关系为：B控件元素与C控件元素处于同一层级。根据图2(d)实施例示出的页面布局信息，若D控件元素与E控件元素在布局位置关系上既不互相包含、也不在同层级相离，那么D控件元素与E控件元素之间则可以认为不存在控件层级关系。应理解，控件层级关系的划分方式多种多样，可以包括，但不限于上述举出的具体实施例。

步骤S302，基于控件层级关系，获取多个控件标识元素之间的控件元素关联信息。

根据本申请提供的一些实施例，基于多个控件标识元素之间的控件层级关系即可将页面布局信息转换为多个控件标识元素之间的控件元素关联信息。需要强调，控件元素关联信息，指的是控件标识元素之间布局位置关系所反映出的、目标页面控件之间的控件逻辑关系。因此，在获取控件层级关系之后，先依照控件层级关系来确定两个或多个控件标识元素在布局位置关系上的包含关系，进而获取多个控件标识元素之间的控件元素关联信息，而控件标识元素又是与目标页面控件对应的映射元素，故而，基于控件标识元素之间的控件元素关联信息即可在后续步骤中得到与页面布局信息对应的目标代码文件，最终生成目标页面。应理解，在获悉页面布局信息的基础上，即可根据页面布局信息所反映出来的控件层级关系，获取多个控件标识元素之间的控件元素关联信息，以便形成目标代码文件，省去了不同的业务场景下人力解析业务需求以及形成编程代码的成本，能够提升页面生成方法的生成效率。

参照图4，根据本申请的一些实施例，根据页面布局信息，得到多个控件标识元素之间的控件层级关系，包括：

步骤S401，根据页面布局信息，将具有单层包含关系的一组控件标识元素确定为父子控件元素关系，并将同层级中具有相离关系的一组控件标识元素确定为同胞控件元素关系；

需要说明的是，与目标页面控件之间的控件逻辑关系对应，标识元素关系指的是控件标识元素之间的逻辑关系。本申请一些实施例中，控件标识元素之间的标识元素关系可以包括祖孙控件元素关系、父子控件元素关系、同胞控件元素关系以及无牵连控件元素关系。

下面参照图2(a)、图2(b)、图2(c)、图2(d)对标识元素关系作出说明。其中A控件元素是与A控件对应的映射元素、B控件元素是与B控件对应的映射元素、C控件元素是与C控件对应的映射元素、D控件元素是与D控件对应的映射元素。

根据图2(a)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素，并且B控件元素在布局位置关系上包含C控件元素，那么A控件元素在布局位置关系上多层包含C控件元素，在标识元素关系中，A控件元素与C控件元素随即形成祖孙控件元素关系。

根据图2(b)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素，并且A控件元素与B控件元素在布局位置关系上不包含其他控件，那么A控件元素在布局位置关系上单层包含B控件元素，在标识元素关系中，A控件元素与B控件元素随即形成父子控件元素关系。

根据图2(c)实施例示出的页面布局信息，若A控件元素在布局位置关系上包含B控件元素和C控件元素，并且B控件元素与C控件元素在布局位置关系上相离，那么B控件元素与C控件元素处于同一层级，在标识元素关系中，B控件元素与C控件元素之间随即形成同胞控件元素关系。

根据图2(d)实施例示出的页面布局信息，若D控件元素与E控件元素在布局位置关系上既不互相包含、也不在同层级相离，那么在标识元素关系中，D控件元素与E控件元素之间随即形成无牵连控件元素关系，D控件元素与E控件元素互为无牵连节点，D控件元素与E控件元素之间互不相干。

应理解，对控件标识元素之间标识元素关系的划分方式多种多样，可以包括，但不限于上述举出的具体实施例。

步骤S402，基于父子控件元素关系与同胞控件元素关系，得到多个控件标识元素之间的控件层级关系。

需要明确，控件标识元素之间的控件层级关系由控件标识元素之间在布局位置关系上的包含关系决定。根据本申请提供的一些实施例，先根据页面布局信息中直接反映出的各个控件标识元素之间在布局位置关系上的包含关系，将具有单层包含关系的一组控件标识元素确定为父子控件元素关系，并将同层级中具有相离关系的一组控件标识元素确定为同胞控件元素关系，故而在上述划分后即可得到多个控件标识元素之间的控件层级关系。应理解，在得到多个控件标识元素之间的控件层级关系之后，进一步，由于标识元素关系与目标页面控件之间的控件逻辑关系一一对应，因此可以将多个控件标识元素之间的控件层级关系作为基础，获悉符合用户业务需求的目标页面控件之间的控件逻辑关系，从而在后续步骤中得到与页面布局信息对应的目标代码文件，最终生成目标页面。应理解，在获悉页面布局信息的基础上，将具有单层包含关系的一组控件标识元素确定为父子控件元素关系，并将同层级中具有相离关系的一组控件标识元素确定为同胞控件元素关系，划分出了合理的标识元素关系，从而进一步基于父子控件元素关系与同胞控件元素关系，得到多个控件标识元素之间的控件层级关系，以便于获取多个控件标识元素之间的控件元素关联信息，有助于快速形成目标代码文件，从而提升页面生成方法的生成效率。

参照图5，根据本申请的一些实施例，获取控件选取指令与布局输入指令，并基于控件选取指令获取多个控件标识元素之前，还包括：

步骤S501，基于多种业务需求，对多种预设控件元素进行配置；

需要说明，为了应对不同的业务场景，目标页面对应的业务需求也趋于多样化，因此，本申请一些实施例中的页面生成方法可以基于多种多样的控件选取指令以及多种多样的布局输入指令，来生成各式各样的页面布局信息，以满足不同业务场景所对应的业务需求。为了使得在多种多样的控件选取指令以及多种多样的布局输入指令的基础上，能够生成各式各样的页面布局信息，本申请提供的一些实施例中，需要在获取多个控件标识元素之前，先基于多种业务需求，对多种预设控件元素进行配置。应理解，预设控件元素指的是与预设控件对应的映射元素，其中预设控件的类型多种多样，可以包括，但不限于用户界面控件、图表控件、报表控件、表格控件、条形码控件、图像处理控件、文档处理控件等类型的控件。根据本申请提供的一些较为具体的实施例，为了应对可能出现业务场景，在获取多个控件标识元素之前预先配置的预设控件元素所覆盖的类型越多，则能够解决的业务需求越多。

根据本申请提供的一些实施例，基于多种业务需求，对多种预设控件元素进行配置，可以是基于多种业务需求，确定多种预设控件类型，并为各种预设控件类型配置预设触发事件与预设控件样式。需要说明的是，预设控件类型所对应的控件属性包括预设触发事件与预设控件样式，其中预设触发事件指的是预先设置的、触发预设控件的事件，例如：on-touch(触摸),on-click(点击),on-move(移动)，预设控件样式指的是预先设置的、预设控件的呈现样式，例如：s-background(背景),s-width(宽度),s-height(高度),s-border(边框)。应理解，基于多种业务需求，对预设控件元素进行配置的方法多种多样，可以包括，但不限于上述举出的具体实施例。

步骤S502，根据预设平台类型和多种预设控件元素，建立控件映射关系，控件映射关系用以基于预设平台类型进行平台适配转换；

根据本申请提供的一些实施例，同一控件标识元素在不同系统平台中所对应的目标代码文件可能存在差异。因此，为了使得本申请页面生成方法在多个系统平台的通用性能够得到提升，本申请一些较为优选的实施例中，需要在获取多个控件标识元素之前，预先根据预设平台类型和多种预设控件元素，建立控件映射关系，其中控件映射关系用以基于预设平台类型进行平台适配转换。在本申请一些示例性的实施例中，若控件标识元素包括：l-text(表示文本控件元素)、l-input(表示输入控件元素)、l-img(表示图片控件元素)、l-list(表示列表控件元素)、l-button(表示按钮控件元素)、l-dialog(表示会话框控件元素)，那么当目标页面需要在Web平台上进行展示时，l-text需要映射为html标签元素textarea、l-input需要映射为input、l-img需要映射为img、l-list需要映射为ul等html标签；当目标页面需要在ReactNative平台上进行展示时，l-text需要映射为Text、l-input需要映射为TextInput、l-button需要映射为button、l-img需要映射为image；当目标页面需要在小程序上进行展示时，需要将l-text、l-input、l-img、l-list、l-button、l-dialog分别映射为小程序的视图组件。需要明确，通过预先建立好的控件映射关系，能够将用户所选取的控件标识元素基于各种平台类型进行平台适配转换，从而在各种系统平台中呈现出来对应的目标页面控件，以提升本申请页面生成方法在多个系统平台的通用性。

步骤S503，将配置好的预设控件元素与控件映射关系纳入预设控件数据库。

需要说明的是，预设控件数据库指的是预先设置的、包含各种控件相关信息的数据库。本申请一些实施例中的页面生成方法可以基于多种多样的控件选取指令以及多种多样的布局输入指令，来生成各式各样的页面布局信息，以满足不同业务场景所对应的业务需求。而根据本申请提供的一些实施例，获取控件选取指令后，即可基于控件选取指令在预设控件数据库中匹配得到与控件选取指令对应的预设控件元素以及控件映射关系，进一步，将与控件选取指令对应的预设控件元素确定为控件标识元素，并且在后续步骤中基于控件映射关系将控件标识元素转换成对应的目标代码文件；或者，获取控件选取指令后，先基于控件选取指令在预设控件数据库中匹配得到与控件选取指令对应的预设控件元素，将与控件选取指令对应的预设控件元素确定为控件标识元素，进而基于布局输入指令对多个控件标识元素进行排列布局，得到页面布局信息，并根据页面布局信息，获取多个控件标识元素之间的控件元素关联信息，进一步，将控件标识元素在预设控件数据库中进行匹配，得到与控件标识元素对应的控件映射关系，并且在后续步骤中基于控件映射关系将控件标识元素转换成对应的目标代码文件。通过上述实施例，本申请页面生成方法能够在提升页面生成方法的生成效率的同时，提升本申请页面生成方法在多个系统平台的通用性。

参照图6，根据本申请的一些实施例，根据预设平台类型和多种预设控件元素，建立控件映射关系，包括：

步骤S601，根据预设平台类型获取多种平台适配控件，平台适配控件与预设平台类型的运行环境兼容适配；

根据本申请提供的一些实施例，同一控件标识元素在不同系统平台中所对应的目标代码文件可能存在差异。例如l-text(表示文本控件元素)在Web平台上进行展示时，l-text需要映射为html标签元素textarea，而在ReactNative平台上进行展示时，l-text需要映射为Text；又例如，l-input(表示输入控件元素)在Web平台上进行展示时，l-input需要映射为input，而在ReactNative平台上进行展示时，l-input需要映射为TextInput。因此，为了应对同一控件标识元素在不同系统平台中所对应的目标代码文件可能存在的差异，令本申请页面生成方法能够更好地与运行环境兼容适配，本申请一些较为优选的实施例中，需要根据预设平台类型获取多种平台适配控件，其中平台适配控件与预设平台类型的运行环境兼容适配。例如，针对Web平台对应的预设平台类型，那么则需要Web平台中对应的平台适配控件(html标签元素textarea、input、img、ul等html标签)；又例如，针对ReactNative平台对应的预设平台类型，那么则需要ReactNative平台中对应的平台适配控件(Text、TextInput、button、image等类型的控件)。应理解，平台适配控件的类型多种多样，可以包括，但不限于上述举出的具体实施例。

步骤S602，对于每个预设控件元素，在多种平台适配控件中，匹配得到与预设控件元素作用一致的平台适配控件；

根据本申请提供的一些实施例，在获取多种平台适配控件之后，需要以每个预设控件元素为基础，在多种平台适配控件中，匹配得到与预设控件元素作用一致的平台适配控件。例如，当预设控件元素为文本框控件元素，那么则需要在多种平台适配控件中，匹配得到文本框控件(html标签元素textarea或者Text等)；又例如，当预设控件元素为下拉菜单控件元素，那么则需要在多种平台适配控件中，匹配得到下拉菜单控件。应理解，基于预设平台类型的不同，匹配对应得到的平台适配控件也会有所区别。

步骤S603，基于作用一致的预设控件元素与平台适配控件，建立控件映射关系。

需要说明的是，当每个预设控件元素都匹配得到与预设控件元素作用一致的平台适配控件之后，即可进一步基于作用一致的预设控件元素与平台适配控件，建立控件映射关系。需要说明的是，预先建立好的控件映射关系，用于将用户所选取的控件标识元素基于各种平台类型进行平台适配转换，从而在各种系统平台中呈现出来对应的目标页面控件，以提升本申请页面生成方法在多个系统平台的通用性。因此，为了在获取控件选取指令后，能够基于控件选取指令得到与控件选取指令对应的预设控件元素以及控件映射关系，需要预先基于作用一致的预设控件元素与平台适配控件，建立控件映射关系，以使得本申请一些实施例的页面生成方法中能够再进一步，将与控件选取指令对应的预设控件元素确定为控件标识元素，并且在后续步骤中基于控件映射关系将控件标识元素转换成对应的目标代码文件，最终生成目标页面。

参照图7，根据本申请的一些实施例，根据多个控件标识元素与控件元素关联信息，得到与页面布局信息对应的目标代码文件，包括：

步骤S701，将控件标识元素在预设控件数据库中进行匹配，得到与控件标识元素对应的控件映射关系；

需要说明的是，预设控件数据库指的是预先设置的、包含各种控件相关信息的数据库。根据本申请提供的一些实施例，获取控件选取指令后，即可基于控件选取指令在预设控件数据库中匹配得到与控件选取指令对应的预设控件元素以及控件映射关系，进一步，将与控件选取指令对应的预设控件元素确定为控件标识元素，并且在后续步骤中基于控件映射关系将控件标识元素转换成对应的目标代码文件；或者，获取控件选取指令后，先基于控件选取指令在预设控件数据库中匹配得到与控件选取指令对应的预设控件元素，将与控件选取指令对应的预设控件元素确定为控件标识元素，进而基于布局输入指令对多个控件标识元素进行排列布局，得到页面布局信息，并根据页面布局信息，获取多个控件标识元素之间的控件元素关联信息，进一步，将控件标识元素在预设控件数据库中进行匹配，得到与控件标识元素对应的控件映射关系，并且在后续步骤中基于控件映射关系将控件标识元素转换成对应的目标代码文件，故而能够在提升页面生成方法的生成效率的同时，提升本申请页面生成方法在多个系统平台的通用性。

步骤S702，基于与控件标识元素对应的控件映射关系，对控件标识元素进行平台适配转换，得到目标页面控件；

需要说明的是，预先建立好的控件映射关系，用于将用户所选取的控件标识元素基于各种平台类型进行平台适配转换，从而在各种系统平台中呈现出来对应的目标页面控件，以提升本申请页面生成方法在多个系统平台的通用性。本申请一些示例性的实施例中，展示了对控件标识元素进行平台适配转换，进而得到目标页面控件的方式。例如，若控件标识元素包括：l-text(表示文本控件元素)、l-input(表示输入控件元素)、l-img(表示图片控件元素)、l-list(表示列表控件元素)、l-button(表示按钮控件元素)、l-dialog(表示会话框控件元素)，那么当目标页面需要在Web平台上进行展示时，l-text需要映射为html标签元素textarea、l-input需要映射为input、l-img需要映射为img、l-list需要映射为ul等html标签；当目标页面需要在ReactNative平台上进行展示时，l-text需要映射为Text、l-input需要映射为TextInput、l-button需要映射为button、l-img需要映射为image；当目标页面需要在小程序上进行展示时，需要将l-text、l-input、l-img、l-list、l-button、l-dialog分别映射为小程序的视图组件。应理解，基于与控件标识元素对应的控件映射关系，对控件标识元素进行平台适配转换，得到目标页面控件可以包括，但不限于上述举出的具体实施例。

步骤S703，根据目标页面控件与控件元素关联信息，得到适配于目标平台的目标代码文件。

根据本申请提供的一些实施例，目标平台指的是作为目标页面加载基础的系统平台。本申请一些实施例中，基于与控件标识元素对应的控件映射关系对控件标识元素进行平台适配转换，得到目标页面控件之后，进一步，根据目标页面控件与控件元素关联信息，即可得到适配于目标平台的目标代码文件。需要说明的是，由于目标页面控件是经过平台适配转换而得到的，因此通过目标页面控件能够从对应系统平台的代码编程规范中，匹配找到调用该目标页面控件的程序代码，并将调用该目标页面控件的程序代码作为目标代码文件的组成部分。另外需要明确，控件元素关联信息指的是控件标识元素之间布局位置关系所反映出的、目标页面控件之间的控件逻辑关系。因此，根据控件元素关联信息，即可获悉目标页面控件之间的控件逻辑关系，再进一步，结合适配于目标平台的目标页面控件，即可在目标页面控件之间控件逻辑关系的基础上将多个控件标识元素转化成符合编程逻辑且适配于目标平台的目标代码文件，故而，最终基于目标代码文件生成目标页面。需要强调，上述实施例中的页面生成方法能够在提升页面生成方法的生成效率的同时，提升本申请页面生成方法在多个系统平台的通用性。

参照图8，根据本申请的一些实施例，基于与控件标识元素对应的控件映射关系，对控件标识元素进行平台适配转换，得到目标页面控件，包括：

步骤S801，基于控件映射关系，获取与控件标识元素作用一致的平台适配控件；

步骤S802，将与控件标识元素作用一致的平台适配控件，确定为平台适配转换得到的目标页面控件。

本申请一些较为优选的实施例中，在基于控件选取指令获取多个控件标识元素之前，先基于多种业务需求，对多种预设控件元素进行了配置，再根据预设平台类型和多种预设控件元素，建立了用以进行平台适配转换控件映射关系。需要说明的是，控件映射关系用以基于预设平台类型进行平台适配转换。一些较为具体的实施例中，基于控件映射关系，即可从中获取与控件标识元素作用一致的平台适配控件，其中平台适配控件与目标平台的运行环境兼容适配。应理解，同一控件标识元素在不同目标平台对应的平台适配控件作用一致，但是其对应的目标代码文件有所差异，因此，将与控件标识元素作用一致的平台适配控件，确定为平台适配转换得到的目标页面控件，即可应对同一控件标识元素在不同系统平台中所对应的目标代码文件可能存在的差异，令本申请页面生成方法能够更好地与运行环境兼容适配。

图9示出了本申请实施例提供的电子设备900。电子设备900包括：处理器901、存储器902及存储在存储器902上并可在处理器901上运行的计算机程序，计算机程序运行时用于执行上述的页面生成方法。

处理器901和存储器902可以通过总线或者其他方式连接。

存储器902作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序，如本申请实施例描述的页面生成方法。处理器901通过运行存储在存储器902中的非暂态软件程序以及指令，从而实现上述的页面生成方法。

存储器902可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序。存储数据区可存储执行上述的页面生成方法。此外，存储器902可以包括高速随机存取存储器902，还可以包括非暂态存储器902，例如至少一个储存设备存储器件、闪存器件或其他非暂态固态存储器件。在一些实施方式中，存储器902可选包括相对于处理器901远程设置的存储器902，这些远程存储器902可以通过网络连接至该电子设备900。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

实现上述的页面生成方法所需的非暂态软件程序以及指令存储在存储器902中，当被一个或者多个处理器901执行时，执行上述的页面生成方法，例如，执行图1中的方法步骤S101至步骤S105、图3中的方法步骤S301至步骤S302、图4中的方法步骤S401至步骤S402、图5中的方法步骤S501至步骤S503、图6中的方法步骤S601至步骤S603、图7中的方法步骤S701至步骤S703、图8中的方法步骤S801至步骤S802。

本申请实施例还提供了计算机可读存储介质，存储有计算机可执行指令，计算机可执行指令用于执行上述的页面生成方法。

在一实施例中，该计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个控制处理器执行，例如，执行图1中的方法步骤S101至步骤S105、图3中的方法步骤S301至步骤S302、图4中的方法步骤S401至步骤S402、图5中的方法步骤S501至步骤S503、图6中的方法步骤S601至步骤S603、图7中的方法步骤S701至步骤S703、图8中的方法步骤S801至步骤S802。

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

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统可以被实施为软件、固件、硬件及其适当的组合。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、储存设备存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包括计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。还应了解，本申请实施例提供的各种实施方式可以任意进行组合，以实现不同的技术效果。

以上是对本申请的较佳实施进行了具体说明，但本申请并不局限于上述实施方式，熟悉本领域的技术人员在不违背本申请精神的共享条件下还可作出种种等同的变形或替换，这些等同的变形或替换均包括在本申请权利要求所限定的范围内。

Claims (10)

1.一种页面生成方法，其特征在于，包括：

获取控件选取指令与布局输入指令，并基于所述控件选取指令获取多个控件标识元素；

基于所述布局输入指令对多个所述控件标识元素进行排列布局，得到页面布局信息；

根据所述页面布局信息，获取多个所述控件标识元素之间的控件元素关联信息；

根据多个所述控件标识元素与所述控件元素关联信息，得到与所述页面布局信息对应的目标代码文件；

基于所述目标代码文件，生成目标页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述页面布局信息，获取多个所述控件标识元素之间的控件元素关联信息，包括：

根据所述页面布局信息，得到多个所述控件标识元素之间的控件层级关系；

基于所述控件层级关系，获取多个所述控件标识元素之间的所述控件元素关联信息。

3.根据权利要求2所述的方法，其特征在于，所述根据所述页面布局信息，得到多个所述控件标识元素之间的控件层级关系，包括：

根据所述页面布局信息，将具有单层包含关系的一组所述控件标识元素确定为父子控件元素关系，并将同层级中具有相离关系的一组所述控件标识元素确定为同胞控件元素关系；

基于所述父子控件元素关系与所述同胞控件元素关系，得到多个所述控件标识元素之间的所述控件层级关系。

4.根据权利要求1至3任一项所述的方法，其特征在于，所述获取控件选取指令与布局输入指令，并基于所述控件选取指令获取多个控件标识元素之前，还包括：

基于多种业务需求，对多种预设控件元素进行配置；

根据预设平台类型和多种所述预设控件元素，建立控件映射关系，所述控件映射关系用以基于所述预设平台类型进行平台适配转换；

将配置好的所述预设控件元素与所述控件映射关系纳入预设控件数据库。

5.根据权利要求4所述的方法，其特征在于，所述基于多种业务需求，对多种预设控件元素进行配置，包括：

基于多种所述业务需求，确定多种预设控件类型，并为各种所述预设控件类型配置预设触发事件与预设控件样式。

6.根据权利要求4所述的方法，其特征在于，所述根据预设平台类型和多种所述预设控件元素，建立控件映射关系，包括：

根据所述预设平台类型获取多种平台适配控件，所述平台适配控件与所述预设平台类型的运行环境兼容适配；

对于每个所述预设控件元素，在多种所述平台适配控件中，匹配得到与所述预设控件元素作用一致的所述平台适配控件；

基于作用一致的所述预设控件元素与所述平台适配控件，建立所述控件映射关系。

7.根据权利要求6所述的方法，其特征在于，所述根据多个所述控件标识元素与所述控件元素关联信息，得到与所述页面布局信息对应的目标代码文件，包括：

将所述控件标识元素在所述预设控件数据库中进行匹配，得到与所述控件标识元素对应的所述控件映射关系；

基于与所述控件标识元素对应的所述控件映射关系，对所述控件标识元素进行所述平台适配转换，得到目标页面控件；

根据所述目标页面控件与所述控件元素关联信息，得到适配于目标平台的目标代码文件。

8.根据权利要求7所述的方法，其特征在于，所述基于与所述控件标识元素对应的所述控件映射关系，对所述控件标识元素进行所述平台适配转换，得到目标页面控件，包括：

基于所述控件映射关系，获取与所述控件标识元素作用一致的所述平台适配控件；

将与所述控件标识元素作用一致的所述平台适配控件，确定为所述平台适配转换得到的所述目标页面控件。

9.一种电子设备，其特征在于，包括：存储器、处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至8中任意一项所述的页面生成方法。

10.一种计算机可读存储介质，其特征在于，所述存储介质存储有程序，所述程序被处理器执行实现如权利要求1至8中任意一项所述的页面生成方法。

Images