CN108958736A - 页面生成方法、装置、电子设备及计算机可读介质 - Google Patents

Abstract

本公开提供一种页面生成方法、装置、电子设备及计算机可读介质，属于互联网技术领域。该页面生成方法包括：获取用于构成页面的组件列表，组件列表中的组件来自于多个技术栈；响应于用户的组件添加指令，从组件列表中选择一个组件，将组件添加到页面设计器中；在页面设计器中如果是第一次添加组件，则对组件列表进行过滤，得到与组件属于相同技术栈的组件；在页面设计器中如果不是第一次添加组件，则将组件的元数据信息存储到页面数据库中；根据页面数据库对组件进行渲染，将渲染后的组件组装成页面。该方法无需重复构建活动页面平台，从而可以在一个活动平台上根据需要进行基础组件与业务组件的组合实现多业务需求。

Description

页面生成方法、装置、电子设备及计算机可读介质

技术领域

本公开总体涉及互联网技术领域，具体而言，涉及一种页面生成方法、装置、电子设备及计算机可读介质。

背景技术

由于日益增多的活动需求，如果这些活动的页面设计全部采用人工开发的方式，将极其消耗开发资源。

通过将活动页面按照业务逻辑功能将其拆解为多个业务组件，这样可以通过组件的方式，实现页面逻辑的复用，从而降低重复开发的成本。目前，不少平台都是基于特定的技术栈实现的(如Vue、React等)，因此页面设计器往往与组件有特定的耦合关系。而且随着前端技术栈的发展，可能存在技术栈的迁移。但是不同的业务部门采用的技术栈可能会不一样，这样导致多种平台基于多种技术栈来实现，但在每一技术栈中页面设计器的功能相同或相近，导致在多个技术栈中重复构建活动页面。

因此，现有技术中的技术方案中在多个技术栈中需要重复构建活动页面，还存在有待改进之处。

在所述背景技术部分公开的上述信息仅用于加强对本公开的背景的理解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开提供一种页面生成方法、装置、电子设备及计算机可读介质，解决上述在多个技术栈中需要重复构建活动页面的问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的一方面，提供一种页面生成方法，包括：获取用于构成页面的组件列表，所述组件列表中的组件来自于多个技术栈；响应于用户的组件添加指令，从所述组件列表中选择一个组件，将所述组件添加到页面设计器中；在所述页面设计器中如果是第一次添加所述组件，则对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件；在所述页面设计器中如果不是第一次添加所述组件，则将所述组件的元数据信息存储到页面数据库中；根据所述页面数据库对所述组件进行渲染，将渲染后的组件组装成页面。

在本公开的一个实施例中，对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件包括：所述页面设计器获取所述组件的元数据信息，所述元数据信息包括组件对应的技术栈以及组件依赖版本；根据所述元数据信息确定所述组件所属的技术栈；对所述组件列表按照所述组件所述的技术栈进行过滤，得到与所述组件属于相同技术栈的组件，并构成更新后的组件列表。

在本公开的一个实施例中，将所述组件的元数据信息存储到页面数据库中之后，还包括：检测所述页面数据库中的元数据信息是否发生变化；如果所述页面数据库中的元数据信息发生变化，则根据变化后的元数据信息重新进行渲染。

在本公开的一个实施例中，还包括：响应于用户的组件修改指令，从所述页面中选择需要修改的组件；获取所述需要修改的组件的元数据信息，所述元数据信息还包括组件属性配置描述信息和组件属性值；根据所述组件属性配置描述信息和所述组件属性值在属性编辑器中修改所述需要修改的组件的属性配置；将修改后的属性配置存储到所述页面数据库中。

在本公开的一个实施例中，还包括：根据所述页面数据库中对应的修改后的属性配置对所述需要修改的组件进行渲染。

在本公开的一个实施例中，响应于用户的组件添加指令或响应于用户的组件修改指令之前，还包括：于一可视化交互界面中获取用户的操作指令；识别所述操作指令为组件添加指令还是组件修改指令。

在本公开的一个实施例中，根据所述页面数据库对所述组件进行渲染包括：根据所述页面数据库选择与所述组件所述的技术栈相对应的渲染器，并利用所述渲染器对所述组件进行渲染。

