CN110489116A - 一种页面的渲染方法、装置及计算机存储介质 - Google Patents

Abstract

本申请实施方式公开了一种页面的渲染方法、装置及计算机存储介质，其中，所述方法包括：获取目标页面的配置文件，所述目标页面中包括至少一个可视化组件，所述配置文件中包括用于描述所述可视化组件的描述参数以及用于限定所述至少一个可视化组件在所述目标页面中的布局方式的布局参数；按照所述配置文件中的描述参数，渲染所述目标页面中的可视化组件，并将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示。本申请提供的技术方案，能够精准地渲染出符合预期的页面。

Description

一种页面的渲染方法、装置及计算机存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种页面的渲染方法、装置及计算机存储介质。

背景技术

随着计算机技术的不断发展，展现给用户的页面也越来越丰富。页面中通常会包含图片、文字、链接、音视频等展示资源。这些展示资源根据不同的布局方式，可以构成形形色色的页面。

目前，在渲染页面时，通常是针对数据结构描述来设计页面的配置文件。然而，基于数据结构描述的配置文件中，一种数据类型会对应多种不同的用户界面，这样很难渲染出符合用户预期的页面。

发明内容

本申请实施方式的目的是提供一种页面的渲染方法、装置及计算机存储介质，能够精准地渲染出符合预期的页面。

为实现上述目的，本申请实施方式提供一种页面的渲染方法，所述方法包括：获取目标页面的配置文件，所述目标页面中包括至少一个可视化组件，所述配置文件中包括用于描述所述可视化组件的描述参数以及用于限定所述至少一个可视化组件在所述目标页面中的布局方式的布局参数；按照所述配置文件中的描述参数，渲染所述目标页面中的可视化组件，并将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示。

为实现上述目的，本申请实施方式还提供一种计算机存储介质，其上存储有计算机程序，所述计算机程序被执行时，实现以下步骤：获取目标页面的配置文件，所述目标页面中包括至少一个可视化组件，所述配置文件中包括用于描述所述可视化组件的描述参数以及用于限定所述至少一个可视化组件在所述目标页面中的布局方式的布局参数；按照所述配置文件中的描述参数，渲染所述目标页面中的可视化组件，并将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示。

为实现上述目的，本申请实施方式还提供一种页面的渲染装置，所述页面的渲染装置中设置有上述的计算机存储介质。

由上可见，本申请提供的技术方案，可以根据想要渲染的目标页面的具体构成来编写目标页面的配置文件。具体地，待渲染的目标页面中可以包括多个可视化组件，那么该目标页面的配置文件中，可以包含用于描述各个可视化组件的描述参数，这些描述参数可以限定可视化组件的尺寸、边距、背景色、旋转角度、缩放比例、圆角半径等。此外，为了确定各个可视化组件在目标页面中所处的方位，在所述配置文件中还包括用于限定各个可视化组件在所述目标页面中的布局方式的布局参数。这样，在渲染出各个可视化组件后，可以按照所述布局参数限定的布局方式将可视化组件在目标页面中展示。由上可见，通过在配置文件中按照目标页面预期的展示效果来描述各个可视化组件，并限定各个可视化组件的布局方式，从而能够渲染出符合用户预期的目标页面。此外，如果需要在当前的目标页面中添加或者减少可视化组件，只需要在对应的配置文件中添加或者删除相应可视化组件的描述参数，并不需要对可视化组件进行额外的开发过程，从而提高了页面渲染的效率。

附图说明

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

图1为本申请实施方式中页面渲染系统的结构示意图；

图2为本申请实施方式中页面渲染的方法流程图；

图3为本申请实施方式中页面效果的展示图。

具体实施方式

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

