CN112100552A - 页面渲染方法、装置、设备及计算机可读存储介质 - Google Patents

Abstract

本申请提供了一种页面渲染方法、装置、设备及计算机可读存储介质；方法包括：获取页面对应的页面楼层的楼层信息，页面楼层包括：页面中原始页面元素对应的系统楼层、与原始页面元素组合构成页面的自定义页面元素所对应的业务方楼层；基于楼层信息，确定各页面楼层所对应的楼层顺序；获取系统楼层对应的数据，并创建对应业务方楼层的与系统楼层架构一致的虚拟楼层，以通过虚拟楼层获取业务方楼层对应的一组或多组数据；基于系统楼层的数据及业务方楼层的数据，按照楼层顺序分别对系统楼层及业务方楼层进行楼层渲染，得到页面。通过本申请，能够实现业务方页面和系统页面的兼容。

Description

页面渲染方法、装置、设备及计算机可读存储介质

技术领域

本申请涉及互联网技术，尤其涉及一种页面渲染方法、装置、设备及计算机可读存储介质。

背景技术

组件化是把原来耦合在一起的软件模块拆分，进行组件化的升级改造。各个组件能够突破原有环境的限制，灵活的应用服务于不同的场景。一个组件可以提供给多个业务方使用，而业务方为了适应自身的个性化需求，往往希望在原本的组件的基础上增加定制化的逻辑。

然而，业务方在对原本的组件增加定制化逻辑时，由于难以了解原本的组件内的复杂逻辑，在进行页面渲染时，往往难以实现自定义增加的定制化逻辑对应的页面与原本组件的页面的兼容，得到一个完全兼容的可供使用的组合页面。

发明内容

本申请实施例提供一种页面渲染方法、装置及计算机可读存储介质，能够实现业务方页面和系统页面的兼容。

本申请实施例的技术方案是这样实现的：

本申请实施例提供一种页面渲染方法，包括：获取页面对应的页面楼层的楼层信息，所述页面楼层包括：所述页面中原始页面元素对应的系统楼层、与所述原始页面元素组合构成所述页面的自定义页面元素所对应的业务方楼层；基于所述楼层信息，确定各所述页面楼层所对应的楼层顺序；获取所述系统楼层对应的数据，并创建对应所述业务方楼层的与所述系统楼层架构一致的虚拟楼层，以通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据；基于所述系统楼层的数据及所述业务方楼层的数据，按照所述楼层顺序分别对所述系统楼层及所述业务方楼层进行楼层渲染，得到所述页面。

本申请实施例提供一种页面渲染装置，包括：获取模块，用于获取页面对应的页面楼层的楼层信息，所述页面楼层包括：所述页面中原始页面元素对应的系统楼层、与所述原始页面元素组合构成所述页面的自定义页面元素所对应的业务方楼层；楼层顺序确定模块，用于基于所述楼层信息，确定各所述页面楼层所对应的楼层顺序；楼层创建模块，用于获取所述系统楼层对应的数据，并创建对应所述业务方楼层的与所述系统楼层架构一致的虚拟楼层，以通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据；渲染模块，用于基于所述系统楼层的数据及所述业务方楼层的数据，按照所述楼层顺序分别对所述系统楼层及所述业务方楼层进行楼层渲染，得到所述页面。

上述方案中，所述页面楼层的楼层信息包括各个页面楼层所分别对应的楼层标识；所述确定模块，还用于基于各所述页面楼层所对应的楼层标识的存储顺序，确定各所述页面楼层所对应的楼层顺序。

上述方案中，所述页面渲染装置还包括：楼层类型确定模块，用于根据各所述楼层标识，获取相应的页面楼层的类型信息；基于获取的各所述页面楼层的类型信息，确定各所述楼层标识所对应的页面楼层是系统楼层还是业务方楼层。

上述方案中，所述楼层类型确定模块，还用于获取记录有系统楼层的楼层标识的系统楼层标识列表；基于各所述页面楼层的楼层标识，查询所述系统楼层标识列表；将在所述系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为系统楼层，将未在所述系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为业务方楼层。

上述方案中，所述业务方楼层基于预定协议生成；所述楼层创建模块，还用于根据所述预定协议，通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据。

上述方案中，所述页面渲染装置还包括：缓存创建模块，用于基于所述楼层信息，创建楼层信息缓存，以通过查找所述楼层信息缓存获取页面楼层对应的数据。

上述方案中，所述页面渲染装置还包括：响应模块，用于监听所述页面，获得交互指令；根据所述交互指令对应的目标页面楼层，请求所述目标页面楼层所对应的楼层逻辑单元对所述交互指令进行响应。

本申请实施例提供一种页面渲染设备，包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令时，实现本申请实施例提供的页面渲染方法。

本申请实施例提供一种计算机可读存储介质，存储有可执行指令，用于引起处理器执行时，实现本申请实施例提供的页面渲染方法。

