CN109634598B - 一种页面显示方法、装置、设备及存储介质 - Google Patents

Abstract

本公开实施例提供了一种页面显示方法、装置、设备及存储介质，该方法包括：加载待显示页面对应的采用结构化语言的页面视图描述文件；对页面视图描述文件进行解析，得到页面视图元数据，其中页面视图元数据包括待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系；根据页面视图元数据创建待显示页面的视图控件层级结构；基于获取的数据源和视图控件层级结构，进行页面的渲染和显示。通过本公开实施例的技术方案，可以提高页面配置的灵活性，实现页面显示的多样性。

Description

一种页面显示方法、装置、设备及存储介质

技术领域

本公开实施例涉及应用程序开发技术领域，尤其涉及一种页面显示方法、装置、设备及存储介质。

背景技术

在开发基于iOS操作系统的移动应用程序时，开发者通常通过两种方式来创建和配置一个页面的视图层级结构。第一种方式是原生代码方式；第二种方式是利用开发环境自带的所见即所得的视图编辑工具，比如Xcode开发环境提供的故事板(Storyboard)。

上述第一种采用原生代码方式创建页面视图的过程如下：

步骤1)：调用视图控件的创建方法创建视图实例；

步骤2)：通过视图实例配置视图的属性，诸如视图的背景颜色、前景颜色、文本字体、字号、字体颜色等；

步骤3)：将视图实例添加到父视图上；

步骤4)：重复步骤1)～步骤3)，创建并添加其它子视图；

步骤5)：对所有视图进行布局，设置其位置和大小。

上述第二种利用开发环境Xcode自带的视图编辑工具故事板(Storyboard)创建页面视图的过程如下：

步骤1)：新建故事板(Storyboard)文件；

步骤2)：打开故事板文件，从视图控件库拖拽特定的视图控件到故事板上；

步骤3)：在故事板中选中步骤2)添加的视图控件进行属性编辑，配置诸如视图的背景颜色、前景颜色、文本字体、字号、字体颜色等属性；

步骤4)：重复步骤2)和步骤3)，添加其它子视图控件；

步骤5)：使用故事板提供的布局工具，比如自动相对布局或者位置绝对布局方式，对页面里所有视图进行布局。

从页面视图的创建过程可以看出：两种常用的iOS页面视图创建方式都需要开发者做重复性的操作，比如创建子视图、配置子视图属性、添加子视图、子视图布局等，使得在利用上述方式开发具有复杂页面和页面繁多的移动应用时，大大降低了开发效率。而且这两种iOS页面视图的创建方式也会影响应用程序的编译速度，比如在应用程序视图调优阶段，需要反复修改视图的属性来达到视觉设计要求，在一个业务复杂的移动应用程序里更改几行代码后都会导致增量编译，从而降低了开发和调试效率。此外当视图进行重新渲染时，需要重新计算布局参数，对于复杂页面或者对滑动性能要求比较高的页面而言，由于布局参数的计算比较耗时，导致视图渲染的效率较低，大大影响了用户的使用体验。

然而，在显示创建的页面视图时，客户端按照固化在代码中的视图属性和层级结构进行页面的渲染和显示，使得显示效果单一，缺乏灵活性。

发明内容

有鉴于此，本公开实施例提供了一种页面显示方法、装置、设备及存储介质，以提高页面配置的灵活性，实现页面显示的多样性。

第一方面，本公开实施例提供了一种页面显示方法，包括：

加载待显示页面对应的采用结构化语言的页面视图描述文件；

对所述页面视图描述文件进行解析，得到页面视图元数据，其中所述页面视图元数据包括所述待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，所述数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系；

根据所述页面视图元数据创建所述待显示页面的视图控件层级结构；

基于获取的数据源和所述视图控件层级结构，进行页面的渲染和显示。

可选地，对所述页面视图描述文件进行解析，得到页面视图元数据，包括：

将所述页面视图描述文件解析成视图节点数组；

遍历视图节点数组中的视图节点，对遍历到的视图节点进行解析，缓存解析得到的视图节点的属性参数、视图节点父子关系和数据绑定协议；

