一种显示界面方法及装置与流程

本发明涉及计算机技术领域，特别是涉及一种显示界面的方法及装置。

背景技术：

目前，原生开发的移动端产品，其界面布局方式一般先通过将布局数据写成h5(hypertextmarkuplanguage，第五代超文本标记语言)形式的代码，然后利用jsbridge(javascriptbridge)将h5形式的代码转换成界面布局的原生代码，之后，按照现有的flexbox(flexiblebox)布局描述标准解析生成的原生代码，将ui(userinterface,用户界面)元素根据解析过后的原生代码布局成最终的界面样式。

发明人在实现本发明的过程中发现，现有技术至少存在如下问题：

电子设备每次需要布局新的界面样式时，都需要执行一遍上述的步骤，这样每次界面布局都需要利用jsbridge来将h5的代码转换成原生代码，效率低下，产品性能不佳，用户体验较差。

技术实现要素：

本发明实施例的目的在于提供一种显示界面的方法及装置，以实现提高页面布局的效率，解决在以往页面布局时，需要利用jsbridge来将h5的代码转换成原生代码的麻烦。具体技术方案如下：

第一方面，为了达到上述目的，本申请实施例公开了一种显示界面的方法，方法应用于电子设备，方法包括如下步骤：

当检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据；

根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码；

通过block容器运行各ui元素的布局代码，以显示目标界面。

可选的，布局数据包含各ui元素的布局代码；布局代码用于描述各ui元素在界面的排列方式；排列方式包括横向ui排列方式，纵向ui排列方式和网格ui排列方式中的一种或多种的组合。

可选的，方法还包括：

获取服务器端下发的跳转事件信息和推荐信息；

根据预先建立的事件引擎解析跳转事件信息和推荐信息与各ui元素的对应关系，并获取跳转事件信息的代码和用于显示推荐信息的代码；

根据对应关系，在ui元素的布局代码中添加跳转事件信息的代码和显示推荐信息的代码。

可选的，目标界面的布局数据包含多个卡片的布局数据；

根据预先存储的布局方案，对布局数据进行解析包括：

将目标界面分成一个或多个卡片组合的形式；

获取相邻的ui元素所属分割线的权重，将权重最大的分割线样式作为界面划分的分割线样式；

确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在卡片集中，卡片集用于存储卡片；

将各ui元素中的跳转事件信息和推荐信息存储在卡片集中。

可选的，通过block容器运行各ui元素的布局代码，以显示目标界面，包括：

将相同ui元素的布局代码存储在同一block中；

根据解析得到的布局数据将终端本地的ui元素的显示数据存储在block容器中；

通过各block容器运行各ui元素的布局代码，并根据终端本地的ui元素的显示数据，显示完整的目标界面。

第二方面，为了达到上述目的，本发明实施例公开了一种显示界面的装置，装置应用于电子设备，装置包括:

第一获取模块，用于当检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据；

第一解析模块，用于根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码；

第一运行模块，用于通过block容器运行各ui元素的布局代码，以显示目标界面。

可选的，装置还包括：

第二获取模块，用于获取服务器端下发的跳转事件信息和推荐信息；

第二解析模块，用于根据预先建立的事件引擎解析跳转事件信息和推荐信息与各ui元素的对应关系，并获取跳转事件信息的代码和用于显示推荐信息的代码；

添加模块，用于根据对应关系，在ui元素的布局代码中添加跳转事件信息的代码和显示推荐信息的代码。

可选的，目标界面的布局数据包含多个卡片的布局数据；

装置还包括：

分层模块，用于将目标界面分成一个或多个卡片组合的形式；

第三获取模块，用于获取相邻的ui元素所属分割线的权重，将权重最大的分割线样式作为界面划分的分割线样式；

第一存储模块，用于确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在卡片集中，卡片集用于存储卡片；还用于将各ui元素中的跳转事件信息和推荐信息存储在卡片集中。

可选的，装置还包括：

第二存储模块，用于将相同ui元素的布局代码存储在同一block中；还用于根据解析得到的布局数据将终端本地的ui元素的显示数据存储在block容器中；

第二运行模块，用于通过各block容器运行各ui元素的布局代码，并根据终端本地的ui元素的显示数据，显示完整的目标界面。

第三方面，提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现第一方面的方法步骤。

第四方面，提供了一种计算机可读存储介质，计算机可读存储介质内存储有计算机程序，计算机程序被处理器执行时实现第一方面的方法步骤。

第五方面，提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述第一方面的方法。

本发明实施例有益效果：本发明实施例提供的一种显示界面的方法及装置，其中，电子设备可以在检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据，根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码，通过block容器运行各ui元素的布局代码，以显示目标界面。基于本方案，电子设备可以解析服务器端下发的布局数据，并根据解析结果将基础ui元素布局成完整的界面样式，无需先将布局数据写成h5形式的代码，之后再利用jsbridge将h5形式的代码转换成原生代码，减少电子设备操作，提高电子设备效率，同时也提高了用户体验。

当然，实施本发明的任一产品或方法并不一定需要同时达到以上的所有优点。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种显示界面的方法流程图；

图2为本申请实施例提供的一种分层的目标界面的示意图；

图3为本申请实施例提供的一种应用程序的显示界面的示意图；

图4为本申请实施例提供的一种显示界面的装置的结构示意图；

图5为本申请实施例提供的一种显示界面的装置的结构示意图；

图6为本申请实施例提供的一种显示界面的装置的结构示意图；

图7为本申请实施例提供的一种显示界面的装置的结构示意图；

图8为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。

本申请实施例提供了一种显示界面的方法，该方法可以应用于电子设备，其中，电子设备可以为pc(personalcomputer，个人计算机)终端和移动终端。电子设备中可以安装应用程序，用户可以使用电子设备体验应用程序界面形式动态化的功能。

下面将结合具体实施方式，对本申请实施例提供的一种显示界面的方法进行详细的说明，如图1所示，具体步骤如下：

步骤101，当检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据。

本申请实施例中，用户可以使用电子设备打开应用程序，显示目标界面时，电子设备则可以从服务器端获取该应用程序所显示的目标界面的布局数据。该布局数据可以为一种ui元素(userinterface，用户界面)的布局代码，该布局代码是用于描述ui元素在该界面的排列方式，该排列方式包括横向ui排列方式，纵向ui排列方式和网格ui排列方式中的一种或多种的组合。其中，电子设备可以根据横向ui的排列方式来做横向布局，根据纵向ui的排列方式来做纵向布局，根据网格ui的排列方式来做网格布局。

步骤102，根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码。

本申请实施例中，当电子设备接收到服务器端下发的布局数据时，将该布局数据根据预先存储的布局方案进行解析，电子设备可以获取解析之后的布局数据，该布局数据包含各ui元素的布局代码。

步骤103，通过block容器运行各ui元素的布局代码，以显示目标界面。

本申请实施例中，电子设备可以通过block容器运行各个ui元素的布局代码，并根据本地的ui元素的显示数据，显示最终的目标界面。

可选的，电子设备还可以进行以下操作：

步骤一、获取服务器端下发的跳转事件信息和推荐信息。

本申请实施例中，电子设备可以获取服务器端下发的跳转事件信息和推荐信息。

步骤二、根据预先建立的事件引擎解析跳转事件信息和推荐信息与各ui元素的对应关系，并获取跳转事件信息的代码和用于显示推荐信息的代码。

本申请实施例中，电子设备在获取服务器端下发的跳转事件信息和推荐信息之后，电子设备可以根据预先建立的事件引擎解析跳转事件信息和推荐信息与各ui元素之间的对应关系，并获取跳转事件信息的代码和用于显示推荐信息的代码。

步骤三、根据对应关系，在ui元素的布局代码中添加跳转事件信息的代码和显示推荐信息的代码。

本申请实施例中，电子设备根据跳转事件信息和推荐信息与各ui元素之间的对应关系，将获取到的跳转事件信息的代码和用于显示推荐信息的代码添加到ui元素的布局代码当中。之后，当用户点击或者长按有跳转事件信息或者有推荐信息的ui元素时，电子设备就可以完成对应的事件跳转并显示对应的推荐信息。

可选的，该目标界面的布局数据包含多个卡片的布局数据；

电子设备根据预先存储的布局方案，对该布局数据进行解析包括以下步骤，该解析步骤是在非主线程中实现：

步骤一、将目标界面分成一个或多个卡片组合的形式。

本申请实施例中，电子设备可以将目标界面分成一个或多个卡片组合的形式，该卡片当中又包含多个block显示的ui元素。如图2所示，为本申请实施例提供的一种分层的目标界面的示意图。该目标界面包括两个卡片：卡片1、卡片2，以及两个卡片中的四个block显示的ui元素，ui元素1，ui元素2，ui元素3，ui元素4。其中最大的矩形框为目标界面，中等矩形框为卡片，最小的矩形框为block显示的ui元素。

步骤二、获取相邻的ui元素所属分割线的权重，将权重最大的分割线样式作为界面划分的分割线样式。

本申请实施例中，电子设备可以获取相邻的ui元素所属分割线的权重，并将权重最大的分割线样式作为界面划分的分割线样式。比如分割线的样式为用的颜色是黑色，宽度为2像素宽。

步骤三、确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在卡片集中，卡片集用于存储卡片。

本申请实施例中，电子设备可以确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在一个卡片集当中。后续，在使用相同卡片的布局数据时，就不需要重新在去定义该卡片。

步骤四、将各ui元素中的跳转事件信息和推荐信息存储在卡片集中。

本申请实施例中，电子设备可以在将布局数据相同的卡片中的一个卡片存储在卡片集中之后，将各ui元素中的跳转事件信息和推荐信息也存储在该卡片集中。

可选的，电子设备在通过block容器运行各ui元素的布局代码，以显示目标界面包括以下步骤：

步骤一、将相同ui元素的布局代码存储在同一block中。

本申请实施例中，电子设备可以根据上述解析的结果，将相同ui元素的布局代码存储在同一block中。

步骤二、根据解析得到的布局数据将终端本地的ui元素的显示数据存储在block容器中。

本申请实施例中，电子设备可以根据解析得到的布局数据将终端本地的ui元素的显示数据存储在block容器中。

步骤三、通过各block容器运行各ui元素的布局代码，并根据终端本地的ui元素的显示数据，显示完整的目标界面。

本申请实施例中，电子设备可以通过各block容器运行各ui元素的布局代码，并结合存储在该block容器中的终端本地的ui元素的显示数据，显示完整的目标界面。该运行过如图3所示，为本申请实施例提供的一种应用程序的显示界面的示意图。该显示界面包括多个card和多个block以及block中显示的ui元素。其中，最大的矩形框为整个显示界面，中等大小的矩形框为该界面中的card，card中又包括多个block容器，最小的矩形框表示block容器，该block容器中包含各种ui元素，如图片1，图片2，文字简介等。

本申请实施例中，电子设备可以在检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据，根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码，通过block容器运行各ui元素的布局代码，以显示目标界面。基于本方案，电子设备可以解析服务器端下发的布局数据，并根据解析结果将基础ui元素布局成完整的界面样式，无需先将布局数据写成h5形式的代码，之后再利用jsbridge将h5形式的代码转换成原生代码，减少电子设备操作，提高电子设备效率，同时也提高了用户体验。

基于相同的技术构思，本申请实施例还提供了一种显示界面的装置，如图4所示，该装置包括：

第一获取模块401，用于当检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据；

第一解析模块402，用于根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码；

第一运行模块403，用于通过block容器运行各ui元素的布局代码，以显示目标界面。

可选的，如图5所示，装置还包括：

第二获取模块404，用于获取服务器端下发的跳转事件信息和推荐信息；

第二解析模块405，用于根据预先建立的事件引擎解析跳转事件信息和推荐信息与各ui元素的对应关系，并获取跳转事件信息的代码和用于显示推荐信息的代码；

添加模块406，用于根据对应关系，在ui元素的布局代码中添加跳转事件信息的代码和显示推荐信息的代码。

可选的，目标界面的布局数据包含多个卡片的布局数据；

如图6所示，装置还包括：

分层模块407，用于将目标界面分成一个或多个卡片组合的形式；