本申请实施例具有以下有益效果：通过获取页面对应的页面楼层的楼层信息，并基于楼层信息确定各页面楼层对应的楼层顺序，通过直接获取系统楼层的数据并按照确定的楼层顺序进行渲染，而在对业务方楼层进行渲染时，则创建一个与原始组件对应的系统楼层的架构一致的虚拟楼层，通过该虚拟楼层获取业务方楼层的一组或多组数据并进行渲染，实现了业务方楼层和系统楼层的兼容，能够得到一个完全兼容可供使用的将系统楼层和业务方楼层进行组合后的页面。

附图说明

图1是本申请实施例提供的页面渲染系统架构的一个可选的结构示意图；

图2是本申请实施例提供的页面渲染设备的一个可选的结构示意图；

图3是本申请实施例提供的页面渲染方法的一个可选的流程示意图；

图4是本申请实施例提供的页面布局的一个可选的示意图；

图5是本申请实施例提供的页面渲染方法基于图3的在步骤S103之前的步骤的一个可选的流程示意图；

图6是本申请实施例提供的页面渲染方法基于图3的在步骤S103之前的步骤的一个可选的流程示意图；

图7是本申请实施例提供的页面渲染方法基于图3的在步骤S104之后的步骤的一个可选的流程示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

在以下的描述中，所涉及的术语“第一\第二”仅仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。

1)组件(Component)是对数据和方法的简单封装。C++Builder中，一个组件就是一个从TComponent派生出来的特定对象。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。

2)页面，在万维网(WWW，World Wide Web)环境中，信息以页面形式组织，页面由语言来实现，各个页面之间建立有超文本链接以便浏览。

3)渲染，指用软件从模型生成图像的过程。模型是用严格定义的语言或者数据结构对于三维物体的描述，它包括几何、视点、纹理以及照明信息。

4)页面元素，包括：文字、图片、音频、动画、视频。其中，各页面元素需符合预定的排版要求以组成页面。

由于业务方在对原本已封装的原始组件进行逻辑功能扩展时，难以了解原始组件内部的复杂逻辑，在将自定义开发的自定义组件与原始组件进行组合后，并进行相应的页面渲染时，则很容易出现二者不兼容无法渲染得到组合后的页面的情况，因而限制了对组件的定制化需求，使得组件难以适应业务方个性化的需求。目前的对于原始组件对应的页面和业务方定制的业务方组件，在进行其相应的页面渲染时，存在难以兼容难以得到可供使用的组合页面的问题。

本申请在面对上述问题时，通过获取页面对应的页面楼层的楼层信息，并基于楼层信息确定各页面楼层对应的楼层顺序，通过直接获取系统楼层的数据并按照确定的楼层顺序进行渲染，而在对业务方楼层进行渲染时，则创建一个与原始组件对应的系统楼层的架构一致的虚拟楼层，通过该虚拟楼层获取业务方楼层的一组或多组数据并进行渲染，实现了业务方楼层和系统楼层的兼容，能够得到一个完全兼容可供使用的将系统楼层和业务方楼层进行组合后的页面。

本申请实施例提供一种页面渲染方法、装置、设备和计算机可读存储介质，能够得到一个完全兼容可供使用的组合后的页面，下面说明本申请实施例提供的页面渲染设备的示例性应用，本申请实施例提供的页面渲染设备可以实施为笔记本电脑，平板电脑，台式计算机，机顶盒，移动设备(例如，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备)等各种类型的用户终端，也可以实施为服务器。下面，将说明设备实施为终端时示例性应用。

参见图1，图1是本申请实施例提供的页面渲染系统100的一个可选的架构示意图，为实现支撑一个页面渲染应用，终端400(页面渲染设备，示例性示出了终端400-1和终端400-2)通过网络300连接服务器200，网络300可以是广域网或者局域网，又或者是二者的组合。服务器200分别连接终端400和数据库500。

其中，终端400可以获取页面渲染指令，并基于该页面渲染指令向服务器200请求该页面渲染指令所指定的页面对应的页面数据，终端400在接收到页面数据之后即可对该页面进行渲染。其中，页面数据包括页面元素，页面元素包括文字、图片、音频、动画、以及视频等。本发明实施例中，页面由多个页面楼层构成，页面数据包括各个页面楼层对应的楼层信息和数据。页面数据可以是存储于服务器200内，还可以存储于与服务器200连接的数据库500内。可以理解，任意与服务器200通信连接的终端400均可以通过网络300向服务器200请求获取页面数据，例如图示中的终端400-1和终端400-2。此外，页面数据还可以是存储于终端400中，终端200在获取到页面渲染指令时，可以直接调取本地的页面数据来对页面进行渲染。页面数据还可以存储于一外部设备内，终端200通过有线或无线的方式与该外部设备通信连接，在接收到页面渲染指令时，直接从与其通信连接的外部设备中获取页面数据，以对页面进行渲染。本申请实施例不对页面数据的存储形式和存储位置作具体限定。