根据解析出的视图节点父子关系，建立视图节点的父子关系树，作为页面视图之间的层级结构信息。

可选地，根据所述页面视图元数据创建所述待显示页面的视图控件层级结构，包括：

根据所述页面视图元数据创建所述待显示页面所包含页面视图对应的视图控件，根据页面视图的属性参数设置对应视图控件的属性参数，并将页面视图的数据绑定关系赋值给对应的视图控件；

根据页面视图之间的层级结构信息，将创建的视图控件添加到该视图控件的父视图控件上。

可选地，根据所述页面视图元数据创建所述待显示页面的视图控件层级结构，还包括：

为创建的视图控件设定事件处理函数，其中所述事件处理函数用于对针对所述视图控件的触控操作进行响应和处理。

可选地，基于获取的数据源和所述视图控件层级结构，进行页面的渲染和显示，包括：

根据预先设置的数据源地址获取数据源；

依次遍历所述视图控件层级结构中的视图控件，根据遍历到的视图控件对应的数据绑定协议从数据源读取对应的数据，根据读取的数据为遍历到的视图控件的属性参数进行赋值；

根据赋值结果进行页面的渲染和显示。

可选地，根据赋值结果进行页面的渲染和显示，包括：

根据所述视图控件层级结构计算各视图控件的布局参数，所述布局参数包括位置参数和尺寸参数；

根据所述布局参数和所述赋值结果对各视图控件进行渲染和显示，并缓存所述布局参数，以使后续使用缓存的所述布局参数对相同视图控件进行渲染和显示。

可选地，所述结构化语言为JavaScript对象标记JSON语言或可扩展标记语言XML。

可选地，采用自动化解析工具，对所述页面视图描述文件进行解析，得到页面视图元数据；

采用自动化构建工具，根据所述页面视图元数据创建所述待显示页面的视图层级结构。

第二方面，本公开实施例还提供了一种页面显示装置，包括：

页面视图描述文件加载模块，用于加载待显示页面对应的采用结构化语言的页面视图描述文件；

页面视图描述文件解析模块，用于对所述页面视图描述文件进行解析，得到页面视图元数据，其中所述页面视图元数据包括所述待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，所述数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系；

视图控件层级结构创建模块，用于根据所述页面视图元数据创建所述待显示页面的视图控件层级结构；

页面显示模块，用于基于获取的数据源和所述视图控件层级结构，进行页面的渲染和显示。

可选地，页面视图描述文件解析模块，具体用于：

将页面视图描述文件解析成视图节点数组；遍历视图节点数组中的视图节点，对遍历到的视图节点进行解析，缓存解析得到的视图节点的属性参数、视图节点父子关系和数据绑定协议；根据解析出的视图节点父子关系，建立视图节点的父子关系树，作为页面视图之间的层级结构信息。

可选地，视图控件层级结构创建模块，具体用于：

根据页面视图元数据创建待显示页面所包含页面视图对应的视图控件，根据页面视图的属性参数设置对应视图控件的属性参数，并将页面视图的数据绑定关系赋值给对应的视图控件；根据页面视图之间的层级结构信息，将创建的视图控件添加到该视图控件的父视图控件上。

可选地，视图控件层级结构创建模块，还用于：

为创建的视图控件设定事件处理函数，其中事件处理函数用于对针对视图控件的触控操作进行响应和处理。

可选地，页面显示模块，还包括：

数据源获取单元，用于根据预先设置的数据源地址获取数据源；

属性参数赋值单元，用于依次遍历视图控件层级结构中的视图控件，根据遍历到的视图控件对应的数据绑定协议从数据源读取对应的数据，根据读取的数据为遍历到的视图控件的属性参数进行赋值；

页面显示单元，用于根据赋值结果进行页面的渲染和显示。

可选地，页面显示单元，具体用于：根据所述视图控件层级结构计算各视图控件的布局参数，所述布局参数包括位置参数和尺寸参数；根据所述布局参数和所述赋值结果对各视图控件进行渲染和显示，并缓存布局参数，以使后续使用缓存的布局参数对相同视图控件进行渲染和显示。

