CN117453218A - 内容展示界面生成方法、装置、设备、介质及程序产品 - Google Patents

Abstract

本申请实施例提供一种内容展示界面生成方法、装置、设备、介质及程序产品，至少应用于地图领域和图形渲染领域，其中，方法包括：响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图；元素布局图中包括固定元素和可变元素；对元素布局图中的固定元素进行渲染，得到固定元素界面图；获取针对元素布局图中的可变元素的数据更新指令；响应于数据更新指令，查询可变元素的状态变量；并基于状态变量确定待渲染可变元素；将待渲染可变元素渲染至固定元素界面图中，得到生成的内容展示界面。通过本申请，能够提高自定义内容展示界面生成的效率，从而实现高频率、高性能的更新自定义内容展示界面。

Description

内容展示界面生成方法、装置、设备、介质及程序产品

技术领域

本申请实施例涉及互联网领域，涉及但不限于一种内容展示界面生成方法、装置、设备、介质及程序产品。

背景技术

在孪生地球开放体系中，为了定制展示自定义用户界面(UI，User Interface)，目前常用的解决方案主要有以下两种：基于文档对象模型(DOM，Document Object Model)转换为图片展示和更新的方案，以及，基于固定UI固定属性的展示和更新方案。

但是，基于DOM转换为图片展示和更新的方案，虽然可以方便的定制各种各样的UI界面，自定义程度极高，但在需要高频更新UI面板上的信息数据的场景下存在性能瓶颈，因为每次更新数据都需要重新绘制DOM的所有元素，通过离屏渲染将元素绘制成图片，并使用新生成的图片更新UI以达到更新信息数据的目的。当需要更新的UI很多并且更新频率很快时，就会产生更新速度过慢的现象，导致UI更新卡顿发生。而基于固定UI固定属性的展示和更新方案，由孪生地球开放体系制作指定的UI，并将所有能够更新的UI内容进行提取，封装成对应的属性字段，使得使用者能够加载指定的UI进行展示，并在需要更新UI的时候，通过对应的属性字段更新其内容，从而能够展示UI并进行高频次、高性能的更新，但是该方案能够使用的前提条件是需要孪生地球开放体系预先制作对应的UI并提取属性，当使用者的需求变更以及使用者增多从而更多的需求、更多的UI展示效果、更多的应用场景被提出后，孪生地球开放体系无法穷举制作所有种类的UI，使得使用场景受限，无法满足使用者完全进行自定义的需求。由此可见，相关技术中的方案均存在UI更新时频率和性能较低的问题。

发明内容

本申请实施例提供一种内容展示界面生成方法、装置、设备、介质及程序产品，至少能够应用于地图领域和图形渲染领域中，能够提高自定义内容展示界面生成的效率，从而实现高频率、高性能的更新自定义内容展示界面。

本申请实施例的技术方案是这样实现的：

本申请实施例提供一种内容展示界面生成方法，包括：响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图；所述元素布局图中包括固定元素和可变元素；对所述元素布局图中的固定元素进行渲染，得到固定元素界面图；获取针对所述元素布局图中的可变元素的数据更新指令；响应于所述数据更新指令，查询所述可变元素的状态变量；并基于所述状态变量确定待渲染可变元素；将所述待渲染可变元素渲染至所述固定元素界面图中，得到生成的内容展示界面。

本申请实施例提供一种内容展示界面生成装置，包括：构建模块，用于响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图；所述元素布局图中包括固定元素和可变元素；固定元素渲染模块，用于对所述元素布局图中的固定元素进行渲染，得到固定元素界面图；获取模块，用于获取针对所述元素布局图中的可变元素的数据更新指令；查询模块，用于响应于所述数据更新指令，查询所述可变元素的状态变量；并基于所述状态变量确定待渲染可变元素；可变元素渲染模块，用于将所述待渲染可变元素渲染至所述固定元素界面图中，得到生成的内容展示界面。

在一些实施例中，所述构建模块还用于：响应于目标对象通过预设的调用接口输入的界面构建操作，获取所述元素布局图中的每一元素的布局属性参数；所述元素包括所述固定元素和所述可变元素；将每一所述元素按照所述布局属性参数，布局至预设的全屏布局面板上，得到所述待生成界面的元素布局图。

在一些实施例中，所述装置还包括：存储模块，用于在获取所述元素布局图中的每一元素的布局属性参数时，获取所述元素布局图中的每一元素的状态类型和内容信息；基于每一所述元素的状态类型，确定相应元素的状态变量，并将每一所述元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中；将每一所述元素的内容信息与相应元素进行映射后以特定格式存储至预设的数组中。

在一些实施例中，所述状态类型包括固定类型和可变类型；所述存储模块还用于：响应于任一元素的状态类型为所述固定类型，确定所述元素的状态变量为空值，并将所述空值写入至与所述元素具有第一映射关系的预设的状态属性字段中；响应于任一元素的状态类型为所述可变类型，确定所述元素的状态变量；所述状态变量包括多个变量值；构建所述状态变量的状态表达式，并将所述状态表达式写入至与所述元素具有第二映射关系的预设的状态属性字段中；所述状态表达式用于表征所述状态变量的变化特征。

在一些实施例中，所述装置还包括：映射关系构建模块，用于在将每一所述元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中之前，获取每一所述元素的元素标识；对预设的状态属性存储单元进行划分，形成多个状态属性字段；基于所述元素标识，构建每一所述元素与一个状态属性字段之间的所述第一映射关系或者所述第二映射关系。

在一些实施例中，所述存储模块还用于：构建每一所述元素的内容信息的键值对，其中，所述键值对中的键用于表征相应元素的状态类型，所述键值对中的值是所述元素的待展示的所述内容信息；响应于任一元素的状态类型为所述固定类型，确定所述元素的键值对中的值为空值，并将所述固定元素的内容信息写入至与所述元素具有第三映射关系的预设的数组中；响应于任一元素的状态类型为所述可变类型，确定所述元素的状态变量中的每一变量值对应的所述内容信息；将每一所述变量值作为所述元素的一个键值对中的键、将对应的所述内容信息作为所述元素的键值对中的值，构建所述元素在全部变量值下的多个键值对；将全部键值对中的值写入至与所述元素具有第四映射关系的预设的数组中。

在一些实施例中，所述固定元素渲染模块还用于：从状态属性字段中提取每一所述元素的状态变量，并基于所述状态变量从所述元素布局图中确定出固定元素；标记所述元素布局图中的全部固定元素；从所述预设的数组中提取每一固定元素的内容信息，并基于所提取的内容信息对全部固定元素进行渲染，得到所述固定元素界面图。

在一些实施例中，所述查询模块还用于：解析所述数据更新指令，得到所述数据更新指令中所携带的更新变量值；针对任一可变元素，查询所述可变元素的状态变量所包括的全部变量值；响应于所述全部变量值中具有与所述更新变量值相同的变量值，将所述可变元素确定为待渲染可变元素。

在一些实施例中，所述可变元素渲染模块还用于：从所述预设的数组中查询与所述相同的变量值对应的内容信息；基于所查询的内容信息，将所述待渲染可变元素渲染至所述固定元素界面图中，得到所述内容展示界面。

在一些实施例中，所述查询模块还用于：解析所述数据更新指令，得到所述数据更新指令中所携带的更新变量值区间；针对任一可变元素，查询所述可变元素的状态变量所包括的全部变量值对应的变量区间；响应于所述变量区间与所述更新变量值区间具有重叠区间，将所述可变元素确定为待渲染可变元素。

在一些实施例中，所述重叠区间中包括至少一个变量值；所述可变元素渲染模块还用于：将所述重叠区间中的每一变量值确定为目标变量值；从所述预设的数组中查询与每一所述目标变量值对应的内容信息；按照所述目标变量值在所述重叠区间中的先后顺序，依次基于查询的每一所述目标变量值对应的内容信息，将所述待渲染可变元素渲染至所述固定元素界面图中，得到内容展示界面序列；所述内容展示界面序列包括至少一个内容展示界面。

本申请实施例提供一种电子设备，包括：存储器，用于存储可执行指令；处理器，用于执行所述存储器中存储的可执行指令时，实现上述的内容展示界面生成方法。

本申请实施例提供一种计算机程序产品，该计算机程序产品包括可执行指令，可执行指令存储在计算机可读存储介质中；其中，电子设备的处理器从计算机可读存储介质中读取可执行指令，并执行可执行指令时，实现上述的内容展示界面生成方法。

