CN111679827A - H5页面生成方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及研发管理领域，公开了一种基于H5页面生成方法、装置、设备及存储介质，用于解决现有的H5页面开发方式，其开发流程复杂，导致开发周期过长，工作量较大的问题。H5页面生成方法包括：控件编码和所述控件编码对应的控件的配置参数集；从所述UI控件区中查询出与所述控件编码对应的控件，得到初始配置参数集；构建H5页面的初始架构；根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；将所述初始架构进行重新编译生成H5页面。本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升。

Description

H5页面生成方法、装置、设备及存储介质

技术领域

本发明涉及研发管理领域，尤其涉及一种H5页面生成方法、装置、设备及存储介质。

背景技术

随着互联网技术的不断发展，互联网页面的快速开发已成为当前互联网发展的一种趋势，尤其是小程序网页的产生，更加要求页面开发的效率，例如现在常用的页面。

目前，在H5页面的开发上，基本上是根据用户的需求来进行全新开发的过程，但是一个H5宣传页面，从构思到开发出来，其开发周期很短，这要求开发人员在短时间内全新开发出一个H5页面是非常消耗团队资源的，从而导致了短时间内大量增加开发人员的工作量，并且每次重复开发的过程中，都需要进行较多的重复操作，而这些重复操作是不必要的过程，由于开发的周期较短，而操作其开发出来的页面在稳定性上难以保证，从而降低了用户在使用页面时的体验。

发明内容

本发明的主要目的在于解决现有的H5页面开发方式，其开发流程复杂，且重复，导致开发周期过长，工作量较大的问题。

本发明第一方面提供了一种H5页面生成方法，包括：接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集；从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，其中，所述初始架构中包括至少一个控件；根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；将所述初始架构进行重新编译，生成H5页面。

可选的，在本发明第一方面的第一种实现方式中，所述在所述从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集之前，还包括：判断所述UI控件区中是否存在与所述控件编码对应的控件；若不存在，根据所述控件编码，查询预设的云端数据库中是否存在与所述控件编码对应的云端控件；若存在，获取所述云端控件与对应的控件图标，其中，所述云端控件包括；可编辑的参数项目及其对应的初始配置值。

可选的，在本发明第一方面的第二种实现方式中，在所述获取所述云端控件与对应的控件图标之后，还包括：从所述云端数据库中，获取所述云端控件所在的云端资源包的第一版本信息；读取所述UI控件区的本地资源包的第二版本信息，其中，所述本地资源包为当前所述UI控件区中与所述云端资源包对应的资源包；所述第一版本信息与所述第二版本信息进行比较，得到比较结果；若所述比较结果为不一致，则从所述云端数据库中下载所述云端资源包，并根据所述云端资源包对所述UI控件区中的控件进行更新。

可选的，在本发明第一方面的第三种实现方式中，所述调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构包括：将所述控件图标显示于所述实时预览编辑区中，根据页面坐标调整所述控件图标在所述实时预览编辑区中的显示位置得到所述初始架构，其中，所述页面坐标用于指示所述控件图标在所述实时预览编辑区中显示位置；提取所述初始架构中的至少一个控件的参数编辑界面，并根据所述初始可配置参数集对所述参数编辑界面中的参数项目进行标注；将标注后的参数编辑界面显示于所述配置项区中。

可选的，在本发明第一方面的第四种实现方式中，所述根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值包括：提取所述初始配置参数集中所有参数项目的编号，与所述配置参数集里每个匹配的参数项目的编号进行第一次匹配；比较所述初始配置值与第一次匹配中对应的所述配置值是否一致，将所述配置参数集里所述配置值不一致的参数项目组合为模板参数项集；将所述模板参数项集里每个参数项目的编码与所述初始配置参数集里每个参数项目的编码进行第二次匹配；将所述初始配置值更改为第二次匹配中对应的所述配置值，将所述初始配置参数集改为所述配置参数项集。

可选的，在本发明第一方面的第五种实现方式中，所述将所述初始架构进行重新编译，生成H5页面包括：将所述配置参数集与所述控件图标进行编译，生成控件图标编译程序与配置参数集编译程序；根据所述控件图标编译程序，基于所述页面坐标将控件图标显示在H5页面界面上；根据所述配置参数集编译程序，将所述H5页面界面中的所述控件的属性设置完成，生成H5页面。

