CN106202096A - 客户端页面渲染方法及装置 - Google Patents

Abstract

本申请公开了一种客户端页面渲染方法及装置，其原始布局模板仅记录所需的各个组件的键值及其位置信息，从而可以根据原始布局模板中的键值查找预先存储在客户端中对应的组件实现类，进而结合服务端发送的页面详情数据中的组件数据生成对应的组件描述项，根据各个组件描述项组成的目标布局模板执行页面渲染操作，即可得到详情信息展示页面。可见本申请中组件实现类和原始布局模板均具有可复用性和可扩展性，在需要展示新增产品时，只需要考虑新增产品对应的预设布局模板所需的组件键值和其在页面中的位置，不需要考虑如何实现该组件，降低布局模板的设计难度，也不需要开发并发布新版客户端，提高客户端的利用率，降低开发成本。

Description

客户端页面渲染方法及装置

技术领域

本申请涉及网络技术领域，尤其涉及一种客户端页面渲染方法及装置。

背景技术

随着移动通信技术的发展及手机、平板电脑等电子设备的普及，应用于电子设备的应用程序，即客户端，也越来越多，如各类购物网站提供的手机客户端。这些客户端运行时，可以与相应的服务端之间进行通信，从而将服务端提供的产品或服务信息按照一定的布局渲染为相应的展示页面，使得用户可以通过电子设备随时随地获知上述产品及服务信息。

一般的，每个版本的客户端展示产品或服务的布局模板是固定的，该布局模板规定了展示页面包括哪些展示区域，每个展示区域展示哪些数据，通过将布局模板中各个区域关联不同的数据源，渲染得到不同产品的展示页面。

但是，随着业务的扩展，服务端提供的产品类型也会相应增加，如果客户端中的布局模板不适合展示这些新增产品，则需要开发新版本的客户端，以增加适合展示新增产品的布局模板，从而导致开发成本较高。

发明内容

为克服相关技术中存在的问题，本申请提供一种客户端页面渲染方法及装置。

本申请第一方面提供一种客户端页面渲染方法；该方法包括：

接收并解析服务端发送的页面详情数据，确定目标页面的组件数据和原始布局模板；

根据键值与实现类名之间的预设第一映射查找所述原始布局模板中记录的各个组件键值对应的组件实现类；

根据所述组件实现类和组件数据生成对应的组件描述项；

汇总各个组件描述项生成目标布局模板；

根据所述目标布局模板执行渲染操作，得到目标页面的详情信息展示页面。

结合第一方面，在第一方面的第一种可行的实施方式中，在接收到所述页面详情数据前，所述客户端页面渲染方法还包括：

根据目标页面的统一资源定位符URL获取页面基本数据；

根据客户端存储的默认布局模板和页面基本数据执行渲染操作，得到目标页面的基本信息展示页面。

结合第一方面，或者第一方面的第一种可行的实施方式，在第一方面的第二种可行的实施方式中，所述确定目标页面的原始布局模板，包括：

判断对所述页面详情数据的解析结果中是否存在预设布局模板；

如果存在所述预设布局模板，则确定所述预设布局模板为原始布局模板；

如果不存在所述预设布局模板，则确定所述默认布局模板为所述原始布局模板。

结合第一方面，或者第一方面的第一种可行的实施方式，在第一方面的第三种可行的实施方式中，根据所述组件实现类和组件数据生成对应的组件描述项，包括：

根据实现类名与函数之间的预设第二映射查找所述组件实现类对应的组件翻译函数；

调用所述组件翻译函数对所述组件数据进行处理，得到对应的组件描述项。

本申请第二方面提供一种客户端页面渲染装置；该装置包括：

数据解析单元，用于接收并解析服务端发送的页面详情数据，确定目标页面的组件数据和原始布局模板；

组件类查找单元，用于根据键值与实现类名之间的预设第一映射查找所述原始布局模板中记录的各个组件键值查找对应的组件实现类；

组件翻译单元，用于根据所述组件实现类和组件数据生成对应的组件描述项；

目标模板生成单元，用于汇总各个组件描述项生成目标布局模板；

详情信息渲染单元，用于根据所述目标布局模板执行渲染操作，得到目标页面的详情信息展示页面。

结合第二方面，在第二方面的第一种可行的实施方式中，所述客户端页面渲染装置还包括：

