CN114461960B - 页面生成方法、页面展示方法及装置 - Google Patents

Abstract

本申请公开了一种页面生成方法、页面展示方法及装置，用于以简单、高效的方式实现线上页面新功能的及时更新迭代和增加，满足多样性的页面生成需求。所述页面生成方法包括：获取待加载至页面设计区域内的页面组件的页面配置文件；基于页面配置文件中的页面设计相关信息，生成页面组件并展示在页面设计区域内；基于页面配置文件中记录的与所述页面组件关联的属性配置文件，生成用于配置组件属性信息的配置控件并展示在属性配置区域内；基于接收到的对配置控件的操作，确定配置控件所配置的页面组件的组件属性信息；基于页面设计区域内的页面组件及所述配置空间所配置的页面组件的组件属性信息，生成用于生成页面的页面数据。

Description

页面生成方法、页面展示方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面生成方法、页面展示方法及装置。

背景技术

当前主流的页面可视化生成方法，通常是依据页面组件的设计需求，开发页面组件对应的页面设计和页面配置项，然后将页面组件的代码的打包封装和发版上线后再内置到可视化设计系统里，进而能够在可视化设计系统中对页面配置项进行配置。

然而，整个过程中涉及到多处代码的打包封装和发版上线，十分繁琐。另外，页面组件的页面设计和页面配置项的数量和类别是固定的，若要扩展新的页面组件或者页面配置项，就需要依照新的页面组件开发对应的页面设计和页面配置项并进行代码的打包封装和发版上线，无法实现线上页面新功能的及时更新迭代和增加，且页面生成效率低下。

发明内容

本申请实施例提供一种页面生成方法、页面展示方法及装置，用于以简单高效的方式实现线上页面新功能的及时更新迭代和增加，满足多样性的页面生成需求。

为了实现上述目的，本申请实施例采用下述技术方案：

第一方面，本申请实施例提供一种页面生成方法，包括：

获取待加载至页面设计区域内的页面组件的页面配置文件，所述页面配置文件记录有页面组件的页面设计相关信息和与所述页面组件关联的属性配置文件，所述属性配置文件用于生成配置页面组件的组件属性信息的配置控件；

基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内；

基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内；

基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息；

基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成用于生成页面的页面数据。

可以看出，本申请实施例提供的页面生成方法，通过将页面组件的页面配置文件加载到页面设计区域，就能实现页面组件的页面设计的可视化展示，以便于用户进行页面设计的修改；通过在页面配置文件中指示与页面组件的组件属性信息关联的属性配置文件，进而基于属性配置文件，在属性配置区域内实现对用于配置组件属性信息的配置控件的可视化展示，以便于用户通过操作配置控件来对页面组件的组件属性信息进行配置；最后，基于页面设计区域内的页面组件及其组件属性信息，生成用于生成页面的页面数据。这样，使得用户通过在页面设计区域加载所需页面组件的页面配置文件以及在页面设计区域内加载该页面组件关联的属性配置文件并对展示的配置控件进行操作，就能实现页面新功能的及时更新迭代和增加，而无需进行多处代码的重新开发、打包封装及发版上线，因而实施起来更灵活、更简单，不仅能够提高页面生成效率，还能够满足多样性的页面生成需求。

第二方面，本申请实施例提供一种页面展示方法，包括：

接收对目标页面的展示请求；

基于所述展示请求，获取待展示的目标页面的页面数据，所述页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成的，所述页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在所述页面设计区域内的，所述配置控件所配置的页面组件的组件属性信息是基于对所述配置控件的操作确定的，所述属性配置区域内的配置控件是基于所述页面配置文件中记录的属性配置文件生成的；

基于所述目标页面的页面数据，生成并展示所述目标页面。

可以看出，本申请实施例提供的页面展示方法，页面前端在需要展示页面时，通过获取所要展示页面的页面数据，即可生成并展示该页面，而不需要再在页面前端重新进行页面相关代码的开发、打包封装及发版上线，因而提高了页面展示。另外，页面的页面数据是基于本申请实施例提供的页面生成方法得到的，在需要上线页面新功能时，仅需在可视化管理平台的页面设计区域内加载所需页面组件的页面配置文件以及在页面设计区域内加载该页面组件关联的属性配置文件并对展示的配置控件进行操作以生成新的页面数据，页面前端获取新的页面数据即可实现页面新功能的上线展示，而无需等待页面开发人员进行多处代码的重新开发、打包封装及发版上线，因而实施起来更灵活、更简单，不仅进一步提高了页面展示效率，还能够满足多样性的、实时的页面展示需求。

第三方面，本申请实施例提供一种页面生成装置，包括：

第一获取模块，用于获取待加载至页面设计区域内的页面组件的页面配置文件，所述页面配置文件记录有页面组件的页面设计相关信息和与所述页面组件关联的属性配置文件，所述属性配置文件用于生成配置页面组件的组件属性信息的配置控件；

第一展示模块，用于基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内；

第二展示模块，用于基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内；

第一确定模块，用于基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息；

第一生成模块，用于基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成用于生成页面的页面数据。

第四方面，本申请实施例提供一种页面展示装置，包括：

接收模块，用于接收对目标页面的展示请求；

第二获取模块，用于基于所述展示请求，获取待展示的目标页面的页面数据，所述页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成的，所述页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在所述页面设计区域内的，所述配置控件所配置的页面组件的组件属性信息是基于对所述配置控件的操作确定的，所述属性配置区域内的配置控件是基于所述页面配置文件中记录的属性配置文件生成的；

第三展示模块，用于基于所述目标页面的页面数据，生成并展示所述目标页面。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如第一方面或第二方面所述的方法。

第六方面，本申请实施例提供一种计算机可读存储介质，包括：

当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如第一方面或第二方面所述的方法。

附图说明

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

图1为本申请的一个实施例提供的一种页面生成及展示方法的应用场景示意图；

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

图3为本申请的一个实施例提供的一种页面展示方法的流程示意图；

图4为本申请的一个实施例提供的一种页面生成装置的结构示意图；

图5为本申请的一个实施例提供的一种页面展示装置的结构示意图；

图6为本申请的一个实施例提供的一种电子设备的结构示意图；

图7为本申请的另一个实施例提供的一种电子设备的结构示意图。

具体实施方式

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

本说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应理解，这样使用的数据在适当情况下可以互换，以便本申请实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，本说明书以及权利要求书中“和/或”表示所连接的对象的至少其中之一，字符“/”一般表示前后关联对象是一种“或”的关系。