可选的，在本发明第一方面的第六种实现方式中，在所述将所述初始架构进行重新编译，生成H5页面之后，还包括：判断所述生成请求是否为二次生成请求，其中，所述二次生成请求中控件编码与初次生成请求一致；若是，则获取已经生成的第一H5页面，读取所述第一H5页面中H5控件和所述H5控件对应的H5配置参数集；根据所述生成请求，将所述H5配置参数集调整至与所述生成请求中的配置参数集一致，得到新的H5页面；将所述新的H5页面，按照调整后的H5配置参数集进行二次编译，生成第二H5页面，并发布所述第二H5页面。

本发明第二方面提供了一种H5页面生成装置，包括：

接收模块，用于接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集；

查询模块，用于从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

调用模块，用于调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，所述初始架构中包括至少一个控件；

配置模块，用于根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

生成模块，用于将所述初始架构进行重新编译，生成H5页面。

可选的，在本发明第二方面的第一种实现方式中，所述查询模块具体用于：判断所述UI控件区中是否存在与所述控件编码对应的控件；若不存在，根据所述控件编码，查询预设的云端数据库中是否存在与所述控件编码对应的云端控件；若存在，获取所述云端控件与对应的控件图标，其中，所述云端控件包括：可编辑的参数项目及其对应的初始配置值。

可选的，在本发明第二方面的第二种实现方式中，所述查询模块具体用于：从所述云端数据库中，获取所述云端控件所在的云端资源包的第一版本信息；读取所述UI控件区的本地资源包的第二版本信息，其中，所述本地资源包为当前所述UI控件区中与所述云端资源包对应的资源包；将所述第一版本信息与所述第二版本信息进行比较，得到比较结果；若所述比较结果为不一致，则从所述云端数据库中下载所述云端资源包，并根据所述云端资源包对所述UI控件区中的控件进行更新。

可选的，在本发明第二方面的第三种实现方式中，所述调用模块具体用于：将所述控件图标显示于所述实时预览编辑区中，根据页面坐标调整所述控件图标在所述实时预览编辑区中的显示位置得到所述初始架构，其中，所述页面坐标用于指示所述控件图标在所述实时预览编辑区中显示位置；提取所述初始架构中的至少一个控件的参数编辑界面，并根据所述初始可配置参数集对所述参数编辑界面中的参数项目进行标注；将标注后的参数编辑界面显示于所述配置项区中。

可选的，在本发明第二方面的第四种实现方式中，所述配置模块具体用于：提取所述初始配置参数集中所有参数项目的编号，与所述配置参数集里每个匹配的参数项目的编号进行第一次匹配；比较所述初始配置值与第一次匹配中对应的所述配置值是否一致，将所述配置参数集里所述配置值不一致的参数项目组合为模板参数项集；将所述模板参数项集里每个参数项目的编码与所述初始配置参数集里每个参数项目的编码进行第二次匹配；将所述初始配置值更改为第二次匹配中对应的所述配置值，将所述初始配置参数集改为所述配置参数项集。

可选的，在本发明第二方面的第五种实现方式中，所述生成模块具体用于:将所述配置参数集与所述控件图标进行编译，生成控件图标编译程序与配置参数集编译程序；根据所述控件图标编译程序，基于所述页面坐标将控件图标显示在H5页面界面上；根据所述配置参数集编译程序，将所述H5页面界面中的所述控件的属性设置完成，生成H5页面。

可选的，在本发明第二方面的第六种实现方式中，所述生成模块具体用于:判断所述生成请求是否为二次生成请求，其中，所述二次生成请求中控件编码与初次生成请求一致；若是，则获取已经生成的第一H5页面，读取所述第一H5页面中H5控件和所述H5控件对应的H5配置参数集；根据所述生成请求，将所述H5配置参数集调整至与所述生成请求中的配置参数集一致，得到新的H5页面；将所述新的H5页面，按照调整后的H5配置参数集进行二次编译，生成第二H5页面，并发布所述第二H5页面。

本发明第三方面提供了一种基于优先级的资源分配设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；所述至少一个处理器调用所述存储器中的所述指令，以使得所述H5页面生成设备执行上述的H5页面生成方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的H5页面生成方法。

本发明提供的技术方案中，接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集；从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，其中，所述初始架构中包括至少一个控件；根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；将所述初始架构进行重新编译，生成H5页面。本发明实施例中，上述的实现方式，相对于传统的H5页面生成方式来说，传统的需要业务人员先给开发人员提需求，开发人员根据需求人工开发，开发H5页面效率较低。而本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升，加快了H5页面的开发并有效减少了开发人员的工作量，生成H5页面的效率得到了提高。