基本信息渲染单元，用于在所述数据解析单元接收到所述页面详情数据前，根据目标页面的统一资源定位符URL获取页面基本数据，并根据客户端存储的默认布局模板和页面基本数据执行渲染操作，得到目标页面的基本信息展示页面。

结合第二方面，或者第二方面的第一种可行的实施方式，在第二方面的第二种可行的实施方式中，所述数据解析单元包括：

布局模板确定模块，用于判断对所述页面详情数据的解析结果中是否存在预设布局模板，如果存在所述预设布局模板，则确定所述预设布局模板为原始布局模板，否则确定所述默认布局模板为所述原始布局模板。

结合第二方面，或者第二方面的第一种可行的实施方式，在第二方面的第三种可行的实施方式中，所述组件翻译单元包括：

翻译函数查找模块，用于根据实现类名与函数之间的预设第二映射查找所述组件实现类对应的组件翻译函数；

组件数据处理模块，用于调用所述组件翻译函数对所述组件数据进行处理，得到对应的组件描述项。

由以上技术方案可知，本申请实施例中原始布局模板仅记录各个组件的键值及其位置信息，在执行页面渲染时再根据键值查找对应的实现类，使得同一组件对应的实现类可以复用于不同的布局模板，因此当出现新增产品时，或者针对该新增产品设计对应的预设布局模板，并将其添加在页面详情数据中返回至客户端，且设计新增产品对应的预设布局模板时只需考虑所需的组件键值和其在页面中的位置，不需要考虑如何实现该组件，从而可以降低适用于新增产品的原始布局模板的设计难度；或者针对该新增产品设计特定的新增组件，并将其组件键值和组件实现类之间的映射关系添加至客户端中，从而在不修改查询代码的前提下就可以查找调用新增组件的实现类。可见，本申请实施例可以降低布局模板的设计难度，组件和布局模板具有复用性和可扩展性，在需要展示新增产品时，不需要开发并发布新版客户端，可以提高客户端的利用率，降低开发成本。

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

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

图1是本申请实施例提供的一种客户端页面渲染方法的流程图。

图2是本申请实施例提供的一种客户端页面渲染方法的信号流图。

图3是本申请实施例提供的客户端页面渲染方法中确定原始布局模板的方法流程图。

图4是本申请实施例提供的一种客户端页面渲染装置的框图。

图5是本申请实施例提供的另一种客户端页面渲染装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

图1为本申请实施例提供的一种客户端页面渲染方法的流程图。如图1所示，该方法包括以下步骤。

S11、接收并解析服务端发送的页面详情数据，确定目标页面的组件数据和原始布局模板。

S12、根据键值与实现类名之间的预设第一映射查找所述原始布局模板中记录的各个组件键值对应的组件实现类。

S13、根据所述组件实现类和组件数据生成对应的组件描述项。

S14、汇总各个组件描述项生成目标布局模板。

S15、根据所述目标布局模板执行渲染操作，得到目标页面的详情信息展示页面。

本申请实施例采用组件化布局方式，即以组件为单位绘制展示页面，每个组件表示页面中的至少一个元素，如一张产品预览图、显示产品名称的文本框等，将不同组件相组合或者将同一组件设置于不同位置即可得到不同的布局模板。有鉴于此，本申请实施例为每种组件设置对应的键值及实现该组件的实现类，并将每种组件的键值及实现该组件的实现类之间的映射关系预先存储于客户端中；相应的，原始布局模板中只记录所需组件的键值以及各个组件在页面中的位置信息；进而客户端通过执行上述步骤S12至S14，将原始布局模板转化为目标布局模板，该目标布局模板中记录有各个组件对应的组件描述项，根据各个组件描述项执行渲染操作，即可绘制出对应的页面元素，最终得到目标页面。

由以上技术方案可知，本申请实施例中原始布局模板仅记录各个组件的键值及其位置信息，在执行页面渲染时再根据键值查找对应的实现类，使得同一组件对应的实现类可以复用于不同的布局模板，因此当出现新增产品时，或者针对该新增产品设计对应的预设布局模板，并将其添加在页面详情数据中返回至客户端，且设计新增产品对应的预设布局模板时只需考虑所需的组件键值和其在页面中的位置，不需要考虑如何实现该组件，从而可以降低适用于新增产品的原始布局模板的设计难度；或者针对该新增产品设计特定的新增组件，并将其组件键值和组件实现类之间的映射关系添加至客户端中，从而在不修改查询代码的前提下就可以查找调用新增组件的实现类。可见，本申请实施例可以降低布局模板的设计难度，组件和布局模板具有复用性和可扩展性，在需要展示新增产品时，不需要开发并发布新版客户端，进而可以提高客户端的利用率，降低开发成本。

