CN106873991A - 页面生成方法和装置 - Google Patents

Abstract

本发明涉及一种页面生成方法和装置，该页面生成方法包括：获取页面结构代码和相应的页面样式代码；根据所述页面结构代码，从公共组件库中选择公共组件；根据所述页面样式代码，获取所述公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸；根据所述相对尺寸和当前的显示屏像素级尺寸，确定所述公共组件的像素级尺寸；按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面。本发明提供的页面生成方法和装置，因采用了相对尺寸，可自适应调整公共组件的尺寸，在不同的显示屏上都可以显示出基本一致的效果，避免了因显示屏差异而导致的在呈现页面时的兼容性问题。

Description

页面生成方法和装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种页面生成方法和装置。

背景技术

随着计算机技术的发展，出现了各种类型的终端，这些终端上可以运行应用程序，通过应用程序生成页面，从而通过该页面传递信息并与用户交互，方便了人们的生活和工作。

目前，生成页面主要是在页面代码中定义页面元素在页面中以像素为单位的尺寸，从而按照预先定义的以像素为单位的尺寸绘制页面元素，形成页面。然而，当在不同的显示屏上采用相同的以像素为单位的尺寸绘制页面元素时，呈现的页面元素会因显示屏的不同而呈现出不同的效果，兼容性差。

发明内容

基于此，有必要针对目前在不同的显示屏上采用相同的以像素为单位的尺寸绘制页面元素兼容性差的问题，提供一种页面生成方法和装置。

一种页面生成方法，包括：

获取页面结构代码和相应的页面样式代码；

根据所述页面结构代码，从公共组件库中选择公共组件；

根据所述页面样式代码，获取所述公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸；

根据所述相对尺寸和当前的显示屏像素级尺寸，确定所述公共组件的像素级尺寸；

按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面。

一种页面生成装置，包括：

代码获取模块，用于获取页面结构代码和相应的页面样式代码；

公共组件选择模块，用于根据所述页面结构代码，从公共组件库中选择公共组件；

像素级尺寸确定模块，用于根据所述页面样式代码，获取所述公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸；根据所述相对尺寸和当前的显示屏像素级尺寸，确定所述公共组件的像素级尺寸；

绘制模块，用于按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面。

上述页面生成方法和装置，根据页面结构代码，可以直接从公共组件库中选择公共组件，而不必在页面结构代码中详细定义每个页面元素，节省页面结构代码的代码量，提高生成页面的效率。而且，根据页面样式代码，获取公共组件相对于显示屏像素级尺寸的相对尺寸，再利用相对尺寸和当前的显示屏像素级尺寸确定公共组件的像素级尺寸，进而据此绘制公共组件。因采用了相对尺寸，可自适应调整公共组件的尺寸，在不同的显示屏上都可以显示出基本一致的效果，避免了因显示屏差异而导致的在呈现页面时的兼容性问题。

附图说明

图1为一个实施例中页面生成方法的应用环境图；

图2为一个实施例中终端的结构框图；

图3为一个实施例中页面生成方法的流程示意图；

图4为一个实施例中操作系统、母应用程序、子应用程序以及子应用程序的页面之间关系的示意图；

图5为另一个实施例中页面生成方法的流程示意图；

图6为一个实施例中页面生成装置的结构框图；

图7为另一个实施例中页面生成装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

图1为一个实施例中页面生成方法的应用环境图。参照图1，本实施例中该页面生成方法应用于一种应用程序管理系统中。该应用程序管理系统包括电子设备110、服务器120和终端130，且电子设备110和终端130均可通过网络连接到服务器120。电子设备110和终端130可以是相同类型或者不同类型的物理设备，如个人计算机或者移动终端等。服务器120可以是独立的物理服务器或者多个物理服务器构成的服务器集群。

其中，电子设备110可用于编辑页面结构源代码、页面样式源代码和页面逻辑源代码，并将页面结构源代码、页面样式源代码和页面逻辑源代码发送至服务器120。服务器120将页面结构源代码、页面样式源代码和页面逻辑源代码分别编译，分别获得页面结构代码、页面样式代码和页面逻辑代码。终端130可从服务器120下载包括页面结构代码、页面样式代码和页面逻辑代码的程序包，从而根据程序包中的页面结构代码和页面样式代码生成页面。页面结构代码、页面样式代码和页面逻辑代码均可以是脚本代码，如JavaScript脚本代码。