可选地，结构化语言为JavaScript对象标记JSON语言或可扩展标记语言XML。

可选地，页面视图描述文件解析模块，具体用于：采用自动化解析工具，对页面视图描述文件进行解析，得到页面视图元数据；

视图控件层级结构创建模块，具体用于：采用自动化构建工具，根据页面视图元数据创建待显示页面的视图层级结构。

第三方面，本公开实施例还提供了一种终端设备，所述终端包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本公开任意实施例所提供的页面显示方法。

第四方面，本公开实施例还提供了一种计算机存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如本公开任意实施例所提供的页面显示方法。

本公开实施例通过预先采用结构化语言来描述待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，形成页面视图描述文件，从而在运行过程中，可以通过加载和解析页面视图描述文件的方式，实时创建视图控件层级结构，以便可以通过更改页面视图描述文件的方式对页面进行动态灵活地配置，从而可以根据业务需求进行显示，提高了页面配置的灵活性，以及实现了页面显示的多样性。

附图说明

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

图1示出了本公开实施例一提供的一种页面显示方法的流程图；

图2示出了本公开实施例二提供的一种页面显示方法的流程图；

图3示出了本公开实施例三提供的一种页面显示装置结构示意图；

图4示出了本公开实施例四提供的一种终端设备的硬件结构示意图。

具体实施方式

为使本公开的目的、技术方案和优点更加清楚，以下将参照本公开实施例中的附图，通过实施方式清楚、完整地描述本公开的技术方案，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

下述各实施例中，每个实施例中同时提供了可选特征和示例，实施例中记载的各个特征可进行组合，形成多个可选方案，不应将每个编号的实施例仅视为一个技术方案。

实施例一

图1示出了本公开实施例一提供的一种页面显示方法的流程图，本公开实施例可适用于在基于iOS系统的应用程序中显示页面的情况，该方法可以由页面显示装置来执行，该装置可以由软件和/或硬件的方式来实现，集成于具有显示功能的终端中，如智能手机、平板电脑等。

如图1所示，本公开实施例中提供的页面显示方法具体包括以下步骤：

S110、加载待显示页面对应的采用结构化语言的页面视图描述文件。

其中，页面视图描述文件是预先采用结构化语言来描述待显示页面的页面视图信息而生成的文件。开发者可以根据业务需求以及结构化语言规范，预先创建页面视图描述文件。示例性地，结构化语言可以是但不限于JavaScript对象标记JSON(JavaScriptObject Notation)语言或可扩展标记语言XML(Extensible Markup Language)。本实施例中待显示页面可以对应一个或多个页面视图描述文件。示例性地，采用结构化语言描述的待显示页面的页面视图信息可以只存储到一个页面视图描述文件中，也可以分散存储到多个页面视图描述文件中，以便在多业务团队协作情况下，不同业务团队可以提供自己的页面视图描述文件，使得不同业务可以并行推进。

具体地，本实施例可以根据页面与页面视图描述文件之间的对应关系，确定待显示页面对应的所有页面视图描述文件，并加载对应的所有页面视图描述文件。

S120、对页面视图描述文件进行解析，得到页面视图元数据，其中页面视图元数据包括待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系。

其中，页面视图的属性参数可以包括但不限于背景颜色、前景颜色、字体颜色、文本字体、字号和字形。本实施例中的待显示页面可以包括一个或多个页面视图，页面视图的数量可以根据业务需求预先确定，每个页面视图均可以对应一个数据绑定协议。页面视图的数据绑定协议可以用于反映对应页面视图的每个属性参数与开发者自定义的数据源中相应属性参数之间的绑定关系。本实施例中的数据绑定协议可以支持单层属性的数据绑定，也可以支持多层属性的数据绑定。示例性地，单层属性的数据绑定是指将视图控件自身具备的单层属性参数与数据源中对应的单层属性参数进行一一绑定。对于多层属性的数据绑定而言，在确定视图控件的多层属性参数时，需要先确定视图控件的第一层属性参数，通过第一层属性参数再确定下一层属性参数，依次类推。同理，采用相同的确定过程确定数据源中相应的多层属性参数，从而将视图控件的多层属性参数与数据源中相应的多层属性参数进行一一绑定。页面视图之间的层级结构信息可以是指待显示页面包含的所有页面视图之间的层级关系信息。在创建页面视图描述文件时，页面视图的名称可以直接采用iOS系统中对应视图控件的名称，以及页面视图的属性参数名称也可以直接采用iOS系统中对应视图控件的属性参数名称，以便于数据绑定和查询。

具体地，通过对待显示页面对应的各页面视图描述文件进行解析，可以动态获得待显示页面对应的页面视图元数据，从而可以通过更改页面视图描述文件的方式，实现对页面属性的动态灵活配置。并且由于页面视图描述文件不会参与代码编译，从而对页面视图描述文件进行更改也不会导致增量编译，更不会影响编译速度，从而可以提升开发和调试效率。

示例性地，在页面视图描述文件中，可以为每个页面视图设置一个标识符进行唯一标识，从而可以通过唯一标识符从页面视图描述文件中快速查询到特定的页面视图，以便可以对特定的页面视图进行动态配置，提高配置效率。

S130、根据页面视图元数据创建待显示页面的视图控件层级结构。

其中，视图控件层级结构可以是指在进行页面显示时，待显示页面中的各视图控件之间的层级关系以及每个视图控件对应的数据绑定关系。

具体地，可以根据待显示页面所包含的每个页面视图对应的属性参数、页面视图的数据绑定协议以及页面视图之间的层级结构信息，实时创建待显示页面中的各个视图控件以及视图控件层级结构，以便可以显示当前视图控件层级结构下的待显示页面。

示例性地，S130可以包括：根据页面视图元数据创建待显示页面所包含页面视图对应的视图控件，根据页面视图的属性参数设置对应视图控件的属性参数，并将页面视图的数据绑定关系赋值给对应的视图控件；根据页面视图之间的层级结构信息，将创建的视图控件添加到该视图控件的父视图控件上。

具体地，可以根据页面视图元数据依次创建视图控件。对于待显示页面所包含的每个页面视图而言，需要创建一个对应的视图控件，并根据页面视图元数据中页面视图的属性参数对创建的视图控件进行属性设置，以及基于该页面视图的数据绑定协议，可以将页面视图的数据绑定关系赋值给创建的视图控件。根据页面视图之间的层级结构信息，可以确定创建的视图控件为子视图控件还是父视图控件，若是子视图控件，则可以根据页面视图之间的层级结构信息确定该子视图控件对应的父视图控件，并将该子视图控件添加至对应的父视图控件上，从而可以形成待显示页面的视图控件层级结构。

S140、基于获取的数据源和视图控件层级结构，进行页面的渲染和显示。

其中，数据源可以是指待显示页面所使用的数据库或数据库服务器，用于存储用户自定义的待显示页面所包含的视图控件的属性数据。

具体地，本实施例可以根据待显示页面对应的数据源信息，比如数据源名称等，与待显示页面对应的数据源进行连接，从而可以获取待显示页面中每个视图控件对应的具体属性数据。基于视图控件对应的数据绑定关系，根据数据源中的属性数据对待显示页面的视图控件层级结构进行渲染，以便在显示界面中可以展示渲染后的页面。本实施例中的页面视图布局可以在创建视图控件层级结构后，基于数据源通过数据绑定的方式滞后提供，使得页面配置更加灵活，满足了用户个性化需求。

本公开实施例的技术方案，通过预先采用结构化语言来描述待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，形成页面视图描述文件，从而在运行过程中，可以通过加载和解析页面视图描述文件的方式，实时创建视图控件层级结构，并可以通过数据绑定的方式对视图布局进行滞后提供，以便可以通过更改页面视图描述文件的方式对页面进行动态灵活地配置，从而可以根据业务需求进行显示，提高了页面配置的灵活性，以及实现了页面显示的多样性。

在上述技术方案的基础上，S120可以包括：将页面视图描述文件解析成视图节点数组；遍历视图节点数组中的视图节点，对遍历到的视图节点进行解析，缓存解析得到的视图节点的属性参数、视图节点父子关系和数据绑定协议；根据解析出的视图节点父子关系，建立视图节点的父子关系树，作为页面视图之间的层级结构信息。