终端400用于获取页面对应的页面楼层的楼层信息，页面楼层包括：页面中原始页面元素对应的系统楼层、与原始页面元素组合构成页面的自定义页面元素所对应的业务方楼层；基于楼层信息，确定各页面楼层所对应的楼层顺序；获取系统楼层对应的数据，并创建对应业务方楼层的与系统楼层架构一致的虚拟楼层，以通过虚拟楼层获取业务方楼层对应的一组或多组数据；基于系统楼层的数据及业务方楼层的数据，按照楼层顺序分别对系统楼层及业务方楼层进行楼层渲染，得到页面。其中，得到的页面在图形界面410(示例性示出了图形界面410-1和图形界面410-2)显示。

在一些实施例中，终端400可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。服务器200可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本发明实施例中不做限制。

参见图2，图2是本申请实施例提供的页面渲染设备400的结构示意图，图2所示的页面渲染设备400包括：至少一个处理器410、存储器450、至少一个网络接口420和用户接口430。页面渲染设备400中的各个组件通过总线系统440耦合在一起。可理解，总线系统440用于实现这些组件之间的连接通信。总线系统440除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图2中将各种总线都标为总线系统440。

处理器410可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。

用户接口430包括使得能够呈现媒体内容的一个或多个输出装置431，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。

存储器450可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器450上述方案中包括在物理位置上远离处理器410的一个或多个存储设备。

存储器450包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Me mory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memor y)。本申请实施例描述的存储器450旨在包括任意适合类型的存储器。

在一些实施例中，存储器450能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。

操作系统451，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；

网络通信模块452，用于经由一个或多个(有线或无线)网络接口420到达其他计算设备，示例性的网络接口420包括：蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB，Universal Serial Bus)等；

呈现模块453，用于经由一个或多个与用户接口430相关联的输出装置431(例如，显示屏、扬声器等)使得能够呈现信息(例如，用于操作外围设备和显示内容和信息的用户接口)；

输入处理模块454，用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。

在一些实施例中，本申请实施例提供的页面渲染装置可以采用软件方式实现，图2示出了存储在存储器450中的页面渲染装置455，其可以是程序和插件等形式的软件，包括以下软件模块：获取模块4551、楼层顺序确定模块4552、楼层创建模块4553、渲染模块4554、楼层类型确定模块4555、缓存创建模块4556和响应模块4557，将在下文中说明各个模块的功能。这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分。

在另一些实施例中，本申请实施例提供的页面渲染装置可以采用硬件方式实现，作为示例，本申请实施例提供的页面渲染装置可以是采用硬件译码处理器形式的处理器，其被编程以执行本申请实施例提供的页面渲染方法，例如，硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC，Application Specific IntegratedCircuit)、DSP、可编程逻辑器件(PLD，Progra mmable Logic Device)、复杂可编程逻辑器件(CPLD，Complex Programmabl e Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)或其他电子元件。

将结合本申请实施例提供的终端的示例性应用和实施，说明本申请实施例提供的页面渲染方法。

参见图3，图3是本申请实施例提供的页面渲染方法的一个可选的流程示意图，将结合图3示出的步骤进行说明。

步骤S101，获取页面对应的页面楼层的楼层信息，所述页面楼层包括：所述页面中原始页面元素对应的系统楼层、与所述原始页面元素组合构成所述页面的自定义页面元素所对应的业务方楼层；

需要说明的是，页面可以是网页页面，还可以是应用程序(APP，Application)的用户界面(UI，User Interface)等。本发明实施例中，以页面为APP的UI为例进行说明。本实施例中，APP各功能模块进行了组件化。应当理解的是，一个APP可以包括自带的原始组件，以及由业务方自定义开发的业务方组件，该业务方组件在与原始组件进行集成后，能够对该APP进行功能扩展，得到一个新的APP。该新的APP应当具有原始组件的功能，还具有业务方组件的功能。其中，原始组件和业务方组件均由该APP的控制单元进行管理。

还需要说明的是，各组件均包括独立的逻辑单元和UI单元。其中，逻辑单元用于响应基于页面的交互指令进行后台逻辑处理。UI单元用于渲染对应组件的页面楼层。各组件的UI单元渲染后组合构成APP的UI。这里，各组件的UI单元渲染得到的页面以楼层的形式进行显示。本实施例中，将组件的UI单元对应显示的页面记为页面楼层进行说明。

本实施例中，一个页面可以对应多个组件的页面楼层，通过楼层的形式将页面楼层进行组合构成一个共同的页面。其中，各页面楼层对应有各自独立的楼层页面元素，以在页面中进行独立显示。其中，页面楼层包括系统楼层和业务方楼层。系统楼层为页面中原始页面元素对应的楼层，业务方楼层为页面中自定义页面所对应的楼层。对于系统楼层，其对应的组件为包含原始页面元素的原始组件。对于业务方楼层，其对应的组件为自定义组件。