图2为一个实施例中终端130的结构框图。参照图2，该终端130包括通过系统总线连接的处理器、非易失性存储介质、内存储器、网络接口、显示屏和输入装置。其中，终端130的非易失性存储介质存储有操作系统，还存储有一种页面生成装置，该页面生成装置用于实现一种页面生成方法。终端130的处理器用于提供计算和控制能力，支撑整个终端130的运行。终端130中的内存储器为非易失性存储介质中的页面生成装置的运行提供环境。该内存储器中可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种页面生成方法。终端130的网络接口用于与服务器进行网络通信，如从服务器下载页面结构代码和相应的页面样式代码等。终端130的显示屏可以是液晶显示屏或者电子墨水显示屏，终端130的输入装置可以是显示屏上覆盖的触摸层，也可以是终端130外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。该终端130可以是个人计算机或者移动终端，移动终端包括手机、平板电脑、个人数字助理或者穿戴式设备等中的至少一种。本领域技术人员可以理解，图2中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的终端的限定，具体的终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

图3为一个实施例中页面生成方法的流程示意图。本实施例主要以该方法应用于上述图1中的终端130来举例说明。参照图3，该方法具体包括如下步骤：

S302，获取页面结构代码和相应的页面样式代码。

其中，页面结构代码是定义页面组成的代码。页面结构代码可包括页面所包括的公共组件的标识。页面样式代码是定义页面样式的代码。

页面样式代码至少定义了下述步骤S304和步骤S306中所涉及的相对尺寸。页面样式代码还可以定义公共组件的颜色或背景图像等其它样式。页面结构代码和页面样式代码均对应于相同的页面。页面结构代码和相应的页面样式代码可以记录在不同或者相同的文件中。

具体地，终端可从服务器下载程序包，从而从程序包中获取页面结构代码和相应的页面样式代码。终端也可以从本地直接获取页面结构代码和相应的页面样式代码。

S304，根据页面结构代码，从公共组件库中选择公共组件。

具体地，终端可执行页面结构代码，按照页面结构代码中定义的公共组件的标识，从公共组件库中选择与该标识对应的公共组件。公共组件库存储于终端本地，具体可在首次生成页面时从服务器下载到本地。选择的公共组件是页面结构代码中定义的在生成页面时所需的公共组件。其中，公共组件是不同应用程序的页面所共用的组件，具有视觉形态，是页面的组成单元。公共组件具有唯一的标识，可以是公共组件的名称。公共组件可以是图标、文本容器、进度条、表单组件、导航组件、媒体组件、地图组件或者画布组件。表单组件可以包括按钮、选择框、表单以及开关等。

S306，根据页面样式代码，获取公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸。

其中，像素级尺寸是指以像素为单位计量的尺寸。像素具体可以是逻辑像素或者物理像素。一个逻辑像素可以包括多于一个的物理像素，比如可以用4个物理像素表示一个逻辑像素。

具体地，页面样式代码中，定义了与公共组件的标识对应的相对尺寸(可以用rpx表示相对尺寸的单位)，该相对尺寸表示了公共组件的像素级尺寸相对于显示屏像素级尺寸的大小关系。终端可从页面样式代码中，直接读取与公共组件的标识对应的相对尺寸。

其中，相对尺寸可以直接采用公共组件的像素级尺寸与显示屏像素级尺寸的比值。相对尺寸也可以为公共组件的像素级尺寸与显示屏像素级尺寸的比值再乘以预设值。预设值为非零值，可以是正值。预设值可以小于或者大于1。预设值具体可以是750。公共组件的像素级尺寸包括公共组件的像素级宽度和像素级高度。

显示屏像素级尺寸，是指以像素为单位(可以用px表示像素单位)计量的显示屏的尺寸。显示屏像素级尺寸可以是以像素为单位的显示屏宽度，或者可以是以像素为单位的显示屏高度。

S308，根据相对尺寸和当前的显示屏像素级尺寸，确定公共组件的像素级尺寸。

其中，相对尺寸是固定的，因终端的不同会导致显示屏像素级尺寸的不同，从而导致公共组件的像素级尺寸的不同。显示屏像素级尺寸越大，公共组件的像素级尺寸越大；显示屏像素级尺寸越小，公共组件的像素级尺寸越小。