其中，视图节点数组可以是将页面视图描述文件包含的每个页面视图作为一个视图节点元素而组成的一个数组。视图节点数组中的视图节点元素的数量等于待显示页面所包含的页面视图的数量。视图节点数组中各视图节点元素可以是按照预先设定的排列顺序进行排列，也可以随机进行排列，还可以根据页面视图之间的层级关系进行排列，以使视图节点的解析更加便捷。

具体地，本实施例可以利用递归算法对视图节点数组中的视图节点进行遍历；也可以利用队列方式对视图节点数组中的视图节点进行遍历，以提高页面视图描述文件的解析效率。其中，队列是一种先进先出的线性表，并且只允许在表的前端(即队头)进行删除操作，在表的后端(即队尾)进行添加操作，从而最早进入队列的元素可以最早从队列中删除。

示例性地，在利用队列方式对视图节点数组中的各视图节点进行循环遍历的过程可以为：将视图节点数组中的第一个视图节点添加至队列中，并删除视图节点数组中的第一个视图节点；对队列中的视图节点从头开始进行遍历，将遍历到的第一个视图节点作为当前视图节点；对当前视图节点进行解析，缓存解析到的该视图节点的属性参数、视图节点父子关系和数据绑定协议，并将当前视图节点移除队列；根据当前视图节点对应的视图节点父子关系，确定当前视图节点是否存在对应的当前子视图节点；若是，则将视图节点数组中当前子视图节点对应的视图节点元素均添加至队列中，以更新队列，并删除视图节点数组中当前子视图节点对应的视图节点元素，以更新视图节点数组，返回执行对队列中的视图节点从头开始进行遍历的操作；若否，则在队列为非空队列时，直接返回执行对队列中的视图节点从头开始进行遍历的操作；在队列为空队列且视图节点数组不是空数组时，直接返回执行将视图节点数组中的第一个视图节点添加至队列中的操作；在队列为空队列且视图节点数组是空数组时，完成视图节点数组中各视图节点的解析操作。

在解析得到视图节点组数中各视图节点对应的视图节点父子关系后，可以根据所有视图节点对应的视图节点父子关系，建立视图节点父子关系树，以表征待显示页面中各页面视图之间的层级结构信息。

在上述技术方案的基础上，S130还可以包括：为创建的视图控件设定事件处理函数，其中事件处理函数用于对针对视图控件的触控操作进行响应和处理。

其中，事件处理函数是预先定义的，用于对待显示页面中视图控件的触控操作进行处理的函数。触控操作可以是但不限于触摸行为或者点击行为。

具体地，开发者可以根据业务需求预先设置视图控件是否需要接受用户的触控操作，并可以将需要接受用户触控操作的指定视图控件的信息存储至页面视图描述文件中。在创建视图控件后，可以根据页面视图描述文件确定创建的视图控件是否需要接受用户触控操作，若需要，则为创建的视图控件设定事件处理函数，以便可以对触控操作进行响应。本实施还可以对需要接受用户触控操作的视图控件添加一个触控操作检测函数，以便在页面显示后，可以通过触控操作检测函数检测是否对该视图控件进行触控操作，若是，则可以以触控操作的信息作为输入参数，调用事件处理函数，以自动对触控操作进行响应和处理，使得操作更加便捷。

实施例二

图2示出了本公开实施例二提供的一种页面显示方法的流程图，本实施例以上述实施例中各个可选方案为基础，对“基于获取的数据源和视图控件层级结构，进行页面的渲染和显示”进行了优化。其中与上述实施例相同或相应的术语的解释在此不再赘述。

如图2所示，本公开实施例中提供的页面显示方法具体包括以下步骤：

S210、加载待显示页面对应的采用结构化语言的页面视图描述文件。

S220、对页面视图描述文件进行解析，得到页面视图元数据，其中页面视图元数据包括待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系。

S230、根据页面视图元数据创建待显示页面的视图控件层级结构。

S240、根据预先设置的数据源地址获取数据源。