另外，对照程序开发的三层逻辑架构，上述页面渲染方法对应的程序也可分为三个层次，自下而上分别为数据层、组件化模板翻译层和UI层；其中，上述步骤S11由数据层执行，步骤S12至S14由组件化模板翻译层执行，步骤S15由UI层执行。

在本申请一个可行的实施例中，在上述步骤S11之前，还包括如下步骤：

根据目标页面的统一资源定位符URL获取页面基本数据，并根据所述默认布局模板和页面基本数据执行渲染操作，得到目标页面的基本信息展示页面。

实际应用中，客户端从服务端获取页面详情数据，并渲染得到详情信息展示页面的过程需要一定的时间，为避免页面空白时间过长，客户端在接收到页面展示指令后，一方面向服务端发出请求，以获取对应的页面详情数据，另一方面通过分析待展示的目标页面的统一资源定位符(Uniform Resoure Locator，URL)，获取目标页面的基本信息，并根据客户端存储的默认布局模板进行渲染，得到目标页面的基本信息展示页面。其中，上述基本信息可以包括产品的名称、头图和价格等，上述渲染得到基本信息展示页面的步骤直接由UI层执行。

下面参照图2所示的信号流图对本申请提供的客户端页面渲染方法进行详细阐述。

如图2所示，在步骤S21中，客户端接收用户发送的页面展示指令；接收到该指令后，客户端一方面向服务端发送页面详情数据获取请求，即步骤S22，另一方面根据默认布局模板和目标页面的URL执行首次渲染操作，得到基本信息展示页面，即步骤S23；待服务端返回页面详情数据时，客户端接收该页面详情数据，如步骤S24；进而在步骤S25中，客户端解析上述页面详情数据，以确定目标页面的组件数据和原始布局模板，并根据该组件数据和原始布局模板执行二次渲染操作，得到目标页面的详情信息展示页面，上述二次渲染操作的具体步骤如上文步骤S12至S15所述，此处不再赘述。

可见，上述实施例中，客户端分两次执行渲染操作，其中首次渲染操作不依赖服务端返回的数据，可以在短时间内执行完毕，得到用于展示基本信息的页面，避免在得到详情信息展示页面之前页面显示窗口出现较长时间的空白，提高用户体验好感度。

在本申请另一个可行的实施例中，上述步骤S11中所述的确定目标页面的原始布局模板，可以包括如下步骤：

判断对所述页面详情数据的解析结果中是否存在预设布局模板，如果存在所述预设布局模板，则确定所述预设布局模板为原始布局模板，否则确定所述默认布局模板为所述原始布局模板。

其中，页面详情数据中，可以采用基于JavaScript语言的数据对象描述规则json(即JavaScript Object Notation)来记录预设布局模板的相关数据，也即预设布局模板相关的各个数据对象均以“名称:值”的形式进行记录，多个数据对象构成json串；相应的，如图3所示，可以通过以下步骤确定目标页面的原始布局模板：

S111、判断所述页面详情数据中是否存在json串，如果存在，则执行步骤S112，否则执行步骤S115；

S112、解析所述页面详情数据中的json串；

S113、判断所述json串是否可以成功解析，得到布局模板，如果可以成功解析，则执行步骤S114，否则执行步骤S115；

S114、将解析json串得到的布局模板标记为目标页面的原始布局模板；

S115、将客户端存储的默认布局模板标记为目标页面的原始布局模板。

由以上步骤可知，如果页面详情数据中存在json串且可以成功解析得到布局模板，则解析得到的布局模板即为预设布局模板，即页面详情数据中存在预设布局模板，故将该预设布局模板标记为目标页面的原始布局模板；如果不存在json串，或者无法成功解析json串，则判定页面详情数据中不存在预设布局模板，故将默认布局模板标记为目标页面的原始布局模板。

在本申请又一个可行的实施例中，上述步骤S13所述的根据所述组件实现类和组件数据生成对应的组件描述项，包括如下步骤：

根据实现类名与函数之间的预设第二映射查找所述组件实现类对应的组件翻译函数；

调用所述组件翻译函数对所述组件数据进行处理，得到对应的组件描述项。