具体地，当相对尺寸为公共组件的像素级尺寸与显示屏像素级尺寸的比值时，步骤S308包括：将相对尺寸乘以当前的显示屏像素级尺寸，得到公共组件的像素级尺寸。

在一个实施例中，当相对尺寸为公共组件的像素级尺寸与显示屏像素级尺寸的比值再乘以预设值时，步骤S308包括：将相对尺寸乘以当前的显示屏像素级尺寸再除以预设值，得到公共组件的像素级尺寸。

举例说明，假设规定显示屏宽度为750rpx，其中750为预设值，那么对于宽度为375px(逻辑像素)的显示屏，750rpx＝375px，则1rpx＝0.5px；若该显示屏的一个逻辑像素的宽度和高度分别为2个物理像素，则1rpx＝0.5px＝1物理像素。

进一步地，假设一个公共组件的相对尺寸包括相对宽度和相对高度，且相对宽度和相对高度均为200rpx；公共组件的像素级尺寸包括像素级宽度和像素级高度；当前的显示屏像素级尺寸为显示屏像素级宽度。那么当显示屏像素级宽度为375px时，公共组件的像素级宽度和像素级高度均为200*375/750＝100px；当显示屏像素级宽度为315px，公共组件的像素级宽度和像素级高度均为200*315/750＝84px。这样当显示屏尺寸不同时，公共组件的尺寸将会自适应地调整，以适应当前的显示屏。

S310，按照公共组件的像素级尺寸绘制公共组件，形成页面。

具体地，终端可先确定公共组件在页面中的位置，再在该位置处按照公共组件的像素级尺寸绘制公共组件，绘制的组件最终形成页面。

在一个实施例中，终端可根据页面中公共组件的数量自动确定位置。在一个实施例中，终端也可以获取页面样式代码中定义的相对位置，确定公共组件的像素级位置；相对位置表示公共组件的像素级位置相对于显示屏像素级尺寸的相对关系。

上述页面生成方法，根据页面结构代码，可以直接从公共组件库中选择公共组件，而不必在页面结构代码中详细定义每个页面元素，节省页面结构代码的代码量，提高生成页面的效率。而且，根据页面样式代码，获取公共组件相对于显示屏像素级尺寸的相对尺寸，再利用相对尺寸和当前的显示屏像素级尺寸确定公共组件的像素级尺寸，进而据此绘制公共组件。因采用了相对尺寸，可自适应调整公共组件的尺寸，在不同的显示屏上都可以显示出基本一致的效果，避免了因显示屏差异而导致的在呈现页面时的兼容性问题。

在一个实施例中，在步骤S308之后，该页面生成方法还包括：将页面结构代码转换为包括公共组件的像素级尺寸的标准样式格式数据；步骤S310包括：按照标准样式格式数据绘制公共组件，形成页面。

其中，标准样式格式数据，是按照标准样式格式记录的样式数据。标准样式格式，具体如CSS(Cascading Style Sheets，层叠样式表)或者XML(eXtensible MarkupLanguage，可扩展标记语言)。

具体地，终端可按照标准样式格式，将页面样式代码进行转换，生成标准样式格式数据。该标准样式格式数据包括公共组件的像素级尺寸，还可以包括公共组件的颜色或者背景图像等其它样式数据。

终端在通过浏览器控件并按照标准样式格式数据绘制公共组件时，按照公共组件的像素级尺寸绘制公共组件，从而渲染出页面。其中，浏览器控件是具有网页解析能力的控件。

本实施例中，将页面样式代码转换为包括公共组件的像素级尺寸的标准样式格式数据，进而利用该标准样式格式数据生成页面，可进一步提高兼容性。

在一个实施例中，页面样式代码根据采用相对尺寸计量公共组件的尺寸的自定义样式格式数据生成。

其中，自定义样式格式数据是按照自定义样式格式记录的样式数据。自定义样式格式，是电子设备、服务器和终端之间约定采用的样式格式，具体是电子设备上的开发程序、服务器上的服务程序和终端上的母应用程序所约定采用的样式格式。自定义样式格式支持相对尺寸。自定义样式格式可以是在标准样式格式基础上进行局部调整而形成的样式格式，如可在CSS基础上调整形成自定义样式格式。

具体地，电子设备可采用自定义样式格式编辑页面样式源代码，该页面样式源代码包括自定义样式格式数据，该自定义样式格式数据中采用相对尺寸衡量公共组件的尺寸。电子设备将编辑完毕的页面样式源代码发送至服务器，由服务器将该页面样式源代码编译为页面样式代码。