附图说明

图1为本发明实施例中H5页面生成方法的第一个实施例示意图；

图2为本发明实施例中H5页面生成方法的第二个实施例示意图；

图3本发明实施例中H5页面生成方法的第三个实施例示意图；

图4为本发明实施例中H5页面生成装置的一个实施例示意图；

图5为本发明实施例中H5页面生成装置的另一个实施例示意图；

图6为本发明实施例中H5页面生成设备的一个实施例示意图。

具体实施方式

本发明实施例提供了一种H5页面生成方法、装置、设备及存储介质，接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集；从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，所述初始架构中包括至少一个控件；根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；将所述初始架构进行重新编译，生成H5页面，上述的实现方式，相对于传统的H5页面生成方式来说，传统的需要业务人员先给开发人员提需求，开发人员根据需求人工开发，开发H5页面效率较低。而本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升，加快了H5页面的开发并有效减少了开发人员的工作量，生成H5页面的效率得到了提高。

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

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中H5页面生成方法的第一个实施例包括：

101、接收H5页面的生成请求；

在该步骤中，所述生成请求包括：控件编码和所述控件编码对应的配置参数集，所述生成请求指的是包含了所要求生成的H5页面的所有控件组件，具体是通过控件编码来实现调用，即是该生成请求中是包含有至少一个控件编码以及每个控件编码所对应的配置参数集，该配置参数集中包括有至少一个参数项目和参数项目的配置值。

在实际应用中，控件编码的来源根据是内聚化的，抽象出来的。例如，一种用于宣传防治艾滋的就以红色与白色为主题进行设置的控件，其类型就属于公益与文化宣传，可以给一个设定的编号。在一种实施例中，对一件护肤用品的宣传中使用的控件就需要重点强调其中的护肤效果，其类型就属于商业宣传并且属于护肤品宣传，也可以给一个设定的编号。在一种实施例中，配置值可以是控件的颜色，例如：红、黄、蓝、绿、紫。在另一种实施例中，配置值可以是选择项。例如,选择是否允许进入外部网站链接，选项有“是”和“否”。生成请求还有很多其他方面：页面布局、页面切换时间、页面抓取新信息的范围。

可以理解的是，本发明的执行主体可以为H5页面生成装置，还可以是终端或者服务器，具体此处不做限定。本发明实施例以服务器为执行主体为例进行说明。

102、从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

具体的，控件编码是一串特定的数字英文符号，其可以理解为是用于指示唯一的一个控件，也可以理解为是用于指示一类控件，而当指示一类控件时，则在查询调用时，默认调用类型菜单中的榜首控件，若需要调用该类中的其他控件时，可以再通过图标或者其他唯一标识来调用；若是指示一个控件时，例如：1233q，每种控件都有其特定且唯一的控件编码，用于区分每个控件的类型，同样也用于精确查找。当然，每个控件都有参数项目和对应的配置值，每个控件的配置值不仅仅有一个而是有很多，并且很多参数项目，参数项目的配置值共同构成一个控件的配置参数集。

在本实施例中读取是的该控件的可编辑的参数项目，具体可以理解为是用户可以自行调整的，例如颜色项目、长度和宽度项目；对于不可编辑的或者是会更改控件属性的控件参数项目不做读取。

103、调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构；

在该步骤中，所述初始架构中包括至少一个控件，控件编码所对应的控件有其控件图标，将控件图标显示于预览配置区。在一种实施例中，控件图标是一个长方形形状，并且用红色进行渲染，在该控件中心还有文字编辑框页面用于显示文字。该长方形在H5页面的上，在H5页面的顶端居中位置。这个H5页面的初始架构的一部分就形成，再将其他的控件布置在H5页面上。但是每个H5页面都存在至少一个控件，在调取出请求中请求的所有控件之后，每个控件可以是按照默认的摆放位置在预览配置区中显示，也可以是在将控件图标调取到预览配置区后，操作人员通过拖动或者设置坐标的方式来调整控件图标的显示位置，从而形成H5页面的初始架构，这个的初始架构指的是所有的控件的配置参数是按照默认值来进行显示得到的初始控件布局图。

在生成该初始架构时，每个控件都是显示于架构上，并能够进行调整，并可以显示每个控件的参数。该初始架构还能更换控件对每个控件都能进行调整，而且不同的控件可以相互独立，也能在初始架构中设置捆绑将控件捆绑作为一个新的控件进行调整。

104、根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

在该步骤中，查询出的控件的参数项目中的初始配置值是系统设置的，将系统设置的参数改为生成请求中所要求的。将所述初始配置参数集中每个参数项目的初始配置值调整为与所述配置参数集中对应的配置值一致。在调整配置值的过程中，可以通过以下两种方案实现，一种是逐一对初始配置参数集进行修改，另一种就是可以先比较两者之间的不同然后对不同项目进行修改。在逐一修改的方案时，还存在一种细化方案，那就是将每个参数项目在修改前按照一个固定规则进行排序，然后按照排序逐一复制内容，这样可以实现一键式修改，减少操作人员不必要的操作，也避免了操作错误的问题。

进一步地，在调整配置参数值时，还能将调整后的页面效果显示在预览配置区。如果修改效果不佳还能接收新的配置参数集。在一种实施例中，将初始配置值改为与配置值一致后，在预览编辑区中形成蓝色背景的页面预览，此时生成请求发起人预览觉得不满意，想将蓝色背景改为红色背景，则可以调整生成请求，将将初始配置值改为能实现红色背景的页面。

105、将所述初始架构进行重新编译，生成H5页面。

在该步骤中，H5页面中可能有不只是一个控件，可能有好几个控件，控件的不同组合够成初始架构。初始架构的构成包括控件编码、控件图标、配置参数集、不同控件之间的相对位置，H5页面是由初始架构来决定的。在构成H5页面的初始架构之间，也可存在不同。例如，有些初始架构的布局可以是从上至下的进行布局，也可以是从左至右的进行布局，也可以是将核心的控件布置于H5页面的中心其他控件围绕核心控件环绕布置。

在一种实施例中，先对整个页面布局进行编译，然后对相应的配置参数进行编译，然后将H5页面在远程服务器中生成，然后由服务器将H5页面进行发布。在另一种实施例中，将H5页面生成后，在预览配置区可以预览H5页面生成的状态，然后接受新的生成请求，对H5页面进行调整。

本发明实施例中，传统的H5页面生成方式，需要业务人员先给开发人员提需求，开发人员根据需求人工开发，开发H5页面效率较低。而本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升，生成H5页面的效率得到了提高。

请参阅图2，本发明实施例中H5页面生成方法的第二个实施例包括：

201、接收H5页面的生成请求；

202、判断所述UI控件区中是否存在与所述控件编码对应的控件；

203、若不存在，根据所述控件编码，查询预设的云端数据库中与所述控件编码对应的云端控件；

204、若存在，获取所述云端控件与对应的控件图标，其中，所述云端控件包括：可编辑的参数项目及其对应的初始配置值；

在该步骤中，从云端查询控件是否存在，主要是通过控件编码来进行。在一种实施例中，云端数据库中存在的控件是远程维护上，在云端数据库中无法查询到生成请求中控件编码，云端数据库则将控件编码发送至工程维护设备，工程维护设备将控件编码的控件发送至云端数据库。云端数据库再将控件编码对应的控件发送给对应的设备，再根据获得的控件生成H5页面。

在另一种实施例中，设备向云端控件发送查询请求，云端设备根据控件编码先抓取符合含有英文字符的数据编码，然后再筛选出所需的控件编码，例如查询sspi5313，先满足存在“sspi”的控件编码。在另一种实施例中，云端数据库预先将控件编码排序，然后将需要查询的控件编码，放入排序中，匹配是否存在一致的编码。

205、从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

206、从所述云端数据库中，获取所述云端控件所在的云端资源包的第一版本信息；

207、读取所述UI控件区的本地资源包的第二版本信息，；

208、将所述第一版本信息与所述第二版本信息进行比较，得到比较结果；

209、若所述比较结果为不一致，则从所述云端数据库中下载所述云端资源包，并根据所述云端资源包对所述UI控件区中的控件进行更新；

在一种实施例中，云端资源包可以分成好几个部分，在与本地资源包比对版本信息时。可以将对应的版本信息进行先进行比对，然后将版本信息不匹配的某一段云端资源包进行传输更新。其中，没有接收到生成请求时，也会定时自动连接云端数据库对本地资源包进行更新。