本申请实施例涉及到的专业术语包括：

Web页面：即Web网页，是万维网上的一个按照超文本标记语言(Hyper TextMarkup Language，HTML)格式组织起来的文件。在通过万维网进行信息查询时，以信息页面的形式出现，它可包括图形、文字、声音和视像等信息。

页面组件：即页面内容的呈现载体，不同的业务内容，封装在不同的业务组件中，例如用于展示天气的天气组件、用于展示页面的头部标题和头部图片的头部组件等。

Vue框架：即Vue.js，是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

CDN：Content Delivery Network，即内容分发网络，是建立在承载网基础上的虚拟分布式网络，能够将源站内容(包括各类动态资源和静态资源)智能缓存到全球各节点服务器上。这样，不仅方便了用户就近获取内容，提高了资源的访问速度，也分担了源站压力。

jsZip：一种通过nodeJs进行文件压缩的开源的工具包，其可以自定义生成压缩包的后缀名。

为了解决目前的页面生成方法存在操作繁琐、无法实现线上页面新功能的及时更新迭代和增加以及页面生成效率低下的技术问题，本申请实施例提出了一种页面生成方案以及后续基于生成的页面数据所执行的页面展示方案。本申请实施例提出的页面生成方案，通过将页面组件的页面配置文件加载到页面设计区域，就能实现页面组件的页面设计的可视化展示，以便于用户进行页面设计的修改；通过在页面配置文件中指示与页面组件的组件属性信息关联的属性配置文件，进而基于属性配置文件，在属性配置区域内实现对用于配置组件属性信息的配置控件的可视化展示，以便于用户通过操作配置控件来对页面组件的组件属性信息进行配置；最后，基于页面设计区域内的页面组件及其组件属性信息，生成用于生成页面的页面数据。这样，使得用户通过在页面设计区域加载所需页面组件的页面配置文件以及在页面设计区域内加载该页面组件关联的属性配置文件并对展示的配置控件进行操作，就能实现页面新功能的及时更新迭代和增加，而无需进行多处代码的重新开发、打包封装及发版上线，因而实施起来更灵活、更简单，不仅能够提高页面生成效率，还能够满足多样性的页面生成需求。

以下结合附图，详细说明本申请各实施例提供的技术方案。

本申请一个或多个实施例提供的页面生成方法可以应用于如图1所示的场景中，该场景包括可视化管理平台11、云端服务器12和页面前端13。

其中，可视化管理平台11是指用于供开发人员进行页面可视化设计的管理工具。开发人员14可以通过网络15登录可视化管理平台11进行页面可视化设计，例如开发人员14可以使用个人计算机、膝上型计算机、手机、个人数字助理、平板计算机、可穿戴设备等各种终端连接网络15。

具体地，可视化管理平台11包括页面设计区域11a和属性配置区域11b。其中，页面设计区域11a内用于展示构成页面的页面组件，开发人员14能够在页面设计区域11a内对页面的页面设计(比如包括页面组件的页面结构、页面样式等)及在页面中的布局位置等进行修改。属性配置区域11b内用于展示用于配置页面组件的组件属性的配置控件，开发人员14通过操作属性配置区域11b内展示的配置控件，可以实现对页面设计区域11a内的页面组件的组件属性的配置。具体应用中，每种页面组件相对应有可设置的组件属性，比如组件的颜色、字体大小、组件的大小、能被缩小到的最小尺寸、能被放大到的最大尺寸、对页面组件调整大小时每次变化的增量大小等，具体可根据实际需要进行设置，本申请实施例对此不作限定。另外，配置控件可以例如包括但不限于以下至少一种控件：按钮控件、文本框控件、单选框控件、下拉框控件、表格控件、树控件、图片控件、文件上传控件以及布局控件等，其中，下拉框控件可以例如包括如下至少一种形式：下拉选择框、下拉表格以及下拉菜单等；表格控件包括如下至少一种形式：普通表格、表格树以及可编辑表格；布局控件可以例如包括但不限于如下至少一种形式的控件：栅栏控件、分割面板控件、轮播控件以及标签页控件等。

可视化管理平台11还可响应于开发人员14的结束指令，基于页面设计区域11a内展示的页面组件及其组件属性信息，生成相应的页面数据，该页面数据可用于页面前端生成并展示相应页面。

云端服务器12可以是一台服务器，或者也可以是多台服务器构成的服务器集群，例如CDN。云端服务器12可以存储用于生成页面组件的页面配置文件以及用于生成配置控件的属性配置文件，以提供给可视化管理平台11使用，这样，可视化管理平台11通过从云端服务器12获取所需页面组件的页面配置文件并加载至页面设计区域11a内，即可实现对所需页面组件的可视化展示，以及通过从云端服务器12获取用于配置相应组件属性的属性配置文件并加载至属性配置区域11b内，即可实现对配置组件的可视化展示。当然，云端服务器12还可以存储可视化管理平台11生成并上传的页面数据。

具体应用中，不同页面组件的页面配置文件不同，或者说，不同的页面配置文件用于生成的页面配置文件不同。不同页面组件的页面配置文件可以由开发人员14预先开发并上传到云端服务器12中。页面组件的页面配置文件可以是一个基于Vue框架的文件集合压缩包，比如通过jsZip方式对多个文件进行压缩得到的压缩包，其包含有Vue文件、css文件以及生成页面组件所需的各类资源文件(比如图片、字体、Json文件等)，其中，Vue文件内记录有页面组件的页面结构、用于生成页面组件的页面脚本、页面组件的组件属性以及配置这些组件属性所需的属性配置文件的标识信息(比如在云端服务器12中的存储地址)等，css文件中记录有页面组件的页面样式等。配置页面组件的组件属性所需的属性配置文件也即与页面组件关联的属性配置文件。

类似地，不同组件属性信息的属性配置文件不同，或者说，基于不同属性配置文件所生成的配置控件不同，进而所能配置的组件属性信息不同。不同的属性配置文件也可以由开发人员14预先开发并上传到云端服务器12中。属性配置文件可以是一个基于Vue框架的文件集合压缩包，比如通过jsZip方式对多个文件进行压缩得到的压缩包，其包含有Vue文件、css文件以及生成配置控件所需的各类资源文件(比如图片、字体、Json文件等)，其中，Vue文件内记录有配置控件的页面结构、用于生成配置控件的页面脚本等，css文件中记录有配置控件的页面样式等。