根据本公开的再一方面，提供一种页面生成装置，包括：列表获取模块，配置为获取用于构成页面的组件列表，所述组件列表中的组件来自于多个技术栈；组件添加模块，配置为响应于用户的组件添加指令，从所述组件列表中选择一个组件，将所述组件添加到页面设计器中；判断模块，配置为在所述页面设计器中如果是第一次添加所述组件，则对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件；在所述页面设计器中如果不是第一次添加所述组件，则将所述组件的元数据信息存储到页面数据库中；渲染模块，配置为根据所述页面数据库对所述组件进行渲染，将渲染后的组件组装成页面。

根据本公开的又一方面，提供一种电子设备，包括处理器；存储器，存储用于所述处理器控制如上所述的方法步骤的指令。

根据本公开的另一方面，提供一种计算机可读介质，其上存储有计算机可执行指令，所述可执行指令被处理器执行时实现如上所述的方法步骤。

根据本公开实施例提供的页面生成方法、装置、电子设备及计算机可读介质，一方面，根据用户添加的组件从组件列表中过滤得到与该组件属于相同技术栈的组件，而整个组件列表中包括来自多个技术栈的组件，无需重复构建活动页面平台，从而可以在一个活动平台上根据需要进行基础组件与业务组件的组合实现多业务需求；另一方面，活动页面平台对于业务组件的技术栈没有强依赖，对于新的技术栈，只需要增加新技术栈的渲染器，以及开发新技术栈的基础组件即可，节省活动页面的设计时间，提升效率。

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

附图说明

通过参照附图详细描述其示例实施例，本公开的上述和其它目标、特征及优点将变得更加显而易见。

图1示出本公开一实施例中提供的一种页面生成方法的流程图。

图2示出本公开一实施例图1中步骤S130的流程图。

图3示出本公开一实施例中修改组件的流程图。

图4示出本公开一实施例中页面生成的方法的整体流程图。

图5示出本公开一实施例中实现页面生成的框架图。

图6示出本公开一实施例中页面生成方法中采用React技术栈完成时的步骤流程图。

图7示出本公开另一实施例中提供的一种页面生成装置的示意图。

图8示出本公开一实施例提供的适于用来实现本申请实施例的电子设备的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

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

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

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。

根据本公开的一些实施例，提供一种页面生成方法、装置、电子设备及计算机可读介质，在下文中所涉及的术语释义如下：

“组件”是构成页面的基础，是根据业务抽象出来的独立的功能单元。可以采用不同的技术栈开发。在不同的技术栈中通过不同的渲染器，得到渲染结果。通过元数据来描述组件的结构以及组件的设计器。

“页面设计器”是页面设计的工具，组件的配置和组合在页面设计器中完成。

“属性编辑器”也是页面设计的工具，配置页面、组件属性在属性编辑器中完成。

图1示出本公开一实施例中提供的一种页面生成方法的流程图，包括以下步骤：

如图1所示，在步骤S110中，获取用于构成页面的组件列表，组件列表中的组件来自于多个技术栈。

如图1所示，在步骤S120中，响应于用户的组件添加指令，从组件列表中选择一个组件，将组件添加到页面设计器中。

如图1所示，在步骤S130中，在页面设计器中如果是第一次添加组件，则对组件列表进行过滤，得到与组件属于相同技术栈的组件；在页面设计器中如果不是第一次添加组件，则将组件的元数据信息存储到页面数据库中。

如图1所示，在步骤S140中，根据页面数据库对组件进行渲染，将渲染后的组件组装成页面。

通过本示例性实施例中的页面生成方法，一方面，根据用户添加的组件从组件列表中过滤得到与该组件属于相同技术栈的组件，而整个组件列表中包括来自多个技术栈的组件，无需重复构建活动页面平台，从而可以在一个活动平台上根据需要进行基础组件与业务组件的组合实现多业务需求；另一方面，活动页面平台对于业务组件的技术栈没有强依赖，对于新的技术栈，只需要增加新技术栈的渲染器，以及开发新技术栈的基础组件即可，节省活动页面的设计时间，提升效率。

下面，将对本公开实施例中的页面生成方法中的各步骤作进一步的说明。

在步骤S110中，获取用于构成页面的组件列表，组件列表中的组件来自于多个技术栈。

在本公开的一个实施例中，步骤S110中通过页面设计器获取能够构成页面的全部组件列表，并展示在设计器的工具箱中，以便用户向页面中添加组件。需要说明的是，本实施例中的组件列表中的全部组件可以来自多个不同类型的技术栈，如，技术栈包括React技术栈和Vue技术栈，因此，组件列表中的组件既有React组件，也有Vue组件。

在步骤S120中，响应于用户的组件添加指令，从组件列表中选择一个组件，将组件添加到页面设计器中。

在本公开的一个实施例中，响应于用户的组件添加指令之前，还包括：于一可视化交互界面中获取用户的操作指令；识别操作指令为组件添加指令还是组件修改指令，如果该操作指令为组件添加指令，则在步骤S120中响应于该组件添加指令，实现将组件列表中的某一个组件添加到页面设计器中。

需要说明的是，本实施例中用户的组件添加指令可以为从组件列表中拖拽某一组件到页面设计器中，在本公开的其他实施例中用户的组件添加指令还是可以是其他形式的操作，此处不再一一列举。

在步骤S130中，在页面设计器中如果是第一次添加组件，则对组件列表进行过滤，得到与组件属于相同技术栈的组件；在页面设计器中如果不是第一次添加组件，则将组件的元数据信息存储到页面数据库中。

在本公开的一个实施例中，将组件添加到页面设计器中还需要进一步对本次添加操作是否为第一次添加该组件进行判断，如果是第一次添加该组件，则需要根据该组件所属技术栈的类型对组件列表进行过滤，图2示出步骤S130中对组件列表进行过滤，得到与组件属于相同技术栈的组件的流程图，包括以下步骤：

如图2所示，在步骤S210中，页面设计器获取组件的元数据信息。

其中组件的元数据信息包括组件对应的技术栈以及组件依赖版本。

如图2所示，在步骤S220中，根据元数据信息确定组件所属的技术栈。

由于组件列表中包括多个技术栈的组件，该步骤中可以根据组件的元数据信息获知添加到页面设计器中的组件对应属于哪个技术栈。

如图2所示，在步骤S230中，对组件列表按照组件的技术栈进行过滤，得到与组件属于相同技术栈的组件，并构成更新后的组件列表。

获知组件的技术栈之后，在该步骤中对组件列表进行过滤，过滤掉组件列表中与该组件的技术栈不同的组件，仅保留与该组件属于相同技术栈的组件，并利用这些组件构成更新后的组件列表。

在步骤S140中，根据页面数据库对组件进行渲染，将渲染后的组件组装成页面。

在本公开的一个实施例中，根据页面数据库对组件进行渲染之前，还包括：检测页面数据库中的元数据信息是否发生变化；如果页面数据库中的元数据信息发生变化，则根据变化后的元数据信息重新进行渲染。因此，需要页面设计器对页面数据库中存储的结构化数据进行监听，如果发生变化，则需要重新渲染页面设计器中的组件界面。

在本公开的一个实施例中，该步骤中根据页面数据库对组件进行渲染具体包括：根据页面数据库选择与组件的技术栈相对应的渲染器，并利用渲染器对组件进行渲染。例如，React组件就要选择React渲染器对其进行渲染，再将渲染后的组件组装到页面中，使得页面设计器的用户能看到页面的实时效果。

这样，在重新渲染的过程中，页面设计器通过逐一调用组件对应的技术栈的渲染器来渲染这些组件。最终将所有渲染好的组件组装成页面，呈现在页面设计器中，让页面设计器的使用者能看到页面的实时效果，至此完成组件的添加操作。

上述步骤S110～S140示出利用页面设计器在页面中添加组件的流程，在公开的其他实施例中还可以进一步包括修改组件的流程，具体为：

在本公开的一个实施例中，还包括：

于一可视化交互界面中获取用户的操作指令；识别操作指令为组件添加指令还是组件修改指令，如果是组件添加指令，则按照上述步骤S110～S140的流程完成组件添加的操作；如果是组件修改指令，则按照图3所示的修改组件的流程完成组件修改的操作。

如图3所示，在步骤S310中，响应于用户的组件修改指令，从页面中选择需要修改的组件。

在本公开的一个实施例中，该步骤中组件修改指令可以为用户在页面设计器中选中一个需要修改的组件，这样从页面设计器中获取到需要修改的组件。

如图3所示，在步骤S320中，获取需要修改的组件的元数据信息，元数据信息还包括组件属性配置描述信息和组件属性值。