例如，图4示出了本申请实施例提供的页面布局的一个可选的示意图，其是一个购物APP的商品详情页面，该购物APP的商品详情页面包括多个系统楼层和多个业务方楼层。其中，系统楼层包括主图楼层、标题楼层和购物车楼层。业务方楼层包括必拼楼层、优惠楼层和拼团楼层。系统楼层和业务方楼层共同构成该购物APP的商品详情页面。这里，系统楼层所对应的原始组件即为购物APP原始封装的组件，而业务方楼层所对应的自定义组件则是第三方开发人员针对购物APP的原始组件进行功能扩展所开发的业务方组件。

本发明实施例中，终端可以获取对页面进行渲染的页面渲染指令。该页面渲染指令可以是用户通过操作终端生成，还可以是终端在接收到其他设备的控制指令时生成，还可以是终端在一定条件下自动生成。终端响应于页面渲染指令，获取页面对应的页面楼层的楼层信息。具体地，页面楼层的楼层信息可以存储于终端本地，终端直接调用本地的楼层信息进行获取。页面楼层的楼层信息还可以存储于与终端通信连接的服务器内，终端在获取到页面渲染指令时，向服务器发送获取页面楼层的楼层信息的请求，服务器在接收到该请求后向终端下发对应的页面楼层的楼层信息。其中，楼层信息可以是各楼层的楼层标识(ID，identifier)。例如，对于图4示出的购物APP的商品详情页面，对应的楼层信息则可以为bpMainImage、bpMustPing、bpTitle、bpDiscount、bpPingTuan、bpShoppingCart，分别对应主图楼层、必拼楼层、标题楼层、优惠楼层、拼团楼层和购物车楼层。

步骤S102，基于所述楼层信息，确定各所述页面楼层所对应的楼层顺序；

需要说明的是，业务方在对原始组件进行功能扩展开发业务方组件时，可以自定义页面的楼层顺序，通过获取各组件对应的页面楼层的楼层信息，然后对各页面楼层的楼层信息进行渲染顺序的排序，从而得到重新排序后的楼层信息。

在一实施例中，页面楼层的楼层信息包括各个页面楼层所分别对应的楼层标识，步骤S101具体包括：基于各页面楼层所对应的楼层标识的存储顺序，确定各页面楼层所对应的楼层顺序。

需要说明的是，楼层ID为指示楼层唯一身份的信息。一个页面楼层对应有一个唯一的楼层ID。本实施例中，各页面楼层所对应的楼层ID进行集中存储，存储形式可以是列表或是数组等，本实施例不对楼层ID的存储形式作具体限定。终端可以通过获取楼层ID的存储地址来确定楼层ID的存储顺序。若楼层ID为列表或数组形式存储，则楼层ID在列表或数组中的排列顺序即为楼层ID的存储顺序。进一步地，终端根据楼层ID的存储顺序，确定各页面楼层所对应的楼层顺序。具体地，终端可以是对楼层ID的实际存储顺序直接确定为各楼层I D所对应的各页面楼层在页面中进行显示的楼层顺序，还可以是通过其他规则对楼层ID的存储顺序进行转换之后，将转换之后的顺序确定为各页面楼层所对应的楼层顺序。

本实施例中，终端获取页面对应的页面楼层的楼层标识，基于楼层标识的存储顺序来确定各页面楼层所对应的楼层顺序，使得在对页面进行渲染之前，能够准确且有效快速的确定页面楼层对应的楼层顺序。

步骤S103，获取系统楼层对应的数据，并创建对应业务方楼层的与系统楼层架构一致的虚拟楼层，以通过虚拟楼层获取业务方楼层对应的一组或多组数据；

需要说明的是，终端在获取到各页面楼层的楼层顺序之后，即可依据该楼层顺序对各页面楼层进行渲染，得到有序的页面楼层所构成的页面。

本发明实施例中，页面楼层的数据包括但不限于系统楼层对应的页面元素和页面高度。在一些实施例中，页面楼层的数据还包括页面位置和页面宽度等。需要说明的是，本发明实施例的一组数据即对应一个页面楼层，本发明实施例的页面可以包括至少一个页面楼层和至少一个业务方楼层。数据数据数据数据

这里，终端在获取到原始组件对应系统楼层对应的数据时，可以依据集成有该原始组件的APP内部的逻辑，加载该数据并渲染得到系统楼层。本发明实施例不对加载该数据渲染得到系统楼层的方式作具体限定。