页面前端13是网站前台部分，其运行在电脑端、移动端等浏览器上，以展示给用户15浏览的页面。页面前端13可以从可视化管理平台11或者云端服务器12获取用户15所要浏览的页面的页面数据，以及基于页面数据生成并展示该页面。

本申请实施例提供的页面生成方法将详细描述可视化管理平台11如何生成页面，本申请实施例提供的页面展示方法将详细描述页面前端13如何展示页面。

请参考图2，为本申请的一个实施例提供的一种页面生成方法的流程示意图，该页面生成方法可应用于可视化管理平台，比如图1所示的可视化管理平台11。如图2所示，该方法可以包括如下步骤：

S202，获取待加载至页面设计区域内的页面组件的页面配置文件。

本申请实施例中，待加载至页面设计区域内的页面组件可以是开发人员指示加载的页面组件，也即可视化管理平台可以根据用户的指示获取待加载的页面组件的页面配置文件。示例地，开发人员可以通过拖拽、输入命令、点击等操作输入项页面设计区域加载页面组件的指令。

具体应用中，页面组件的页面配置组件可以存储于任意适当的位置。在一种可选的实现方式中，可视化管理平台本地可存储不同页面组件的页面配置文件，进而可以直接从本地获取待加载的页面组件的页面配置组件。

在另一种可选的实现方式中，为了实现页面配置组件在多个可视化管理平台的共享和复用，即一次开发供多处使用，不同页面组件的页面配置文件可以存储于云端服务器，这样，可视化管理平台可以基于待加载的页面组件的标识信息或者该页面组件的页面配置文件的标识信息，从云端服务器中获取该页面组件的页面配置文件。

S204，基于页面组件的页面设计相关信息，生成页面组件并展示在页面设计区域内。

本申请实施例中，页面组件的页面配置文件中记录有页面组件的页面设计相关信息。其中，页面组件的页面设计相关信息是指用于表征页面组件的页面设计的信息，具体可以例如包括但不限于如下信息中的至少一种：页面组件的页面结构、页面样式、组件属性的初始值、用于生成页面组件的页面脚本及各类资源文件(比如图片、字体、Json文件等)。

在获得页面组件的页面配置文件后，通过解析该页面配置文件，即可得到页面组件的页面设计相关信息。具体而言，如前文所述，页面组件的页面结构、页面脚本以及组件属性的初始值记录在页面配置文件下的Vue文件内，页面组件的页面样式记录在页面配置文件下的css文件内，生成页面组件所需的各类资源记录在页面配置文件下的资源文件内，其中，页面结构记录在Vue文件的Template标签内，页面脚本记录在Vue文件的Script标签内，组件属性的初始值记录在Vue文件中的props标签内，页面样式记录在css文件的style标签内，相应地，可先对该页面配置文件进行解压，得到Vue文件、css文件和资源文件；然后，分别对这些文件的相应标签进行解析，即可得到上述页面设计相关信息。

进一步地，在解析得到的页面设计相关信息后，通过运行页面脚本即可生成页面组件，并基于页面结构、页面样式、组件属性的初始值以及各类资源等在页面设计区域内对该页面组件进行可视化展示。由此，使得开发人员能够直观地看到页面组件在页面中的展示效果并根据开发需求进行修改，当然，开发人员还可以调整页面组件在页面设计区域内的位置，比如在页面设计区域内选中该页面组件后移动到所需的位置，进而可以调整页面组件在页面中的布局位置。

在一种可选的实现方式中，为确保页面组件的可视化展示效果，页面组件的页面配置文件是基于界面构建框架(比如前文所述的Vue框架)进行开发得到的，相应地，在上述S204中，可基于该界面构建框架，实现页面组件的自动化生成及在页面设计区域内的自动展示。具体而言，上述S204可以包括如下步骤：

步骤A1，基于页面组件的页面设计相关信息，生成第一界面构建框架实例。

以界面构建框架为Vue框架为例，可视化管理平台可基于页面组件的页面设计相关信息，生成Vue框架的component实例，该component实例即为页面组件在Vue框架下的组件模板对象。

步骤A2，基于预设构造函数，将第一界面构建框架实例扩展为页面组件对应的第一插件。

其中，预设构造函数是指预先设置的、用于构造页面组件在界面构建框架下对应的插件的函数。通过预设构造函数将第一界面构建框架实例扩展为页面组件对应的第一插件，能够确保在该界面构建框架下成功展示页面组件。每个界面构建框架相对应有构造函数，比如Vue框架对应的构造函数为vue.extend()函数，也即在Vue框架下，可基于vue.extend()函数，将通过步骤A1生成的component实例扩展为页面组件在Vue框架下对应的第一插件，并生成用于唯一标识该第一插件的插件名称。

步骤A3，基于第一插件生成页面组件并展示在页面设计区域内。

在生成页面组件对应于界面构建框架的第一插件后，可视化管理平台即可将该第一插件展示到页面设计区域内，由此实现在该界面构建框架下对页面组件进行可视化展示。

可以理解的是，通过上述实施方式，使得开发人员通过向可视化管理平台指示所要加载的页面组件，可视化管理平台即可实现对该页面组件的自动生成及在页面设计区域内的可视化展示，无需开发人员执行过多的操作，进一步简化了页面生成过程，提高了页面生成效率。

本申请实施例在此示出了上述步骤S204的一种具体实现方式。当然，应理解，步骤S204也可以采用其它的方式实现，本申请实施例对此不作限制。

S206，基于与页面组件关联的属性配置文件，生成配置控件并展示在属性配置区域内。

本申请实施例中，页面组件的页面配置文件还记录有与页面组件关联的属性配置文件，具体而言，页面配置文件还包括与页面组件关联的属性配置文件的标识信息。其中，所谓页面组件关联的属性配置文件，是指用于生成配置该页面组件的组件属性信息的配置控件的属性配置文件。属性配置文件的标识信息是指用于唯一定位属性配置文件的信息，比如预先为属性配置文件分配的身份标识(Identification，ID)、属性配置文件的存储地址(比如在云端服务器上的存储地址)等。