本申请实施例提供一种计算机可读存储介质，存储有可执行指令，用于引起处理器执行所述可执行指令时，实现上述的内容展示界面生成方法。

本申请实施例具有以下有益效果：

本申请实施例中，一方面，目标对象能够通过预设的调用接口输入界面构建操作，从而构建待生成界面的元素布局图，在该元素布局图中包括固定元素和可变元素；然后，先对元素布局图中的固定元素进行渲染，由于固定元素是不会发生改变的元素，因此进行一次渲染之后即可在后续修改内容展示界面时无需再次渲染，从而极大的降低了渲染的数据量，从而提高渲染效率，提高自定义内容展示界面生成的效率。另一方面，在得到固定元素界面图之后，可以接收针对元素布局图中的可变元素的数据更新指令，从而查询可变元素的状态变量，基于状态变量确定待渲染可变元素，将待渲染可变元素渲染至固定元素界面图中。如此，能够自定义内容展示界面中的可变元素，以及可变元素对应的状态变量，也就是说，能够自定义可变元素基于怎样变化的状态变量来进行展示界面的渲染，从而在实现个性化展示界面生成的同时，还能够降低在可变元素渲染时的数据量，进一步提高自定义内容展示界面生成的效率，从而实现高频率、高性能的更新自定义内容展示界面。

附图说明

图1是本申请实施例提供的内容展示界面生成系统的一个可选的架构示意图；

图2是本申请实施例提供的电子设备的结构示意图；

图3是本申请实施例提供的内容展示界面生成方法的一个可选的流程示意图；

图4是本申请实施例提供的内容展示界面生成方法的另一个可选的流程示意图；

图5是本申请实施例提供的确定相应元素的状态变量的实现流程示意图；

图6是本申请实施例提供的将内容信息与元素映射后存储的实现流程示意图；

图7是本申请实施例提供的对固定元素进行渲染的实现流程示意图；

图8是本申请实施例提供的两种确定待渲染可变元素的实现流程示意图；

图9是本申请实施例提供的内容展示界面生成方法应用于某个网联场景中的界面图；

图10是本申请实施例提供的内容展示界面生成方法的整体流程示意图；

图11是本申请实施例提供的构建交通灯的可变UI示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。除非另有定义，本申请实施例所使用的所有的技术和科学术语与属于本申请实施例的技术领域的技术人员通常理解的含义相同。本申请实施例所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

在对本申请实施例提供的内容展示界面生成方法进行说明之前，首先对本申请实施例中涉及的专业术语进行说明：

(1)响应于，用于表示所执行的操作所依赖的条件或者状态，当满足所依赖的条件或状态时，所执行的一个或多个操作可以是实时的，也可以具有设定的延迟；在没有特别说明的情况下，所执行的多个操作不存在执行先后顺序的限制。

(2)文档对象模型(DOM，Document Object Model)：是一个网络文档的编程接口，它代表页面，以便程序可以改变文档的结构、风格和内容。

(3)统一资源定位符(URL，Uniform Resource Locator)，是浏览器上用来检索web上公布的任何资源的机制。

(4)base64：是一种用64个字符来表示任意二进制数据的方法，可以将图片转换为base64的形式，通过文本的方式使用更少的存储空间存储图片，加载base64的图片时无需再进行网络请求。

相关技术中，基于DOM转换为图片展示和更新的方案，通过DOM的方式，对于任何样式的UI，都可以使用前端开发语言JavaScript进行开发，并在开发完成后将内容转换为图片，通过发布到云端生成URL或者转换为base64的方式，将该内容传递给孪生地球引擎将该内容加载到指定的UI中进行展示。当需要更新UI中的内容时，仍需要再按照本方案的步骤，重新生成DOM内容，再转换为图片，最后在UI中进行展示。

基于固定UI固定属性的展示和更新方案，当需要展示一种样式的UI时，需要与孪生地球开放体系进行约定，使得孪生地球引擎能够根据约定的布局展示出相对应的UI内容，并将该内容以一种固定的UI类型进行开放使用，使得使用孪生地球开放体系的用户，能够显式的指定加载该类型的UI。对于所有需要更新的部分，需要以约定好的属性字段进行索引，使得使用孪生地球开放体系的用户能够针对这些属性进行有目的的更新。

但是，基于DOM转换为图片展示和更新的方案，当需要更新的UI很多并且更新频率很快时，就会产生更新速度过慢的现象，导致UI更新卡顿发生。实际验证下，当10个UI界面都需要以每秒1次的频率进行信息更新时，本方案就已经存在卡顿现象，无法高性能完成内容展示。而基于固定UI固定属性的展示和更新方案，方案能够使用的前提条件是需要孪生地球开放体系预先制作对应的UI并提取属性，当更多的需求、更多的UI展示效果、更多的应用场景被提出后，孪生地球开放体系无法穷举制作所有种类的UI，使得使用场景受限，无法满足使用者完全进行自定义的需求。

基于相关技术中所存在的问题，本申请实施例针对孪生地球开放体系中对外开放的自定义UI模块进行优化，解决了相关技术方案中UI无法便捷的自定义展示以及UI无法高频率更新的问题。本申请实施例的目标是在孪生地球的开放体系中，能够高自由度、高性能的定制展示自定义UI，并且能够高频率、高性能的更新UI中的信息。

具体来说，本申请实施例提供的内容展示界面生成方法中，首先，响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图；元素布局图中包括固定元素和可变元素；然后，对元素布局图中的固定元素进行渲染，得到固定元素界面图；再然后，获取针对元素布局图中的可变元素的数据更新指令；响应于数据更新指令，查询可变元素的状态变量；并基于状态变量确定待渲染可变元素；最后，将待渲染可变元素渲染至固定元素界面图中，得到生成的内容展示界面。如此，提高自定义内容展示界面生成的效率，从而实现高频率、高性能的更新自定义内容展示界面。

这里，首先说明本申请实施例的内容展示界面生成设备的示例性应用，该内容展示界面生成设备是用于实现内容展示界面生成方法的电子设备。在一种实现方式中，本申请实施例提供的内容展示界面生成设备(即电子设备)可以实施为终端，也可以实施为服务器。在一种实现方式中，本申请实施例提供的内容展示界面生成设备可以实施为笔记本电脑，平板电脑，台式计算机，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备，智能机器人，智能家电和智能车载设备等任意的具备内容展示界面生成功能或者显示功能的终端；在另一种实现方式中，本申请实施例提供的内容展示界面生成设备还可以实施为服务器，其中，服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(CDN，ContentDeliver y Network)、以及大数据和人工智能平台等基础云计算服务的云服务器。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请实施例中不做限制。下面，将说明内容展示界面生成设备实施为服务器时的示例性应用。

参见图1，图1是本申请实施例提供的内容展示界面生成系统的一个可选的架构示意图，为实现生成自定义的内容展示界面或者对内容展示界面进行自定义更新，可以提供一内容展示界面生成应用或者任意一种应用程序，内容展示界面生成应用能够采用本申请实施例提供的内容展示界面生成方法生成内容展示界面，并在内容展示界面生成应用的客户端显示该内容展示界面；或者，该应用程序可以是任意一种应用程序，例如，可以是视频应用、购物应用、信息推荐应用等具有UI界面生成和展示需要的应用程序，可以将本申请实施例提供的内容展示界面生成方法作为该应用程序的功能模型，部署于该应用程序的后台服务器，从而实现在应用程序生成新的内容展示界面或者更新内容展示界面时，采用本申请实施例提供的内容展示界面生成方法生成最终的内容展示界面。

这里以内容展示界面生成应用为例进行说明，本申请实施例的内容展示界面生成系统10中至少包括终端100、网络200和服务器300，终端100上运行有该内容展示界面生成应用，其中服务器300是内容展示界面生成应用的后台服务器。服务器300可以构成本申请实施例的内容展示界面生成设备，即通过服务器300实现本申请实施例的内容展示界面生成方法。终端100通过网络200连接服务器300，网络200可以是广域网或者局域网，又或者是二者的组合。

参见图1，在生成内容展示界面时，用户可以通过终端100在内容展示界面生成应用的客户端执行界面构建操作，该界面构建操作例如可以是固定元素和可变元素的配置操作和构建等。客户端在接收到用户的界面构建操作之后，可以生成界面构建请求，并通过终端100将界面构建请求发送给服务器300。服务器300在接收到界面构建请求时，响应于界面构建请求，构建待生成界面的元素布局图；其中，元素布局图中包括固定元素和可变元素；然后，服务器300对元素布局图中的固定元素进行渲染，得到固定元素界面图。在得到固定元素界面图之后，还可以接收用户通过客户端向服务器300发送的针对元素布局图中的可变元素的数据更新指令；服务器300响应于数据更新指令，查询可变元素的状态变量；并基于状态变量确定待渲染可变元素；将待渲染可变元素渲染至固定元素界面图中，得到生成的内容展示界面。在得到内容展示界面之后，服务器300可以将内容展示界面发送给终端100，终端100可以在当前界面上展示该内容展示界面。