另外，由于业务方楼层所对应的自定义组件为业务方开发，其架构和基类可能与原始组件不一致，在自定义组件的架构与原始组件不一致时，终端则无法直接加载业务方楼层的数据渲染得到业务方楼层。为了解决这一问题，本实施例中，终端在获取到业务方楼层的一组数据时，通过集成有原始组件的APP创建一个虚拟楼层，该虚拟楼层直接继承原始组件的基类，且其架构与原始组件一致，然后通过该虚拟楼层与自定义组件进行通信，将业务方楼层的一组数据加载至该虚拟楼层内，从而对虚拟楼层进行渲染得到可视化的一个业务方楼层。在对多个业务方楼层进行数据加载和渲染时，终端对应创建多个虚拟楼层，通过多个虚拟楼层分别获取多个业务方楼层对应的多组数据。

需要说明的是，在虚拟楼层与自定义组件进行通信时，需要基于一个统一的通信协议，以使虚拟楼层能够基于该通信协议去获取自定义组件内的数据。可以理解，业务方开发的自定义组件应当基于统一的通信协议生成。本实施例中，将基于原始组件所开放定义的通信协议记为预定协议。可以理解，业务方楼层基于预定协议生成。

基于此，步骤S103中，通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据，包括：根据预定协议，通过虚拟楼层获取业务方楼层对应的一组或多组数据。

需要说明的是，业务方楼层的数据包括业务方楼层的视图和业务方楼层的高度。预定协议包括返回业务方楼层的视图的方法、返回业务方楼层的高度的方法、以及设置业务方楼层的数据的方法。对于该预定协议中各方法的具体实现可以由业务方自定义开发，只要能够提供这些方法供虚拟楼层调用以获取业务方楼层的数据即可。

因此，通过设置预定协议对业务方开发的自定义组件进行规范化，从而能够使得原始组件能够更好的兼容业务方的自定义组件，使得系统楼层和业务方楼层得以更可靠有效的串联，增强了组件的可复用性。

步骤S104，基于系统楼层的数据及业务方楼层的数据，按照楼层顺序分别对系统楼层及业务方楼层进行楼层渲染，得到页面。

可以理解的是，终端可以是在对所有页面楼层对应的数据加载完毕后，对各页面楼层进行楼层渲染，还可以是获取到一个页面楼层对应的数据后即对该页面楼层进行渲染，然后继续获取下一个页面楼层的数据，以依次对页面楼层进行顺序渲染。

需要说明的是，终端在对页面楼层的数据进行渲染时，是基于数据中的视图和楼层的高度在页面对应位置进行渲染，从而得到可视化的页面楼层。本实施例中，各页面楼层的宽度可以一致设置为终端的显示屏宽度，根据各页面楼层的楼层顺序和高度进行渲染，最终得到完整的页面。

本实施例中，通过获取页面对应的页面楼层的楼层信息，并基于楼层信息确定各页面楼层对应的楼层顺序，通过直接获取系统楼层的数据并按照确定的楼层顺序进行渲染，而在对业务方楼层进行渲染时，则创建一个与原始组件对应的系统楼层的架构一致的虚拟楼层，通过该虚拟楼层获取业务方楼层的数据并进行渲染，实现了业务方楼层和系统楼层的兼容，能够得到一个完全兼容可供使用的将系统楼层和业务方楼层进行组合后的页面。

在一些实施例中，参见图5，图5是本申请实施例提供的页面渲染方法基于图3的在步骤S103之前的步骤的一个可选的流程示意图，在步骤S103之前，还可以执行：

步骤S201，根据各楼层标识，获取相应的页面楼层的类型信息；

需要说明的是，终端在获取到各页面楼层的楼层ID后，可以根据楼层ID确定页面楼层的类型信息。页面楼层的类型包括系统楼层和业务方楼层等两种类型。本实施例中，终端可以通过查询楼层ID与对应的页面楼层的数据的对应关系，来获取楼层ID对应的页面楼层的类型信息。例如，系统楼层对应的楼层ID与对应的数据相映射的存储，而系统楼层的数据存储于原始组件的目录下，终端则可以通过该目录确定该楼层ID对应的类型信息所指示的页面楼层为系统楼层。

步骤S202，基于获取的各页面楼层的类型信息，确定各楼层标识所对应的页面楼层是系统楼层还是业务方楼层。

需要说明的是，终端基于获取的各页面的类型信息，对各楼层ID所对应的页面楼层的类型进行确定，以将所有页面楼层的类型进行区分，得到类型明确的系统楼层和业务方楼层。基于明确区分的系统楼层和业务方楼层，在进行页面楼层的数据的加载和渲染时，则可以针对性的通过不同方式进行。

当然，步骤S201和S202的执行顺序不限于图5所示。

在一些实施例中，参照图6，图6是本申请实施例提供的页面渲染方法基于图3的在步骤S103之前的步骤的一个可选的流程示意图，在步骤S103之前，还可以执行：

步骤S301，获取记录有系统楼层的楼层标识的系统楼层标识列表；