在获得页面组件的页面配置文件后，通过解析该页面配置文件，即可得到页面组件关联的属性配置文件的标识信息。具体而言，如前文所述，关联的属性配置文件的标识信息记录在页面配置文件下的Vue文件内，更为具体地，该标识信息记录在Vue文件的propsPlugin标签内，相应地，在对该页面配置文件进行解压得到Vue文件后，对该Vue文件的propsPlugin标签进行解析，即可得到上述关联的属性配置文件的标识信息。

具体应用中，属性配置文件可以存储于任意适当的位置。在一种可选的实现方式中，可视化管理平台本地可存储不同的属性配置文件，进而可以基于关联的属性配置文件的标识信息，直接从本地获取该关联的属性配置文件。

在另一种可选的实现方式中，为了实现属性配置组件在多个可视化管理平台的共享和复用，即一次开发供多处使用，不同的属性配置文件可以存储于云端服务器，这样，可视化管理平台可以基于联的属性配置文件的标识信息，从云端服务器中获取该关联的属性配置文件。

本申请实施例中，属性配置文件中记录有所能生成的配置控件的页面设计信息，该页面设计信息可以例如包括但不限于以下信息中的至少一项：配置控件的页面结构、页面样式、用于生成配置控件的页面脚本及各类资源文件等。

在获得与页面组件关联的属性配置文件后，通过解析该属性配置文件，即可得到所要生成的配置控件的页面设计相关信息。具体而言，如前文所述，配置控件的页面结构及用于生成配置控件的页面脚本记录在属性配置文件下的Vue文件内，配置控件的页面样式记录在属性配置文件下的css文件内，生成配置控件所需的各类资源记录在属性配置文件下的资源文件内，其中，页面结构记录在Vue文件的Template标签内，页面脚本记录在Vue文件的Script标签内，页面样式记录在css文件的style标签内，相应地，可先对该页面配置文件进行解压，得到Vue文件、css文件和资源文件；然后，分别对这些文件的相应标签进行解析，即可得到配置控件的页面设计相关信息。

进一步地，在解析得到配置控件的页面设计相关信息后，通过运行页面脚本即可生成配置控件，并基于页面结构、页面样式以及各类资源等在属性配置区域内对该配置控件进行可视化展示。由此，使得开发人员能够直观地看到配置控件的展示效果并根据开发需求，通过对配置控件进行操作实现对关联的页面组件的组件属性信息的配置。

在一种可选的实现方式中，为确保配置控件的可视化展示效果，用于生成配置控件的属性配置文件是基于界面构建框架(比如前文所述的Vue框架)进行开发得到的，相应地，在上述S206中，可基于该界面构建框架，实现配置控件的自动化生成及在属性配置区域内的自动展示。具体而言，上述S206可以包括如下步骤：

步骤B1，基于与页面组件关联的属性配置文件记录的页面设计相关信息，生成第二界面构建框架实例。

以界面构建框架为Vue框架为例，可视化管理平台可基于配置控件的页面设计相关信息，生成Vue框架的component实例，该component实例即为配置控件在Vue框架下的控件模板对象。

步骤B2，基于预设构造函数，将第二界面构建框架实例扩展为配置控件对应的第二插件。

其中，预设构造函数是指预先设置的、用于构造页面组件在界面构建框架下对应的插件的函数。通过预设构造函数将第二界面构建框架实例扩展为配置控件对应的第二插件，能够确保在该界面构建框架下成功展示配置控件。每个界面构建框架相对应有构造函数，比如Vue框架对应的构造函数为vue.extend()函数，也即在Vue框架下，可基于vue.extend()函数，将通过步骤B1生成的component实例扩展为配置控件在Vue框架下对应的第二插件，并生成用于唯一标识该第二插件的插件名称。

步骤B3，基于第二插件生成配置控件并展示在属性配置区域内。

在生成配置控件对应于界面构建框架的第二插件后，可视化管理平台即可将该第二插件展示到属性配置区域内，由此实现在该界面构建框架下对配置控件进行可视化展示。

可以理解的是，通过上述实施方式，使得开发人员通过向可视化管理平台指示所要加载的页面组件，可视化管理平台即从该页面组件的页面配置文件中获取与页面组件关联的属性配置文件的标识信息，进而基于该标识信息获取属性配置文件并对配置控件进行可视化展示，从而实现了对配置控件的自动生成及在属性配置区域内的可视化展示，无需开发人员执行过多的操作，进一步简化了页面生成过程，提高了页面生成效率。

本申请实施例在此示出了上述步骤S206的一种具体实现方式。当然，应理解，步骤S206也可以采用其它的方式实现，本申请实施例对此不作限制。

S208，基于接收到的对配置控件的操作，确定配置控件所配置的页面组件的组件属性信息。

由于属性配置区域内的配置控件与页面设计区域内的页面组件的组件属性是相关联的，开发人员通过对配置控件进行操作，即可实现对页面组件的组件属性信息的配置，比如根据开发需求修改页面组件的组件属性的属性值。相应地，可视化管理平台基于用户对配置控件的操作，即可确定出配置控件所配置的页面组件的组件属性信息。

进一步地，为便于开发人员能够直观地了解对页面设计区域内的页面组件的组件属性信息的配置情况，在本申请的另一个实施例中，在上述S208之后，本申请实施例提供的页面生成方法还可以包括：基于属性配置区域内的配置控件所配置的页面组件的组件属性信息，在页面设计区域内对该所配置的页面组件的属性展示效果进行更新。

示例地，以Vue框架为例，可视化管理平台可通过v-bing方式将配置控件所配置的页面组件的组件属性信息赋值给该页面组件的页面配置文件内的Vue文件，这样，一方面可以实现在页面设计区域内对该页面组件的属性展示效果进行更新，另一方面可以实现对页面组件的页面配置文件的及时更新，以便后续能够使用更新后的页面配置文件进行页面设计。

S210，基于页面设计区域内的页面组件及属性配置区域内配置控件所配置的页面组件的组件属性信息，生成用于生成页面的页面数据。

本申请实施例中，页面设计区域内的页面组件用于指示页面包含的页面组件及这些页面组件在页面中的布局设计，比如布局位置等，页面组件的组件属性信息用于指示页面组件的样式和/页面内容等，进而基于页面设计区域内的页面组件及其组件属性信息，即可生成相应的页面数据，所生成的页面数据可以供页面前端生成相应页面。

在一种可选的实现方式中，为确保在界面构建框架下的页面数据的自动生成，上述S210可以包括如下步骤：

步骤C1，将页面设计区域内的页面组件对应的第一插件实例存储至全局页面对象的元素数组内。