本实施例中，采用相对尺寸计量公共组件的尺寸的自定义样式格式数据，便于开发人员按照相对尺寸直接编辑自定义样式格式数据，降低了开发难度，提高了开发效率。

在一个实施例中，在步骤S310之后，该页面生成方法还包括：获取用于触发公共组件尺寸变化的事件；响应于事件，获取公共组件尺寸变化后相对于显示屏像素级尺寸的相对尺寸；根据变化后的相对尺寸和当前的显示屏像素级尺寸，确定变化后的公共组件的像素级尺寸；按照变化后的公共组件的像素级尺寸更新页面中的公共组件。

其中，用于触发公共组件尺寸变化的事件，是能够导致公共组件的尺寸发生变化的事件。事件类型具体可以是光标点击事件、光标长按事件、触摸点击事件或者触摸长按事件等任意的事件。用于触发公共组件尺寸变化的事件具体可由开发人员设定，具体可设定在页面逻辑代码中。

举例说明，假设公共组件的相对尺寸包括相对宽度和相对高度，且相对宽度和相对高度均为200rpx；公共组件尺寸变化后的相对宽度和相对高度分别变化为180rpx和150rpx；当前的显示屏像素级尺寸为显示屏像素级宽度，该显示屏像素级宽度为375px。公共组件的像素级宽度和像素级高度均为200*375/750＝100px，尺寸变化后的像素级宽度为180*375/750＝90px，尺寸变化后的像素级高度为150*375/750＝75px。

本实施例中，当公共组件尺寸变化时，根据公共组件尺寸变化后的相对尺寸更新页面中的该公共组件的尺寸，保证了各种显示屏上的公共组件在变化时依然能够保持基本一致的效果，进一步提高了兼容性。

在一个实施例中，步骤S304包括：通过子应用程序，并根据页面结构代码，从母应用程序所提供的公共组件库中选择公共组件；子应用程序运行于母应用程序所提供的环境中，且母应用程序运行于操作系统上。

其中，参照图4，终端上运行操作系统，并在操作系统上运行母应用程序，母应用程序为子应用程序的运行提供环境。终端在获取到子应用程序的程序包后，根据该程序包创建用于实现子应用程序的子应用程序逻辑层单元和相应的子应用程序视图层单元。子应用程序逻辑层单元可用于执行程序包中的逻辑代码。子应用程序视图层单元用于执行程序包中的页面结构代码，还可以执行程序包中的页面样式代码。

操作系统(Operating System，简称OS)是管理和控制终端硬件与软件资源的计算机程序，是直接运行在终端裸机上的最基本的系统软件，应用程序需要在操作系统的支持下运行。操作系统可以是视窗(Windows)操作系统或Linux操作系统或者Mac OS(苹果桌面操作系统)等桌面操作系统，也可以是iOS(苹果移动终端操作系统)或者安卓(Android)操作系统等移动操作系统。

母应用程序是承载子应用程序的应用程序，为子应用程序的实现提供环境。母应用程序是原生应用程序。原生应用程序是可直接运行于操作系统的应用程序。母应用程序可以是社交应用程序、专门支持子应用程序的专用应用程序、文件管理应用程序、邮件应用程序或者游戏应用程序等。社交应用程序包括即时通信应用、SNS(Social NetworkService，社交网站)应用或者直播应用等。子应用程序则是可在母应用程序提供的环境中实现的应用程序。子应用程序具体可以是社交应用程序、文件管理应用程序、邮件应用程序或者游戏应用程序等。

子应用程序逻辑层单元和相应的子应用程序视图层单元用于实现子应用程序实例。一个子应用程序可由一个子应用程序逻辑层单元以及至少一个子应用程序视图层单元实现。子应用程序视图层单元和子应用程序的页面可以是一一对应关系。

子应用程序视图层单元用于组织子应用程序的视图并渲染。子应用程序逻辑层单元用于处理子应用程序及相应的子应用程序的页面的数据处理逻辑。单元具体可以是进程或者线程，子应用程序视图层单元如子应用程序视图层线程，子应用程序逻辑层单元如子应用程序逻辑层线程。子应用程序逻辑层单元可运行于虚拟机中。子应用程序视图层单元和子应用程序逻辑层单元可通过母应用程序原生单元中转通信，母应用程序原生单元是母应用程序与子应用程序通信的接口，母应用程序原生单元可以是母应用程序自身的线程或进程。各子应用程序的页面的属于程序包的页面逻辑代码，可由子应用程序逻辑层单元在启动时进行注册，并在需要该页面逻辑代码处理数据时执行注册的页面逻辑代码。

终端可通过子应用程序视图层单元并根据相应子应用程序的页面的初始页面数据和选择的公共组件渲染页面，并向子应用程序逻辑层单元反馈初始渲染完成通知。终端通过子应用程序逻辑层单元接收到初始渲染完成通知后，获取页面更新数据，将页面更新数据发送至子应用程序视图层单元。终端通过子应用程序视图层单元并根据页面更新数据重渲染页面中更新的部分。

在一个实施例中，子应用程序视图层单元可在启动时预加载公共资源，从而在接收到页面的初始页面数据后，根据渲染页面所需的公共资源和页面的初始页面数据渲染页面，并向子应用程序逻辑层单元反馈初始渲染完成通知。其中，公共资源是指生成不同的子应用程序的页面所共用的资源，包括公共组件库，还可以包括渲染引擎、公共的页面结构代码或公共的样式数据等。

页面更新数据是用于将页面进行更新渲染的数据。终端可通过子应用程序逻辑层单元并根据页面的逻辑代码中定义的自动执行代码，自动生成页面更新数据。终端也可以通过子应用程序逻辑层单元在接收到子应用程序视图层单元发送的事件后，根据页面的逻辑代码对该事件进行响应以生成相应的页面更新数据。

更新的部分是页面中需要变化的部分，可以是相较于根据初始页面数据渲染得到的页面变化的部分，也可以是相较于前一次渲染的页面变化的部分。具体地，终端可通过子应用程序视图层单元并基于根据初始页面数据渲染得到的页面进行重渲染，也可以基于前一次渲染的页面进行重渲染。

本实施例中，公共组件是母应用程序所提供的可供不同的子应用程序共用的组件，具有视觉形态，是子应用程序的页面的组成单元。公共组件可通过相应的公共组件标识唯一标识。不同的子应用程序共用公共组件，具体可以是同时或者在不同时刻调用相同的公共组件。公共组件还可由母应用程序和子应用程序所共用。

公共组件库可由子应用程序视图层单元在创建后进行初始化时从母应用程序加载，从而在执行步骤S304时，由子应用程序视图层单元，根据页面结构代码，从该加载的公共组件库中选择公共组件。公共组件库也可以由母应用程序加载，从而在执行步骤S304时，由子应用程序视图层单元，根据页面结构代码，从该加载的公共组件库中按需选择公共组件。

本实施例中，母应用程序可以依据不同的页面结构代码和页面样式代码，在该母应用程序提供的环境中实现不同的子应用程序。当母应用程序在运行时，便可以利用母程序提供的公共组件快速构建子应用程序的页面，节省了安装应用程序的耗时，提高了应用程序使用效率。

在一个实施例中，步骤S310包括：通过子应用程序，按照公共组件的像素级尺寸，绘制公共组件，形成属于子应用程序的页面。

具体地，终端可通过子应用程序的子应用程序视图层单元，按照公共组件的像素级尺寸，绘制从公共组件库中选择的公共组件，生成属于该子应用程序的页面。

本实施例中，在母应用程序提供的环境中，各种子应用程序可以根据页面结构代码所指定的相对尺寸，自适应调整公共组件的尺寸，在不同的显示屏上都可以显示出基本一致的效果，避免了因显示屏差异而导致的在呈现页面时的兼容性问题。

在一个实施例中，步骤S310包括：通过子应用程序，生成属于子应用程序的页面，并在页面中保留与公共组件的像素级尺寸匹配的空间；通过母应用程序，按照公共组件的像素级尺寸，在空间中绘制公共组件。

具体地，终端可通过子应用程序，绘制页面中除了需要母应用程序绘制的公共组件之外其他的页面元素，该页面元素可以是不需要母应用程序绘制的公共组件，在公共组件的像素级位置处，按照公共组件的像素级尺寸预留空间。终端可通过母应用程序，在预留的空间中，按照该公共组件的像素级尺寸绘制该公共组件。子应用程序生成页面并在页面中保留空间的步骤，以及母应用程序在保留的空间中绘制公共组件的步骤，两个步骤的先后顺序可以互换。需要母应用程序绘制的公共组件，比如可以是调用母应用程序外部接口的公共组件，也可以是绘制难度较高的公共组件。需要母应用程序绘制的公共组件比如画布组件和地图组件。

本实施例中，通过母应用程序和子应用程序的协作，生成属于子应用程序的页面，母应用程序提供补充的渲染能力，可以避免因子应用程序渲染能力不足而无法完成页面渲染的问题。

如图5所示，在一个具体的实施例中，一种页面生成方法，具体包括如下步骤：

S502，通过母应用程序，从服务器下载程序包。

S504，通过母应用程序，根据程序包创建子应用程序视图层单元和相应的子应用程序逻辑层单元。

S506，通过子应用程序视图层单元，从母应用程序预加载公共组件库。

S508，通过子应用程序视图层单元，加载程序包中的页面结构代码和相应的页面样式代码。

S510，通过子应用程序视图层单元，根据页面结构代码，从预加载的公共组件库中选择公共组件。

S512，通过子应用程序视图层单元，根据页面样式代码，获取公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸。相对尺寸为公共组件的像素级尺寸与显示屏像素级尺寸的比值再乘以预设值。

S514，通过子应用程序视图层单元，将相对尺寸乘以当前的显示屏像素级尺寸再除以预设值，得到公共组件的像素级尺寸。

S516，通过子应用程序视图层单元，生成属于子应用程序的页面，并在页面中保留与公共组件的像素级尺寸匹配的空间。

S518，通过母应用程序，按照公共组件的像素级尺寸，在保留的空间中绘制公共组件。该公共组件属于该页面。

S520，通过子应用程序视图层单元，获取页面中触发的事件。

S522，通过子应用程序逻辑层单元，对事件进行相应，生成页面更新数据。

S524，通过子应用程序视图层单元，根据页面更新数据更新页面。

本实施例中，根据页面结构代码，可以直接从公共组件库中选择公共组件，而不必在页面结构代码中详细定义每个页面元素，节省页面结构代码的代码量，提高生成页面的效率。而且，根据页面样式代码，获取公共组件相对于显示屏像素级尺寸的相对尺寸，再利用相对尺寸和当前的显示屏像素级尺寸确定公共组件的像素级尺寸，进而据此绘制公共组件。因采用了相对尺寸，可自适应调整公共组件的尺寸，在不同的显示屏上都可以显示出基本一致的效果，避免了因显示屏差异而导致的在呈现页面时的兼容性问题。母应用程序可以依据不同的页面结构代码和页面样式代码，在该母应用程序提供的环境中实现不同的子应用程序。当母应用程序在运行时，便可以利用母程序提供的公共组件快速构建子应用程序的页面，节省了安装应用程序的耗时，提高了应用程序使用效率。

图6为一个实施例中页面生成装置600的结构框图。参照图6，该页面生成装置包括：代码获取模块601、公共组件选择模块602、像素级尺寸确定模块603和绘制模块604。

代码获取模块601，用于获取页面结构代码和相应的页面样式代码。

公共组件选择模块602，用于根据页面结构代码，从公共组件库中选择公共组件。

像素级尺寸确定模块603，用于根据页面样式代码，获取公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸。根据相对尺寸和当前的显示屏像素级尺寸，确定公共组件的像素级尺寸。

绘制模块604，用于按照公共组件的像素级尺寸绘制公共组件，形成页面。

上述页面生成装置600，根据页面结构代码，可以直接从公共组件库中选择公共组件，而不必在页面结构代码中详细定义每个页面元素，节省页面结构代码的代码量，提高生成页面的效率。而且，根据页面样式代码，获取公共组件相对于显示屏像素级尺寸的相对尺寸，再利用相对尺寸和当前的显示屏像素级尺寸确定公共组件的像素级尺寸，进而据此绘制公共组件。因采用了相对尺寸，可自适应调整公共组件的尺寸，在不同的显示屏上都可以显示出基本一致的效果，避免了因显示屏差异而导致的在呈现页面时的兼容性问题。

在一个实施例中，相对尺寸为公共组件的像素级尺寸与显示屏像素级尺寸的比值再乘以预设值。

像素级尺寸确定模块603还用于将相对尺寸乘以当前的显示屏像素级尺寸再除以预设值，得到公共组件的像素级尺寸。

在一个实施例中，显示屏像素级尺寸为以像素为单位的显示屏宽度或以像素为单位的显示屏高度。

如图7所示，在一个实施例中，页面生成装置600还包括：标准样式格式数据生成模块605，用于将页面结构代码转换为包括公共组件的像素级尺寸的标准样式格式数据。绘制模块604还用于按照标准样式格式数据绘制公共组件，形成页面。

本实施例中，将页面样式代码转换为包括公共组件的像素级尺寸的标准样式格式数据，进而利用该标准样式格式数据生成页面，可进一步提高兼容性。

在一个实施例中，页面样式代码根据采用相对尺寸计量公共组件的尺寸的自定义样式格式数据生成。

本实施例中，采用相对尺寸计量公共组件的尺寸的自定义样式格式数据，便于开发人员按照相对尺寸直接编辑自定义样式格式数据，降低了开发难度，提高了开发效率。

在一个实施例中，页面生成装置600还包括：事件处理模块606，用于获取用于触发公共组件尺寸变化的事件；响应于事件，获取公共组件尺寸变化后相对于显示屏像素级尺寸的相对尺寸。

像素级尺寸确定模块603还用于根据变化后的相对尺寸和当前的显示屏像素级尺寸，确定变化后的公共组件的像素级尺寸。

绘制模块604还用于按照变化后的公共组件的像素级尺寸更新页面中的公共组件。

本实施例中，当公共组件尺寸变化时，根据公共组件尺寸变化后的相对尺寸更新页面中的该公共组件的尺寸，保证了各种显示屏上的公共组件在变化时依然能够保持基本一致的效果，进一步提高了兼容性。

在一个实施例中，公共组件选择模块602还用于通过子应用程序，并根据页面结构代码，从母应用程序所提供的公共组件库中选择公共组件；子应用程序运行于母应用程序所提供的环境中，且母应用程序运行于操作系统上。

本实施例中，母应用程序可以依据不同的页面结构代码和页面样式代码，在该母应用程序提供的环境中实现不同的子应用程序。当母应用程序在运行时，便可以利用母程序提供的公共组件快速构建子应用程序的页面，节省了安装应用程序的耗时，提高了应用程序使用效率。

在一个实施例中，绘制模块604还用于通过子应用程序，按照公共组件的像素级尺寸，绘制公共组件，形成属于子应用程序的页面。

本实施例中，在母应用程序提供的环境中，各种子应用程序可以根据页面结构代码所指定的相对尺寸，自适应调整公共组件的尺寸，在不同的显示屏上都可以显示出基本一致的效果，避免了因显示屏差异而导致的在呈现页面时的兼容性问题。

在一个实施例中，绘制模块604还用于通过子应用程序，生成属于子应用程序的页面，并在页面中保留与公共组件的像素级尺寸匹配的空间；通过母应用程序，按照公共组件的像素级尺寸，在空间中绘制公共组件。

本实施例中，通过母应用程序和子应用程序的协作，生成属于子应用程序的页面，母应用程序提供补充的渲染能力，可以避免因子应用程序渲染能力不足而无法完成页面渲染的问题。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

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

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

Claims (18)

1.一种页面生成方法，包括：

获取页面结构代码和相应的页面样式代码；

根据所述页面结构代码，从公共组件库中选择公共组件；

根据所述页面样式代码，获取所述公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸；

根据所述相对尺寸和当前的显示屏像素级尺寸，确定所述公共组件的像素级尺寸；

按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面。

2.根据权利要求1所述的方法，其特征在于，所述相对尺寸为所述公共组件的像素级尺寸与显示屏像素级尺寸的比值再乘以预设值；

所述根据所述相对尺寸和当前的显示屏像素级尺寸，确定所述公共组件的像素级尺寸包括：

将所述相对尺寸乘以当前的显示屏像素级尺寸再除以所述预设值，得到所述公共组件的像素级尺寸。

3.根据权利要求2所述的方法，其特征在于，所述显示屏像素级尺寸为以像素为单位的显示屏宽度或以像素为单位的显示屏高度。

4.根据权利要求1所述的方法，其特征在于，所述根据所述相对尺寸和当前的显示屏像素级尺寸，确定所述公共组件的像素级尺寸之后，所述方法还包括：

将所述页面结构代码转换为包括所述公共组件的像素级尺寸的标准样式格式数据；

所述按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面，包括：

按照所述标准样式格式数据绘制所述公共组件，形成页面。