具体地，在创建待显示页面的视图控件层级结构之后，可以根据预先设置的数据源对应的存储地址，获取待显示页面对应的数据源，从而可以获得用户自定义的每个视图控件的属性数据。

S250、依次遍历视图控件层级结构中的视图控件，根据遍历到的视图控件对应的数据绑定协议从数据源读取对应的数据，根据读取的数据为遍历到的视图控件的属性参数进行赋值。

具体地，本实施例可以从视图控件层级结构中的第一层开始，逐层遍历每层视图控件结构中的每个视图控件。对于遍历到的每个视图控件而言，根据数据绑定协议可以确定数据源中该视图控件的每个属性参数对应的参数值，从而可以对视图控件的属性参数进行赋值。示例性地，若数据源中预先设置某个视图控件的字体颜色对应的数据为红色，则可以将视图控件层级结构中该视图控件的字体颜色设置为红色。本实施例也可以通过动态配置数据源中的属性数据，并通过数据绑定的方式可以进行滞后提供，从而提高了页面配置更加灵活，实现了显示效果的多样性。

S260、根据赋值结果进行页面的渲染和显示。

具体地，通过对视图控件层级结构中每个视图控件的属性参数进行赋值，根据每个视图控件的属性参数的赋值结果可以对页面进行视图布局和渲染，从而可以显示渲染后的页面。

本公开实施例的技术方案，通过对创建的视图控件层级结构中的各视图控件进行遍历，并基于页面视图描述文件中的数据绑定协议和用户预先自定义的数据源，可以对每个视图控件的属性参数进行自动赋值，从而可以通过动态配置数据源中的属性数据，进一步提高页面配置的灵活性，满足用户的个性化需求。

在上述技术方案的基础上，S260可以包括：根据视图控件层级结构计算各视图控件的布局参数，布局参数包括位置参数和尺寸参数；根据布局参数和赋值结果对各视图控件进行渲染和显示，并缓存布局参数，以使后续使用缓存的布局参数对相同视图控件进行渲染和显示。

其中，视图控件的位置参数可以是指在显示页面中视图控件对应的位置。视图控件的尺寸参数可以是指在显示页面中视图控件的高度和宽度。

具体地，可以根据视图控件层级结构计算每个视图控件在显示界面中的位置参数和尺寸参数。根据每个视图控件的布局参数和对应的赋值结果对每个视图控件进行渲染和显示。本实施例可以缓存计算得到的视图控件对应的布局参数，以便后续在需要渲染相同视图控件时，可以直接利用缓存的布局参数进行渲染，无需重复计算布局参数，从而可以提高布局效率，优化页面滑动性能，进而提升了用户的使用体验。

示例性地，在根据视图控件层级结构计算视图控件的布局参数之前，可以先检测缓存中是否存在该视图控件的布局参数，若存在，则直接利用缓存的布局参数对视图控件进行渲染；若不存在，则根据视图控件层级结构计算对应的布局参数，并将计算的该视图控件对应的布局参数进行缓存，以避免后续重复计算该布局参数，从而可以提高布局效率以及提升页面滑动性能。

在上述技术方案的基础上，可以采用自动化解析工具，对页面视图描述文件进行解析，得到页面视图元数据；可以采用自动化构建工具，根据页面视图元数据创建待显示页面的视图层级结构。通过采用自动化解析工具和自动化构建工具，可以自动创建待显示页面的视图控件层级结构，从而可以避免重复地进行视图创建、视图添加等操作，使得开发者只需关注于采用结构化语言的页面视图描述文件的配置，无需关注视图的创建和添加，大大提升了页面开发效率。

以下是本公开实施例提供的页面显示装置的实施例，该装置与上述各实施例的页面显示方法属于同一个发明构思，在页面显示装置的实施例中未详尽描述的细节内容，可以参考上述页面显示方法的实施例。

实施例三

图3示出了本公开实施例四提供的一种页面显示装置结构示意图，本公开实施例可适用于在基于iOS系统的应用程序中显示页面的情况。如图3所示，本公开实施例中页面显示装置具体包括：页面视图描述文件加载模块310、页面视图描述文件解析模块320、视图控件层级结构创建模块330和页面显示模块340。