在一种实施例中，在云端数据库中直接将整个UI控件区作为一个更新对象，从云端数据库中下载数据后，将整个UI控件区完成更新。需说明的是，在更新UI控件区时，可以先将要查询的控件进行更新，其他资源先进行下一步操作，剩下的资源则用于更新整个UI控件。下一步操作与更新整个UI控件区同步进行，这样就能保证更高效率的生成H5页面。

进一步地，更新方式可以是下载整个云端资源包，然后在进行相对应UI控件区进行更新。如果，在下载整个云端资源包时，信道出现了中断则会对已下载的资源包进行搜索查询控件编码，如果查询出需要的控件编码则对UI控件区进行更新。

更进一步地，UI控件区中的资源包更新可以是补充式更新将云端数据包下载至UI控件区后，不对本地资源包进行替代而是形成一个云端数据包的查询库。当本地资源包查询不到对应的控件时，可以对已经加载的云端数据包进行查询。

210、将所述控件图标显示于所述实时预览编辑区中，根据页面坐标调整所述控件图标在所述实时预览编辑区中的显示位置得到所述初始架构；

211、提取所述初始架构中的至少一个控件的参数编辑界面，并根据所述初始可配置参数集对所述参数编辑界面中的参数项目进行标注；

212、将标注后的参数编辑界面显示于所述配置项区中；

需说明的是，预览配置区可以不区分实时预览编辑区与配置项区，在不区分的情况下页面编辑界面是在选中后是显示在控件图标周围。另外，预览配置区分开实时预览编辑区与配置项区时，控件图标显示在实时预览编辑区而参数编辑界面显示于配置项区。

在一种实施例中，某控件的控件图标并不存在而是通过触摸屏的特殊触摸指令来唤醒参数更改页面。例如，将不同的H5页面进行切换的控件，并不存在实际控件图标。只有当手势为两个触控点向一个中心移动时才会唤醒该控件，然后显示每个页面的。

在一种实施例中，控件图标并不完全显示在页面中，只有小部分显示在页面上，当拖动或点击这个一部分时，整个控件才会出现。例如，侧边导航系统，在不需要时会隐藏其主要页面留下一个唤醒按键作为路径将侧边导航展示。再例如，页面的辅助页面，将不重要的辅助工具放置在该辅助页面。当辅助页面不需要时，则会隐藏该辅助页面的大部分辅助按键。当拖动或者点击放置鼠标键至控件剩余的一小部分时，就将该辅助页面呈现在主页面。

213、根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

214、将所述初始架构进行重新编译，生成H5页面。

本发明实施例中，传统的H5页面生成方式，需要业务人员先给开发人员提需求，开发人员根据需求人工开发，开发H5页面效率较低。而本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升，生成H5页面的效率得到了提高。

请参阅图3，本发明实施例中H5页面生成方法的第三个实施例包括：

301、接收H5页面的生成请求；

302、从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

303、调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构；

304、根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

具体的，实现方式为以下步骤：

提取所述初始配置参数集中所有参数项目的编号，与所述配置参数集里每个匹配的参数项目的编号进行第一次匹配；

比较所述初始配置值与第一次匹配中对应的所述配置值是否一致，将所述配置参数集里所述配置值不一致的参数项目组合为模板参数项集；

将所述模板参数项集里每个参数项目的编码与所述初始配置参数集里每个参数项目的编码进行第二次匹配；

将所述初始配置值更改为第二次匹配中对应的所述配置值，将所述初始配置参数集改为所述配置参数项集。

在一种实施例中，参数项目在属性设置上并没有编号，而是根据参数项目的一些其他特征进行排序，这样的特征例如：创建日期、名称、控件图标面积大小。在初始配置参数集与配置参数集中均进行排序，然后进行顺序匹配，这样匹配出来的参数项编码也是一一对应的关系。

在一种实施例中，在收集到匹配的配置值不一致的模板参数项集后，将参数模板项集进行复制传送至云端数据库，在下一次要调用历史设置信息时可以使用参数模板项集直接对初始配置值进行匹配修改，就能完成历史数据调用。另外，还有一种存储页面参数的方式，直接存储配置参数项集就调用历史数据时直接调用配置参数项集的数据。

在一种实施例中，再将初始配置值更改为第二次匹配中的配置值后，会将初始配置值的默认的初始配置值也调整为配置值，这样会适应用户的习惯。进一步地，还可以将配置值的数据进行频率统计，参数项目则将频率最高的配置值设置为默认的初始配置值。