在一些实施例中，还可以由终端100自身执行本申请实施例的内容展示界面生成方法，也就是说，当终端100接收到用户输入的界面构建操作之后，由终端100构建待生成界面的元素布局图；元素布局图中包括固定元素和可变元素；然后，由终端100对元素布局图中的固定元素进行渲染，得到固定元素界面图。之后，终端100还可以获取用户针对元素布局图中的可变元素的数据更新指令，由终端100响应于数据更新指令，查询可变元素的状态变量；并基于状态变量确定待渲染可变元素；最后，由终端100将待渲染可变元素渲染至固定元素界面图中，得到生成的内容展示界面，并展示该内容展示界面。

本申请实施例所提供的内容展示界面生成方法还可以基于云平台并通过云技术来实现，例如，上述服务器300可以是云端服务器。通过云端服务器构建待生成界面的元素布局图，或者，通过云端服务器对元素布局图中的固定元素进行渲染，得到固定元素界面图，或者，通过云端服务器响应于数据更新指令，查询可变元素的状态变量，并基于状态变量确定待渲染可变元素，或者，通过云端服务器将待渲染可变元素渲染至固定元素界面图中，得到生成的内容展示界面等。

在一些实施例中，还可以具有云端存储器，可以将固定元素、可变元素、固定元素界面图、内容展示界面等存储至云端存储器中，也可以将可变元素的状态变量等存储至云端存储器中。这样，在接收到数据更新指令时，则可以从云端存储器中直接查询可变元素的状态变量，实现快速的将待渲染可变元素渲染至固定元素界面图中，从而提高内容展示界面生成的效率。

这里需要说明的是，云技术(Cloud technology)是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。云技术基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，其可以通过云计算来实现。

图2是本申请实施例提供的电子设备的结构示意图，图2所示的电子设备可以是内容展示界面生成设备，内容展示界面生成设备包括：至少一个处理器310、存储器350、至少一个网络接口320和用户接口330。信息处理设备中的各个组件通过总线系统340耦合在一起。可理解，总线系统340用于实现这些组件之间的连接通信。总线系统340除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图2中将各种总线都标为总线系统340。

处理器310可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。

用户接口330包括使得能够呈现媒体内容的一个或多个输出装置331，以及一个或多个输入装置332。

存储器350可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器350可选地包括在物理位置上远离处理器310的一个或多个存储设备。存储器350包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Memory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memory)。本申请实施例描述的存储器350旨在包括任意适合类型的存储器。在一些实施例中，存储器350能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。

操作系统351，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；网络通信模块352，用于经由一个或多个(有线或无线)网络接口320到达其他计算设备，示例性的网络接口320包括：蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB，Universal Serial Bus)等；输入处理模块353，用于对一个或多个来自一个或多个输入装置332之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。

在一些实施例中，本申请实施例提供的装置可采用软件方式实现，图2示出了存储在存储器350中的一种内容展示界面生成装置354，该内容展示界面生成装置354可以是电子设备中的内容展示界面生成装置，其可以是程序和插件等形式的软件，包括以下软件模块：构建模块3541、固定元素渲染模块3542、获取模块3543、查询模块3544和可变元素渲染模块3545，这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。

在一些实施例中，本申请实施例提供的装置可以采用硬件方式实现，作为示例，本申请实施例提供的装置可以是采用硬件译码处理器形式的处理器，其被编程以执行本申请实施例提供的内容展示界面生成方法，例如，硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC，Application Specific Integrated Circuit)、DSP、可编程逻辑器件(PLD，Programmable Logic Device)、复杂可编程逻辑器件(CPLD，ComplexProgrammable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable GateArray)或其他电子元件。

本申请各实施例提供的内容展示界面生成方法可以由电子设备来执行，其中，该电子设备可以是服务器也可以是终端，即本申请各实施例的内容展示界面生成方法可以通过服务器来执行，也可以通过终端来执行，或者也可以通过服务器与终端之间交互执行。

图3是本申请实施例提供的内容展示界面生成方法的一个可选的流程示意图，下面将结合图3示出的步骤进行说明，如图3所示，以内容展示界面生成方法的执行主体为服务器为例进行说明，方法包括以下步骤S101至步骤S105：

步骤S101，响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图。

本申请实施例中，在客户端提供调用接口，用户通过调用接口即可输入界面构建操作，界面构建操作用于操作请求构建新的内容展示界面。界面构建操作例如可以是用户针对固定元素和可变元素的配置操作和构建等，其中，配置操作用于配置可变元素和固定元素的基础信息、属性信息、状态信息、内容信息等。

基础信息包括但不限于可变元素的元素标识(可以是元素的id)、大小、形状等基础的信息；固定元素的元素标识(可以是元素的id)、大小、形状等基础的信息。属性信息包括但不限于可变元素的位置、与其他元素之间的压盖关系等布局属性参数；固定元素的位置、与其他元素之间的压盖关系等布局数据参数等。状态信息包括状态类型，状态类型包括固定类型和可变类型，固定类型为不可变类型，具有固定类型的元素为固定元素，具有可变类型的元素为可变元素。内容信息包括与相应元素对应的全部内容，例如，对于背景图和图片这两种类型的元素，内容信息可以是图片中的像素信息，其中，像素信息可以以url或base64的形式进行配置；对于文本这种类型的元素，内容信息可以是文本中的文字。

客户端在接收到用户的界面构建操作之后，可以生成界面构建请求，并将界面构建请求发送给服务器，以请求服务器基于用户的界面构建操作所配置的信息生成内容展示界面。

本申请实施例中，服务器可以响应于用户通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图。也就是说，基于用户在客户端配置的信息(包括但不限于可变元素和固定元素的基础信息、属性信息、状态信息等)，构建待生成界面的元素布局图，元素布局图中包括固定元素和可变元素。需要说明的是，在此时，所构建的元素布局图是未进行图像渲染的布局图，也就是说，在元素布局图中可以确定具有哪些固定元素、具有哪些可变元素，以及每个固定元素和每个可变元素在整个元素布局图中的位置、大小、压盖关系等于元素的布局相关的信息，但是此时的元素布局图仅具有与元素的实际内容信息无关的布局属性，即，元素布局图是未对元素的内容信息进行渲染、没有像素表现(即没有像素点和像素值)的、仅用于体现布局属性的布局图。

步骤S102，对元素布局图中的固定元素进行渲染，得到固定元素界面图。

本申请实施例中，由于固定元素是不可变元素，因此，固定元素在任何情况下只要基础的信息确定，则最终渲染后所能够呈现的状态和像素表现(即每一像素点的像素值均已知)就是固定的，因此，可以先对固定元素进行渲染，在像素层面上对固定元素进行呈现，即渲染出固定元素在对应的每一像素点的像素值，得到固定元素界面图。

本申请实施例中，在得到元素布局图之后，首先对固定元素进行渲染，这样在后续对其他的元素再进行渲染时，该固定元素的像素点的像素值已知，即已经完成渲染，因此，在后续用户配置可变元素的内容信息时，仅需渲染可变元素即可完成整个界面的渲染，从而能够提高整体的渲染效率，提高界面生成效率。并且，对于多个相近界面的更新过程，如果仅时可变元素发生改变，而固定元素均完全相同，那么预先将固定元素完成渲染，后续只需调整可变元素的渲染即可，可以极大的提高内容展示界面的更新效率。

步骤S103，获取针对元素布局图中的可变元素的数据更新指令。

本申请实施例中，在对固定元素进行渲染的同时，或者，在对固定元素进行渲染之后，还可以接收用户通过客户端发送的针对元素布局图中的可变元素的数据更新指令，该数据更新指令用于请求对元素布局图中的可变元素进行渲染，并且，数据更新指令中可以携带有每一可变元素的状态变量中的具体的变量值，因此，在后续对可变元素进行渲染时，可以基于该变量值确定出可变元素的待渲染信息，从而基于该待渲染信息对可变元素进行渲染。