本申请提供一种页面的渲染方法，所述方法可以应用于如图1所示的页面渲染系统中。在图1中，该页面渲染系统可以包含配置中心、后台服务器、数据库、前端渲染引擎等多个模块。其中，所述配置中心可供页面的编写人员编写待渲染的页面的配置文件，编写后的配置文件可以存储于所述配置中心内。所述后台服务器中可以包括两个功能模块，其中一个是页面数据处理模块，该模块可以用于从上述的配置中心处获取编写完成的配置文件，并将获取的配置文件提供给所述前端渲染引擎。另一个功能模块是渲染数据模块，该模块可从所述数据库中获取展示资源，并将获取的展示资源填充于对应的可视化组件内。所述数据库可以用于存储可视化组件内填充的各项展示资源，该展示资源例如可以是图片、文字、音频、视频等资源。所述前端渲染引擎可以接收所述后台服务器的页面数据处理模块发来的配置文件，并根据所述配置文件渲染出页面中的各个可视化组件，并向各个可视化组件中填充相应的展示资源，从而完成页面的渲染过程。

本申请提供的页面的渲染方法，其执行主体可以是图1中的前端渲染引擎，请参阅图2，所述方法可以包括以下步骤。

S1：获取目标页面的配置文件，所述目标页面中包括至少一个可视化组件，所述配置文件中包括用于描述所述可视化组件的描述参数以及用于限定所述至少一个可视化组件在所述目标页面中的布局方式的布局参数。

在本实施方式中，所述目标页面可以是待渲染的页面，在渲染所述目标页面之前，开发者可以预先构思出目标页面中包含的各个可视化组件。这些可视化组件例如可以是展示图片的坑位、展示文字的矩形框、展示视频资源的播放界面等。在确定了构成目标页面的各个可视化组件之后，开发者可以在配置中心编写该目标页面的配置文件。在所述配置文件中，针对所述目标页面中的各个可视化组件，可以编写用于描述所述可视化组件的描述参数。具体地，所述描述参数可以描述可视化组件的尺寸，还可以描述可视化组件的边距，还可以描述可视化组件的背景色，还可以描述可视化组件的旋转角度，还可以描述可视化组件的缩放比例，还可以描述可视化组件的圆角半径。当然，在实际应用中，根据可视化组件的展示效果，还可以包含更多的描述参数。例如，还可以包括描述可视化组件的透明度的描述参数等。

此外，由于在目标页面中待渲染的可视化组件的数量不止一个，因此在所述配置文件中还可以包括用于限定各个可视化组件在所述目标页面中的布局方式的布局参数。具体地，所述布局参数可以描述所述目标页面的尺寸，还可以描述所述目标页面的背景色，还可以描述所述目标页面中的可视化组件的排列方式。需要说明的是，本申请中的目标页面，可以指用户看到的整个页面，也可以指用户看到的页面中的一部分区域。例如，向用户展示的页面可以预先划分为3个区域，那么每个区域均可以作为一个目标页面。每个目标页面可以限定展示于自身区域内的各个可视化组件的布局方式。

在一个实际应用示例中，所述配置文件可以是XML(eXtensible MarkupLanguage，可扩展标记语言)文件，在所述XML文件中，可以包含指定数量的基础组件，这些基础组件可以是代码编写人员预先编辑的组件。这些基础组件可以对应于所述目标页面中的可视化组件或所述目标页面的布局方式。例如，所述XML文件中可以包括YKImageView、DFrameLayout、DLinearLayout以及DTextView这四个基础组件，其中，YKImageView可以对应于目标页面中的图像组件，DFrameLayout和DLinearLayout可以对应于目标页面的布局方式，DTextView可以对应于目标页面的文字组件。这样，通过这些基础组件，可以描述目标页面中的展示元素以及各个展示元素的布局方式。由上可见，在所述配置文件中，基础组件通常会具备各自的组件标识，这些组件标识可以被代码编写人员直接引用。例如，上述的YKImageView、DFrameLayout、DLinearLayout以及DTextView便可以是四个基础组件的组件标识。