305、将所述配置参数集与所述控件图标进行编译，生成控件图标编译程序与配置参数集编译程序；

306、根据所述控件图标编译程序，基于所述页面坐标将控件图标显示在H5页面界面上；

307、根据所述配置参数集编译程序，将所述H5页面界面中的所述控件的属性设置完成，生成H5页面；

在一种实施例中，编译程序会存储在云端中，然后作为历史数据进行调用，如果有调用历史生成的数据需求则直接使用编译程序生成H5页面。

在一种实施例中，不同的控件坐标在页面会出现相互叠加，此时页面会将叠加的控件产生选择指令，例如，点击一下会选择A控件，再点击一下就会选择B控件。进一步，在重叠部分页面会自动添加指示器，例如，有三个控件叠加就会在重叠部分显示3，说明重叠三个控件。

在一种实施例中，控件图标是不能相互的叠加的，在H5页面中存在层级的。可以附加不同的页面但是每个层级的页面的控件图标都是不能重叠。不同层级的页面切换可以有多种方式，例如侧边导航键进行切换，例如使用滑动手势进行切换，例如使用键盘输入，例如长按页面后出现页面层级选择页面。

308、判断所述生成请求是否为二次生成请求，其中，所述二次生成请求中控件编码与初次生成请求一致；

309、若是，则获取已经生成的第一H5页面，读取所述第一H5页面中H5控件和所述H5控件对应的H5配置参数集；

310、根据所述生成请求，将所述H5配置参数集调整至与所述生成请求中的配置参数集一致，得到新的H5页面；

311、将所述新的H5页面，按照调整后的H5配置参数集进行二次编译，生成第二H5页面，并发布所述第二H5页面。

在实际应用中，存在生成请求不是重新生成新的页面而是在原有页面进行修改，这样的修改不改变控件类型与页面布局只是对其中参数进行修改，所以将这种修改的生成请求称为二次生成请求。

在一种实施例中，将已经生成的第一H5页面中的H5配置参数集更改为配置参数集后生成第二H5页面，但是将第一H5页面作为一个层级隐藏在第二H5页面后，显示时默认显示第二H5页面，在客户使用切换指令时，会切换到第一H5页面。这主要可以应用在系列页面宣传上。在另一种实施例中，将第二H5页面直接替换第一H5页面，在替换时只在原有第一H5页面进行调整，将第一H5页面转化为第二H5页面。

本发明实施例中，传统的H5页面生成方式，需要业务人员先给开发人员提需求，开发人员根据需求人工开发，开发H5页面效率较低。而本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升，生成H5页面的效率得到了提高。

上面对本发明实施例中H5页面生成方法进行了描述，下面对本发明实施例中H5页面可视化生成装置进行描述，请参阅图4，本发明实施例中H5页面生成装置一个实施例包括：

接收模块401，用于接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集

读取模块402，用于从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

调用模块403，用于调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，所述初始架构中包括至少一个控件；

配置模块404，用于根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

生成模块405，用于将所述初始架构进行重新编译，生成H5页面。

本发明实施例中，传统的H5页面生成方式，需要业务人员先给开发人员提需求，开发人员根据需求人工开发，开发H5页面效率较低。而本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升，生成H5页面的效率得到了提高。

请参阅图5，本发明实施例中H5页面生成装置的另一个实施例包括：

接收模块501，用于接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集；

读取模块502，用于从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

调用模块503，用于调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，所述初始架构中包括至少一个控件；

配置模块504，用于根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

生成模块505，用于将所述初始架构进行重新编译，生成H5页面。

其中，所述H5页面生成装置包括：

控件判断模块506，用于判断所述UI控件区中是否存在与所述控件编码对应的控件；

查询模块507，用于若不存在所述控件编码对应的控件，从预设的云端数据库中，查询与所述控件编码对应的云端控件，判断所述云端数据库中是否存在与所述控件编码对应的云端控件；

控件获取模块508，用于若存在所述控件编码对应的控件，获取所述云端控件与对应的控件图标，其中，所述云端控件包括：可编辑的参数项目及其对应的初始配置值。

其中，所述H5页面生成装置包括：

云端版本获取模块509，用于从所述云端数据库中，获取所述云端控件所在的云端资源包的第一版本信息；