这里需要说明的是，每一可变元素对应一状态变量，由于可变元素是可变的，因此状态变量中包括多个变量值，每一变量值对应的内容信息不同。在用户通过客户端向服务器发送可变元素的数据更新指令时，可以配置可变元素的状态变量的具体的目标变量值，此时，配置的目标变量值可以是一个固定的值，因此服务器可以从多个变量值中先确定是否存在该目标变量值，如果存在，则说明服务器中存储有与该变量值对应的内容信息，可以对该可变元素进行渲染，则可以执行后续的步骤；如果不存在，则说明服务器中没有存储与该变量值对应的内容信息，此时服务器可以向客户端发送提醒信息，以提醒用户对该变量值对应的内容信息进行内容配置，从而可以基于用户最新配置的内容信息执行后续对该可变元素的渲染；或者，如果不存在，还可以直接结束对该可变元素的渲染。

本申请实施例中，由于数据更新指令中可以携带本次待渲染的可变元素的目标变量值，因此，基于该目标变量值可以确定出相应的可变元素的内容信息，从而在对该可变元素进行渲染时，能够基于确定的内容信息进行准确的渲染。并且，由于用户通过数据更新指令也能够实现自定义配置可变元素的待渲染的内容信息，因此，能够提高最终可变元素的个性化渲染。

步骤S104，响应于数据更新指令，查询可变元素的状态变量；并基于状态变量确定待渲染可变元素。

本申请实施例中，在接收到数据更新指令之后，可以根据数据更新指令中携带的目标变量值查询该可变元素的状态变量，确定该目标变量值是否是状态变量中一个值，从而可以基于查询结果确定该可变元素是否可以被确定为待渲染可变元素。待渲染可变元素是指需要进行渲染的元素。

如果目标变量值是状态变量中一个值，则该可变元素可以被确定为待渲染可变元素；如果目标变量值不是状态变量中的值，则该可变元素可以被确定为非待渲染可变元素，可以进一步向客户端发送提醒信息，以提醒用户对该变量值对应的内容信息进行内容配置。

如果在预设的时间段内接收到用户针对该变量值配置的内容信息，则可以将该可变元素确定为待渲染可变元素；如果在预设的时间段内未接收到用户针对该变量值配置的内容信息，或者，在预设的时间段内接收到用户对该可变元素的禁止渲染指令，则可以将该可变元素确定为禁止渲染可变元素。如果任一可变元素为禁止渲染可变元素，则在本次渲染任务中，将不再对该可变元素进行渲染。

步骤S105，将待渲染可变元素渲染至固定元素界面图中，得到生成的内容展示界面。

本申请实施例中，在渲染待渲染可变元素之前，需要获取该待渲染可变元素的内容信息，其中，内容信息可以是从服务器预先存储的预设的数组中获取的，也可以是从用户通过客户端发送的针对变量值所配置的内容信息中获取。在得到待渲染可变元素的内容信息之后，可以基于该内容信息对待渲染可变元素进行渲染。

在渲染待渲染可变元素时，可以是在固定元素界面图的基础上进行渲染，也就是说，是将待渲染可变元素的内容信息渲染至固定元素界面图中，得到最终的内容展示界面。

本申请实施例提供的内容展示界面生成方法，一方面，目标对象能够通过预设的调用接口输入界面构建操作，从而构建待生成界面的元素布局图，在该元素布局图中包括固定元素和可变元素；然后，先对元素布局图中的固定元素进行渲染，由于固定元素是不会发生改变的元素，因此进行一次渲染之后即可在后续修改内容展示界面时无需再次渲染，从而极大的降低了渲染的数据量，从而提高渲染效率，提高自定义内容展示界面生成的效率。另一方面，在得到固定元素界面图之后，可以接收针对元素布局图中的可变元素的数据更新指令，从而查询可变元素的状态变量，基于状态变量确定待渲染可变元素，将待渲染可变元素渲染至固定元素界面图中。如此，能够自定义内容展示界面中的可变元素，以及可变元素对应的状态变量，也就是说，能够自定义可变元素基于怎样变化的状态变量来进行展示界面的渲染，从而在实现个性化展示界面生成的同时，还能够降低在可变元素渲染时的数据量，进一步提高自定义内容展示界面生成的效率，从而实现高频率、高性能的更新自定义内容展示界面。

下面对本申请实施例的应用场景进行举例说明。本申请实施例提供的内容展示界面生成方法至少可以应用于以下场景：

场景一：内容展示界面生成系统中至少包括终端和服务器，为实现生成自定义的内容展示界面或者对内容展示界面进行自定义更新，可以提供一内容展示界面生成应用，该内容展示界面生成应用运行在终端上，服务器是该内容展示界面生成应用的后台服务器。内容展示界面生成应用能够采用本申请实施例提供的内容展示界面生成方法生成内容展示界面，也就是说，可以在内容展示界面生成应用的客户端接收目标对象(例如可以是用户)的界面构建操作，客户端可以通过预设的调用接口输入该界面构建操作，从而实现向服务器发送内容展示界面生成请求。服务器可以响应于该内容展示界面生成请求，先构建待生成界面的元素布局图，然后，基于该元素布局图渲染得到最终的内容展示界面。在得到该内容展示界面之后，服务器可以将该内容展示界面发送给客户端，并实现在内容展示界面生成应用的客户端显示所生成的内容展示界面。在对内容展示界面进行更新时，也是采用同样的方式，将该内容展示界面的更新请求发送给服务器，服务器响应于该更新请求，采用与生成内容展示界面相同的步骤生成新的内容展示界面，从而实现对内容展示界面的更新。

场景二：内容展示界面生成系统中至少包括终端和服务器，为实现生成自定义的内容展示界面或者对内容展示界面进行自定义更新，可以提供一应用程序，该应用程序可以是任意一种应用程序，例如，可以是视频应用、购物应用、信息推荐应用等具有UI界面生成和展示需要的应用程序，服务器构成该应用程序的后台服务器。可以将本申请实施例提供的内容展示界面生成方法作为该应用程序的功能模型，部署于该应用程序的后台服务器中，从而实现在应用程序生成新的内容展示界面或者更新内容展示界面时，采用本申请实施例提供的内容展示界面生成方法生成最终的内容展示界面。在实现的过程中，服务器可以自动调用该功能模块生成内容展示界面，或者生成更新后的内容展示界面，并将生成的内容展示界面发送给应用程序的客户端进行展示。

下面将以上述场景一为例，对本申请实施例的内容展示界面生成方法进行说明。图4是本申请实施例提供的内容展示界面生成方法的另一个可选的流程示意图，如图4所示，方法包括以下步骤S201至步骤S213：

步骤S201，终端通过内容展示界面生成应用的客户端接收目标对象的界面构建操作。

步骤S202，终端通过预设的调用接口向服务器输入该界面构建操作。

步骤S203，服务器响应于接收到界面构建操作，获取元素布局图中的每一元素的布局属性参数。

这里，布局属性参数包括但不限于元素的位置、与其他元素之间的压盖关系等。

元素的位置可以采用绝对布局确定位置，对于整个界面的布局，可以以整个界面上的任意一点作为坐标原点(0,0)的位置。例如，为了方便布局，可以将整个布局的左上角作为坐标原点(0,0)点，基于该坐标原点即可构建二维坐标系，其中，整个界面向右为x方向的正方形，向下为y方向的正方向，这样，对于每个元素，该元素的位置则可以表示为元素左上角的点在二维坐标系中的坐标点。如某元素的位置为(0,1)，则表明该元素最左上角的点位于二维坐标系中的(0,1)坐标点。由于元素的大小和形状等属于元素的基础信息，是已知的信息，因此，在知道元素的位置之后，结合元素的基础信息，即可确定出整个元素在二维坐标系中的整体布局情况，即可以确定出整个元素在整个界面上的布局情况。

元素与其他元素之间的压盖关系可以以压盖值来表示，压盖值可以取值为0到100的任意实数。压盖值可以是人工设置的，也可以根据该元素的属性、整个界面的布局规划、元素的重要性、整个界面的设计要求等信息来确定。对于不同的两个元素，压盖值较小的元素会被压盖值较大的元素压盖，压盖值相同的两个元素可以按照元素的构建顺序，后构建的压盖先构建的。

步骤S204，服务器将每一元素按照布局属性参数，布局至预设的全屏布局面板上，得到待生成界面的元素布局图。

这里，全屏布局面板是未布局任何元素的初始空白面板。在默认该全屏布局面板处于水平状态的情况下(即全屏布局面板对应的长方形水平铺展于纸面，全屏布局面板对应的长方形的上下两条边与纸面的上下两条边平行)，全屏布局面板的左上角对应上述二维坐标系的坐标原点，位于全屏布局面板最上侧的边对应上述二维坐标系的x轴，位于全屏布局面板最左侧的边对应上述二维坐标系的y轴。

由于已知每一元素的位置和基础信息，因此，可以基于每一元素的位置和基础信息确定出元素在全屏布局面板中占据的位置和形状、大小等。在实现的过程中，可以将元素的位置标记于全屏布局面板相应的位置，可以以元素的元素标识进行标记，即在该元素的位置在全屏布局面板中对应的位置处标记该元素的元素标识。在将全部元素均标记至全屏布局面板中之后，即可得到待生成界面的元素布局图。

本申请实施例中，基于每一元素布局属性参数，将每一元素布局至预设的与构建的二维坐标系对应的全屏布局面板上，从而能够对全部元素进行准确的布局，得到准确的元素布局图。

步骤S205，服务器获取元素布局图中的每一元素的状态类型和内容信息。

这里，状态信息包括状态类型，状态类型包括固定类型和可变类型，固定类型为不可变类型，具有固定类型的元素为固定元素，具有可变类型的元素为可变元素。

内容信息包括与相应元素对应的全部内容，例如，对于背景图和图片这两种类型的元素，内容信息可以是图片中的像素信息，其中，像素信息可以以url或base64的形式进行配置；对于文本这种类型的元素，内容信息可以是文本中的文字。

步骤S206，服务器基于每一元素的状态类型，确定相应元素的状态变量，并将每一元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中。

在一些实施例中，参见图5，图5示出了步骤S206中确定相应元素的状态变量，可以通过以下步骤S2061至步骤S2063实现：

步骤S2061，响应于任一元素的状态类型为固定类型，确定元素的状态变量为空值，并将空值写入至与元素具有第一映射关系的预设的状态属性字段中。

本申请实施例中，每一元素在服务器预设的存储单元中对应一预设的状态属性字段，该状态属性字段用于存储该元素的状态变量。每一元素与预设的状态属性字段的对应关系可以包括第一映射关系和第二映射关系，其中，对于固定元素，该固定元素与状态属性字段之间具有第一映射关系；对于可变元素，该可变元素与状态属性字段之间具有第二映射关系。基于该第一映射关系或者第二映射关系，即可确定出元素对应的用于写入该元素的状态变量的状态属性字段具体是哪个字段。

如果任一元素的状态类型为固定类型，则该元素为固定元素，因此，该固定元素是不可变元素，则该固定元素的状态变量可以被置为空值。那么，在将该元素的状态变量写入该元素对应的状态属性字段中时，则可以将该空值写入该元素对应的状态属性字段中。

步骤S2062，响应于任一元素的状态类型为可变类型，确定元素的状态变量；状态变量包括多个变量值。

如果任一元素的状态类型为可变类型，则该元素为可变元素，因此，该可变元素的状态变量可以是具有多个变量值的状态变量，也就是说，该可变元素的状态变量具有多个变量值，通过变量值的改变，实现该元素的可变(这里元素的可变在界面展示的角度来理解，就是该元素可以展示出不同的像素，从而具体不同的展示状态)。

步骤S2063，构建状态变量的状态表达式，并将状态表达式写入至与元素具有第二映射关系的预设的状态属性字段中。

本申请实施例中，在将可变元素的状态变量写入该元素对应的状态属性字段中时，则先构建该状态变量的状态表达式，然后，将状态表达式写入至与元素具有第二映射关系的预设的状态属性字段中。状态表达式用于表征状态变量的变化特征，状态表达式是基于状态变量的多个变量值来构建的，通过状态表达式即可解析出该可变元素的多个变量值。

在一些实施例中，在将可变元素的状态变量写入该元素对应的状态属性字段中时，还可以直接将该可变元素的全部变量值写入该元素对应的状态属性字段中，只是相比于写入状态表达式的方式，可能会存在待写入的变量值较多，而存在数据写入两较大，内存占用较大的问题。

本申请实施例再提供一种第一映射关系和第二映射关系的构建方法，可以在将每一元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中之前构建第一映射关系和第二映射关系，其中，构建方法包括以下步骤：首先，获取每一元素的元素标识；然后，对预设的状态属性存储单元进行划分，形成多个状态属性字段；最后，基于元素标识，构建每一元素与一个状态属性字段之间的第一映射关系或者第二映射关系。

步骤S207，服务器将每一元素的内容信息与相应元素进行映射后以特定格式存储至预设的数组中。

在一些实施例中，参见图6，图6示出了步骤S207可以通过以下步骤S2071至步骤S2075实现：

步骤S2071，构建每一元素的内容信息的键值对，其中，键值对中的键用于表征相应元素的状态类型，键值对中的值是元素的待展示的内容信息。

步骤S2072，响应于任一元素的状态类型为固定类型，确定元素的键值对中的键为空值，并将固定元素的内容信息写入至与元素具有第三映射关系的预设的数组中。

本申请实施例中，每一元素在服务器预设的存储单元中对应一预设的数组，该数组用于存储该元素的待展示的内容信息。每一元素与预设的数组的对应关系可以包括第三映射关系和第四映射关系，其中，对于固定元素，该固定元素与预设的数组之间具有第三映射关系；对于可变元素，该可变元素与预设的数组之间具有第四映射关系。基于该第三映射关系或者第四映射关系，即可确定出元素对应的用于写入该元素的内容信息的数组具体是哪个数组。

如果任一元素的状态类型为固定类型，则该元素为固定元素，因此，该固定元素是不可变元素，则该固定元素的键值对中的键可以被置为空值。那么，在将该元素的状态变量写入该元素对应的状态属性字段中时，则可以将固定元素的内容信息写入至与元素具有第三映射关系的预设的数组中。

步骤S2073，响应于任一元素的状态类型为可变类型，确定元素的状态变量中的每一变量值对应的内容信息。

步骤S2074，将每一变量值作为元素的一个键值对中的键、将对应的内容信息作为元素的键值对中的值，构建元素在全部变量值下的多个键值对。

本申请实施例中，由于可变元素的状态变量中包括多个变量值，因此，每一变量值会对应一内容信息，不同的变量值对应的内容信息可以相同也可以不同。这样，针对于多个变量值，可以构建变量值与内容信息之间的多个键值对。

步骤S2075，将全部键值对中的值写入至与元素具有第四映射关系的预设的数组中。

这里，将全部键值对中的值写入至预设的数组中，即将每一变量值对应的内容信息写入至与元素具有第三映射关系的预设的数组中。同时，由于变量值与内容信息之间构成键值对，因此，可以基于变量值从预设的数组中查询到相应的内容信息。

步骤S208，服务器对元素布局图中的固定元素进行渲染，得到固定元素界面图。

在一些实施例中，参见图7，图7示出了步骤S208中对固定元素进行渲染可以通过以下步骤S2081至步骤S2083实现：

步骤S2081，从状态属性字段中提取每一元素的状态变量，并基于状态变量从元素布局图中确定出固定元素。

步骤S2082，标记元素布局图中的全部固定元素。

步骤S2083，从预设的数组中提取每一固定元素的内容信息，并基于所提取的内容信息对全部固定元素进行渲染，得到固定元素界面图。

本申请实施例中，由于固定元素是不可变元素，因此，固定元素在任何情况下只要基础的信息确定，则最终渲染后所能够呈现的状态和像素表现(即每一像素点的像素值均已知)就是固定的，因此，可以先对固定元素进行渲染，在像素层面上对固定元素进行呈现，即渲染出固定元素在对应的每一像素点的像素值，得到固定元素界面图。

步骤S209，服务器获取终端发送的针对元素布局图中的可变元素的数据更新指令。

步骤S210，服务器响应于数据更新指令，查询可变元素的状态变量；并基于状态变量确定待渲染可变元素。

本申请实施例提供两种确定待渲染可变元素的实现方式，在一些实施例中，参见图8，在第一种实现方式中，步骤S210可以通过以下步骤S2101至步骤S2103实现：

步骤S2101，解析数据更新指令，得到数据更新指令中所携带的更新变量值。

数据更新指令用于请求对元素布局图中的可变元素进行渲染，并且，数据更新指令中可以携带有每一可变元素的状态变量中的具体的变量值，因此，在后续对可变元素进行渲染时，可以基于该变量值确定出可变元素的内容信息，即确定出可变元素的待渲染信息，从而基于该待渲染信息对可变元素进行渲染。

步骤S2102，针对任一可变元素，查询可变元素的状态变量所包括的全部变量值。

步骤S2103，响应于全部变量值中具有与更新变量值相同的变量值，将可变元素确定为待渲染可变元素。

在第一种实现方式中，可以确定可变元素的状态变量所包括的全部变量值中是否有与数据更新指令中所携带的更新变量值相同的变量值，如果有，说明当前终端发送的数据更新指令是对当前已经配置好的可变元素的内容信息进行渲染，因此，可以直接将该可变元素直接确定为待渲染可变元素。

请继续参见图8，在第二种实现方式中，步骤S210可以通过以下步骤S2104至步骤S2106实现：

步骤S2104，解析数据更新指令，得到数据更新指令中所携带的更新变量值区间。

步骤S2105，针对任一可变元素，查询可变元素的状态变量所包括的全部变量值对应的变量区间。

步骤S2106，响应于变量区间与更新变量值区间具有重叠区间，将可变元素确定为待渲染可变元素。

在第二种实现方式中，可以确定可变元素的状态变量是否与数据更新指令中所携带的更新变量值区间具有重叠区间，如果有，说明当前终端发送的数据更新指令是对当前已经配置好的可变元素的内容信息进行渲染，因此，可以直接将该可变元素直接确定为待渲染可变元素。

步骤S211，服务器将待渲染可变元素渲染至固定元素界面图中，得到生成的内容展示界面。

在一些实施例中，如果确定待渲染可变元素是采用上述第一种实现方式实现，也就是说，是确定数据更新指令中携带的变量值与存储的变量值有没有相同的值，如果有，就可以将这个元素确定为待渲染可变元素。那么，相应地，在将待渲染可变元素渲染至固定元素界面图中时，则可以通过以下方式实现：首先，可以从预设的数组中查询与相同的变量值对应的内容信息；然后，基于所查询的内容信息，将待渲染可变元素渲染至固定元素界面图中，得到内容展示界面。

在一些实施例中，如果确定待渲染可变元素是采用上述第二种实现方式实现，也就是说，是确定数据更新指令中携带的变量值的区间与存储的变量值的区间有没有重叠，如果有，就可以将这个元素确定为待渲染可变元素。那么，该重叠区间中可以包括至少一个变量值，相应地，在将待渲染可变元素渲染至固定元素界面图中时，则可以通过以下方式实现：首先，将重叠区间中的每一变量值确定为目标变量值；然后，从预设的数组中查询与每一目标变量值对应的内容信息；最后，按照目标变量值在重叠区间中的先后顺序，依次基于查询的每一目标变量值对应的内容信息，将待渲染可变元素渲染至固定元素界面图中，得到内容展示界面序列；该内容展示界面序列包括至少一个内容展示界面。

步骤S212，服务器将内容展示界面发送给终端。

步骤S213，终端在当前界面上展示该内容展示界面。

本申请实施例中，能够自定义内容展示界面中的可变元素，以及可变元素对应的状态变量，也就是说，能够自定义可变元素基于怎样变化的状态变量来进行展示界面的渲染，从而在实现个性化展示界面生成的同时，还能够降低在可变元素渲染时的数据量，进一步提高自定义内容展示界面生成的效率，从而实现高频率、高性能的更新自定义内容展示界面。

下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。

本申请实施例提出了一套可以完全自定义的UI构建协议，使得使用者能够完全自定义需要展示的UI(内容展示界面)，同时，该协议通过开放属性绑定和属性更新功能提供UI更新能力，能够支持大量UI元素高频率、高性能更新。

本申请实施例用于满足孪生地球开放体系高性能展示自定义可变UI(即内容展示界面)的需求，可以应用于数字孪生的UE4可视化地图引擎中。UE4可视化地图引擎采用矢量数据构建地球底座，其上可以融合叠加展示其他数据，并提供了API接口供用户二次开发使用。提供的API中包含有自定义可变UI的能力，用户可以通过调用这些能力，构建自定义UI，进行定制化的展示并高频更新其内容。

本申请实施例的方法可以应用在网联、交通等业务场景中，如图9所示，是本申请实施例提供的内容展示界面生成方法应用于某个网联场景中的界面图，为了能够阐述交通情况，除了孪生展示的静态场景和动态机动车、非机动车信息外，还需要使用大量的自定义UI面板呈现相关信息。图9中主要包含了三种形式的自定义UI面板，实线框901呈现了车流状况、实线框902呈现了红绿灯信息、实线框903呈现了非机动车的实时车速信息。可以看到，每种UI面板的样式都是不一样的，都可以根据用户的业务需求进行设计呈现，并且这些信息都需要进行高频的数据更新，在实际业务实践中，图9中的所有UI面板都进行了实时数据源的接入和绑定，能够以每秒1次的频率进行更新，从而能够展示出数字孪生的动态数据。

根据实际项目业务场景验证，本申请实施例的内容展示界面生成方法能够支持同屏200个以上自定义UI界面的展示，并能够以每秒5次的频率高频更新其中的数据内容，不会产生性能瓶颈，能够支撑用户对于孪生场景信息的动态表达。

下面对本申请实施例内容展示界面生成方法的整体流程进行说明，图10是本申请实施例提供的内容展示界面生成方法的整体流程示意图，如图10所示，主要阐述用户使用数字孪生开放体系搭建业务场景时如何使用可变UI能力，其中，包含用户(例如开发者)调用接口的使用过程S301，孪生地球开放体系内部逻辑的处理两个部分S302和S303：

在S301开发者调用接口的使用过程，主要阐述调用可变UI能力的准备工作。当用户需要在一个业务场景中使用可变UI能力时，主要需要进行UI的布局、内容和状态三方面构建。

其中，对于布局构建，目前可变UI主要提供全屏背景图(BG)、图片(Img)和文字(Text)三种元素进行展示，每种元素都可以存在多个，每种元素都具有id、大小(size)、位置(pos)、压盖关系(zIndex)等布局属性。布局构建中的每个元素都采用绝对布局确定位置，整个布局以左上角作为(0,0)点，向右为x方向正方向，向下为y方向正方向，其中的每个元素pos标明本元素左上角所在位置，size标明x和y方向的大小，zIndex标明其压盖关系，该值较小的元素会被该值较大的元素压盖，该值相同的元素按照构建顺序，后构建的压盖先构建的。其中，BG类型作为全屏背景图，其zIndex值通常最小，pos值为(0,0)，size为整个需要展示的UI大小，定义x方向大小为width，y方向大小为height，当存在多个BG类型元素时，按照构建顺序，以最后一个构建的BG元素为准。对于Text类型的元素，布局构建中还提供了字号(fontSize)和颜色(fontColor)两个属性，可以配置文字大小和文字颜色。

对于状态构建，在布局构建完成后，每个元素可以配置与其对应的状态，本申请实施例提供了绑定属性(bind)能力，使得每个元素不是只能展示一种UI，而是能够和状态进行绑定，通过状态切换不同内容从而展示可变UI。对于不需要进行可变展示的UI元素，可以将bind对应的字段设置为none，而对于需要展示可变UI的元素，可以定义变量进行状态绑定，状态变量使用表达式${value}进行表达，其中的变量值value可以设置为与业务相关的变量，例如交通灯呈现的场景，可以定义状态变量${status}用于声明红绿灯的变化情况。

对于内容构建，在状态构建完成后，每个元素可以配置与其对应的内容。其中，BG和Img类型的元素支持配置图片，图片支持以url或base64的形式进行配置，Text类型支持配置文字。每个元素的内容都以一个数组进行存储，其中的每一项由键值对指定，其中的键对应状态构建中的一种状态，值为对应要展示的内容。对于不可变内容，其键设置为none。对于可变内容，图片内容可以通过将不同的状态值绑定不同的图片，通过改变状态变量达到展现可变UI的目的；文字内容，除了可以将不同的状态值绑定不同的文字外，还可以进行变量类型的文字展示，其中展示的所有变量，最终会以实际值进行替换展示。例如，当声明文字中需要展示${speed}变量时，该内容会在最终展示时替换为变量代表的确切值。不拥有当前绑定状态内容的UI元素不会被展示。

以图11构建交通灯的可变UI为例，对于同一个UI，需要展示红1101、黄1102、绿1103三种灯态，并进行时间的倒数展示。其中主要包含黑色背景(不可变)、白色箭头(不可变)、上方灯态背景(可变)、下方文字(可变)等4种元素。以下是构建UI的代码示例，其中所有图片内容以base64传入，因具体的base64内容过长，为不影响阅读，以base64字符串代替，实际操作中会传入真实的base64字符串，孪生地球引擎可以将该字符串转换为图片进行展示。