需要说明的是，系统楼层标识列表记录有页面对应的所有系统楼层的楼层ID。楼层ID在该系统楼层标识列表内的存储顺序可以是原始组件的原始楼层顺序，还可以是随机顺序。终端在需要确定页面楼层的类型时，则调用该系统楼层标识列表，获取该系列楼层标识列表记录的信息。

步骤S302，基于各页面楼层的楼层标识，查询系统楼层标识列表；

应当理解的是，记录在系统楼层标识列表内的楼层ID对应的楼层即为系统楼层。本实施例中，终端依次根据各页面楼层的楼层ID，查询系统楼层标识列表。具体地，终端在基于某一个页面楼层对应的楼层ID进行查询时，将在系统楼层标识列表内查询到的楼层ID依次与该页面楼层对应的楼层ID进行比对，若一致，则结束查询，否则继续查询系统楼层标识列表，直至将系统楼层标识列表内的楼层ID进行比对完毕。

步骤S303，将在系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为系统楼层，将未在系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为业务方楼层。

可以理解的是，若在系统楼层标识列表中查询到与页面楼层的楼层ID一致的楼层ID，则该楼层ID对应的页面楼层为系统楼层，若未在系统楼层标识列表中查询到与页面楼层的楼层ID一致的楼层ID，则该楼层ID对应的页面楼层并非系统楼层，本实施例中，将未查询到的楼层ID对应的页面楼层确定为业务方楼层。

在一些实施例中，业务方还对开发的自定义组件提供一个业务楼层标识列表，其中记录有所有自定义组件对应的业务方楼层对应的楼层ID。在步骤S303中，对于未在系统楼层标识列中查询到的页面楼层对应的楼层ID，终端还进一步查询业务楼层标识列表，若在业务楼层标识列表查询到该页面楼层对应的楼层ID，则将该页面楼层确定为业务方楼层，若在系统楼层标识列表和业务楼层标识列表中均为查询到，则将该页面楼层进行丢弃，不对进行进一步的处理。

本实施例中，通过查询记录有系统楼层对应的楼层ID的系统楼层标识列表，根据查询结果类确定未知类型的页面楼层的类型，能够十分快速有效的对所有页面楼层的类型进行确定。

当然，步骤S301、S302和S303的执行顺序不限于图6所示。

在一些实施例中，在步骤S103之前，还可以执行：基于楼层信息，创建楼层信息缓存，以通过查找楼层信息缓存获取页面楼层对应的数据。

需要说明的是，缓存(Cache)是数据交换的缓冲区，当终端要读取数据时,会首先从缓存中查找需要的数据，如果查找到则直接执行，查找不到则从内存中查找。由于缓存的运行速度比内存快很多，故而能帮助硬件更快地运行。本实施例中，楼层信息缓存内存储有楼层信息。具体地，该楼层信息可以包括页面楼层的楼层标识和页面楼层对应的数据的映射关系。楼层信息可以是列表的形式存储，例如基于图4所示的购物APP，其商品详情页面所对应的各页面楼层的楼层信息则可以是：“floors”:[{“mId”:“bpMainImage”,“data”:Object{…}}{mI d”:“bpMustPing”,“data”:Object{…}}{“mId”:“bpTitle”,“data”:Object{…}}{mId”:“bpDiscount”,“data”:Object{…}}{mId”:“bpPingTuan”,“data”:Object{…}}{mId”:“bpShoppingCart”,“data”:Object{…}}]。

本实施例中，终端在需要查找页面楼层对应的数据时，则首先根据页面楼层的楼层ID查询楼层信息缓存，若在楼层信息缓存中查找到，则直接获取并加载楼层ID对应的页面楼层的数据。若在楼层信息缓存中未查找到楼层ID，则对系统楼层标识列表和业务楼层标识列表进行查询。通过设置楼层信息缓存，提高了查找楼层ID和获取页面楼层的数据的速度。

当然，步骤S401的执行顺序不限于图7所示。

在一些实施例中，参见图7，图7是本申请实施例提供的页面渲染方法基于图3的在步骤S104之后的步骤的一个可选的流程示意图；在步骤S104之后，还可以执行：

步骤S401，监听页面，获得交互指令；

需要说明的是，终端在对页面加载完毕后，即可基于该页面向用户提供交互接口。用户可以通过点击页面来发出交互指令。终端在基于页面接收到用户的交互指令之后，则能够根据后台逻辑单元对该交互指令进行响应。本实施例中，终端对该页面的状态进行监听，当监听到点击事件后，将该点击事件转换成交互指令。

步骤S402，根据交互指令对应的目标页面楼层，请求目标页面楼层所对应的楼层逻辑单元对交互指令进行响应。