本地版本获取模块510，用于读取所述UI控件区的本地资源包的第二版本信息，其中，所述本地资源包为当前所述UI控件区中与所述云端资源包对应的资源包；

版本比较模块511，用于将所述第一版本信息与所述第二版本信息进行比较，得到比较结果；

更新模块512，用于若所述比较结果为不一致，则从所述云端数据库中下载所述云端资源包，并根据所述云端资源包对所述UI控件区中的控件进行更新。

可选的，所述调用模块503还可以具体用于：将所述控件图标显示于所述实时预览编辑区中，根据页面坐标调整所述控件图标在所述实时预览编辑区中的显示位置得到所述初始架构，其中，所述页面坐标用于指示所述控件图标在所述实时预览编辑区中显示位置；提取所述初始架构中的至少一个控件的参数编辑界面，并根据所述初始可配置参数集对所述参数编辑界面中的参数项目进行标注；将标注后的参数编辑界面显示于所述配置项区中。

可选的，所述配置模块504包括：

提取单元5041，用于提取所述初始配置参数集中所有参数项目的编号，与所述配置参数集里每个匹配的参数项目的编号进行第一次匹配；

比较单元5042，用于比较所述初始配置值与第一次匹配中对应的所述配置值是否一致，将所述配置参数集里所述配置值不一致的参数项目组合为模板参数项集；

匹配单元5043，用于将所述模板参数项集里每个参数项目的编码与所述初始配置参数集里每个参数项目的编码进行第二次匹配；

更改单元5044将所述初始配置值更改为第二次匹配中对应的所述配置值，将所述初始配置参数集改为所述配置参数项集。

可选的，所述生成模块505还可以具体用于：将所述配置参数集与所述控件图标进行编译，生成控件图标编译程序与配置参数集编译程序；根据所述控件图标编译程序，基于所述页面坐标将控件图标显示在H5页面界面上；根据所述配置参数集编译程序，将所述H5页面界面中的所述控件的属性设置完成，生成H5页面。

其中，所述H5页面生成装置包括：

请求判断模块513，用于判断所述生成请求是否为二次生成请求，其中，所述二次生成请求中控件编码与初次生成请求一致；

页面读取模块514，用于若生成请求是二次生成请求，则获取已经生成的第一H5页面，读取所述第一H5页面中H5控件和所述H5控件对应的H5配置参数集；

调整模块515，用于据所述生成请求，将所述H5配置参数集调整至与所述生成请求中的配置参数集一致，得到新的H5页面；

编译发布模块516，用于将所述新的H5页面，按照调整后的H5配置参数集进行二次编译，生成第二H5页面，并发布所述第二H5页面。

本发明实施例中，传统的H5页面生成方式，需要业务人员先给开发人员提需求，开发人员根据需求人工开发，开发H5页面效率较低。而本发明基于控件内聚化，将控件的功能都实现组件化，减少了人工重复开发，H5页面在获得需求后可以自动生成，将H5页面的开发效率提升，生成H5页面的效率得到了提高。

上面图4和图5从模块化功能实体的角度对本发明实施例中的H5页面生成装置进行详细描述，下面从硬件处理的角度对本发明实施例中H5页面生成设备进行详细描述。

图6是本发明实施例提供的一种H5页面生成设备的结构示意图，该H5页面生成设备600可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)610(例如，一个或一个以上处理器)和存储器620，一个或一个以上存储应用程序633或数据632的存储介质630(例如一个或一个以上海量存储设备)。其中，存储器620和存储介质630可以是短暂存储或持久存储。存储在存储介质630的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对H5页面生成设备600中的一系列指令操作。更进一步地，处理器610可以设置为与存储介质630通信，在H5页面生成设备600上执行存储介质630中的一系列指令操作。

基于H5页面生成设备600还可以包括一个或一个以上电源640，一个或一个以上有线或无线网络接口650，一个或一个以上输入输出接口660，和/或，一个或一个以上操作系统631，例如Windows Serve，Mac OSX，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图6示出的H5页面生成设备结构并不构成对基于H5页面生成设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述H5页面生成方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种H5页面生成方法，其特征在于，应用于H5页面的开发平台，所述开发平台包括设有至少一个控件的UI控件区、预览配置区，所述H5页面生成方法包括：

接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集；

从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，其中，所述初始架构中包括至少一个控件；

根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

将所述初始架构进行重新编译，生成H5页面。