其中，黑色背景构建UI的代码示例如下：

白色箭头构建UI的代码示例如下：

对于上方灯态背景，其中定义了${status}变量，并定义了该变量有red、yellow、green三种状态，每种状态展示对应灯态的图片内容。因此可以通过更改${status}变量，操控展示内容。构建UI的代码示例如下：

对于下方文字，因为文字颜色属于布局内容，因此为了在同一个位置展现不同颜色的文字，需要声明三个不同的文字元素。三个元素都绑定了${status}变量进行展示，其展示内容均为${time}变量，因此可以通过设置${time}变量的值，更改展示内容。当${status}变量变化时，只有对应状态的文字可以被展示。构建UI的代码示例如下：

/>

当所有UI元素构建完成后，可以将所有内容组合成一个布局，提交给孪生地球开放体系，在指定的位置进行展示，相应的构建UI的代码示例如下：

步骤S302是孪生地球开放体系内部逻辑的数据变量更新阶段，当构建完UI元素后，用户侧可以通过更新定义的变量值，调控整个可变UI的展示内容。仍以上一步的红绿灯为示例，通过将以下内容传递给孪生地球开放体系，就可以高性能、高效率的将红绿灯UI更新为绿灯/倒数计时9秒的状态。该方法支持高频调用，可以以每秒60次以上的频率进行更新。孪生地球开放体系在接收到数据更新指令调用后，会进行各UI元素的展示状态查询，只将当前状态变量下需要展示的内容进行展示，并使用数据变量定义的值展示相应的变量。其中，数据变量更新阶段的代码示例如下：

步骤S303是孪生地球开放体系内部逻辑的解析用户传入的数据并进行数据处理和渲染呈现的阶段。主要有以下阶段：

第一阶段，布局解析。对于所有UI元素的布局，根据其指定的位置、大小、压盖关系等，构建出对应的控件。构建出来的图片和文字控件均无内容，这一步仅进行与内容无关的布局属性的配置。

第二阶段，状态解析。第二部进行状态解析，对于不可变UI，对其进行标记永远展示。对于可变UI，根据其定义的状态变量进行配置，使得对应的UI和状态值进行关联，这一步仍与具体的内容无关，仅处理状态相关的逻辑。

第三阶段，内容解析。最后进行内容的解析，图片内容需要做额外的处理，将base64转换为图片或将url加载为图片。对于不可变UI，直接将内容与对应的元素进行绑定，对于可变UI，根据其状态值分别绑定，在一个UI元素中可以存储多个状态对应的多个内容，供状态切换时进行展示。

第四阶段，在以上三步完成后，进行UI元素的渲染，目前只有不可变UI能被正常渲染。

第五阶段，当用户调用数据变量更新时，整个UI下的所有可变元素会查询其绑定的状态变量内容，决定是否进行渲染。对于所有文字元素，也会查询其内容中是否包含相关变量内容，进行文字内容的更新。

本申请实施例提出的方法是一套可以完全自定义的UI构建协议，使得使用者能够完全自定义需要展示的UI。通过将UI布局与UI内容解耦的方式，提升UI更新的性能，解决了原有方案在大批量、高频率更新UI时产生卡顿的问题。

可以理解的是，在本申请实施例中，涉及到用户信息的内容，例如，界面构建操作、固定元素和可变元素等信息，如果涉及与用户信息或企业信息相关的数据，当本申请实施例运用到具体产品或技术中时，需要获得用户许可或者同意，或者对这些信息进行模糊化处理，以消除这些信息与用户之间的对应关系；且相关数据收集处理在实例应用时应该严格根据相关国家法律法规的要求，获取个人信息主体的知情同意或单独同意，并在法律法规及个人信息主体的授权范围内，开展后续数据使用及处理行为。

下面继续说明本申请实施例提供的内容展示界面生成装置354实施为软件模块的示例性结构，在一些实施例中，如图2所示，内容展示界面生成装置354包括：构建模块3541，用于响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图；所述元素布局图中包括固定元素和可变元素；固定元素渲染模块3542，用于对所述元素布局图中的固定元素进行渲染，得到固定元素界面图；获取模块3543，用于获取针对所述元素布局图中的可变元素的数据更新指令；查询模块3544，用于响应于所述数据更新指令，查询所述可变元素的状态变量；并基于所述状态变量确定待渲染可变元素；可变元素渲染模块3545，用于将所述待渲染可变元素渲染至所述固定元素界面图中，得到生成的内容展示界面。

在一些实施例中，所述构建模块还用于：响应于目标对象通过预设的调用接口输入的界面构建操作，获取所述元素布局图中的每一元素的布局属性参数；所述元素包括所述固定元素和所述可变元素；将每一所述元素按照所述布局属性参数，布局至预设的全屏布局面板上，得到所述待生成界面的元素布局图。

在一些实施例中，所述装置还包括：存储模块，用于在获取所述元素布局图中的每一元素的布局属性参数时，获取所述元素布局图中的每一元素的状态类型和内容信息；基于每一所述元素的状态类型，确定相应元素的状态变量，并将每一所述元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中；将每一所述元素的内容信息与相应元素进行映射后以特定格式存储至预设的数组中。

在一些实施例中，所述状态类型包括固定类型和可变类型；所述存储模块还用于：响应于任一元素的状态类型为所述固定类型，确定所述元素的状态变量为空值，并将所述空值写入至与所述元素具有第一映射关系的预设的状态属性字段中；响应于任一元素的状态类型为所述可变类型，确定所述元素的状态变量；所述状态变量包括多个变量值；构建所述状态变量的状态表达式，并将所述状态表达式写入至与所述元素具有第二映射关系的预设的状态属性字段中；所述状态表达式用于表征所述状态变量的变化特征。

在一些实施例中，所述装置还包括：映射关系构建模块，用于在将每一所述元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中之前，获取每一所述元素的元素标识；对预设的状态属性存储单元进行划分，形成多个状态属性字段；基于所述元素标识，构建每一所述元素与一个状态属性字段之间的所述第一映射关系或者所述第二映射关系。

在一些实施例中，所述存储模块还用于：构建每一所述元素的内容信息的键值对，其中，所述键值对中的键用于表征相应元素的状态类型，所述键值对中的值是所述元素的待展示的所述内容信息；响应于任一元素的状态类型为所述固定类型，确定所述元素的键值对中的值为空值，并将所述固定元素的内容信息写入至与所述元素具有第三映射关系的预设的数组中；响应于任一元素的状态类型为所述可变类型，确定所述元素的状态变量中的每一变量值对应的所述内容信息；将每一所述变量值作为所述元素的一个键值对中的键、将对应的所述内容信息作为所述元素的键值对中的值，构建所述元素在全部变量值下的多个键值对；将全部键值对中的值写入至与所述元素具有第四映射关系的预设的数组中。

在一些实施例中，所述固定元素渲染模块还用于：从状态属性字段中提取每一所述元素的状态变量，并基于所述状态变量从所述元素布局图中确定出固定元素；标记所述元素布局图中的全部固定元素；从所述预设的数组中提取每一固定元素的内容信息，并基于所提取的内容信息对全部固定元素进行渲染，得到所述固定元素界面图。

在一些实施例中，所述查询模块还用于：解析所述数据更新指令，得到所述数据更新指令中所携带的更新变量值；针对任一可变元素，查询所述可变元素的状态变量所包括的全部变量值；响应于所述全部变量值中具有与所述更新变量值相同的变量值，将所述可变元素确定为待渲染可变元素。

在一些实施例中，所述可变元素渲染模块还用于：从所述预设的数组中查询与所述相同的变量值对应的内容信息；基于所查询的内容信息，将所述待渲染可变元素渲染至所述固定元素界面图中，得到所述内容展示界面。

在一些实施例中，所述查询模块还用于：解析所述数据更新指令，得到所述数据更新指令中所携带的更新变量值区间；针对任一可变元素，查询所述可变元素的状态变量所包括的全部变量值对应的变量区间；响应于所述变量区间与所述更新变量值区间具有重叠区间，将所述可变元素确定为待渲染可变元素。

在一些实施例中，所述重叠区间中包括至少一个变量值；所述可变元素渲染模块还用于：将所述重叠区间中的每一变量值确定为目标变量值；从所述预设的数组中查询与每一所述目标变量值对应的内容信息；按照所述目标变量值在所述重叠区间中的先后顺序，依次基于查询的每一所述目标变量值对应的内容信息，将所述待渲染可变元素渲染至所述固定元素界面图中，得到内容展示界面序列；所述内容展示界面序列包括至少一个内容展示界面。

