CN107450912A - 页面的布局方法、装置及终端 - Google Patents

Abstract

本公开提供一种页面的布局方法、装置及终端，所述方法的一具体实施方式包括：获取预先建立的页面布局模型；采用所述页面布局模型对原页面数据进行处理得到中间数据；将所述中间数据解析到目标方法层，以得到目标数据；基于所述目标数据进行页面布局。该实施方式由于采用了预先建立的页面布局模型，使得原页面数据在编译前后，布局方式不会发生变化，从而解决了页面显示的布局与原始布局不一致的问题，提高了页面的显示效果。

Description

页面的布局方法、装置及终端

技术领域

本公开涉及计算机软件技术领域，特别涉及一种页面的布局方法、装置及终端。

背景技术

应用程序在终端设备上运行时，可能需要绘制页面，并通过用户界面向用户输出绘制的页面，绘制页面需要对页面进行布局。目前来说，一般是直接将原页面数据编译到目标方法层上，并根据编译到目标方法层上的目标数据进行页面布局。但是，在编译前后，某些布局方式可能会发生变化，从而导致页面显示的布局与原始布局不一致的问题，影响了页面的显示效果。

发明内容

为了解决上述技术问题，本公开提供一种页面的布局方法、装置及终端。

根据本公开实施例的第一方面，提供一种页面的布局方法，包括：

获取预先建立的页面布局模型；

采用所述页面布局模型对原页面数据进行处理得到中间数据；

将所述中间数据解析到目标方法层，以得到目标数据；

基于所述目标数据进行页面布局。

可选的，所述基于所述目标数据进行页面布局，包括：

获取预存的布局样式库；

基于所述目标数据从所述布局样式库中查找匹配的布局样式信息；

基于所述布局样式信息进行页面布局。

可选的，所述布局样式库中包括自定义的布局样式对应的样式信息。

可选的，所述布局样式库包括以下一项或多项：

样式信息；

组件信息；

解析编译顶层样式的数据。

根据本公开实施例的第二方面，提供一种页面的布局装置，包括：

获取模块，被配置为获取预先建立的页面布局模型；

处理模块，被配置为采用所述页面布局模型对原页面数据进行处理得到中间数据；

解析模块，被配置为将所述中间数据解析到目标方法层，以得到目标数据；

布局模块，被配置为基于所述目标数据进行页面布局。

可选的，所述布局模块包括：

获取子模块，被配置为获取预存的布局样式库；

查找子模块，被配置为基于所述目标数据从所述布局样式库中查找匹配的布局样式信息；

布局子模块，被配置为基于所述布局样式信息进行页面布局。

可选的，所述布局样式库中包括自定义的布局样式对应的样式信息。

可选的，所述布局样式库包括以下一项或多项：

样式信息；

组件信息；

解析编译顶层样式的数据。

根据本公开实施例的第三方面，提供一种终端，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取预先建立的页面布局模型；

采用所述页面布局模型对原页面数据进行处理得到中间数据；

将所述中间数据解析到目标方法层，以得到目标数据；

基于所述目标数据进行页面布局。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现如第一方面或第一方面的任一种可能的实现方式所述的页面的布局方法中所执行的操作。

本公开的实施例提供的技术方案可以包括以下有益效果：

本公开的实施例提供的页面的布局方法，通过获取预先建立的页面布局模型，采用该页面布局模型对原页面数据进行处理得到中间数据，将该中间数据解析到目标方法层，从而得到目标数据，并基于该目标数据进行页面布局。由于采用了预先建立的页面布局模型，使得原页面数据在编译前后，布局方式不会发生变化，从而解决了页面显示的布局与原始布局不一致的问题，提高了页面的显示效果。

本公开的实施例提供的页面的布局方法，通过获取预先建立的页面布局模型，采用页面布局模型对原页面数据进行处理得到中间数据，将中间数据解析到目标方法层，以得到目标数据，获取预存的布局样式库，基于目标数据从布局样式库中查找匹配的布局样式信息，并基于布局样式信息进行页面布局。由于采用了预先建立的页面布局模型以及预存的布局样式库，使得页面数据在编译前后，布局方式不会发生变化，从而进一步解决了页面显示的布局与原始布局不一致的问题，有助于提高页面的显示效果。

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

附图说明

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

图1是本公开根据一示例性实施例示出的一种页面的布局方法的流程图；

图2是本公开根据一示例性实施例示出的另一种页面的布局方法的流程图；

图3是本公开根据一示例性实施例示出的一种页面的布局装置的框图；

图4是本公开根据一示例性实施例示出的另一种页面的布局装置的框图；

图5是本公开根据一示例性实施例示出的一种页面的布局装置的一结构示意图。

具体实施方式

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

在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

为了便于本领域技术人员更好地理解本公开中的技术方案，首先，对本公开的应用背景进行简要说明，说明如下：为了增加开发人员开发应用程序的便捷性，以及增加应用程序的灵活性、可移植性等。目前在很多操作***平台下，均支持使用非自身平台下的页面描述方式进行应用程序页面的开发。例如，开发者可以基于A页面描述方式开发应用程序页面(甚至采用A页面描述方式+B页面描述方式的混合开发方式)，得到原页面数据，该应用程序在目标操作***平台下运行时，通过中间工具解析为在该操作***平台下所支持的B页面描述方式，从而进行页面的绘制和渲染。

举例来说，在目前的Android***中，应用程序一般可以通过原生native页面输出信息，而由于一些业务以及灵活性的需要，还需要输出web页面的信息。因此，在Android平台下，很多应用程序的页面采用hybrid技术进行开发，但是，在Android平台下web页面的渲染没有native页面的渲染流畅，会影响应用程序的页面显示效果，因而在进行渲染前需要将web页面数据转换为基于Android下的native页面。然而，web页面在向native页面进行转化时，并不能做到完美兼容，有可能会有某些页面转化效果不理想。

本公开提供的页面的绘制方法、装置及终端均适用于上述应用背景，并为解决上述问题提供一个工具或软件运行平台，完成基于A页面描述方式开发得到的原页面数据向不同操作***平台下的转换，下面将结合具体的实施例对本公开进行详细描述。

如图1所示，图1是根据一示例性实施例示出的一种页面的布局方法的流程图，该方法可以应用于终端设备中。执行主体可以是安装于终端设备的上述软件运行平台或工具。在本实施例中，为了便于理解，结合具有显示屏并能安装第三方应用程序的终端设备来举例说明。本领域技术人员可以理解，该终端设备可以包括但不限于诸如智能手机的移动终端设备、智能穿戴式设备、平板电脑、个人数字助理、电子书阅读器等等。该方法包括以下步骤：

在步骤101中，获取预先建立的页面布局模型。

在本实施例中，可以预先基于应用程序在不同平台下的页面描述语言以及开发语言，创建页面布局模型。该页面布局模型为不同平台下的页面描述语言以及开发语言之间的转换规范，使得应用程序在不同平台下，页面描述语言以及开发语言能够相互转换，并且，页面布局并不会发生变化。具体来说，可以基于页面布局的测试结果，创建该页面布局模型。

在步骤102中，采用上述页面布局模型对原页面数据进行处理得到中间数据。

其中，在本步骤102中，该原页面数据对应于上述提到的基于A页面描述方式开发得到的页面数据。

在步骤103中，将该中间数据解析到目标方法层，以得到目标数据。

其中，在本步骤103中，该目标数据对应于上述提到的目标操作***平台下所支持的基于B页面描述方式的页面数据。

在本实施例中，可以采用上述页面布局模型对原页面数据进行处理，从而得到中间数据。并将该中间数据解析到目标方法层，以得到目标数据。其中，原页面数据可以包括但不限于web页面数据，中间数据分别与原页面数据和目标数据存在一一对应的映射关系，因此，原页面数据和目标数据也具有一一对应的关系。其中，目标方法层可以是基于操作***的方法层，例如，如果操作***为安卓***，则目标方法层可以是原生方法层。可以理解，目标方法层可以是针对操作***的任意合理的方法层，本公开对此方面不限定。

在步骤104中，基于该目标数据进行页面布局。

在本实施例中，可以基于该目标数据进行页面布局，具体来说，首先获取预存的布局样式库，接着，可以基于该目标数据从该布局样式库中查找匹配的布局样式信息，并基于该布局样式信息进行页面布局。

在本实施例中，可以预先设置布局样式库，然后，将布局样式库进行存储。其中，该布局样式库中可以包括自定义的布局样式对应的样式信息。具体来说，该布局样式库可以包括以下一项或多项：样式信息；组件信息；解析编译顶层样式的数据。

其中，样式信息可以包括但不限于：对齐方式信息，字体信息以及文本信息等等。组件信息可以包括但不限于：界面内组件信息(例如，div组件信息，文本组件信息)；选择型组件(例如，picker组件信息，swiper组件信息)；接口型组件(例如，prompt组件信息，dialog组件信息)。解析编译顶层样式数据可以包括但不限于：标签名(例如，class信息，id信息等)直接父子关系；标签名混合关系等。

本公开的上述实施例提供的页面的布局方法，通过获取预先建立的页面布局模型，采用该页面布局模型对原页面数据进行处理得到中间数据，将该中间数据解析到目标方法层，从而得到目标数据，并基于该目标数据进行页面布局。由于采用了预先建立的页面布局模型，使得原页面数据在编译前后，布局方式不会发生变化，从而解决了页面显示的布局与原始布局不一致的问题，提高了页面的显示效果。

如图2所示，图2根据一示例性实施例示出的另一种页面的布局方法的流程图，该实施例详细描述了基于目标数据进行页面布局的过程，该方法可以应用于终端设备中。执行主体可以是上述安装于终端设备的上述软件运行平台或工具，该方法可以包括以下步骤：

在步骤201中，获取预先建立的页面布局模型。

在步骤202中，采用页面布局模型对原页面数据进行处理得到中间数据。

在步骤203中，将中间数据解析到目标方法层，以得到目标数据。

在步骤204中，获取预存的布局样式库。

在步骤205中，基于目标数据从布局样式库中查找匹配的布局样式信息。

在步骤206中，基于布局样式信息进行页面布局。

需要说明的是，对于与图1实施例中相同的步骤，在上述图2实施例中不再进行赘述，相关内容可参见图1实施例。

本公开的上述实施例提供的页面的布局方法，通过获取预先建立的页面布局模型，采用页面布局模型对原页面数据进行处理得到中间数据，将中间数据解析到目标方法层，以得到目标数据，获取预存的布局样式库，基于目标数据从布局样式库中查找匹配的布局样式信息，并基于布局样式信息进行页面布局。由于采用了预先建立的页面布局模型以及预存的布局样式库，使得原页面数据在编译前后，布局方式不会发生变化，从而进一步解决了页面显示的布局与原始布局不一致的问题，有助于提高页面的显示效果。

应当注意，尽管在附图中以特定顺序描述了本公开方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，流程图中描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

与前述页面的布局方法实施例相对应，本公开还提供了页面的布局装置及其所应用的终端的实施例。

如图3所示，图3是本公开根据一示例性实施例示出的一种页面的布局装置框图，该装置包括：获取模块301，处理模块302，解析模块303以及布局模块304。

其中，获取模块301，被配置为获取预先建立的页面布局模型。

处理模块302，被配置为采用上述页面布局模型对原页面数据进行处理得到中间数据。

解析模块303，被配置为将上述中间数据解析到目标方法层，以得到目标数据。

布局模块304，被配置为基于该目标数据进行页面布局。

如图4所示，图4是本公开根据一示例性实施例示出的另一种页面的布局装置框图，该实施例在前述图3所示实施例的基础上，布局模块304可以包括：获取子模块401，查找子模块402和布局子模块403。

其中，获取子模块401，被配置为获取预存的布局样式库。

查找子模块402，被配置为基于目标数据从布局样式库中查找匹配的布局样式信息。

布局子模块403，被配置为基于该布局样式信息进行页面布局。

在一些可选实施方式中，该布局样式库中包括自定义的布局样式对应的样式信息。

在另一些可选实施方式中，该布局样式库包括以下一项或多项：

样式信息；

组件信息；

解析编译顶层样式的数据。

应当理解，上述装置可以预先设置在终端设备中，也可以通过下载等方式而加载到终端设备中。上述装置中的相应模块可以与终端设备中的模块相互配合以实现页面的布局方案。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

相应的，本公开还提供一种终端，该终端包括有处理器；用于存储处理器可执行指令的存储器；其中，该处理器被配置为：

获取预先建立的页面布局模型；

采用所述页面布局模型对原页面数据进行处理得到中间数据；

将所述中间数据解析到目标方法层，以得到目标数据；

基于所述目标数据进行页面布局。

图5是根据一示例性实施例示出的一种页面的布局装置9900的一结构示意图。例如，装置9900可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图5，装置9900可以包括以下一个或多个组件：处理组件9902，存储器9904，电源组件9906，多媒体组件9908，音频组件9910，输入/输出(I/O)的接口9912，传感器组件9914，以及通信组件9916。

处理组件9902通常控制装置9900的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件9902可以包括一个或多个处理器9920来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件9902可以包括一个或多个模块，便于处理组件9902和其他组件之间的交互。例如，处理组件9902可以包括多媒体模块，以方便多媒体组件9908和处理组件9902之间的交互。

存储器9904被配置为存储各种类型的数据以支持在装置9900的操作。这些数据的示例包括用于在装置9900上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器9904可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件9906为装置9900的各种组件提供电力。电源组件9906可以包括电源管理***，一个或多个电源，及其他与为装置9900生成、管理和分配电力相关联的组件。

多媒体组件9908包括在所述装置9900和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件9908包括一个前置摄像头和/或后置摄像头。当装置9900处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。

音频组件9910被配置为输出和/或输入音频信号。例如，音频组件9910包括一个麦克风(MIC)，当装置9900处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器9904或经由通信组件9916发送。在一些实施例中，音频组件9910还包括一个扬声器，用于输出音频信号。

I/O接口9912为处理组件9902和***接口模块之间提供接口，上述***接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件9914包括一个或多个传感器，用于为装置9900提供各个方面的状态评估。例如，传感器组件9914可以检测到装置9900的打开/关闭状态，组件的相对定位，例如所述组件为装置9900的显示器和小键盘，传感器组件9914还可以检测装置9900或装置9900一个组件的位置改变，用户与装置9900接触的存在或不存在，装置9900方位或加速/减速和装置9900的温度变化。传感器组件9914可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件9914还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件9914还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器，微波传感器或温度传感器。

通信组件9916被配置为便于装置9900和其他设备之间有线或无线方式的通信。装置9900可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件9916经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件9916还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置9900可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器9904，上述指令可由装置9900的处理器9920执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，上述计算机可读存储介质上存储有至少一条指令，所述指令可以由处理器加载并执行上述实施例中所提供的页面的布局方法中所执行的操作。

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

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

Claims (10)

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

获取预先建立的页面布局模型；

采用所述页面布局模型对原页面数据进行处理得到中间数据；

将所述中间数据解析到目标方法层，以得到目标数据；

基于所述目标数据进行页面布局。

2.根据权利要求1所述的方法，其特征在于，所述基于所述目标数据进行页面布局，包括：

获取预存的布局样式库；

基于所述目标数据从所述布局样式库中查找匹配的布局样式信息；

基于所述布局样式信息进行页面布局。

3.根据权利要求2所述的方法，其特征在于，所述布局样式库中包括自定义的布局样式对应的样式信息。

4.根据权利要求3所述的方法，其特征在于，所述布局样式库包括以下一项或多项：

样式信息；

组件信息；

解析编译顶层样式的数据。

5.一种页面的布局装置，其特征在于，所述装置包括：

获取模块，被配置为获取预先建立的页面布局模型；

处理模块，被配置为采用所述页面布局模型对原页面数据进行处理得到中间数据；

解析模块，被配置为将所述中间数据解析到目标方法层，以得到目标数据；

布局模块，被配置为基于所述目标数据进行页面布局。

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

获取子模块，被配置为获取预存的布局样式库；

查找子模块，被配置为基于所述目标数据从所述布局样式库中查找匹配的布局样式信息；

布局子模块，被配置为基于所述布局样式信息进行页面布局。

7.根据权利要求6所述的装置，其特征在于，所述布局样式库中包括自定义的布局样式对应的样式信息。

8.根据权利要求7所述的装置，其特征在于，所述布局样式库包括以下一项或多项：

样式信息；

组件信息；

解析编译顶层样式的数据。

9.一种终端，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取预先建立的页面布局模型；

采用所述页面布局模型对原页面数据进行处理得到中间数据；

将所述中间数据解析到目标方法层，以得到目标数据；

基于所述目标数据进行页面布局。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现如权利要求1至权利要求5任一项所述的页面的布局方法中所执行的操作。