由以上步骤可知，本申请实施例中客户端预先设置有两个映射表，其中一个记录有组件键值和组件实现类的类名之间的映射关系，即上述第一映射，另一个记录有组件实现类的类名与组件翻译函数之间的映射关系，即上述第二映射。客户端针对原始布局模板中的各个组件键值，分别执行如下操作得到对应的组件描述项：基于上述第一映射查找组件键值对应的组件实现类，进而基于第二映射查找组件实现类中包含的组件翻译函数，初始化该组件翻译函数，读取组件数据中的相应字段作为输入数据并运行上述组件翻译函数，得到对应的组件描述项。

上述基于映射表的查找方式，有利于实现组件的复用及扩展，即当根据产品展示需求，需要增加新的组件时，只需在两个映射表中添加相应的映射关系，即可根据新增组件的键值查找到对应的组件翻译函数，进而得到对应的组件描述项。

图4为本申请实施例提供的一种客户端页面渲染装置的结构框图。参照图4，该装置包括：数据解析单元110、组件类查找单元120、组件翻译单元130、目标模板生成单元140和详情信息渲染单元150。

该数据解析单元110被配置为，接收并解析服务端发送的页面详情数据，确定目标页面的组件数据和原始布局模板。

该组件类查找单元120被配置为，根据键值与实现类名之间的预设第一映射查找所述原始布局模板中记录的各个组件键值查找对应的组件实现类。

该组件翻译单元130被配置为，根据所述组件实现类和组件数据生成对应的组件描述项。

该目标模板生成单元140被配置为，汇总各个组件描述项生成目标布局模板。

该详情信息渲染单元150被配置为，根据所述目标布局模板执行渲染操作，得到目标页面的详情信息展示页面。

由以上技术方案可知，本申请实施例中原始布局模板仅记录各个组件的键值及其位置信息，在执行页面渲染时由组件类查找单元根据键值查找对应的实现类，使得同一组件对应的实现类可以复用于不同的布局模板，因此当出现新增产品时，或者针对该新增产品设计对应的预设布局模板，并将其添加在页面详情数据中返回至客户端，而设计新增产品对应的预设布局模板时只需考虑所需的组件键值和其在页面中的位置，不需要考虑如何实现该组件，从而可以降低适用于新增产品的原始布局模板的设计难度；或者针对该新增产品设计特定的新增组件，并将其组件键值和组件实现类之间的映射关系添加至客户端中，从而在不修改查询代码的前提下就可以查找调用新增组件的实现类。可见，本申请实施例可以降低布局模板的设计难度，组件和布局模板具有复用性和可扩展性，在需要展示新增产品时，不需要开发并发布新版客户端，进而可以提高客户端的利用率，降低开发成本。

参照图5，在本申请其他实施例中，客户端页面渲染装置还包括：基本信息渲染单元160。

该基本信息渲染单元160被配置为，在数据解析单元110接收到所述页面详情数据前，根据目标页面的统一资源定位符URL获取页面基本数据，并根据客户端存储的默认布局模板和页面基本数据执行渲染操作，得到目标页面的基本信息展示页面。

可见，本申请实施例提供的客户端页面渲染装置，在根据服务端返回的页面详情数据渲染得到详情信息展示页面前，先根据目标页面的URL及默认布局模板执行渲染操作，得到基本信息展示页面，避免在得到详情信息展示页面之前页面显示窗口出现较长时间的空白，提高用户体验好感度。

另外，对照上述数据层、组件化模板翻译层和UI层三个逻辑层，上述数据解析单元属于数据层，组件类查找单元、组件翻译单元和目标目标生成单元属于组件化模板翻译层，详情信息渲染单元及基本信息渲染单元均属于UI层。

在本申请一个可行的实施例中，上述数据解析单元110至少包括：布局模板确定模块；该布局模板确定模块被配置为，判断对所述页面详情数据的解析结果中是否存在预设布局模板，如果存在所述预设布局模板，则确定所述预设布局模板为原始布局模板，否则确定所述默认布局模板为所述原始布局模板。

基于上述布局模板确定模块，当需要展示新增产品或服务时，可以在对应的页面详情数据中设置适用于该新增产品或服务的预设布局模板，从而布局模板确定模块将给预设布局模板作为目标页面的原始布局模板，执行组件数据处理及渲染操作，得到展示效果最佳的详情信息展示页面；而对于原有产品或服务，页面详情数据中可以不设置布局模板相关的数据，从而布局模板确定模块将客户端预存的默认布局模板作为原始布局模板，由于该默认布局模板是根据原有产品及服务设计的，故对于原有产品或服务，采用默认布局模板也可以得到展示效果很好的详细信息展示页面。

在本申请另一个可行的实施例中，上述组件翻译单元130包括：翻译函数查找模块和组件数据处理模块。

其中，该翻译函数查找模块被配置为，根据实现类名与函数之间的预设第二映射查找所述组件实现类对应的组件翻译函数。

该组件数据处理模块被配置为，调用所述组件翻译函数对所述组件数据进行处理，得到对应的组件描述项。

上述基于映射表的组件实现类及组件翻译函数查找方式，有利于实现组件的复用及扩展，即当根据产品展示需求，需要增加新的组件时，只需在两个映射表中添加相应的映射关系，即可根据新增组件的键值查找到对应的组件翻译函数，进而得到对应的组件描述项。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

另外，本申请实施例还提供了一种计算机存储介质，例如可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等；该计算机存储介质中存储有程序，当所述存储介质中的程序由终端设备的处理器执行时，使得终端设备能够执行上述方法实施例中记载的客户端页面渲染方法的部分或全部步骤。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (8)

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

接收并解析服务端发送的页面详情数据，确定目标页面的组件数据和原始布局模板；

根据键值与实现类名之间的预设第一映射查找所述原始布局模板中记录的各个组件键值对应的组件实现类；

根据所述组件实现类和组件数据生成对应的组件描述项；

汇总各个组件描述项生成目标布局模板；

根据所述目标布局模板执行渲染操作，得到目标页面的详情信息展示页面。

2.根据权利要求1所述的客户端页面渲染方法，其特征在于，在接收到所述页面详情数据前，所述方法还包括：

根据目标页面的统一资源定位符URL获取页面基本数据；

根据客户端存储的默认布局模板和页面基本数据执行渲染操作，得到目标页面的基本信息展示页面。

3.根据权利要求1或2所述的客户端页面渲染方法，其特征在于，所述确定目标页面的原始布局模板，包括：

判断对所述页面详情数据的解析结果中是否存在预设布局模板；

如果存在所述预设布局模板，则确定所述预设布局模板为原始布局模板；

如果不存在所述预设布局模板，则确定所述默认布局模板为所述原始布局模板。

4.根据权利要求1或2所述的客户端页面渲染方法，其特征在于，根据所述组件实现类和组件数据生成对应的组件描述项，包括：

根据实现类名与函数之间的预设第二映射查找所述组件实现类对应的组件翻译函数；

调用所述组件翻译函数对所述组件数据进行处理，得到对应的组件描述项。

5.一种客户端页面渲染装置，其特征在于，包括：

数据解析单元，用于接收并解析服务端发送的页面详情数据，确定目标页面的组件数据和原始布局模板；

组件类查找单元，用于根据键值与实现类名之间的预设第一映射查找所述原始布局模板中记录的各个组件键值查找对应的组件实现类；

组件翻译单元，用于根据所述组件实现类和组件数据生成对应的组件描述项；

目标模板生成单元，用于汇总各个组件描述项生成目标布局模板；

详情信息渲染单元，用于根据所述目标布局模板执行渲染操作，得到目标页面的详情信息展示页面。

6.根据权利要求5所述的装置，其特征在于，还包括：

基本信息渲染单元，用于在所述数据解析单元接收到所述页面详情数据前，根据目标页面的统一资源定位符URL获取页面基本数据，并根据客户端存储的默认布局模板和页面基本数据执行渲染操作，得到目标页面的基本信息展示页面。

7.根据权利要求5或6所述的装置，其特征在于，所述数据解析单元包括：

布局模板确定模块，用于判断对所述页面详情数据的解析结果中是否存在预设布局模板，如果存在所述预设布局模板，则确定所述预设布局模板为原始布局模板，否则确定所述默认布局模板为所述原始布局模板。

8.根据权利要求5或6所述的装置，其特征在于，所述组件翻译单元包括：

翻译函数查找模块，用于根据实现类名与函数之间的预设第二映射查找所述组件实现类对应的组件翻译函数；

组件数据处理模块，用于调用所述组件翻译函数对所述组件数据进行处理，得到对应的组件描述项。