具体应用中，可预先设置一全局页面对象pages，可视化管理平台通过将页面设计区域内的页面组件对应的第一插件实例存储至该全局页面对象的元素数组内，相当于指示所要指示的页面中包含页面设计区域内的页面组件。

步骤C2，将页面设计区域内的页面组件的组件属性信息、页面组件在页面设计区域内的布局位置以及页面组件的页面配置文件的标识信息，存储至页面组件对应的第一插件的样式文件中。

第一插件是在界面构建框架下对页面组件进行实例化及扩展后得到的，通过将页面组件的组件属性信息、页面配置文件的标识信息以及页面组件在页面设计区域内的布局位置存储至对应的第一插件的样式文件commonStyle中，相当于在第一插件的样式文件中指示了页面组件在页面中的布局位置、组件属性以及样式等，为后续生成页面数据提供了数据支撑。

步骤C3，将全局页面对象的元素数组及该元素数组内的第一插件实例的样式文件，生成页面数据。

具体应用中，页面数据可以具有任意适当的格式。可选地，可以将全局页面对象的元素数组及该元素数组内的第一插件实例的样式文件通过JSON的stringify方法转化成JSON格式文件，由此得到JSON格式的页面数据。相应地，后续页面前端在需要展示页面时，可通过对该JSON格式的页面数据进行解析来获得页面中包含的页面组件及页面组件在页面中的布局位置、组件属性以及样式等，从而基于解析出的这些信息生成并展示页面。

当然，应理解，页面数据还可以为其他任意适当的格式，比如HTML格式，从而可以使页面前端更方便地实现对页面数据的加载，而后生成并展示相应页面。

为实现页面数据在不同使用方之间的共享和复用，也即一处开发多处使用，在本申请的另一个实施例中，在上述S210之后，本申请实施例提供的页面生成方法还可以包括：将页面数据上传至云端服务器，并获取页面数据在云端服务器中的存储地址，以及为页面数据分配相应的页面标识，并将页面标识和存储地址关联存储。具体应用中，页面数据的页面标识可以是页面数据的键值key。另外，可视化管理平台可将页面数据的页面标识及其存储地址关联存储于数据库中，进而使得使用方能够根据所要浏览的页面的页面标识，方便快捷地从数据库中查询获得所要展示的页面的页面数据，而后基于获取的页面数据生成并展示页面。

本申请实施例提供的页面生成方法，通过将页面组件的页面配置文件加载到页面设计区域，就能实现页面组件的页面设计的可视化展示，以便于用户进行页面设计的修改；通过在页面配置文件中指示与页面组件的组件属性信息关联的属性配置文件，进而基于属性配置文件，在属性配置区域内实现对用于配置组件属性信息的配置控件的可视化展示，以便于用户通过操作配置控件来对页面组件的组件属性信息进行配置；最后，基于页面设计区域内的页面组件及其组件属性信息，生成用于生成页面的页面数据。这样，使得用户通过在页面设计区域加载所需页面组件的页面配置文件以及在页面设计区域内加载该页面组件关联的属性配置文件并对展示的配置控件进行操作，就能实现页面新功能的及时更新迭代和增加，而无需进行多处代码的重新开发、打包封装及发版上线，因而实施起来更灵活、更简单，不仅能够提高页面生成效率，还能够满足多样性的页面生成需求。

请参考图3，为本申请的一个实施例提供的一种页面展示方法的流程示意图，该页面展示方法可应用于页面前端，比如图1所示的页面前端13。如图3所示，该方法可以包括如下步骤：

S302，接收对目标页面的展示请求。

具体应用中，用户可通过向页面前端输入目标页面的页面链接(UniformResource Locator，URL)触发对目标页面的展示请求。

S304，基于展示请求，获取待展示的目标页面的页面数据。

其中，页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成的。页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在页面设计区域内的。配置控件所配置的页面组件的组件属性信息是基于对配置控件的操作确定的。属性配置区域内的配置控件是基于页面配置文件中记录的属性配置文件生成的。

在一种可选的实现方式中，上述S304可以包括如下步骤：

步骤D1，解析该展示请求中携带的页面链接，得到用于生成目标页面的页面数据的目标页面标识。

步骤D2，获取与目标页面标识关联的目标存储地址，并基于目标存储地址从云端服务器获取目标页面的页面数据。

具体而言，前端页面通过对获取的页面可根据页面链接内的搜索(search)参数获取到页面的页面标识，然后根据页面标识调用接口获取到存储在数据库中的页面数据的存储地址。

其中，云端服务器中存储有不同页面对应的页面数据，不同页面对应的页面数据的页面标识与页面数据在云端服务器中的存储地址关联。

本申请实施例在此示出了上述步骤S304的一种具体实现方式。当然，应理解，步骤S304也可以采用其它的方式实现，本申请实施例对此不作限制。

S306，基于目标页面的页面数据，生成并展示目标页面。

在一种可选的实现方式中，目标页面的页面数据是在预设界面构建框架下生成的，在此情况下，上述S306可以包括：

步骤E1，解析目标页面的页面数据，得到目标页面的元素数组及元素数组内的第一插件实例的样式文件。

页面前端可以将目标页面的页面数据转化成全局页面对象，由此得到该全局页面对象的元素数组并循环遍历该元素数组，获得该元素数组内的第一插件实例的样式文件。

步骤E2，基于得到的样式文件，确定目标页面包含的目标页面组件的组件属性信息、页面配置文件的标识信息及目标页面组件在目标页面中的布局位置。

通过对第一插件实例的样式文件进行解析，即可得到目标页面组件的组件属性信息、页面配置文件的标识信息及目标页面组件在目标页面中的布局位置。

步骤E3，基于目标页面组件的页面配置文件的标识信息，获取目标页面组件的页面配置文件。

步骤E4，基于目标页面组件的页面配置文件中记录的页面设计相关信息、目标页面组件在目标页面中的布局位置以及目标页面组件的组件属性信息，展示目标页面组件。

进一步地，页面前端通过解析页面配置文件，可获得目标页面组件的页面设计相关信息，进一步基于目标页面组件的页面设计相关信息、目标页面组件在目标页面中的布局位置以及目标页面组件的组件属性信息，展示目标页面组件。

本申请实施例在此示出了上述步骤S306的一种具体实现方式。当然，应理解，步骤S306也可以采用其它的方式实现，本申请实施例对此不作限制。

本申请实施例提供的页面展示方法，页面前端在需要展示页面时，通过获取所要展示页面的页面数据，即可生成并展示该页面，而不需要再在页面前端重新进行页面相关代码的开发、打包封装及发版上线，因而提高了页面展示。另外，页面的页面数据是基于本申请实施例提供的页面生成方法得到的，在需要上线页面新功能时，仅需在可视化管理平台的页面设计区域内加载所需页面组件的页面配置文件以及在页面设计区域内加载该页面组件关联的属性配置文件并对展示的配置控件进行操作以生成新的页面数据，页面前端获取新的页面数据即可实现页面新功能的上线展示，而无需等待页面开发人员进行多处代码的重新开发、打包封装及发版上线，因而实施起来更灵活、更简单，不仅进一步提高了页面展示效率，还能够满足多样性的、实时的页面展示需求。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

与上述图2所示的页面生成方法相对应地，本申请实施例还提供一种页面生成装置。图4是本申请实施例提供的一种页面生成装置400的结构示意图，该页面生成装置400包括：

第一获取模块410，用于获取待加载至页面设计区域内的页面组件的页面配置文件，所述页面配置文件记录有页面组件的页面设计相关信息和与所述页面组件关联的属性配置文件，所述属性配置文件用于生成配置页面组件的组件属性信息的配置控件；

第一展示模块420，用于基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内；

第二展示模块430，用于基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内；

第一确定模块440，用于基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息；

第一生成模块450，用于基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成用于生成页面的页面数据。

本申请实施例提供的页面生成装置，通过将页面组件的页面配置文件加载到页面设计区域，就能实现页面组件的页面设计的可视化展示，以便于用户进行页面设计的修改；通过在页面配置文件中指示与页面组件的组件属性信息关联的属性配置文件，进而基于属性配置文件，在属性配置区域内实现对用于配置组件属性信息的配置控件的可视化展示，以便于用户通过操作配置控件来对页面组件的组件属性信息进行配置；最后，基于页面设计区域内的页面组件及其组件属性信息，生成用于生成页面的页面数据。这样，使得用户通过在页面设计区域加载所需页面组件的页面配置文件以及在页面设计区域内加载该页面组件关联的属性配置文件并对展示的配置控件进行操作，就能实现页面新功能的及时更新迭代和增加，而无需进行多处代码的重新开发、打包封装及发版上线，因而实施起来更灵活、更简单，不仅能够提高页面生成效率，还能够满足多样性的页面生成需求。

可选地，所述第一展示模块包括：

第一实例生成子模块，用于基于所述页面组件的页面设计相关信息，生成第一界面构建框架实例；

第一扩展子模块，用于基于预设构造函数，将所述第一界面构建框架实例扩展为所述页面组件对应的第一插件；

第一展示子模块，用于基于所述第一插件生成所述页面组件并展示在所述页面设计区域内。

可选地，所述第一生成模块包括：

第一存储模块，用于将所述页面设计区域内的页面组件对应的第一插件实例存储至全局页面对象的元素数组内；

第二存储模块，用于将所述页面设计区域内的页面组件的组件属性信息、页面组件在所述页面设计区域内的布局位置以及页面组件的页面配置文件的标识信息，存储至页面组件对应的第一插件的样式文件中；

第一生成子模块，用于基于所述全局页面对象的元素数组及所述元素数组内的第一插件实例的样式文件，生成所述页面数据。

可选地，所述第二展示模块包括：

第二实例生成子模块，用于基于与所述页面组件关联的属性配置文件记录的页面设计相关信息，生成第二界面构建框架实例；

第二扩展子模块，用于基于预设构造函数，将所述第二界面构建框架实例扩展为所述配置控件对应的第二插件；

第二展示子模块，用于基于所述第二插件生成所述配置控件并展示在所述属性配置区域内。

可选地，所述页面生成装置还包括：

展示更新模块，用于在所述第一确定模块基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息之后，基于所述配置控件所配置的页面组件的组件属性信息，在所述页面设计区域内对所述所配置的页面组件的属性展示效果进行更新。

可选地，所述页面生成装置还包括：

上传模块，用于在所述第一生成模块基于所述页面设计区域内的页面组件及其组件属性信息，生成用于生成页面的页面数据之后，将所述页面数据上传至云端服务器，并获取所述页面数据在所述云端服务器中的存储地址；

关联模块，用于为所述页面数据分配相应的页面标识，并将所述页面标识和所述存储地址关联存储。

可选地，所述第一获取模块包括：

第一获取子模块，用于基于所述页面组件的页面配置文件的标识信息，从云端服务器中获取所述页面组件的页面配置文件；

所述第二展示模块包括：

第二获取子模块，用于基于所述属性配置文件的标识信息，从所述云端服务器中获取所述属性配置文件。

可选地，所述页面设计相关信息包括以下至少一种信息：页面组件的页面结构、用于生成页面组件的页面脚本、页面组件的页面样式、生成页面组件所需的资源文件。

可选地，所述属性配置文件包括配置控件的以下至少一种页面设计相关信息：配置控件的页面结构、用于生成配置控件的页面脚本、配置控件的页面样式、生成配置控件所需的资源文件。

显然，本申请实施例的页面生成装置可以作为上述图2所示的页面生成方法的执行主体，因此能够实现页面生成方法在图2所实现的功能。由于原理相同，在此不再赘述。

与上述图3所示的页面展示方法相对应地，本申请实施例还提供一种页面展示装置。图5是本申请实施例提供的一种页面展示装置500的结构示意图，该页面展示装置500包括：

接收模块510，用于接收对目标页面的展示请求；

第二获取模块520，用于基于所述展示请求，获取待展示的目标页面的页面数据，所述页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成的，所述页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在所述页面设计区域内的，所述配置控件所配置的页面组件的组件属性信息是基于对所述配置控件的操作确定的，所述属性配置区域内的配置控件是基于所述页面配置文件中记录的属性配置文件生成的；

第三展示模块530，用于基于所述目标页面的页面数据，生成并展示所述目标页面。