第三获取模块408，用于获取相邻的ui元素所属分割线的权重，将权重最大的分割线样式作为界面划分的分割线样式；

第一存储模块409，用于确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在卡片集中，卡片集用于存储卡片；还用于将各ui元素中的跳转事件信息和推荐信息存储在卡片集中。

可选的，如图7所示，装置还包括：

第二存储模块410，用于将相同ui元素的布局代码存储在同一block中；还用于根据解析得到的布局数据将终端本地的ui元素的显示数据存储在block容器中；

第二运行模块411，用于通过各block容器运行各ui元素的布局代码，并根据终端本地的ui元素的显示数据，显示完整的目标界面。

本发明实施例提供的一种显示界面的方法及装置，其中，电子设备可以在检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据，根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码，通过block容器运行各ui元素的布局代码，以显示目标界面。基于本方案，电子设备可以解析服务器端下发的布局数据，并根据解析结果将基础ui元素布局成完整的界面样式，无需先将布局数据写成h5形式的代码，之后再利用jsbridge将h5形式的代码转换成原生代码，减少电子设备操作，提高电子设备效率，同时也提高了用户体验。

本申请实施例还提供了一种电子设备，如图8所示，包括处理器801、通信接口802、存储器803和通信总线804，其中，处理器801，通信接口802，存储器803通过通信总线804完成相互间的通信，

存储器803，用于存放计算机程序；

处理器801，用于执行存储器803上所存放的程序时，实现如下步骤：

当检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据；

根据预先存储的布局方案，对布局数据进行解析，得到布局数据包含各ui元素的布局代码；

通过block容器运行各ui元素的布局代码，以显示目标界面。

可选的，布局数据包含各ui元素的布局代码；布局代码用于描述各ui元素在界面的排列方式；排列方式包括横向ui排列方式，纵向ui排列方式和网格ui排列方式中的一种或多种的组合。

可选的，方法还包括：

获取服务器端下发的跳转事件信息和推荐信息；

根据预先建立的事件引擎解析跳转事件信息和推荐信息与各ui元素的对应关系，并获取跳转事件信息的代码和用于显示推荐信息的代码；

根据对应关系，在ui元素的布局代码中添加跳转事件信息的代码和显示推荐信息的代码。

可选的，目标界面的布局数据包含多个卡片的布局数据；

根据预先存储的布局方案，对布局数据进行解析包括：

将目标界面分成一个或多个卡片组合的形式；

获取相邻的ui元素所属分割线的权重，将权重最大的分割线样式作为界面划分的分割线样式；

确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在卡片集中，卡片集用于存储卡片；

将各ui元素中的跳转事件信息和推荐信息存储在卡片集中。

可选的，通过block容器运行各ui元素的布局代码，以显示目标界面，包括：

将相同ui元素的布局代码存储在同一block中；

根据解析得到的布局数据将终端本地的ui元素的显示数据存储在block容器中；

通过各block容器运行各ui元素的布局代码，并根据终端本地的ui元素的显示数据，显示完整的目标界面。

上述网络设备提到的通信总线可以是外设部件互连标准(英文：peripheralcomponentinterconnect，简称：pci)总线或扩展工业标准结构(英文：extendedindustrystandardarchitecture，简称：eisa)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述网络设备与其他设备之间的通信。

存储器可以包括随机存取存储器(英文：randomaccessmemory，简称：ram)，也可以包括非易失性存储器(英文：non-volatilememory，简称：nvm)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(英文：centralprocessingunit，简称：cpu)、网络处理器(英文：networkprocessor，简称：np)等；还可以是数字信号处理器(英文：digitalsignalprocessing，简称：dsp)、专用集成电路(英文：applicationspecificintegratedcircuit，简称：asic)、现场可编程门阵列(英文：field-programmablegatearray，简称：fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

基于相同的技术构思，本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质内存储有计算机程序，计算机程序被处理器执行时实现上述显示界面的方法步骤。

基于相同的技术构思，本申请实施例还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述显示界面的方法步骤。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或者半导体介质(例如固态硬盘solidstatedisk(ssd))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本申请的保护范围内。