在本应用示例中，所述基础组件中可以包括表征所述描述参数的属性或者表征所述布局参数的属性。根据基础组件类型的不同，其包含的属性种类也可以不同。例如，对于YKImageView和DTextView这两个基础组件而言，其中可以包含dinamic:dWidth(宽)、dinamic:dHeight(高)、dinamic:dMarginLeft(左边距)、dinamic:dMarginRight(右边距)、dinamic:dCornerRadius(圆角半径)、dinamic:ykScaleType(缩放比例)、dinamic:ykImageUrl(资源标识)、dinamic:onTap(触发事件)、dinamic:onClick(触发事件)、dinamic:dBackgroundColor(背景色)、dinamic:dOrientation(旋转角度)等属性。而对于DFrameLayout和DLinearLayout这两个基础组件，可以包含dinamic:dWidth(宽)、dinamic:dHeight(高)、dinamic:dBackgroundColor(背景色)、dinamic:useMetaData(是否填充元数据)等属性。其中，同样的属性在不同的基础组件中，可以具备不同的含义。例如，对于dinamic:dWidth(宽)而言，在YKImageView和DTextView中表征的是图像或者文字所处区域的宽，而在DFrameLayout和DLinearLayout中则表征所述目标页面的宽。

举例来说，XML文件中的部分伪代码可以如下所示：

<YKImageView

dinamic:dWidth＝"match_parent"

dinamic:dHeight＝"match_parent"

dinamic:dMarginLeft＝"12np"

dinamic:dMarginRight＝"12np"

dinamic:dCornerRadius＝"2np"

dinamic:ykScaleType＝"centerCrop"

dinamic:ykImageUrl＝"$data{item.1.img}"

dinamic:onTap＝"ykaction($data{item.1})"

dinamic:onClick＝"myaction($data{item.1})"

dinamic:dBackgroundColor＝"#4fdfcc"/>

上述的伪代码示出的是图像的基础组件。在该图像的基础组件中，限定了图像的宽、高、左边距、右边距、圆角半径、缩放比例、图像的下载地址、不同终端上用户点击触发的事件以及背景色。

当然，上述例举的基础组件和各自包含的属性只是为了便于阐述本实施方式中的技术方案，并不代表本实施方式中的基础组件和属性仅限以上例举出的内容。本领域技术人员应当知晓，在理解本实施方式中技术方案的精髓的情况下，可以增加更多的基础组件和属性，或者可以仅取用其中的一部分基础组件和属性，但这些实现方式均应当属于本申请的保护范围。

在本实施方式中，当配置中心中的配置文件编写完成后，可以通过后台服务器的页面数据处理模块获取到编写完成的配置文件，并将该配置文件发送至前端渲染引擎。这样，前端渲染引擎便可以获取到所述目标页面的配置文件。

S3：按照所述配置文件中的描述参数，渲染所述目标页面中的可视化组件，并将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示。

在本实施方式中，前端渲染引擎在获取到目标页面的配置文件之后，可以逐个解析配置文件中的各个基础组件，从而可以确定各个基础组件中包含的属性，以及各个属性的属性值。然后，前端渲染引擎可以按照解析出的属性值依次渲染出各个可视化组件，并按照基础组件中限定的布局方式将渲染出的可视化组件按序排列，最终便可以完成目标页面的渲染过程。

在一个实施方式中，当目标页面展示给用户后，用户可能会与目标页面中的部分可视化组件进行互动。例如，用户可以点击某个坑位中展示的图像，或者点击某条链接。为了响应用户的操作，在所述目标页面的配置文件中可以针对可视化组件编写与可视化组件相关联的响应事件，该响应事件可以通过描述参数描述。例如，表征响应事件的描述参数可以是dinamic:onTap、dinamic:onClick。由于当前终端设备种类繁多，用户与不同的终端设备进行交互的方式也可能不同，从而导致响应事件的类型也不同。在本实施方式中，可以在描述参数中限定响应事件的类型。例如，上述的dinamic:onTap可以是针对触摸屏的终端设备设计的描述参数，其表征的响应事件的类型为用户在触摸屏上点击。而dinamic:onClick则可以是针对具备外部输入设备(例如触控笔、鼠标等)的终端设备设计的描述参数，其表征的响应事件的类型为用户通过外部输入设备在终端设备的界面中点击。

在本实施方式中，为了响应用户的操作，在表征响应事件的描述参数中还可以包括所述响应事件被触发后对应的执行动作。所述执行动作可以根据实际需求进行灵活设置。例如，所述执行动作可以是页面跳转，也可以是在当前页面中弹出浮层。这样，在将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示之后，可以接收用户针对所述目标页面中的目标可视化组件下达的操作指令，该操作指令可以被前端渲染引擎接收到，然后，前端渲染引擎可以对操作指令的类型进行判断，当所述操作指令的类型与配置文件中所述目标可视化组件关联的响应事件的类型一致时，则可以执行所述目标可视化组件关联的响应事件对应的执行动作，并展示所述执行动作对应的执行结果。例如，请参阅图3，在一个应用示例中，某个图像关联的响应事件为用户通过手指点击该图像，并且该响应事件被触发后的执行动作为在当前页面中弹出浮层，并在浮层中展示该图像的高清大图。那么，当用户在触摸屏上点击了该图像之后，前端渲染引擎可以在当前页面中渲染出浮层，并获取到该图像的高清大图，并将获取的高清大图填充于渲染出的浮层内。

在一个实施方式中，可视化组件中通常需要填充相应的展示资源，所述展示资源例如可以是图像、文字、视频等。若需要展示的资源数据量较小，可以直接在配置文件的描述参数中携带对应的待填充的资源。例如，可以将待填充的文字信息直接编写于配置文件的描述参数中。若需要展示的资源数据量较大，那么通常会在配置文件的描述参数中注明展示资源的标识，通过该标识，可以从服务器或者数据库中获取到对应的展示资源。在实际应用中，用于注明图像标识的描述参数可以是dinamic:ykImageUrl。在该描述参数中，可以注明图像的URL(Uniform Resource Locator，同一资源标识)，当需要在渲染出的可视化组件中填充图像时，可以根据该URL，从服务器或者数据库中获取对应的图像，并将图像填充于渲染出的可视化组件内。也就是说，若可视化组件的描述参数中包含待填充的资源或者包含表征待填充的资源的资源标识，在渲染出所述可视化组件后，可以将所述描述参数中包含的资源填充于渲染出的所述可视化组件内，或者按照所述表征待填充的资源的资源标识获取到对应的资源后，将获取的所述资源填充于渲染出的所述可视化组件内。

在一个实施方式中，目标页面中的某些可视化组件，其中展示的资源可能并非是固定不变的，而是可能随着时间的不同或者观看页面的用户的不同，展示不同的资源。例如，在视频播放网站的首页中可以存在多个坑位，这些坑位可以展示近期比较热门的影视剧的封面。这样，如果将这些坑位与指定的URL相绑定，那么便无法灵活地调整坑位中展示的信息。在这种情况下，可以通过填充元数据的方式，来实现可视化组件中展示内容的动态调节。具体地，所述目标页面的布局参数可以限定所述目标页面中的可视化组件是否填充指定路径下的元数据(metadata)，其中，所述指定路径下的元数据可以根据需求发生更改，因此，尽管与可视化组件绑定的指定路径不发生变化，但是从该指定路径下获取到的元数据却可能发生变化，因此，填充了元数据的可视化组件展示的内容也会发生变化。如果布局参数限定可视化组件能够填充指定路径下的元数据，那么在前端渲染引擎在渲染所述目标页面中的可视化组件时，可以从所述指定路径下读取当前的元数据，读取的所述元数据的数量与所述目标页面中可视化组件的数量对应一致，这样，每个可视化组件便可以具备各自待填充的元数据。然后，前端渲染引擎可以将从所述指定路径下读取的所述元数据填充于所述目标页面的可视化组件中。在填充所述元数据时，可以按照元数据的排列顺序，将读取的元数据依次填充于各个可视化组件中。此外，所述元数据中还可以携带表征可视化组件的标识，那么在获取到元数据后，可以将元数据填充于携带的标识指向的可视化组件中。通过对指定路径下的元数据的更新，从而可以在不改变配置文件的情况下，实现展示内容的动态调节。

在一个实施方式中，除了所述配置文件中预先编辑的多个基础组件之外，在实际应用过程中，编程人员还可以根据需要，在所述配置文件中创建自定义基础组件。例如，可以创建用于展示视频和音频的自定义基础组件。在创建了该自定义基础组件之后，为了使得前端渲染引擎能够正常识别，还需要为所述自定义基础组件指定自定义组件标识和所述自定义基础组件的渲染方式，其中，所述自定义组件标识可以与已经存在的基础组件的组件标识类似，但不能与已经存在的组件标识重复。例如，针对展示视频的自定义基础组件而言，其对应的组件标识例如可以是YKVideoView。在指定了自定义基础组件的组件标识之后，还需要对其中的描述参数的形式进行限定。在实际应用中，可以沿用当前已经存在的一些描述参数，例如，dinamic:dWidth(宽)、dinamic:dHeight(高)、dinamic:dMarginLeft(左边距)、dinamic:dMarginRight(右边距)等。当然，针对自定义基础组件，还可以定义一些自身特有的描述参数，只不过这些描述参数需要与已经存在的描述参数进行区分。这样，为自定义基础组件指定的描述参数便可以限定它的渲染方式，前端渲染引擎在识别这些描述参数时，可以正确渲染出自定义基础组件。

本申请还提供一种计算机存储介质，其上存储有计算机程序，所述计算机程序被执行时，实现以下步骤：

S1：获取目标页面的配置文件，所述目标页面中包括至少一个可视化组件，所述配置文件中包括用于描述所述可视化组件的描述参数以及用于限定所述至少一个可视化组件在所述目标页面中的布局方式的布局参数；

S3：按照所述配置文件中的描述参数，渲染所述目标页面中的可视化组件，并将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示。

在一个实施方式中，所述描述参数用于描述可视化组件关联的响应事件，所述描述参数中包括响应事件的类型以及所述响应事件被触发后对应的执行动作；相应地，所述计算机程序被执行时，还实现以下步骤：

接收用户针对所述目标页面中的目标可视化组件下达的操作指令，当所述操作指令的类型与所述目标可视化组件关联的响应事件的类型一致时，执行所述目标可视化组件关联的响应事件对应的执行动作，并展示所述执行动作对应的执行结果。

在一个实施方式中，所述描述参数用于描述填充于所述可视化组件中的资源，所述描述参数中包括待填充的资源或者表征所述待填充的资源的资源标识；相应地，所述计算机程序被执行时，还实现以下步骤：

若可视化组件的描述参数中包含待填充的资源或者包含表征待填充的资源的资源标识，在渲染出所述可视化组件后，将所述描述参数中包含的资源填充于渲染出的所述可视化组件内，或者按照所述表征待填充的资源的资源标识获取到对应的资源后，将获取的所述资源填充于渲染出的所述可视化组件内。

在一个实施方式中，所述布局参数用于限定所述目标页面中的可视化组件是否填充指定路径下的元数据；相应地，所述计算机程序被执行时，还实现以下步骤：

从所述指定路径下读取当前的元数据，所述元数据的数量与所述目标页面中可视化组件的数量对应一致；

将从所述指定路径下读取的所述元数据填充于所述目标页面的可视化组件中。

在本申请中，所述计算机存储介质可以包括用于存储信息的物理装置，通常是将信息数字化后再以利用电、磁或者光学等方法的媒体加以存储。本实施方式所述的计算机存储介质又可以包括：利用电能方式存储信息的装置，如RAM、ROM等；利用磁能方式存储信息的装置，如硬盘、软盘、磁带、磁芯存储器、磁泡存储器、U盘；利用光学方式存储信息的装置，如CD或DVD。当然，还有其他方式的存储器，例如量子存储器、石墨烯存储器等等。

本申请还提供一种页面的渲染装置，所述页面的渲染装置中设置有上述的计算机存储介质。

本说明书实施方式提供的计算机存储介质以及页面的渲染装置，其实现的具体功能，可以与本说明书中的前述实施方式相对照解释，并能够达到前述实施方式的技术效果，这里便不再赘述。

由上可见，本申请提供的技术方案，可以根据想要渲染的目标页面的具体构成来编写目标页面的配置文件。具体地，待渲染的目标页面中可以包括多个可视化组件，那么该目标页面的配置文件中，可以包含用于描述各个可视化组件的描述参数，这些描述参数可以限定可视化组件的尺寸、边距、背景色、旋转角度、缩放比例、圆角半径等。此外，为了确定各个可视化组件在目标页面中所处的方位，在所述配置文件中还包括用于限定各个可视化组件在所述目标页面中的布局方式的布局参数。这样，在渲染出各个可视化组件后，可以按照所述布局参数限定的布局方式将可视化组件在目标页面中展示。由上可见，通过在配置文件中按照目标页面预期的展示效果来描述各个可视化组件，并限定各个可视化组件的布局方式，从而能够渲染出符合用户预期的目标页面。此外，如果需要在当前的目标页面中添加或者减少可视化组件，只需要在对应的配置文件中添加或者删除相应可视化组件的描述参数，并不需要对可视化组件进行额外的开发过程，从而提高了页面渲染的效率。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog2。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现前端渲染引擎以外，完全可以通过将方法步骤进行逻辑编程来使得前端渲染引擎以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种前端渲染引擎可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施方式或者实施方式的某些部分所述的方法。

本说明书中的各个实施方式均采用递进的方式描述，各个实施方式之间相同相似的部分互相参见即可，每个实施方式重点说明的都是与其他实施方式的不同之处。尤其，针对计算机存储介质和装置的实施方式来说，均可以参照前述方法的实施方式的介绍对照解释。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

虽然通过实施方式描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。

Claims (15)

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

获取目标页面的配置文件，所述目标页面中包括至少一个可视化组件，所述配置文件中包括用于描述所述可视化组件的描述参数以及用于限定所述至少一个可视化组件在所述目标页面中的布局方式的布局参数；

按照所述配置文件中的描述参数，渲染所述目标页面中的可视化组件，并将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示。

2.根据权利要求1所述的方法，其特征在于，所述描述参数包括以下至少一种：

用于描述可视化组件的尺寸的描述参数；

用于描述可视化组件的边距的描述参数；

用于描述可视化组件的背景色的描述参数；

用于描述可视化组件的旋转角度的描述参数；

用于描述可视化组件的缩放比例的描述参数；

用于描述可视化组件的圆角半径的描述参数。

3.根据权利要求1所述的方法，其特征在于，所述布局参数包括以下至少一种：

用于描述所述目标页面的尺寸的布局参数；

用于描述所述目标页面的背景色的布局参数；

用于描述所述目标页面中的可视化组件的排列方式的布局参数。

4.根据权利要求1所述的方法，其特征在于，所述描述参数用于描述可视化组件关联的响应事件，所述描述参数中包括响应事件的类型以及所述响应事件被触发后对应的执行动作。

5.根据权利要求4所述的方法，其特征在于，在将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示之后，所述方法还包括：

接收用户针对所述目标页面中的目标可视化组件下达的操作指令，当所述操作指令的类型与所述目标可视化组件关联的响应事件的类型一致时，执行所述目标可视化组件关联的响应事件对应的执行动作，并展示所述执行动作对应的执行结果。