本申请实施例提供的页面展示装置，页面前端在需要展示页面时，通过获取所要展示页面的页面数据，即可生成并展示该页面，而不需要再在页面前端重新进行页面相关代码的开发、打包封装及发版上线，因而提高了页面展示。另外，页面的页面数据是基于本申请实施例提供的页面生成方法得到的，在需要上线页面新功能时，仅需在可视化管理平台的页面设计区域内加载所需页面组件的页面配置文件以及在页面设计区域内加载该页面组件关联的属性配置文件并对展示的配置控件进行操作以生成新的页面数据，页面前端获取新的页面数据即可实现页面新功能的上线展示，而无需等待页面开发人员进行多处代码的重新开发、打包封装及发版上线，因而实施起来更灵活、更简单，不仅进一步提高了页面展示效率，还能够满足多样性的、实时的页面展示需求。

可选地，所述第二获取模块包括：

第一解析子模块，用于解析所述展示请求中携带的页面链接，得到用于生成所述目标页面的页面数据的目标页面标识；

第三获取子模块，用于获取与所述目标页面标识关联的目标存储地址，并基于所述目标存储地址从云端服务器获取所述目标页面的页面数据，其中，所述云端服务器中存储有不同页面对应的页面数据，不同页面对应的页面数据的页面标识与页面数据在所述云端服务器中的存储地址关联。

可选地，所述第三展示模块包括：

第二解析子模块，用于解析所述目标页面的页面数据，得到所述目标页面的元素数组及元素数组内的第一插件实例的样式文件；

第一确定子模块，用于基于得到的样式文件，确定所述目标页面包含的目标页面组件的组件属性信息、页面配置文件的标识信息及所述目标页面组件在所述目标页面中的布局位置；

第四获取子模块，用于基于所述目标页面组件的页面配置文件的标识信息，获取所述目标页面组件的页面配置文件；

第三展示子模块，用于基于所述目标页面组件的页面配置文件中记录的页面设计相关信息、所述目标页面组件在所述目标页面中的布局位置以及所述目标页面组件的组件属性信息，展示所述目标页面组件。

显然，本申请实施例的页面展示装置可以作为上述图3所示的页面展示方法的执行主体，因此能够实现页面展示方法在图3所实现的功能。由于原理相同，在此不再赘述。

图6是本申请的一个实施例电子设备的结构示意图。请参考图6，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面生成装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

获取待加载至页面设计区域内的页面组件的页面配置文件，所述页面配置文件记录有页面组件的页面设计相关信息和与所述页面组件关联的属性配置文件，所述属性配置文件用于生成配置页面组件的组件属性信息的配置控件；

基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内；

基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内；

基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息；

基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成用于生成页面的页面数据。

上述如本申请图2所示实施例揭示的页面生成装置执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

该电子设备还可执行图2的方法，并实现页面生成装置在图2所示实施例的功能，本申请实施例在此不再赘述。

当然，除了软件实现方式之外，本申请的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括多个应用程序的便携式电子设备执行时，能够使该便携式电子设备执行图2所示实施例的方法，并具体用于执行以下操作：

获取待加载至页面设计区域内的页面组件的页面配置文件，所述页面配置文件记录有页面组件的页面设计相关信息和与所述页面组件关联的属性配置文件，所述属性配置文件用于生成配置页面组件的组件属性信息的配置控件；

基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内；

基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内；

基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息；

基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成用于生成页面的页面数据。

图7是本申请的一个实施例电子设备的结构示意图。请参考图7，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面展示装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

接收对目标页面的展示请求；

基于所述展示请求，获取待展示的目标页面的页面数据，所述页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成的，所述页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在所述页面设计区域内的，所述配置控件所配置的页面组件的组件属性信息是基于对所述配置控件的操作确定的，所述属性配置区域内的配置控件是基于所述页面配置文件中记录的属性配置文件生成的；

基于所述目标页面的页面数据，生成并展示所述目标页面。

上述如本申请图3所示实施例揭示的页面展示装置执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

该电子设备还可执行图3的方法，并实现页面展示装置在图3所示实施例的功能，本申请实施例在此不再赘述。

当然，除了软件实现方式之外，本申请的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括多个应用程序的便携式电子设备执行时，能够使该便携式电子设备执行图3所示实施例的方法，并具体用于执行以下操作：

接收对目标页面的展示请求；

基于所述展示请求，获取待展示的目标页面的页面数据，所述页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成的，所述页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在所述页面设计区域内的，所述配置控件所配置的页面组件的组件属性信息是基于对所述配置控件的操作确定的，所述属性配置区域内的配置控件是基于所述页面配置文件中记录的属性配置文件生成的；

基于所述目标页面的页面数据，生成并展示所述目标页面。

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

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

Claims (14)

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

获取待加载至页面设计区域内的页面组件的页面配置文件，所述页面配置文件记录有页面组件的页面设计相关信息和与所述页面组件关联的属性配置文件的标识信息，所述属性配置文件用于生成配置页面组件的组件属性信息的配置控件，所述配置控件所配置的组件属性信息包括页面组件的样式及页面内容中的至少一种，所述属性配置文件中记录有所能生成的配置控件的页面设计相关信息，所述属性配置文件的标识信息包括所述属性配置文件在云端服务器上的存储地址；

基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内；

基于所述页面组件关联的属性配置文件的标识信息，获取所述页面组件关联的属性配置文件，以及基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内；

基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息；

基于所述配置控件所配置的页面组件的组件属性信息，在所述页面设计区域内对所述所配置的页面组件的属性展示效果进行更新，所述属性展示效果包括所述页面组件的样式和/或页面内容；

基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成页面数据，并将所述页面数据上传至所述云端服务器，所述页面数据用于页面前端生成并展示页面。

2.根据权利要求1所述的方法，其特征在于，所述基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内，包括：

基于所述页面组件的页面设计相关信息，生成第一界面构建框架实例；

基于预设构造函数，将所述第一界面构建框架实例扩展为所述页面组件对应的第一插件；

基于所述第一插件生成所述页面组件并展示在所述页面设计区域内。

3.根据权利要求2所述的方法，其特征在于，所述基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成页面数据，包括：

将所述页面设计区域内的页面组件对应的第一插件实例存储至全局页面对象的元素数组内；

将所述页面设计区域内的页面组件的组件属性信息、页面组件在所述页面设计区域内的布局位置以及页面组件的页面配置文件的标识信息，存储至页面组件对应的第一插件的样式文件中；

基于所述全局页面对象的元素数组及所述元素数组内的第一插件实例的样式文件，生成所述页面数据。

4.根据权利要求1所述的方法，其特征在于，所述基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内，包括：

基于与所述页面组件关联的属性配置文件记录的页面设计相关信息，生成第二界面构建框架实例；