本发明实施例中，页面由各页面楼层构成，各页面楼层分别对应有独立的组件，各组件分别对应有独立的楼层逻辑单元，以处理通过该组件所对应的页面楼层触发的交互指令。终端在获取到交互指令时，获取触发该交互指令所对应的页面楼层的楼层信息，基于该页面楼层的楼层信息，将该交互指令发送至与该页面楼层对应的楼层逻辑单元，以使楼层逻辑单元对该交互指令进行响应，将响应结果返回至页面进行显示，以供用户浏览。通过页面的楼层化以及基于楼层化的页面的互相独立的逻辑处理，能够十分方便的实现对原始组件的功能扩展，而无需业务方了解原始组件的内部逻辑结构，也能够可靠的实现自定义的功能定制。

下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。

参照图1，页面为APP的用户界面，可以是APP的其中一个组件的用户界面。例如图4所示的页面，它是购物APP的商品详情组件对应的页面。页面在逻辑上被垂直划分为多个单独的业务单元，各业务单元即为对应的页面楼层。例如图4示出的主图楼层、拼购楼层、标题楼层、优惠楼层、拼团楼层和购物车楼层等。每一个页面楼层均定义有一个唯一的标识符。例如主图楼层的标识符定义为bpMainImage，标题楼层的标识符定义为bpTitle等。

本申请实施例中，页面楼层包括APP自带的系统楼层和业务方开发的业务方楼层。其中，业务方楼层基于预定协议生成。预定协议包括返回业务方楼层的视图的方法、返回业务方楼层的高度的方法、以及设置业务方楼层的数据的方法。系统楼层还对应有一个系统楼层标识列表，存储有所有系统楼层对应的楼层ID。业务方楼层也对应有一个业务楼层标识列表，存储有所有业务方楼层对应的楼层ID。此外，页面还对应有一个楼层管理单元，终端基于该楼层管理来对页面的各页面楼层进行管理。

当终端获取到页面渲染指令时，向服务器请求一个楼层标识列表。该楼层标识列表存储有页面楼层的楼层ID，包括系统楼层对应的楼层ID以及业务方楼层对应的楼层ID。且该楼层标识列表内存储的楼层ID的顺序即为对相应的页面楼层进行渲染的顺序。业务方可以在服务器内改变楼层ID在楼层标识列表内的顺序，来对页面楼层的渲染顺序进行改变。

终端在获取到楼层标识列表后，则创建一个缓存，用以存储楼层ID和对应的页面楼层的数据的映射关系。在需要查找页面楼层时，终端则查找该缓存以获取对应的楼层ID和对应的页面楼层的数据，若在缓存中查找到楼层ID，则直接获取页面楼层的数据，并创建楼层进行渲染。其中，若查找到的楼层ID对应的页面楼层为系统楼层，则直接渲染得到可视化的系统楼层。若查找到的楼层ID对应的页面楼层为业务方楼层，则创建一个虚拟楼层，基于预定协议与业务方楼层进行通信，以获取业务方楼层的数据，并进行渲染得到可视化的业务方楼层。若未在缓存中查找到该楼层ID，则继续查找系统楼层标识列表，若在系统楼层标识列表中查找到，则将该楼层ID添加至缓存中，并创建楼层并渲染。若未在系统楼层标识列表中查找到该楼层ID，则查找业务楼层标识列表，若查找到则将该楼层ID添加至缓存中，并创建虚拟楼层进行渲染。若在系统楼层标识列表和业务楼层标识列表中均未查找到该楼层ID，则将该条楼层ID进行丢弃。根据上述查找楼层ID并进行楼层渲染的过程，依次完成对楼层ID对应的页面楼层的渲染，得到页面。

下面继续说明本申请实施例提供的页面渲染装置455的实施为软件模块的示例性结构，在一些实施例中，如图2所示，存储在存储器440的页面渲染装置455中的软件模块可以包括：

获取模块4551，用于获取页面对应的页面楼层的楼层信息，所述页面楼层包括：所述页面中原始页面元素对应的系统楼层、与所述原始页面元素组合构成所述页面的自定义页面元素所对应的业务方楼层；

楼层顺序确定模块4552，用于基于所述楼层信息，确定各所述页面楼层所对应的楼层顺序；

楼层创建模块4553，用于获取所述系统楼层对应的数据，并创建对应所述业务方楼层的与所述系统楼层架构一致的虚拟楼层，以通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据；

渲染模块4554，用于基于所述系统楼层的数据及所述业务方楼层的数据，按照所述楼层顺序分别对所述系统楼层及所述业务方楼层进行楼层渲染，得到所述页面。

在本发明实施例中，所述页面楼层的楼层信息包括各个页面楼层所分别对应的楼层标识；所述确定模块4552，还用于基于各所述页面楼层所对应的楼层标识的存储顺序，确定各所述页面楼层所对应的楼层顺序。

在本发明实施例中，存储在存储器440的页面渲染装置455中的软件模块还可以包括：楼层类型确定模块4555，用于根据各所述楼层标识，获取相应的页面楼层的类型信息；基于获取的各所述页面楼层的类型信息，确定各所述楼层标识所对应的页面楼层是系统楼层还是业务方楼层。