5.根据权利要求4所述的方法，其特征在于，所述页面样式代码根据采用相对尺寸计量所述公共组件的尺寸的自定义样式格式数据生成。

6.根据权利要求1所述的方法，其特征在于，所述按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面之后，所述方法还包括：

获取用于触发所述公共组件尺寸变化的事件；

响应于所述事件，获取所述公共组件尺寸变化后相对于显示屏像素级尺寸的相对尺寸；

根据变化后的所述相对尺寸和当前的显示屏像素级尺寸，确定所述变化后的公共组件的像素级尺寸；

按照变化后的公共组件的像素级尺寸更新所述页面中的所述公共组件。

7.根据权利要求1至6中任一项所述的方法，其特征在于，所述根据所述页面结构代码，从公共组件库中选择公共组件包括：

通过子应用程序，并根据所述页面结构代码，从母应用程序所提供的公共组件库中选择公共组件；所述子应用程序运行于所述母应用程序所提供的环境中，且所述母应用程序运行于操作系统上。

8.根据权利要求7所述的方法，其特征在于，所述按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面包括：

通过所述子应用程序，按照所述公共组件的像素级尺寸，绘制公共组件，形成属于所述子应用程序的页面。

9.根据权利要求7所述的方法，其特征在于，所述按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面包括：

通过所述子应用程序，生成属于所述子应用程序的页面，并在所述页面中保留与所述公共组件的像素级尺寸匹配的空间；

通过所述母应用程序，按照所述公共组件的像素级尺寸，在所述空间中绘制所述公共组件。

10.一种页面生成装置，其特征在于，包括：

代码获取模块，用于获取页面结构代码和相应的页面样式代码；

公共组件选择模块，用于根据所述页面结构代码，从公共组件库中选择公共组件；

像素级尺寸确定模块，用于根据所述页面样式代码，获取所述公共组件的像素级尺寸相对于显示屏像素级尺寸的相对尺寸；根据所述相对尺寸和当前的显示屏像素级尺寸，确定所述公共组件的像素级尺寸；

绘制模块，用于按照所述公共组件的像素级尺寸绘制所述公共组件，形成页面。

11.根据权利要求10所述的装置，其特征在于，所述相对尺寸为所述公共组件的像素级尺寸与显示屏像素级尺寸的比值再乘以预设值；

所述像素级尺寸确定模块还用于将所述相对尺寸乘以当前的显示屏像素级尺寸再除以所述预设值，得到所述公共组件的像素级尺寸。

12.根据权利要求11所述的装置，其特征在于，所述显示屏像素级尺寸为以像素为单位的显示屏宽度或以像素为单位的显示屏高度。

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

标准样式格式数据生成模块，用于将所述页面结构代码转换为包括所述公共组件的像素级尺寸的标准样式格式数据；

所述绘制模块还用于按照所述标准样式格式数据绘制所述公共组件，形成页面。

14.根据权利要求13所述的装置，其特征在于，所述页面样式代码根据采用相对尺寸计量所述公共组件的尺寸的自定义样式格式数据生成。

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

事件处理模块，用于获取用于触发所述公共组件尺寸变化的事件；响应于所述事件，获取所述公共组件尺寸变化后相对于显示屏像素级尺寸的相对尺寸；

所述像素级尺寸确定模块还用于根据变化后的所述相对尺寸和当前的显示屏像素级尺寸，确定所述变化后的公共组件的像素级尺寸；

所述绘制模块还用于按照变化后的公共组件的像素级尺寸更新所述页面中的所述公共组件。

16.根据权利要求10至15中任一项所述的装置，其特征在于，所述公共组件选择模块还用于通过子应用程序，并根据所述页面结构代码，从母应用程序所提供的公共组件库中选择公共组件；所述子应用程序运行于所述母应用程序所提供的环境中，且所述母应用程序运行于操作系统上。

17.根据权利要求16所述的装置，其特征在于，所述绘制模块还用于通过所述子应用程序，按照所述公共组件的像素级尺寸，绘制公共组件，形成属于所述子应用程序的页面。

18.根据权利要求16所述的装置，其特征在于，所述绘制模块还用于通过所述子应用程序，生成属于所述子应用程序的页面，并在所述页面中保留与所述公共组件的像素级尺寸匹配的空间；通过所述母应用程序，按照所述公共组件的像素级尺寸，在所述空间中绘制所述公共组件。