其中，页面视图描述文件加载模块310，用于加载待显示页面对应的采用结构化语言的页面视图描述文件；页面视图描述文件解析模块320，用于对页面视图描述文件进行解析，得到页面视图元数据，其中页面视图元数据包括待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系；视图控件层级结构创建模块330，用于根据页面视图元数据创建待显示页面的视图控件层级结构；页面显示模块340，用于基于获取的数据源和视图控件层级结构，进行页面的渲染和显示。

可选地，页面视图描述文件解析模块320，具体用于：

将页面视图描述文件解析成视图节点数组；遍历视图节点数组中的视图节点，对遍历到的视图节点进行解析，缓存解析得到的视图节点的属性参数、视图节点父子关系和数据绑定协议；根据解析出的视图节点父子关系，建立视图节点的父子关系树，作为页面视图之间的层级结构信息。

可选地，视图控件层级结构创建模块330，具体用于：

根据页面视图元数据创建待显示页面所包含页面视图对应的视图控件，根据页面视图的属性参数设置对应视图控件的属性参数，并将页面视图的数据绑定关系赋值给对应的视图控件；根据页面视图之间的层级结构信息，将创建的视图控件添加到该视图控件的父视图控件上。

可选地，视图控件层级结构创建模块330，还用于：

为创建的视图控件设定事件处理函数，其中事件处理函数用于对针对视图控件的触控操作进行响应和处理。

可选地，页面显示模块340，还包括：

数据源获取单元，用于根据预先设置的数据源地址获取数据源；

属性参数赋值单元，用于依次遍历视图控件层级结构中的视图控件，根据遍历到的视图控件对应的数据绑定协议从数据源读取对应的数据，根据读取的数据为遍历到的视图控件的属性参数进行赋值；

页面显示单元，用于根据赋值结果进行页面的渲染和显示。

可选地，页面显示单元，具体用于：根据视图控件层级结构计算各视图控件的布局参数，布局参数包括位置参数和尺寸参数；根据布局参数和赋值结果对各视图控件进行渲染和显示，并缓存布局参数，以使后续使用缓存的布局参数对相同视图控件进行渲染和显示。

可选地，结构化语言为JavaScript对象标记JSON语言或可扩展标记语言XML。

可选地，页面视图描述文件解析模块320，具体用于：采用自动化解析工具，对页面视图描述文件进行解析，得到页面视图元数据；

视图控件层级结构创建模块330，具体用于：采用自动化构建工具，根据页面视图元数据创建待显示页面的视图层级结构。

本公开实施例所提供的页面显示装置可执行本发明任意实施例所提供的页面显示方法，具备执行页面显示方法相应的功能模块和有益效果。

实施例四

图4示出了本公开实施例四提供的一种终端设备的硬件结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的终端设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图4所示，终端设备400可以包括处理装置(例如中央处理器、图形处理器等)401，其可以根据存储在只读存储器(Read-Only Memory，ROM)402中的程序或者从存储装置408加载到随机访问存储器(Random Access Memory，RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有终端设备400操作所需的各种程序和数据。处理装置401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

通常，以下装置可以连接至I/O接口405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置409。通信装置409可以允许终端设备400与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的终端设备400，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从ROM 402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的方法中限定的上述功能。

本公开实施例提出的服务器与上述实施例提出的页面显示方法属于同一发明构思，未在本实施例中详尽描述的技术细节可参见上述实施例，并且本实施例具备执行页面显示方法相同的有益效果。

实施例五

本公开实施例五提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任意实施例所提供的页面显示方法。

需要说明的是，本公开上述的计算机存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(Random Access Memory，RAM)、只读存储器(Read-Only Memory，ROM)、可擦式可编程只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)或闪存(FLASH)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机存储可以是上述终端设备中所包含的；也可以是单独存在，而未装配入该终端设备中。