在本发明实施例中，所述楼层类型确定模块4555，还用于获取记录有系统楼层的楼层标识的系统楼层标识列表；基于各所述页面楼层的楼层标识，查询所述系统楼层标识列表；将在所述系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为系统楼层，将未在所述系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为业务方楼层。

在本发明实施例中，所述业务方楼层基于预定协议生成；所述楼层创建模块4553，还用于根据所述预定协议，通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据。

在本发明实施例中，存储在存储器440的页面渲染装置455中的软件模块还可以包括：缓存创建模块4556，用于基于所述楼层信息，创建楼层信息缓存，以通过查找所述楼层信息缓存获取页面楼层对应的数据。

在本发明实施例中，存储在存储器440的页面渲染装置455中的软件模块还可以包括：响应模块4557，用于监听所述页面，获得交互指令；根据所述交互指令对应的目标页面楼层，请求所述目标页面楼层所对应的楼层逻辑单元对所述交互指令进行响应。

本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行本申请实施例上述的页面渲染方法。

本申请实施例提供一种存储有可执行指令的计算机可读存储介质，其中存储有可执行指令，当可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的页面渲染方法，例如，如图3示出的方法。

在一些实施例中，计算机可读存储介质可以是FRAM、ROM、PROM、EP ROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。

在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。

作为示例，可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言(H TML，Hyper TextMarkup Language)文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。

作为示例，可执行指令可被部署为在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行。

综上所述，通过本申请实施例，实现了业务方楼层和系统楼层的兼容，能够得到一个完全兼容可供使用的将系统楼层和业务方楼层进行组合后的页面。

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

Claims (10)

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

获取页面对应的页面楼层的楼层信息，所述页面楼层包括：所述页面中原始页面元素对应的系统楼层、与所述原始页面元素组合构成所述页面的自定义页面元素所对应的业务方楼层；

基于所述楼层信息，确定各所述页面楼层所对应的楼层顺序；

获取所述系统楼层对应的数据，并创建对应所述业务方楼层的与所述系统楼层架构一致的虚拟楼层，以通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据；

基于所述系统楼层的数据及所述业务方楼层的数据，按照所述楼层顺序分别对所述系统楼层及所述业务方楼层进行楼层渲染，得到所述页面。

2.根据权利要求1所述的页面渲染方法，其特征在于，所述页面楼层的楼层信息包括各个页面楼层所分别对应的楼层标识；

所述基于所述楼层信息，确定各所述页面楼层所对应的楼层顺序，包括：

基于各所述页面楼层所对应的楼层标识的存储顺序，确定各所述页面楼层所对应的楼层顺序。

3.根据权利要求1所述的页面渲染方法，其特征在于，所述方法还包括：

根据各所述楼层标识，获取相应的页面楼层的类型信息；

基于获取的各所述页面楼层的类型信息，确定各所述楼层标识所对应的页面楼层是系统楼层还是业务方楼层。

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

获取记录有系统楼层的楼层标识的系统楼层标识列表；

基于各所述页面楼层的楼层标识，查询所述系统楼层标识列表；

将在所述系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为系统楼层，将未在所述系统楼层标识列表中查询到的楼层标识所对应的页面楼层确定为业务方楼层。

5.根据权利要求1所述的页面渲染方法，其特征在于，所述业务方楼层基于预定协议生成；

所述通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据，包括：

根据所述预定协议，通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据。

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

基于所述楼层信息，创建楼层信息缓存，以通过查找所述楼层信息缓存获取页面楼层对应的数据。

7.根据权利要求1-6任一项所述的页面渲染方法，其特征在于，所述按照所述楼层顺序分别对所述系统楼层及所述业务方楼层进行楼层渲染之后，所述页面渲染方法还包括：

监听所述页面，获得交互指令；

根据所述交互指令对应的目标页面楼层，请求所述目标页面楼层所对应的楼层逻辑单元对所述交互指令进行响应。

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

获取模块，用于获取页面对应的页面楼层的楼层信息，所述页面楼层包括：所述页面中原始页面元素对应的系统楼层、与所述原始页面元素组合构成所述页面的自定义页面元素所对应的业务方楼层；

楼层顺序确定模块，用于基于所述楼层信息，确定各所述页面楼层所对应的楼层顺序；

楼层创建模块，用于获取所述系统楼层对应的数据，并创建对应所述业务方楼层的与所述系统楼层架构一致的虚拟楼层，以通过所述虚拟楼层获取所述业务方楼层对应的一组或多组数据；

渲染模块，用于基于所述系统楼层的数据及所述业务方楼层的数据，按照所述楼层顺序分别对所述系统楼层及所述业务方楼层进行楼层渲染，得到所述页面。

9.一种页面渲染设备，其特征在于，包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令时，实现权利要求1至7任一项所述的页面渲染方法。

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

Images