页面搭建的方法及装置、存储介质及计算机设备

技术领域

本发明涉及搭建页面的技术领域，尤其涉及一种页面搭建的方法及装置、存储介质及计算机设备。

背景技术

随着智能手机的快速普及与发展，相关移动开发技术日新月异，每个人每天操作手机的时间也越来越长，对各种应用软件APP的体验要求也越来越高。而企业在对市场需求的捕获与响应也需要越来越快，越快满足用户需求越可以快速抢占市场，所以企业期望员工在开发过程中能更高效，能够尽可能的降低开发成本与开发周期。但是目前，因业务场景不同等需求，APP页面需要在不同时候有不同的展示或者响应事件不同，针对此类需求需要对相似的页面做定制化开发，那么就导致开发人员就需要对类似的需求做重复的开发，人力成本和维护成本都会相应的提高。例如，许多假日活动等需求，会在临近假日前发布版本更新，用户在没及时更新版本的情况下，会对用户及运营效果造成损失。并且业务方需梳理需求并与开发人员沟通，造成人力成本的消耗与需求实现周期延长等问题。

发明内容

基于此，有必要针对上述问题，提出一种页面搭建的方法及装置、存储介质及计算机设备，本发明目的是根据从接口获取到的排版数据将自定义控件加载到页面中并将事件绑定到自定义控件上，从而实现了更加高效地渲染控件及页面的目的。

在第一方面，本申请提供了一种页面搭建的方法，所述方法包括：

通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

输出搭建完成的页面。

可选的，所述通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段之前，包括：

接收目标样式，所述目标样式包括目标样式库版本号；

根据所述目标样式的所述目标样式库版本号对所述预设的样式库进行更新。

可选的，所述根据所述目标样式的所述目标样式库版本号对所述预设的样式库进行更新，包括：

将所述预设的样式库中的已有样式库版本号与所述目标样式库版本号进行比较；

若所述已有样式库版本号与所述目标样式库版本号不同，则根据所述目标样式对所述预设的样式库中的已有样式进行更新。

可选的，所述通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段之前，还包括：

对初始页面进行样式拆解；

从拆解后的样式中抽取出公用样式；

根据节点将所述公用样式封装成所述自定义控件，所述节点为所述初始页面中公用的最小组件块；

设置所述自定义控件的接口数据指定字段，并将所述自定义控件与所述接口数据指定字段进行绑定，所述接口数据指定字段包括封装得到所述自定义控件所使用到的公用样式的所述样式字段和所述事件字段。

可选的，所述通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段之前，还包括：

从所述初始页面中的响应事件中抽取出公用事件，并将所述公用事件进行封装得到以所述自定义控件为单位的所述事件；

将所述事件与所述接口数据指定字段进行绑定，所述接口数据指定字段包括封装得到所述自定义控件所使用到的公用样式的所述样式字段和所述事件字段。

可选的，所述排版数据还包括：自定义控件的头部是否展示、路由类型、标题、内容、图片、内外边距、圆角、边框和背景，所述输出搭建完成的页面，包括：

根据所述自定义控件的头部是否展示、路由类型、标题、内容、图片、内外边距、圆角、边框和背景，对已搭建的页面进行排版；

显示排版后的页面。

可选的，所述根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面之后，包括：

将所述页面中不需要展示的所述自定义控件保存到控件缓存集合中；

当所述页面需要显示保存到所述控件缓存集合中的所述自定义控件时，将所述控件缓存集合中的所述自定义控件获取出来复用显示。

在第二方面，本申请提供了一种页面搭建的装置，所述装置包括：

获取模块，用于通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

第一执行模块，用于根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

第二执行模块，用于根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

第三执行模块，用于根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

输出模块，用于输出搭建完成的页面。

在第三方面，本申请提供了一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如下步骤：

通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

输出搭建完成的页面。

在第四方面，本申请提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如下步骤：

通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

输出搭建完成的页面。

采用本发明实施例，具有如下有益效果：

采用本发明的一种页面搭建的方法及装置、存储介质及计算机设备，该方法包括：通过接口获取页面的排版数据，排版数据包括样式字段和事件字段，根据样式字段获取相应的自定义控件并将自定义控件加载到页面，根据样式字段从预设的样式库中获取相应的样式并将样式渲染到自定义控件上，根据事件字段获取相应的事件并将事件绑定到自定义控件上，以进行页面搭建，输出搭建完成的页面。通过从接口获取到排版数据并根据该排版数据将自定义控件加载到页面中并将相应事件绑定到自定义控件上，最终实现了页面的渲染与搭建，解决了对需要适时更新样式和事件的页面重复开发的问题，降低了页面开发成本，缩短了页面开发周期。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

其中：

图1为本申请实施例中页面搭建的方法的流程示意图；

图2为本申请图1所示实施例中页面搭建的方法的步骤101之前的追加步骤的流程示意图；

图3为本申请图1所示实施例中页面搭建的方法的步骤102之后的追加步骤的流程示意图；

