CN110308906A - 一种显示界面方法及装置 - Google Patents

一种显示界面方法及装置 Download PDF

Info

Publication number
CN110308906A
CN110308906A CN201910599842.6A CN201910599842A CN110308906A CN 110308906 A CN110308906 A CN 110308906A CN 201910599842 A CN201910599842 A CN 201910599842A CN 110308906 A CN110308906 A CN 110308906A
Authority
CN
China
Prior art keywords
code
topology data
card
target interface
stored
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910599842.6A
Other languages
English (en)
Inventor
陈知
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing QIYI Century Science and Technology Co Ltd
Original Assignee
Beijing QIYI Century Science and Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing QIYI Century Science and Technology Co Ltd filed Critical Beijing QIYI Century Science and Technology Co Ltd
Priority to CN201910599842.6A priority Critical patent/CN110308906A/zh
Publication of CN110308906A publication Critical patent/CN110308906A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/42—Syntactic analysis
    • G06F8/427—Parsing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/44—Encoding

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

一种显示界面方法及装置
技术领域
本发明涉及计算机技术领域，特别是涉及一种显示界面的方法及装置。
背景技术
目前，原生开发的移动端产品，其界面布局方式一般先通过将布局数据写成H5(Hyper Text Markup Language，第五代超文本标记语言)形式的代码，然后利用JSbridge(JavaScript Bridge)将H5形式的代码转换成界面布局的原生代码，之后，按照现有的Flexbox(Flexible box)布局描述标准解析生成的原生代码，将UI(User Interface,用户界面)元素根据解析过后的原生代码布局成最终的界面样式。
发明人在实现本发明的过程中发现，现有技术至少存在如下问题：
电子设备每次需要布局新的界面样式时，都需要执行一遍上述的步骤，这样每次界面布局都需要利用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(Personal Computer，个人计算机)终端和移动终端。电子设备中可以安装应用程序，用户可以使用电子设备体验应用程序界面形式动态化的功能。
下面将结合具体实施方式，对本申请实施例提供的一种显示界面的方法进行详细的说明，如图1所示，具体步骤如下：
步骤101，当检测到针对目标界面的显示指令时，获取服务器端下发的目标界面的布局数据。
本申请实施例中，用户可以使用电子设备打开应用程序，显示目标界面时，电子设备则可以从服务器端获取该应用程序所显示的目标界面的布局数据。该布局数据可以为一种UI元素(User Interface，用户界面)的布局代码，该布局代码是用于描述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元素的显示数据，显示完整的目标界面。
上述网络设备提到的通信总线可以是外设部件互连标准(英文：PeripheralComponent Interconnect，简称：PCI)总线或扩展工业标准结构(英文：Extended IndustryStandard Architecture，简称：EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
通信接口用于上述网络设备与其他设备之间的通信。
存储器可以包括随机存取存储器(英文：Random Access Memory，简称：RAM)，也可以包括非易失性存储器(英文：Non-Volatile Memory，简称：NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器可以是通用处理器，包括中央处理器(英文：Central ProcessingUnit，简称：CPU)、网络处理器(英文：Network Processor，简称：NP)等；还可以是数字信号处理器(英文：Digital Signal Processing，简称：DSP)、专用集成电路(英文：ApplicationSpecific Integrated Circuit，简称：ASIC)、现场可编程门阵列(英文：Field-Programmable Gate Array，简称：FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
基于相同的技术构思，本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质内存储有计算机程序，计算机程序被处理器执行时实现上述显示界面的方法步骤。
基于相同的技术构思，本申请实施例还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述显示界面的方法步骤。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本申请的保护范围内。

Claims (10)

1.一种显示界面的方法，其特征在于，所述方法包括：
当检测到针对目标界面的显示指令时，获取服务器端下发的所述目标界面的布局数据；
根据预先存储的布局方案，对所述布局数据进行解析，得到所述布局数据包含各UI元素的布局代码；
通过block容器运行所述各UI元素的布局代码，以显示所述目标界面。
2.根据权利要求1所述的方法，其特征在于，所述布局数据包含各UI元素的布局代码；所述布局代码用于描述各UI元素在所述界面的排列方式；所述排列方式包括横向UI排列方式，纵向UI排列方式和网格UI排列方式中的一种或多种的组合。
3.根据权利要求1所述的方法，其特征在于，所述方法还包括：
获取服务器端下发的跳转事件信息和推荐信息；
根据预先建立的事件引擎解析所述跳转事件信息和推荐信息与所述各UI元素的对应关系，并获取所述跳转事件信息的代码和用于显示所述推荐信息的代码；
根据所述对应关系，在所述UI元素的布局代码中添加跳转事件信息的代码和显示所述推荐信息的代码。
4.根据权利要求3所述的方法，其特征在于，所述目标界面的布局数据包含多个卡片的布局数据；
所述根据预先存储的布局方案，对所述布局数据进行解析包括：
将所述目标界面分成一个或多个卡片组合的形式；
获取相邻的UI元素所属分割线的权重，将权重最大的分割线样式作为界面划分的分割线样式；
确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在卡片集中，所述卡片集用于存储所述卡片；
将各UI元素中的所述跳转事件信息和所述推荐信息存储在所述卡片集中。
5.根据权利要求2所述的方法，其特征在于，所述通过block容器运行所述各UI元素的布局代码，以显示所述目标界面，包括：
将相同UI元素的布局代码存储在同一block中；
根据解析得到的布局数据将终端本地的UI元素的显示数据存储在所述block容器中；
通过各block容器运行所述各UI元素的布局代码，并根据所述终端本地的UI元素的显示数据，显示完整的目标界面。
6.一种显示界面装置，其特征在于，所述装置包括：
第一获取模块，用于当检测到针对目标界面的显示指令时，获取服务器端下发的所述目标界面的布局数据；
第一解析模块，用于根据预先存储的布局方案，对所述布局数据进行解析，得到所述布局数据包含各UI元素的布局代码；
第一运行模块，用于通过block容器运行所述各UI元素的布局代码，以显示所述目标界面。
7.根据权利要求6所述的装置，其特征在于，所述装置还包括：
第二获取模块，用于获取服务器端下发的跳转事件信息和推荐信息；
第二解析模块，用于根据预先建立的事件引擎解析所述跳转事件信息和推荐信息与所述各UI元素的对应关系，并获取所述跳转事件信息的代码和用于显示所述推荐信息的代码；
添加模块，用于根据所述对应关系，在所述UI元素的布局代码中添加跳转事件信息的代码和显示所述推荐信息的代码。
8.根据权利要求6所述的装置，其特征在于，所述目标界面的布局数据包含多个卡片的布局数据；
所述装置还包括：
分层模块，用于将所述目标界面分成一个或多个卡片组合的形式；
第三获取模块，用于获取相邻的UI元素所属分割线的权重，将权重最大的分割线样式作为界面划分的分割线样式；
第一存储模块，用于确定布局数据相同的卡片，并将布局数据相同的卡片中的一个卡片存储在卡片集中，所述卡片集用于存储所述卡片；还用于将各UI元素中的所述跳转事件信息和所述推荐信息存储在所述卡片集中。
9.根据权利要求6所述的装置，其特征在于，所述装置还包括：
第二存储模块，用于将相同UI元素的布局代码存储在同一block中；还用于根据解析得到的布局数据将所述终端本地的UI元素的显示数据存储在所述block容器中；
第二运行模块，用于通过各block容器运行所述各UI元素的布局代码，并根据所述终端本地的UI元素的显示数据，显示完整的目标界面。
10.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；
存储器，用于存放计算机程序；
处理器，用于执行存储器上所存放的程序时，实现权利要求1-5任一所述的方法步骤。
CN201910599842.6A 2019-07-04 2019-07-04 一种显示界面方法及装置 Pending CN110308906A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910599842.6A CN110308906A (zh) 2019-07-04 2019-07-04 一种显示界面方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910599842.6A CN110308906A (zh) 2019-07-04 2019-07-04 一种显示界面方法及装置

Publications (1)

Publication Number Publication Date
CN110308906A true CN110308906A (zh) 2019-10-08

Family

ID=68079011

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910599842.6A Pending CN110308906A (zh) 2019-07-04 2019-07-04 一种显示界面方法及装置

Country Status (1)

Country Link
CN (1) CN110308906A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111309293A (zh) * 2020-02-27 2020-06-19 北京奇艺世纪科技有限公司 一种界面框架构建方法、装置、电子设备及存储介质
CN115048172A (zh) * 2022-06-17 2022-09-13 北京奇艺世纪科技有限公司 一种页面适配方法、装置、电子设备及存储介质
WO2024082468A1 (zh) * 2022-10-18 2024-04-25 阿里巴巴（中国）有限公司 智能用户界面服务处理方法、系统及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070038954A1 (en) * 2005-05-30 2007-02-15 Canon Kabushiki Kaisha Displaying apparatus of ui parts and displaying method of ui parts
US20130111382A1 (en) * 2011-11-02 2013-05-02 Microsoft Corporation Data collection interaction using customized layouts
CN105573773A (zh) * 2014-10-17 2016-05-11 Tcl集团股份有限公司 一种布局用户界面的方法、装置和系统
CN106990950A (zh) * 2017-01-09 2017-07-28 深圳大宇无限科技有限公司 界面布局的方法和装置
CN108509526A (zh) * 2018-03-13 2018-09-07 百度在线网络技术（北京）有限公司 用于动态布局移动应用的界面元素的方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070038954A1 (en) * 2005-05-30 2007-02-15 Canon Kabushiki Kaisha Displaying apparatus of ui parts and displaying method of ui parts
US20130111382A1 (en) * 2011-11-02 2013-05-02 Microsoft Corporation Data collection interaction using customized layouts
CN105573773A (zh) * 2014-10-17 2016-05-11 Tcl集团股份有限公司 一种布局用户界面的方法、装置和系统
CN106990950A (zh) * 2017-01-09 2017-07-28 深圳大宇无限科技有限公司 界面布局的方法和装置
CN108509526A (zh) * 2018-03-13 2018-09-07 百度在线网络技术（北京）有限公司 用于动态布局移动应用的界面元素的方法和装置

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111309293A (zh) * 2020-02-27 2020-06-19 北京奇艺世纪科技有限公司 一种界面框架构建方法、装置、电子设备及存储介质
CN111309293B (zh) * 2020-02-27 2023-09-05 北京奇艺世纪科技有限公司 一种界面框架构建方法、装置、电子设备及存储介质
CN115048172A (zh) * 2022-06-17 2022-09-13 北京奇艺世纪科技有限公司 一种页面适配方法、装置、电子设备及存储介质
WO2024082468A1 (zh) * 2022-10-18 2024-04-25 阿里巴巴（中国）有限公司 智能用户界面服务处理方法、系统及电子设备

Similar Documents

Publication Publication Date Title
CN110308906A (zh) 一种显示界面方法及装置
CN105354022B (zh) 一种页面布局文件生成方法及装置
CN108090159A (zh) 一种网站页面的生成方法、装置、电子设备及存储介质
CN113190781B (zh) 页面布局方法、装置、设备及存储介质
CN107861713A (zh) 数据调用方法、装置及计算机可读存储介质
CN108198191A (zh) 图像处理方法及装置
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN110442341A (zh) 应用程序的界面配置方法、装置及终端设备
CN109814866A (zh) 页面应用转化为原生应用的处理方法和装置
US11799863B2 (en) Creation device, creation system, creation method, and creation program
CN109697414A (zh) 一种文本定位方法及装置
US20130132926A1 (en) Computer aided design system and method
CN109684008A (zh) 卡片渲染方法、装置、终端及计算机可读存储介质
CN104679391B (zh) 智能手表的图标显示方法及装置
US20150269271A1 (en) Method And Apparatus For Displaying A Webpage
CN111399831A (zh) 页面的展示方法和装置、存储介质、电子装置
CN108280099A (zh) 数据字典管理方法、装置及服务器
CN106168959A (zh) 网页布局方法及装置
CN113050921A (zh) 一种网页转换方法、装置、存储介质和计算机设备
CN108427580A (zh) 配置对命名重复的检测方法、存储介质和智能设备
CN104239326A (zh) 一种对网页字体进行缩放的方法、装置和系统
CN111459802B (zh) 一种基于GUI的Android应用程序WebView页面的测试方法、装置及设备
CN108052677A (zh) 页面处理方法、装置及可读存储介质
CN106776285A (zh) 网页前端调试方法及装置
CN106227692A (zh) 一种计算器的实现方法及终端

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination