[发明专利]一种显示界面方法及装置

说明书

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

技术领域

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

背景技术

目前，原生开发的移动端产品，其界面布局方式一般先通过将布局数据写成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元素的布局代码，以显示目标界面，包括：