6.根据权利要求1所述的方法，其特征在于，所述描述参数用于描述填充于所述可视化组件中的资源，所述描述参数中包括待填充的资源或者表征所述待填充的资源的资源标识。

7.根据权利要求6所述的方法，其特征在于，在渲染所述目标页面中的可视化组件时，所述方法还包括：

若可视化组件的描述参数中包含待填充的资源或者包含表征待填充的资源的资源标识，在渲染出所述可视化组件后，将所述描述参数中包含的资源填充于渲染出的所述可视化组件内，或者按照所述表征待填充的资源的资源标识获取到对应的资源后，将获取的所述资源填充于渲染出的所述可视化组件内。

8.根据权利要求1所述的方法，其特征在于，所述布局参数用于限定所述目标页面中的可视化组件是否填充指定路径下的元数据；相应地，在渲染所述目标页面中的可视化组件时，所述方法还包括：

从所述指定路径下读取当前的元数据，所述元数据的数量与所述目标页面中可视化组件的数量对应一致；

将从所述指定路径下读取的所述元数据填充于所述目标页面的可视化组件中。

9.根据权利要求1所述的方法，其特征在于，所述配置文件中包括指定数量的基础组件，所述基础组件对应于所述目标页面中的可视化组件或所述目标页面的布局方式，并且所述基础组件具备各自的组件标识；相应地，所述基础组件中包括表征所述描述参数的属性或者表征所述布局参数的属性。

10.根据权利要求9所述的方法，其特征在于，所述方法还包括：

在所述配置文件中创建自定义基础组件，并为所述自定义基础组件指定自定义组件标识和所述自定义基础组件的渲染方式。

11.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被执行时，实现以下步骤：

获取目标页面的配置文件，所述目标页面中包括至少一个可视化组件，所述配置文件中包括用于描述所述可视化组件的描述参数以及用于限定所述至少一个可视化组件在所述目标页面中的布局方式的布局参数；

按照所述配置文件中的描述参数，渲染所述目标页面中的可视化组件，并将渲染出的所述可视化组件按照所述布局参数限定的布局方式在所述目标页面中展示。

12.根据权利要求11所述的计算机存储介质，其特征在于，所述描述参数用于描述可视化组件关联的响应事件，所述描述参数中包括响应事件的类型以及所述响应事件被触发后对应的执行动作；相应地，所述计算机程序被执行时，还实现以下步骤：

接收用户针对所述目标页面中的目标可视化组件下达的操作指令，当所述操作指令的类型与所述目标可视化组件关联的响应事件的类型一致时，执行所述目标可视化组件关联的响应事件对应的执行动作，并展示所述执行动作对应的执行结果。

13.根据权利要求11所述的计算机存储介质，其特征在于，所述描述参数用于描述填充于所述可视化组件中的资源，所述描述参数中包括待填充的资源或者表征所述待填充的资源的资源标识；相应地，所述计算机程序被执行时，还实现以下步骤：

若可视化组件的描述参数中包含待填充的资源或者包含表征待填充的资源的资源标识，在渲染出所述可视化组件后，将所述描述参数中包含的资源填充于渲染出的所述可视化组件内，或者按照所述表征待填充的资源的资源标识获取到对应的资源后，将获取的所述资源填充于渲染出的所述可视化组件内。

14.根据权利要求11所述的计算机存储介质，其特征在于，所述布局参数用于限定所述目标页面中的可视化组件是否填充指定路径下的元数据；相应地，所述计算机程序被执行时，还实现以下步骤：

从所述指定路径下读取当前的元数据，所述元数据的数量与所述目标页面中可视化组件的数量对应一致；

将从所述指定路径下读取的所述元数据填充于所述目标页面的可视化组件中。

15.一种页面的渲染装置，其特征在于，所述页面的渲染装置中设置有如权利要求11至14中任一所述的计算机存储介质。