与添加组件相似，也需要获取需要修改的组件的元数据信息，由于元数据信息中不仅包括组件对应的技术栈和组件依赖版本，还包括组件属性配置描述信息和组件属性值。

如图3所示，在步骤S330中，根据组件属性配置描述信息和组件属性值在属性编辑器中修改需要修改的组件的属性配置。

在该步骤中，根据组件属性配置描述信息和组件属性值，加载通用属性编辑器，以完成对页面、组件属性的配置，用户可以通过属性编辑器修改组件的属性配置。

如图3所示，在步骤S340中，将修改后的属性配置存储到页面数据库中。

将修改后的属性配置同样需要存储到页面数据库中，之后也与添加组件类似，需要页面设计器对页面数据库中存储的结构化数据进行监听，如果发生变化，则需要重新渲染页面设计器中的组件界面。在重新渲染的过程中，页面设计器通过逐一调用组件对应的技术栈的渲染器来渲染这些组件。最终将所有渲染好的组件组装成页面，呈现在页面设计器中，让页面设计器的使用者能看到页面的实时效果，至此完成组件的添加操作。

图4示出本公开提供的页面生成的方法的整体流程图，包括添加组件和修改组件，具体包括以下步骤：

步骤S401：获取组件列表；步骤S402：添加组件到页面设计器；步骤是403：判断是否为第一次添加，如果是第一次添加，则转至步骤S404，如果不是第一次添加，则转至步骤S405；步骤S404：过滤组件列表；步骤S405：存储结构化数据到页面数据库中；步骤S406：调用与组件相对应的渲染器；步骤S407：利用渲染器对组件进行渲染，至此完成添加组件的操作。

另外，步骤S408：选则需要修改的组件；步骤S409：获取该组件的元数据；步骤S410：调用属性编辑器；步骤S411：更新组件，之后转至步骤S405，并且后续步骤同步骤S406和S407，至此完成修改组件的操作。

图5示出本公开实施例中实现页面生成的框架图，如图5所示，页面中包括页面设计器和属性编辑器两个工具以及组件列表，组件列表中包括多个组件，每一组件中包括属于同一技术栈的组件、渲染器和元数据，以图5所示为例，示出React技术栈下开发的组件中包括React组件、React渲染器和相应的元数控，还示出了Vue技术栈下开发的组件中包括Vue组件、Vue渲染器和相应的元数控，即X技术栈下开发的组件中包X组件、X渲染器和相应的元数控，因此有多少个技术栈开发的组件，就有多少个这样的结构。

由于组件多数是由React技术栈和Vue技术栈开发，假设每个技术栈均有10各组件，以下以React技术栈中的组件为例对对上述页面生成方法进行介绍，图6示出页面生成方法中采用React技术栈完成时的步骤流程图，包括以下：

如图6所示，在步骤S61中，用户新建页面，打开页面设计器。在设计器中的组件列表中，会列出这20个来自React技术栈和Vue两个技术栈的组件。

如图6所示，在步骤S62中，用户拖拽一个React组件到页面设计器中，此时页面已经确定采用React技术栈，将刷新组件列表，只显示React技术栈的组件。

如图6所示，在步骤S63中，将该React组件的元数据信息存储到页面数据库(即页面结构化数据)中。

如图6所示，在步骤S64中，调用React渲染器，根据页面结构化数据在页面设计器中渲染页面。

如图6所示，在步骤S65中，选中添加的React组件，页面设计器获取该React组件的元数据信息，根据元数据信息加载通用属性编辑器。

如图6所示，在步骤S66中，用户通过通用的属性编辑器修改组件的属性配置。

如图6所示，在步骤S67中，属性编辑器将修改后的属性配置存储在页面结构化数据中。

如图6所示，在步骤S68中，再次调用React渲染器，重新根据页面结构化数据在页面设计器中渲染页面。

基于上述步骤S61～S68，可以实现组件的添加和修改，页面设计器和组件无直接耦合关系，组件开发者按照规范提供组件的元数据信息，包括技术栈、依赖、技术栈版本、组件属性描述等元数据信息，页面设计器根据组件提供的元数据信息，来获知组件的技术栈和技术栈依赖版本，当第一个组件加载到设计器中，就确定页面组件的技术栈。页面数据库中存储的是结构化组件数据，页面设计器通过确定不同的渲染器来渲染不同的技术栈开发的组件，并在可视化编辑界面呈现组件。这样就可以通过活动平台，让开发人员甚至是非开发人员，采用可视化的操作方式，从组件列表中拖拽需要的组件到页面设计器中，并且通过设置组件和页面的属性来实现业务需求。可以使得部分活动页面由全部由开发人员写代码开发的方式转换为由非开发人员自行配置，从而提升活动页面设计的效率。