图4为本申请实施例中页面搭建的装置的结构示意图；

图5为本申请实施例中计算机设备的结构框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，为本申请实施例中页面搭建的方法的流程示意图，该方法包括：

步骤101、通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

步骤102、根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

步骤103、根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

步骤104、根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

步骤105、输出搭建完成的页面。

在本申请实施例中，在需要对页面进行排版编辑时，会通过接口获取到排版数据，排版数据包括样式字段和事件字段，样式字段和事件字段都是预先设定好的唯一值。样式字段与自定义控件是一一对应的，并且样式字段与预设样式库中的样式也是一一对应的，因此就可以根据排版数据中的样式字段获取到具有相应样式字段的自定义控件并将其加载到页面中；事件字段与自定义控件是一一对应的，并且事件字段与事件也是一一对应的，其中的事件指的是当对自定义控件执行操作时，自定义控件所响应的事件，因此就可以根据排版数据中的事件字段在页面中找到具有相应事件字段的自定义控件，并将该事件与找到的自定义控件进行绑定，以使得在对自定义控件进行操作时能够使得相应的事件进行响应。最终将利用具有需求样式和需求响应事件的自定义控件搭建完成的页面输出并呈现出来。

进一步地，排版数据还包括：自定义控件的头部是否展示、路由类型、标题、内容、图片、内外边距、圆角、边框和背景，因此，步骤105还包括：根据自定义控件的头部是否展示、路由类型、标题、内容、图片、内外边距、圆角、边框和背景，对已搭建的页面进行排版，显示排版后的页面。

具体的，由于业务场景的不同需求或者假日和节日活动等的需求，页面需要呈现出不同的页面样式和响应事件，因此，就可以通过上述方法对页面进行排版编辑以得到针对不同需求定制化的页面，该方法避免了开发人员针对不同的需求对页面的重复开发，实现了基于数据驱动的页面搭建方法，简化了页面排版编辑流程，这样就节省了人力成本并且解决了开发周期时间长的问题。

在本申请实施例中，一种页面搭建的方法，该方法包括：通过接口获取页面的排版数据，排版数据包括样式字段和事件字段，根据样式字段获取相应的自定义控件并将自定义控件加载到页面，根据样式字段从预设的样式库中获取相应的样式并将样式渲染到自定义控件上，根据事件字段获取相应的事件并将事件绑定到自定义控件上，以进行页面搭建，输出搭建完成的页面。通过从接口获取到排版数据并根据该排版数据将自定义控件加载到页面中并将相应事件绑定到自定义控件上，最终实现了页面的渲染与搭建，解决了对需要适时更新样式和事件的页面重复开发的问题，降低了页面开发成本，缩短了页面开发周期。

在一种可行的实现方式中，如图2所示，为本申请图1所示实施例中页面搭建的方法的步骤101之前的追加步骤的流程示意图，包括：

步骤201、接收目标样式，所述目标样式包括目标样式库版本号；

步骤202、根据所述目标样式的所述目标样式库版本号对所述预设的样式库进行更新；

具体的，将预设的样式库中的已有样式库版本号与目标样式库版本号进行比较，若已有样式库版本号与目标样式库版本号不同，则根据目标样式对预设的样式库中的已有样式进行更新。

在本申请实施例中，预先搭建一个预设的样式库，该预设的样式库包括用于渲染搭建页面的自定义控件的全部已有样式，当针对不同的需求需要对页面中的自定义控件的样式进行更新时，开发人员不需要对页面进行重新开发，而是只需要对预设的样式库中的已有样式有针对性的进行更新就可以实现自定义控件的样式的更新以满足针对不同需求搭建页面的需要。预设的样式库中的已有样式具有已有样式库版本号，需要更新到预设的样式库中的目标样式具有目标样式库版本号，当需要对预设的样式库中的已有样式进行更新时，会相对目标样式进行接收，接收到目标样式之后，会将目标样式中的目标样式库版本号与已有样式的已有样式库版本号进行比较，若目标样式中的目标样式库版本号与已有样式的已有样式库版本号不同，则根据接收到的目标样式对预设的样式库中的已有样式进行更新，得到更新后的样式库，样式库中的每个样式都具有唯一的一个与之对应的预设的样式字段，这样就可以利用更新后的样式库中的样式对页面进行排版编辑了。

步骤203、对初始页面进行样式拆解；

步骤204、从拆解后的样式中抽取出公用样式；

步骤205、根据节点将所述公用样式封装成所述自定义控件，所述节点为所述初始页面中公用的最小组件块；

步骤206、设置所述自定义控件的接口数据指定字段，并将所述自定义控件与所述接口数据指定字段进行绑定，所述接口数据指定字段包括封装得到所述自定义控件所使用到的公用样式的所述样式字段和所述事件字段；