需要说明的是，本申请实施例装置的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果，因此不做赘述。对于本装置实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。

本申请实施例提供了一种计算机程序产品，该计算机程序产品包括可执行指令，该可执行指令是一种计算机指令；该可执行指令存储在计算机可读存储介质中。当电子设备的处理器从计算机可读存储介质读取该可执行指令，处理器执行该可执行指令时，使得该电子设备执行本申请实施例上述的方法。

本申请实施例提供一种存储有可执行指令的存储介质，其中存储有可执行指令，当可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的方法，例如，如图3示出的方法。

在一些实施例中，存储介质可以是计算机可读存储介质，例如，铁电存储器(FRAM，Ferromagnetic Random Access Memory)、只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read Only Memory)、带电可擦可编程只读存储器(EEPR OM，Electrically Erasable Programmable Read Only Memory)、闪存、磁表面存储器、光盘、或光盘只读存储器(CD-ROM，Compact Disk-Read Only Memory)等存储器；也可以是包括上述存储器之一或任意组合的各种设备。

在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。

作为示例，可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言(HTML，Hyper TextMar kup Language)文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。作为示例，可执行指令可被部署为在一个电子设备上执行，或者在位于一个地点的多个电子设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个电子设备上执行。

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

Claims (15)

1.一种内容展示界面生成方法，其特征在于，所述方法包括：

响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图；所述元素布局图中包括固定元素和可变元素；

对所述元素布局图中的固定元素进行渲染，得到固定元素界面图；

获取针对所述元素布局图中的可变元素的数据更新指令；

响应于所述数据更新指令，查询所述可变元素的状态变量；并基于所述状态变量确定待渲染可变元素；

将所述待渲染可变元素渲染至所述固定元素界面图中，得到生成的内容展示界面。

2.根据权利要求1所述的方法，其特征在于，所述响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图，包括：

响应于目标对象通过预设的调用接口输入的界面构建操作，获取所述元素布局图中的每一元素的布局属性参数；所述元素包括所述固定元素和所述可变元素；

将每一所述元素按照所述布局属性参数，布局至预设的全屏布局面板上，得到所述待生成界面的元素布局图。

3.根据权利要求2所述的方法，其特征在于，在获取所述元素布局图中的每一元素的布局属性参数时，所述方法还包括：

获取所述元素布局图中的每一元素的状态类型和内容信息；

基于每一所述元素的状态类型，确定相应元素的状态变量，并将每一所述元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中；

将每一所述元素的内容信息与相应元素进行映射后以特定格式存储至预设的数组中。

4.根据权利要求3所述的方法，其特征在于，所述状态类型包括固定类型和可变类型；

所述基于每一所述元素的状态类型，确定相应元素的状态变量，并将每一所述元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中，包括：

响应于任一元素的状态类型为所述固定类型，确定所述元素的状态变量为空值，并将所述空值写入至与所述元素具有第一映射关系的预设的状态属性字段中；

响应于任一元素的状态类型为所述可变类型，确定所述元素的状态变量；所述状态变量包括多个变量值；

构建所述状态变量的状态表达式，并将所述状态表达式写入至与所述元素具有第二映射关系的预设的状态属性字段中；所述状态表达式用于表征所述状态变量的变化特征。

5.根据权利要求4所述的方法，其特征在于，在将每一所述元素的状态变量与相应元素进行映射后存储至预设的状态属性字段中之前，所述方法还包括：

获取每一所述元素的元素标识；

对预设的状态属性存储单元进行划分，形成多个状态属性字段；

基于所述元素标识，构建每一所述元素与一个状态属性字段之间的所述第一映射关系或者所述第二映射关系。

6.根据权利要求4所述的方法，其特征在于，所述将每一所述元素的内容信息与相应元素进行映射后以特定格式存储至预设的数组中，包括：

构建每一所述元素的内容信息的键值对，其中，所述键值对中的键用于表征相应元素的状态类型，所述键值对中的值是所述元素的待展示的所述内容信息；

响应于任一元素的状态类型为所述固定类型，确定所述元素的键值对中的键为空值，并将所述固定元素的内容信息写入至与所述元素具有第三映射关系的预设的数组中；

响应于任一元素的状态类型为所述可变类型，确定所述元素的状态变量中的每一变量值对应的所述内容信息；

将每一所述变量值作为所述元素的一个键值对中的键、将对应的所述内容信息作为所述元素的键值对中的值，构建所述元素在全部变量值下的多个键值对；

将全部键值对中的值写入至与所述元素具有第四映射关系的预设的数组中。

7.根据权利要求3所述的方法，其特征在于，所述对所述元素布局图中的固定元素进行渲染，得到固定元素界面图，包括：

从状态属性字段中提取每一所述元素的状态变量，并基于所述状态变量从所述元素布局图中确定出固定元素；

标记所述元素布局图中的全部固定元素；

从所述预设的数组中提取每一固定元素的内容信息，并基于所提取的内容信息对全部固定元素进行渲染，得到所述固定元素界面图。

8.根据权利要求3所述的方法，其特征在于，所述响应于所述数据更新指令，查询所述可变元素的状态变量；并基于所述状态变量确定待渲染可变元素，包括：

解析所述数据更新指令，得到所述数据更新指令中所携带的更新变量值；

针对任一可变元素，查询所述可变元素的状态变量所包括的全部变量值；

响应于所述全部变量值中具有与所述更新变量值相同的变量值，将所述可变元素确定为待渲染可变元素。

9.根据权利要求8所述的方法，其特征在于，所述将所述待渲染可变元素渲染至所述固定元素界面图中，得到生成的内容展示界面，包括：

从所述预设的数组中查询与所述相同的变量值对应的内容信息；

基于所查询的内容信息，将所述待渲染可变元素渲染至所述固定元素界面图中，得到所述内容展示界面。

10.根据权利要求3所述的方法，其特征在于，所述响应于所述数据更新指令，查询所述可变元素的状态变量；并基于所述状态变量确定待渲染可变元素，包括：

解析所述数据更新指令，得到所述数据更新指令中所携带的更新变量值区间；

针对任一可变元素，查询所述可变元素的状态变量所包括的全部变量值对应的变量区间；

响应于所述变量区间与所述更新变量值区间具有重叠区间，将所述可变元素确定为待渲染可变元素。

11.根据权利要求10所述的方法，其特征在于，所述重叠区间中包括至少一个变量值；

所述将所述待渲染可变元素渲染至所述固定元素界面图中，得到生成的内容展示界面，包括：

将所述重叠区间中的每一变量值确定为目标变量值；

从所述预设的数组中查询与每一所述目标变量值对应的内容信息；

按照所述目标变量值在所述重叠区间中的先后顺序，依次基于查询的每一所述目标变量值对应的内容信息，将所述待渲染可变元素渲染至所述固定元素界面图中，得到内容展示界面序列；所述内容展示界面序列包括至少一个内容展示界面。

12.一种内容展示界面生成装置，其特征在于，所述装置包括：

构建模块，用于响应于目标对象通过预设的调用接口输入的界面构建操作，构建待生成界面的元素布局图；所述元素布局图中包括固定元素和可变元素；

固定元素渲染模块，用于对所述元素布局图中的固定元素进行渲染，得到固定元素界面图；

获取模块，用于获取针对所述元素布局图中的可变元素的数据更新指令；

查询模块，用于响应于所述数据更新指令，查询所述可变元素的状态变量；并基于所述状态变量确定待渲染可变元素；

可变元素渲染模块，用于将所述待渲染可变元素渲染至所述固定元素界面图中，得到生成的内容展示界面。

13.一种电子设备，其特征在于，包括：

存储器，用于存储可执行指令；处理器，用于执行所述存储器中存储的可执行指令时，实现权利要求1至11任一项所述的内容展示界面生成方法。

14.一种计算机可读存储介质，其特征在于，存储有可执行指令，用于引起处理器执行所述可执行指令时，实现权利要求1至11任一项所述的内容展示界面生成方法。

15.一种计算机程序产品或计算机程序，所述计算机程序产品或计算机程序包括可执行指令，所述可执行指令存储在计算机可读存储介质中；

当电子设备的处理器从所述计算机可读存储介质读取所述可执行指令，并执行所述可执行指令时，实现权利要求1至11任一项所述的内容展示界面生成方法。