基于预设构造函数，将所述第二界面构建框架实例扩展为所述配置控件对应的第二插件；

基于所述第二插件生成所述配置控件并展示在所述属性配置区域内。

5.根据权利要求1所述的方法，其特征在于，在将所述页面数据上传至所述云端服务器之后，所述方法还包括：

获取所述页面数据在所述云端服务器中的存储地址；

为所述页面数据分配相应的页面标识，并将所述页面标识和所述存储地址关联存储。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述页面设计相关信息包括以下至少一种信息：页面组件的页面结构、用于生成页面组件的页面脚本、页面组件的页面样式、生成页面组件所需的资源文件。

7.根据权利要求1至5中任一项所述的方法，其特征在于，所述属性配置文件包括配置控件的以下至少一种页面设计相关信息：配置控件的页面结构、用于生成配置控件的页面脚本、配置控件的页面样式、生成配置控件所需的资源文件。

8.一种页面展示方法，其特征在于，包括：

接收对目标页面的展示请求；

基于所述展示请求，从云端服务器获取待展示的目标页面的页面数据，所述页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成并上传至所述云端服务器的，所述页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在所述页面设计区域内的，所述配置控件所配置的页面组件的组件属性信息是基于对所述配置控件的操作确定的，且所述页面设计区域内的页面组件的属性展示效果基于所述配置控件所配置的页面组件的组件属性信息被更新，所述页面组件的属性展示效果包括所述页面组件的样式和/或页面内容，所述页面配置文件还记录有与所述页面组件关联的属性配置文件的标识信息，所述属性配置文件的标识信息包括所述属性配置文件在所述云端服务器上的存储地址，所述属性配置区域内的配置控件是基于所述属性配置文件的标识信息获取到的属性配置文件生成的，所述属性配置文件用于生成与所述页面组件关联的配置控件，所述属性配置文件中记录有所能生成的配置控件的页面设计相关信息，所述配置控件所配置的组件属性信息包括页面组件的样式及页面内容中的至少一种；

基于所述目标页面的页面数据，生成并展示所述目标页面。

9.根据权利要求8所述的方法，其特征在于，所述基于所述展示请求，从云端服务器获取待展示的目标页面的页面数据，包括：

解析所述展示请求中携带的页面链接，得到用于生成所述目标页面的页面数据的目标页面标识；

获取与所述目标页面标识关联的目标存储地址，并基于所述目标存储地址从云端服务器获取所述目标页面的页面数据，其中，所述云端服务器中存储有不同页面对应的页面数据，不同页面对应的页面数据的页面标识与页面数据在所述云端服务器中的存储地址关联。

10.根据权利要求8所述的方法，其特征在于，所述基于所述目标页面的页面数据，生成并展示所述目标页面，包括：

解析所述目标页面的页面数据，得到所述目标页面的元素数组及元素数组内的第一插件实例的样式文件；

基于得到的样式文件，确定所述目标页面包含的目标页面组件的组件属性信息、页面配置文件的标识信息及所述目标页面组件在所述目标页面中的布局位置；

基于所述目标页面组件的页面配置文件的标识信息，获取所述目标页面组件的页面配置文件；

基于所述目标页面组件的页面配置文件中记录的页面设计相关信息、所述目标页面组件在所述目标页面中的布局位置以及所述目标页面组件的组件属性信息，展示所述目标页面组件。

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

第一获取模块，用于获取待加载至页面设计区域内的页面组件的页面配置文件，所述页面配置文件记录有页面组件的页面设计相关信息和与所述页面组件关联的属性配置文件的标识信息，所述属性配置文件用于生成配置页面组件的组件属性信息的配置控件，所述配置控件所配置的组件属性信息包括相关联的页面组件的样式及页面内容中的至少一种，所述属性配置文件中记录有所能生成的配置控件的页面设计相关信息，所述属性配置文件的标识信息包括所述属性配置文件在云端服务器上的存储地址；

第一展示模块，用于基于所述页面组件的页面设计相关信息，生成所述页面组件并展示在所述页面设计区域内；

第二展示模块，用于基于所述页面组件关联的属性配置文件的标识信息，获取所述页面组件关联的属性配置文件，以及基于与所述页面组件关联的属性配置文件，生成所述配置控件并展示在属性配置区域内；

第一确定模块，用于基于接收到的对所述配置控件的操作，确定所述配置控件所配置的页面组件的组件属性信息；

展示更新模块，用于基于所述配置控件所配置的页面组件的组件属性信息，在所述页面设计区域内对所述所配置的页面组件的属性展示效果进行更新，所述属性展示效果包括所述页面组件的样式和/或页面内容；

第一生成模块，用于基于所述页面设计区域内的页面组件及所述配置控件所配置的页面组件的组件属性信息，生成页面数据；

上传模块，用于将所述页面数据上传至所述云端服务器，所述页面数据用于页面前端生成并展示页面。

12.一种页面展示装置，其特征在于，包括：

接收模块，用于接收对目标页面的展示请求；

第二获取模块，用于基于所述展示请求，从云端服务器获取待展示的目标页面的页面数据，所述页面数据是基于页面设计区域内的页面组件及属性配置区域内的配置控件所配置的页面组件的组件属性信息生成并上传至所述云端服务器的，所述页面设计区域内的页面组件是基于页面组件的页面配置文件记录的页面设计相关信息生成并展示在所述页面设计区域内的，所述配置控件所配置的页面组件的组件属性信息是基于对所述配置控件的操作确定的，且所述页面设计区域内的页面组件的属性展示效果基于所述配置控件所配置的页面组件的组件属性信息被更新，所述页面组件的属性展示效果包括所述页面组件的样式和/或页面内容，所述页面配置文件还记录有与所述页面组件关联的属性配置文件的标识信息，所述属性配置文件的标识信息包括所述属性配置文件在云端服务器上的存储地址，所述属性配置区域内的配置控件是基于所述属性配置文件的标识信息获取的属性配置文件生成的，所述属性配置文件用于生成与所述页面组件关联的配置控件，所述属性配置文件中记录有所能生成的配置控件的页面设计相关信息，所述配置控件所配置的组件属性信息包括相关联的页面组件的样式及页面内容中的至少一种；

第三展示模块，用于基于所述目标页面的页面数据，生成并展示所述目标页面。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至10中任一项所述的方法。

14.一种计算机可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至10中任一项所述的方法。

Images