综上所述，本实施例提供的页面生成方法，一方面，根据用户添加的组件从组件列表中过滤得到与该组件属于相同技术栈的组件，而整个组件列表中包括来自多个技术栈的组件，无需重复构建活动页面平台，从而可以在一个活动平台上根据需要进行基础组件与业务组件的组合实现多业务需求；另一方面，活动页面平台对于业务组件的技术栈没有强依赖，对于新的技术栈，只需要增加新技术栈的渲染器，以及开发新技术栈的基础组件即可，节省活动页面的设计时间，提升效率。

图7示出本公开另一实施例中提供的一种页面生成装置的示意图，如图7所示，该装置700包括：列表获取模块710、组件添加模块720、判断模块730和渲染模块740。

列表获取模块710配置为获取用于构成页面的组件列表，所述组件列表中的组件来自于多个技术栈；组件添加模块720配置为响应于用户的组件添加指令，从所述组件列表中选择一个组件，将所述组件添加到页面设计器中；判断模块730配置为在所述页面设计器中如果是第一次添加所述组件，则对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件；在所述页面设计器中如果不是第一次添加所述组件，则将所述组件的元数据信息存储到页面数据库中；渲染模块740配置为根据所述页面数据库对所述组件进行渲染，将渲染后的组件组装成页面。

在本公开的一个实施例中，列表获取模块710通过页面设计器获取能够构成页面的全部组件列表，并展示在设计器的工具箱中，以便用户向页面中添加组件。需要说明的是，本实施例中的组件列表中的全部组件可以来自多个不同类型的技术栈，如，技术栈包括React技术栈和Vue技术栈，因此，组件列表中的组件既有React组件，也有Vue组件。

在本公开的一个实施例中，组件添加模块720通过响应于用户的组件添加指令，从所述组件列表中选择一个组件，如一个React组件，将所述组件添加到页面设计器中。

在本公开的一个实施例中，判断模块730对本次添加操作是否为第一次添加该组件进行判断，如果是第一次添加该组件，则需要根据该组件所属技术栈的类型对组件列表进行过滤；如果不是第一次添加该组件，则将组件的元数据信息以结构化数据的形式存储到页面数据库中。

在本公开的一个实施例中，渲染模块740根据页面数据库对组件进行渲染具体包括：根据页面数据库选择与组件的技术栈相对应的渲染器，并利用渲染器对组件进行渲染。同时，还需检测页面数据库中的元数据信息是否发生变化；如果页面数据库中的元数据信息发生变化，则根据变化后的元数据信息重新进行渲染，以达到实时更新的目的。

该装置中各个模块的功能参见上述方法实施例中的相关描述，此处不再赘述。

综上所述，本实施例中的页面生成装置，一方面，根据用户添加的组件从组件列表中过滤得到与该组件属于相同技术栈的组件，而整个组件列表中包括来自多个技术栈的组件，无需重复构建活动页面平台，从而可以在一个活动平台上根据需要进行基础组件与业务组件的组合实现多业务需求；另一方面，活动页面平台对于业务组件的技术栈没有强依赖，对于新的技术栈，只需要增加新技术栈的渲染器，以及开发新技术栈的基础组件即可，节省活动页面的设计时间，提升效率。

另一方面，本公开还提供了一种电子设备，包括处理器和存储器，存储器存储用于上述处理器控制以下方法的操作指令：

获取用于构成页面的组件列表，所述组件列表中的组件来自于多个技术栈；响应于用户的组件添加指令，从所述组件列表中选择一个组件，将所述组件添加到页面设计器中；在所述页面设计器中如果是第一次添加所述组件，则对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件；在所述页面设计器中如果不是第一次添加所述组件，则将所述组件的元数据信息存储到页面数据库中；根据所述页面数据库对所述组件进行渲染，将渲染后的组件组装成页面。

下面参考图8，其示出了适于用来实现本申请实施例的电子设备的计算机系统800的结构示意图。图8示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图8所示，计算机系统800包括中央处理单元(CPU)801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分807加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中，还存储有系统800操作所需的各种程序和数据。CPU 801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。

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

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

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

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

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括发送单元、获取单元、确定单元和第一处理单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，发送单元还可以被描述为“向所连接的服务端发送图片获取请求的单元”。