在本申请实施例中，在对页面进行排版编辑之前，需要对初始页面的样式进行拆解，并且从拆解后的样式中抽取出公用样式，根据得到的初始页面中公用的最小组件块即节点对公用样式进行封装，得到自定义控件。设置自定义控件的接口数据指定字段，该接口数据指定字段包括样式字段和事件字段，并将自定义控件与接口数据指定字段进行绑定，其中，样式字段与上述样式库中的样式具有的样式字段一一对应，该样式字段用于根据自定义控件的样式字段在样式库中找到具有相同样式字段的相应的样式，并实现相应的样式可以渲染到相应的自定义控件上的效果。

步骤207、从所述初始页面中的响应事件中抽取出公用事件，并将所述公用事件进行封装得到以所述自定义控件为单位的所述事件；

步骤208、将所述事件与所述接口数据指定字段进行绑定，所述接口数据指定字段包括封装得到所述自定义控件所使用到的公用样式的所述样式字段和所述事件字段。

在本申请实施例中，在对页面进行排版编辑之前，还需要抽取出初始页面中的响应事件中的公用事件，并以上述自定义控件为单位对公用事件进行封装得到相应的事件，将事件与自定义控件的接口数据指定字段进行绑定，使得每个事件都具有与自定义控件一一对应的样式字段和事件字段，这样就可以使得自定义控件、样式和事件一一对应起来，使得根据自定义控件所具有的事件字段获取到相应的事件并将该事件绑定到相应的自定义控件上。

需要说明的是，步骤201和步骤202为样式库更新的步骤，步骤203至步骤206为封装自定义控件的步骤，步骤207和步骤208为封装事件的步骤，但是步骤201至步骤208并非是每次执行步骤101至步骤105之前都要进行的步骤，步骤201至步骤202和步骤203至步骤208可以根据具体情况需要选择执行步骤201至步骤202而不执行步骤203至步骤208，或者执行步骤203至步骤208而不执行步骤201至步骤202，或者步骤201至步骤208都执行。

在本申请实施例中，通过对初始页面进行样式拆解并封装为自定义控件，根据自定义控件对初始页面中的事件进行抽取和封装，实现了自定义控件可重复利用的最大化，并且开发人员仅需通过对预设的样式库中的已有样式进行更新实现页面样式更新，使得开发人员无需根据业务场景等需求对页面做各种定制化开发，减少重复代码与重复逻辑的开发，降低人力成本与维护成本，样式动态下发，实现无感知的样式更新，避免用户手动更新页面以及未及时更新造成的体验问题；通过页面排版编辑的方法实现了简化开发流程，工作人员根据需求自行编辑页面，实现需求变动实时生效的效果。

在一种可行的实现方式中，如图3所示，为本申请图1所示实施例中页面搭建的方法的步骤102之后的追加步骤的流程示意图，包括：

步骤301、将所述页面中不需要展示的所述自定义控件保存到控件缓存集合中；

步骤302、当所述页面需要显示保存到所述控件缓存集合中的所述自定义控件时，将所述控件缓存集合中的所述自定义控件获取出来复用显示。

需要说明的是，步骤301和步骤302在步骤102之后及步骤103之前执行。

在本申请实施例中，在通过接口获取到页面的排版数据，并根据排版数据中的样式字段获取到具有相同样式字段的自定义控件并加载到页面中之后，会将不需要展示在用户浏览的当前页面中的自定义控件保存到控件缓存集合中，在用户调整到需要用到保存在控件缓存集合中的自定义控件的页面时，将需要的自定义控件从控件缓存集合中获取出来进行复用显示，达到了降低内存开销的效果。

如图4所示，为本申请实施例中页面搭建的装置的结构示意图，该装置包括：

获取模块401，用于通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

第一执行模块402，用于根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

第二执行模块403，用于根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

第三执行模块404，用于根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

输出模块405，用于输出搭建完成的页面。

在本申请实施例中，通过获取模块401从接口获取排版数据，通过第一执行模块402根据该排版数据将自定义控件加载到页面中，通过第二执行模块403获取相应样式并将相应样式渲染到相应自定义控件上，通过第三执行模块404将相应事件绑定到自定义控件上，通过输出模块405将搭建完成的页面进行输出，最终实现了页面的渲染与搭建，解决了对需要适时更新样式和事件的页面重复开发的问题，降低了页面开发成本，缩短了页面开发周期。

图5示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是终端，也可以是服务器。如图5所示，该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中，存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统，还可存储有计算机程序，该计算机程序被处理器执行时，可使得处理器实现页面搭建的方法。该内存储器中也可储存有计算机程序，该计算机程序被处理器执行时，可使得处理器执行页面搭建的方法。本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提出了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行以下步骤：

通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

输出搭建完成的页面。

在一个实施例中，提出了一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行以下步骤：

通过接口获取页面的排版数据，所述排版数据包括样式字段和事件字段；

根据所述样式字段获取相应的自定义控件并将所述自定义控件加载到页面；

根据所述样式字段从预设的样式库中获取相应的样式并将所述样式渲染到所述自定义控件上；

根据所述事件字段获取相应的事件并将所述事件绑定到所述自定义控件上，以进行页面搭建；

输出搭建完成的页面。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。