2.根据权利要求1所述的H5页面生成方法，其特征在于，在所述从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集之前，还包括：

判断所述UI控件区中是否存在与所述控件编码对应的控件；

若不存在，根据所述控件编码，查询预设的云端数据库中是否存在与所述控件编码对应的云端控件；

若存在，获取所述云端控件与对应的控件图标，其中，所述云端控件包括：可编辑的参数项目及其对应的初始配置值。

3.根据权利要求2所述的H5页面生成方法，其特征在于，在所述获取所述云端控件与对应的控件图标之后，还包括：

从所述云端数据库中，获取所述云端控件所在的云端资源包的第一版本信息；

读取所述UI控件区的本地资源包的第二版本信息，其中，所述本地资源包为当前所述UI控件区中与所述云端资源包对应的资源包；

将所述第一版本信息与所述第二版本信息进行比较，得到比较结果；

若所述比较结果为不一致，则从所述云端数据库中下载所述云端资源包，并根据所述云端资源包对所述UI控件区中的控件进行更新。

4.根据权利要求3所述的H5页面生成方法，其特征在于，所述预览配置区包括实时预览编辑区、配置项区；

所述调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构包括：

将所述控件图标显示于所述实时预览编辑区中，根据页面坐标调整所述控件图标在所述实时预览编辑区中的显示位置得到所述初始架构，其中，所述页面坐标用于指示所述控件图标在所述实时预览编辑区中显示位置；

提取所述初始架构中的至少一个控件的参数编辑界面，并根据所述初始可配置参数集对所述参数编辑界面中的参数项目进行标注；

将标注后的参数编辑界面显示于所述配置项区中。

5.根据权利要求1-4任一项所述的H5页面生成方法，其特征在于，所述配置参数集包括参数项目的编号和对应的配置值；

所述根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值包括：

提取所述初始配置参数集中所有参数项目的编号，与所述配置参数集里每个匹配的参数项目的编号进行第一次匹配；

比较所述初始配置值与第一次匹配中对应的所述配置值是否一致，将所述配置参数集里所述配置值不一致的参数项目组合为模板参数项集；

将所述模板参数项集里每个参数项目的编码与所述初始配置参数集里每个参数项目的编码进行第二次匹配；

将所述初始配置值更改为第二次匹配中对应的所述配置值，将所述初始配置参数集改为所述配置参数项集。

6.根据权利要求5所述的H5页面生成方法，其特征在于，所述将所述初始架构进行重新编译，生成H5页面包括：

将所述配置参数集与所述控件图标进行编译，生成控件图标编译程序与配置参数集编译程序；

根据所述控件图标编译程序，基于所述页面坐标将控件图标显示在H5页面界面上；

根据所述配置参数集编译程序，将所述H5页面界面中的所述控件的属性设置完成，生成H5页面。

7.根据权利要求6所述的H5页面生成方法，其特征在于，在所述将所述初始架构进行重新编译，生成H5页面之后，还包括：

判断所述生成请求是否为二次生成请求，其中，所述二次生成请求中控件编码与初次生成请求一致；

若是，则获取已经生成的第一H5页面，读取所述第一H5页面中H5控件和所述H5控件对应的H5配置参数集；

根据所述生成请求，将所述H5配置参数集调整至与所述生成请求中的配置参数集一致，得到新的H5页面；

将所述新的H5页面，按照调整后的H5配置参数集进行二次编译，生成第二H5页面，并发布所述第二H5页面。

8.一种H5页面生成装置，其特征在于，所述H5页面生成装置包括：

接收模块，用于接收H5页面的生成请求，所述生成请求包括：控件编码和所述控件编码对应的控件的配置参数集；

查询模块，用于从所述UI控件区中查询出与所述控件编码对应的控件，并读取所述控件中可编辑的参数项目以及对应的初始配置值，得到初始配置参数集；

调用模块，用于调取所述控件的控件图标，并将所述控件图标和所述初始配置参数集显示于所述预览配置区，构建H5页面的初始架构，所述初始架构中包括至少一个控件；

配置模块，用于根据所述配置参数集中各参数项目对应的配置值调整所述初始配置参数集中各参数项目对应的初始配置值；

生成模块，用于将所述初始架构进行重新编译，生成H5页面。

9.一种H5页面生成设备，其特征在于，所述H5页面生成设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述H5页面生成设备执行如权利要求1-7中任一项所述的H5页面生成方法。

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

Images