上述计算机存储承载有一个或者多个程序，当上述一个或者多个程序被该终端设备执行时，使得该终端设备：加载待显示页面对应的采用结构化语言的页面视图描述文件；对页面视图描述文件进行解析，得到页面视图元数据，其中页面视图元数据包括待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系；根据页面视图元数据创建待显示页面的视图控件层级结构；基于获取的数据源和视图控件层级结构，进行页面的渲染和显示。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一页面视图描述文件加载模块，还可以被描述为“加载待显示页面对应的采用结构化语言的页面视图描述文件的模块”。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

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

加载待显示页面对应的采用结构化语言的页面视图描述文件；

对所述页面视图描述文件进行解析，得到页面视图元数据，其中所述页面视图元数据包括所述待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，所述数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系；

根据所述页面视图元数据创建所述待显示页面的视图控件层级结构；

根据预先设置的数据源地址获取数据源；

依次遍历所述视图控件层级结构中的视图控件，根据遍历到的视图控件对应的数据绑定协议从数据源读取对应的数据，根据读取的数据为遍历到的视图控件的属性参数进行赋值；

根据赋值结果进行页面的渲染和显示。

2.根据权利要求1所述的方法，其特征在于，对所述页面视图描述文件进行解析，得到页面视图元数据，包括：

将所述页面视图描述文件解析成视图节点数组；

遍历视图节点数组中的视图节点，对遍历到的视图节点进行解析，缓存解析得到的视图节点的属性参数、视图节点父子关系和数据绑定协议；

根据解析出的视图节点父子关系，建立视图节点的父子关系树，作为页面视图之间的层级结构信息。

3.根据权利要求1所述的方法，其特征在于，根据所述页面视图元数据创建所述待显示页面的视图控件层级结构，包括：

根据所述页面视图元数据创建所述待显示页面所包含页面视图对应的视图控件，根据页面视图的属性参数设置对应视图控件的属性参数，并将页面视图的数据绑定关系赋值给对应的视图控件；

根据页面视图之间的层级结构信息，将创建的视图控件添加到该视图控件的父视图控件上。

4.根据权利要求3所述的方法，其特征在于，根据所述页面视图元数据创建所述待显示页面的视图控件层级结构，还包括：

为创建的视图控件设定事件处理函数，其中所述事件处理函数用于对针对所述视图控件的触控操作进行响应和处理。

5.根据权利要求1所述的方法，其特征在于，根据赋值结果进行页面的渲染和显示，包括：

根据所述视图控件层级结构计算各视图控件的布局参数，所述布局参数包括位置参数和尺寸参数；

根据所述布局参数和所述赋值结果对各视图控件进行渲染和显示，并缓存所述布局参数，以使后续使用缓存的所述布局参数对相同视图控件进行渲染和显示。

6.根据权利要求1-5中任一项所述的方法，其特征在于，所述结构化语言为JavaScript对象标记JSON语言或可扩展标记语言XML。

7.根据权利要求1-5中任一项所述的方法，其特征在于，采用自动化解析工具，对所述页面视图描述文件进行解析，得到页面视图元数据；

采用自动化构建工具，根据所述页面视图元数据创建所述待显示页面的视图层级结构。

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

页面视图描述文件加载模块，用于加载待显示页面对应的采用结构化语言的页面视图描述文件；

页面视图描述文件解析模块，用于对所述页面视图描述文件进行解析，得到页面视图元数据，其中所述页面视图元数据包括所述待显示页面所包含页面视图的属性参数、页面视图的数据绑定协议、以及页面视图之间的层级结构信息，所述数据绑定协议用于定义对应页面视图的属性参数与数据源中数据的绑定关系；

视图控件层级结构创建模块，用于根据所述页面视图元数据创建所述待显示页面的视图控件层级结构；

数据源获取单元，用于根据预先设置的数据源地址获取数据源；

属性参数赋值单元，用于依次遍历视图控件层级结构中的视图控件，根据遍历到的视图控件对应的数据绑定协议从数据源读取对应的数据，根据读取的数据为遍历到的视图控件的属性参数进行赋值；

页面显示单元，用于根据赋值结果进行页面的渲染和显示。

9.一种终端设备，其特征在于，所述终端包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的页面显示方法。

10.一种计算机存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一所述的页面显示方法。

Images