另一方面，本公开还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括以下方法步骤：

获取用于构成页面的组件列表，所述组件列表中的组件来自于多个技术栈；响应于用户的组件添加指令，从所述组件列表中选择一个组件，将所述组件添加到页面设计器中；在所述页面设计器中如果是第一次添加所述组件，则对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件；在所述页面设计器中如果不是第一次添加所述组件，则将所述组件的元数据信息存储到页面数据库中；根据所述页面数据库对所述组件进行渲染，将渲染后的组件组装成页面。

应清楚地理解，本公开描述了如何形成和使用特定示例，但本公开的原理不限于这些示例的任何细节。相反，基于本公开公开的内容的教导，这些原理能够应用于许多其它实施方式。

以上具体地示出和描述了本公开的示例性实施方式。应可理解的是，本公开不限于这里描述的详细结构、设置方式或实现方法；相反，本公开意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

Claims (10)

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

获取用于构成页面的组件列表，所述组件列表中的组件来自于多个技术栈；

响应于用户的组件添加指令，从所述组件列表中选择一个组件，将所述组件添加到页面设计器中；

在所述页面设计器中如果是第一次添加所述组件，则对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件；在所述页面设计器中如果不是第一次添加所述组件，则将所述组件的元数据信息存储到页面数据库中；

根据所述页面数据库对所述组件进行渲染，将渲染后的组件组装成页面。

2.根据权利要求1所述的页面生成方法，其特征在于，对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件包括：

所述页面设计器获取所述组件的元数据信息，所述元数据信息包括组件对应的技术栈以及组件依赖版本；

根据所述元数据信息确定所述组件所属的技术栈；

对所述组件列表按照所述组件所述的技术栈进行过滤，得到与所述组件属于相同技术栈的组件，并构成更新后的组件列表。

3.根据权利要求2所述的页面生成方法，其特征在于，将所述组件的元数据信息存储到页面数据库中之后，还包括：

检测所述页面数据库中的元数据信息是否发生变化；

如果所述页面数据库中的元数据信息发生变化，则根据变化后的元数据信息重新进行渲染。

4.根据权利要求2所述的页面生成方法，其特征在于，还包括：

响应于用户的组件修改指令，从所述页面中选择需要修改的组件；

获取所述需要修改的组件的元数据信息，所述元数据信息还包括组件属性配置描述信息和组件属性值；

根据所述组件属性配置描述信息和所述组件属性值在属性编辑器中修改所述需要修改的组件的属性配置；

将修改后的属性配置存储到所述页面数据库中。

5.根据权利要求4所述的页面生成方法，其特征在于，还包括：

根据所述页面数据库中对应的修改后的属性配置对所述需要修改的组件重新进行渲染。

6.根据权利要求3所述的页面生成方法，其特征在于，响应于用户的组件添加指令或响应于用户的组件修改指令之前，还包括：

于一可视化交互界面中获取用户的操作指令；

识别所述操作指令为组件添加指令还是组件修改指令。

7.根据权利要求1所述的页面生成方法，其特征在于，根据所述页面数据库对所述组件进行渲染包括：

根据所述页面数据库选择与所述组件所述的技术栈相对应的渲染器，并利用所述渲染器对所述组件进行渲染。

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

列表获取模块，配置为获取用于构成页面的组件列表，所述组件列表中的组件来自于多个技术栈；

组件添加模块，配置为响应于用户的组件添加指令，从所述组件列表中选择一个组件，将所述组件添加到页面设计器中；

判断模块，配置为在所述页面设计器中如果是第一次添加所述组件，则对所述组件列表进行过滤，得到与所述组件属于相同技术栈的组件；在所述页面设计器中如果不是第一次添加所述组件，则将所述组件的元数据信息存储到页面数据库中；

渲染模块，配置为根据所述页面数据库对所述组件进行渲染，将渲染后的组件组装成页面。

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

处理器；

存储器，存储用于所述处理器控制如权利要求1-7任一项所述的方法步骤的指令。

10.一种计算机可读介质，其上存储有计算机可执行指令，其特征在于，所述可执行指令被处理器执行时实现如权利要求1-7任一项所述的方法步骤。