CN110955428A

CN110955428A - 一种页面显示方法、装置、电子设备及介质

Info

Publication number: CN110955428A
Application number: CN201911179239.9A
Authority: CN
Inventors: 范兴华; 刘洪海; 吴宪
Original assignee: Beijing QIYI Century Science and Technology Co Ltd
Current assignee: Beijing QIYI Century Science and Technology Co Ltd
Priority date: 2019-11-27
Filing date: 2019-11-27
Publication date: 2020-04-03

Abstract

本发明实施例提供了一种页面显示方法、装置、电子设备及介质，涉及计算机技术领域，可以简化对页面内容的显示样式的更改方法。本发明实施例的方案包括：当检测到指定页面的显示指令时，获取指定页面对应的目标显示模板。然后解析目标显示模板，根据目标显示模板包括的每一组件以及各组件之间的关联关系，生成文档对象模型DOM树。其中，DOM树的每个节点分别对应所述目标显示模板的一个组件，目标显示模板包括的组件用于描述显示内容的位置和/或样式。然后确定DOM树的每一节点对应的组件的属性值，再根据DOM树的每一节点对应的组件的属性值，显示指定页面。

Description

一种页面显示方法、装置、电子设备及介质

技术领域

本发明涉及计算机技术领域，特别是涉及一种页面显示方法、装置、电子设备及介质。

背景技术

目前，终端中的应用程序(Application，APP)的页面内容的显示样式一般是固定的，对页面内容的显示样式的描述信息记录在APP代码中，若要对页面内容的显示样式进行更改，则需要修改APP代码。使得每次对APP的页面内容的显示样式进行修改，都要发布新的版本。

而且，修改后的APP代码在上线前，还需要重新编译运行，调试的时间较长。可见，相关技术中，对页面内容的显示样式的更改方法较为复杂。

发明内容

本发明实施例的目的在于提供一种页面显示方法、装置、电子设备及介质，以实现简化对页面内容的显示样式的更改方法。具体技术方案如下：

第一方面，本发明实施例提供一种页面显示方法，应用于终端，所述方法包括：

当检测到指定页面的显示指令时，获取所述指定页面对应的目标显示模板；

解析所述目标显示模板，根据所述目标显示模板包括的每一组件以及各组件之间的关联关系，生成文档对象模型DOM树，所述DOM树的每个节点分别对应所述目标显示模板的一个组件，所述目标显示模板包括的组件用于描述显示内容的位置和/或样式；

确定所述DOM树的每一节点对应的组件的属性值；

根据所述DOM树的每一节点对应的组件的属性值，显示所述指定页面。

可选的，所述确定所述DOM树的每一节点对应的组件的属性值，包括：

按照从根节点到叶子结点的顺序，针对所述DOM树的每一节点对应的组件包括的属性，根据所述指定页面的内容参数和所述属性对应的预设表达式，确定所述属性的属性值，所述内容参数包括从所述属性所属的组件对应的节点的上游节点对应的属性值中查询到的参数、从所述服务器中获取的参数、和/或从所述终端中获取的参数。

可选的，所述根据所述DOM树的每一节点对应的组件的属性值，显示所述指定页面，包括：

根据所述DOM树的每一节点对应的组件包括的属性的属性值，生成所述指定页面对应的用户界面UI，并显示所述UI。

可选的，所述获取所述指定页面对应的目标显示模板，包括：

判断本地存储中是否存储有预先从所述服务器中获取的所述目标显示模板；

若所述本地存储中存储有预先从所述服务器中获取的所述目标显示模板，则从所述本地存储中获取所述目标显示模板；

若所述本地存储中未存储预先从所述服务器中获取的所述目标显示模板，则从所述服务器中获取所述目标显示模板。

可选的，所述方法还包括：

向所述服务器发送所述指定页面的描述信息，所述描述信息包括所述指定页面的显示原因。

第二方面，本发明实施例提供一种页面显示装置，应用于终端，所述装置包括：

获取模块，用于当检测到指定页面的显示指令时，获取所述指定页面对应的目标显示模板；

生成模块，用于解析所述获取模块获取的所述目标显示模板，根据所述目标显示模板包括的每一组件以及各组件之间的关联关系，生成文档对象模型DOM树，所述DOM树的每个节点分别对应所述目标显示模板的一个组件，所述目标显示模板包括的组件用于描述显示内容的位置和/或样式；

确定模块，用于确定所述生成模块生成的所述DOM树的每一节点对应的组件的属性值；

显示模板，用于根据所述确定模块确定的所述DOM树的每一节点对应的组件的属性值，显示所述指定页面。

可选的，所述确定模块，具体用于：

可选的，所述显示模块，具体用于：

可选的，所述获取模块，具体用于：

可选的，所述装置还包括：发送模块；

所述发送模块，用于向所述服务器发送所述指定页面的描述信息，所述描述信息包括所述指定页面的显示原因。

第三方面，本发明实施例提供了一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

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

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

第四方面，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一页面显示方法的步骤。

第五方面，本发明实施例还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一页面显示方法。

本发明实施例提供的页面显示方法、装置、电子设备及介质，可以解析指定页面对应的目标显示模板，生成目标显示模板对应的DOM树，然后根据DOM树的每一节点对应的组件的属性值，显示当前页面。由于目标显示模板包括的每个组件分别用于描述显示内容的位置和/或样式，所以指定页面的内容可以按照目标显示模板的显示样式显示。而且指定页面的内容的描述信息不是记录在APP代码中，而是记录在显示模板中，所以在更新指定页面内容的描述信息时，可以修改显示模板，不需要修改APP代码，更不需要对修改后的APP代码重新编译运行，所以本发明实施例简化了对页面内容的显示样式的更改方法。

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

附图说明

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

图1为本发明实施例提供的一种页面显示系统的结构示意图；

图2为本发明实施例提供的一种页面显示方法流程图；

图3为本发明实施例提供的一种页面显示装置结构示意图；

图4为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

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

参见图1，本发明实施例提供了一种页面显示系统，该系统包括：终端和服务器。

其中，终端用于显示指定页面。

服务器用于存储各个页面对应的显示模板。

终端和服务器可以通信连接。图1为本发明实施例提供的一种示例，本发明实施例不对页面显示系统包括的设备数量作具体限定。

参见图2，本发明实施例还提供了一种页面显示方法，该方法可以应用于图1所示的页面显示系统的终端，包括如下步骤：

步骤201，当检测到指定页面的显示指令时，获取指定页面对应的目标显示模板。

可以理解的，指定页面可以为终端能够显示的应用程序(Application，APP)中的任一页面。指定页面为终端接收到的显示指令所指示打开的页面。

一种实施方式中，终端可以预先从服务器中获取各页面对应的显示模板，并将获取的显示模板保存在本地存储中，当检测到指定页面的显示指令时，从本地存储中获取指定页面对应的目标显示模板。

例如，每当终端启动指定APP时，向服务器请求更新后的显示模板列表，其中，显示模板列表中可以包括指定APP包括的各个页面对应的显示模板的标识和版本号。终端接收到显示模板列表后，可以对比本地存储与显示模板列表中标识相同的显示模板是否对应相同的版本号，如果存在标识相同的显示模板对应不同的版本号，终端可以从服务器中获取该标识对应的显示模板。

另一种实施方式中，终端可以存储打开过的页面对应的显示模板，每当终端打开一个该终端未打开过的页面时，可以从服务器中获取该页面对应的显示模板。在这种情况下，当终端检测到指定页面的显示指令时，可以判断本地存储中是否存储有预先从服务器中获取的目标显示模板。若本地存储中存储有预先从服务器中获取的目标显示模板，则从本地存储中获取目标显示模板。若本地存储中未存储预先从服务器中获取的目标显示模板，则从服务器中获取目标显示模板。

可选的，终端在从服务器中获取目标显示模板时，还可以从服务器中获取与本地存储的显示模板标识相同但版本更高的显示模板。

可选的，目标显示模板可以为可扩展标记语言(Extensible Markup Language，XML)模板。

步骤202，解析目标显示模板，根据目标显示模板包括的每一组件以及各组件之间的关联关系，生成文档对象模型树。

其中，文档对象模型(Document Object Model，DOM)树的每个节点分别对应目标显示模板的一个组件，目标显示模板包括的组件用于描述显示内容的位置和/或样式。

步骤203，确定DOM树的每一节点对应的组件的属性值。

可选的，每个组件可以包括该组件对应的类型支持的一个或多个属性。

例如，本发明实施例中的组件可以为：页面(Page)、视图(View)、图像(Image)、按钮(Button)、标签(Label)、文本(Text)、表格(Table)、单元(Cell)、输入(Input)、滚动(Scroll)、一组对象(Collection)、数据(Date)、转换(Switch)等。

步骤204，根据DOM树的每一节点对应的组件的属性值，显示指定页面。

一种实施方式中，可以根据DOM树的每一节点对应的组件包括的属性的属性值，生成指定页面对应的用户界面(User Interface，UI)，并显示该UI。

本发明实施例提供的页面显示方法，可以解析指定页面对应的目标显示模板，生成目标显示模板对应的DOM树，然后根据DOM树的每一节点对应的组件的属性值，显示当前页面。由于目标显示模板包括的每个组件分别用于描述显示内容的位置和/或样式，所以指定页面的内容可以按照目标显示模板的显示样式显示。而且指定页面的内容的描述信息不是记录在APP代码中，而是记录在显示模板中，所以在更新指定页面内容的描述信息时，可以修改显示模板，不需要修改APP代码，更不需要对修改后的APP代码重新编译运行，所以本发明实施例简化了对页面内容的显示样式的更改方法。

示例性的，View组件对应的各个类型支持的属性如表一所示。

表一

可选的，上述步骤203确定DOM树的每一节点对应的组件的属性值的方式可以为：按照从根节点到叶子结点的顺序，针对DOM树的每一节点对应的组件包括的属性，根据指定页面的内容参数和该属性对应的预设表达式，确定该属性的属性值。

其中，内容参数包括：从该属性所属的组件对应的节点的上游节点对应的属性值中查询到的参数、从服务器中获取的参数、和/或从终端中获取的参数。

可选的，从属性值中查询参数时，可以按照从该属性所属的组件对应的节点到根节点的顺序，依次查找各节点对应的属性值。

可以理解的，从服务器中获取的参数可以为指定页面包括的文字、图片、视频和/或音频等多媒体数据。从终端中获取的参数可以为终端的属性参数，例如终端显示屏幕的尺寸。

可选的，属性对应的表达式可以支持C语言的多种运算符，还支持条件语句(例如，开关语句(switch)-情况(case)，如果(if)-否则如果(elif)-否则(else))，还支持各种对内容参数的运算方法(例如，主函数(main())、(求最大元素函数max())、返回一个下标从零开始的一维数组的函数(split()))。内容参数可以为数字、字符和/或字符串。

可选的，终端还可以切换当前显示的页面，切换方法包括接收用户的点击操作、双击操作或者长按操作等，切换方法可以通过调用导航切换函数(navigate(dict))或者关闭切换函数(dismiss(dict))实现。具体的切换操作可以通过配置显示模板中的View组件的属性的表达式实现。例如，终端可以在接收到用户对终端屏幕执行的长按操作所指示的切换当前页面的指令时，将当前页面切换到下一页面。

可选的，终端在显示指定页面时，还可以向服务器发送指定页面的描述信息，描述信息包括指定页面的显示原因。例如：显示原因可以为用户对该终端执行双击操作。

View组件可以包括点击引用(clickPing)属性、双击引用(doubleClickPing)属性或者长按引用(longPressPing)属性，可以预先设置各引用属性分别对应的自动引用通知(Pingback)。

目标显示模板中还可以包括Page组件的展示引用(showPing)属性，showPing属性的属性值为当前显示的页面对应的引用属性对应的Pingback。

例如，当终端接收到用户的双击操作所指示的切换当前页面的指令时，向服务器发送doubleClickPing对应的Pingback。

可见，本发明实施例可以在显示指定页面的同时，向服务器发送显示指定页面的显示原因，方便服务器收集各页面的显示原因。(例如，显示原因为用户长按当前页面，触发了切换当前页面的操作。)

可选的，还可以为显示模板开发代码编辑器(Sublime)，用于在开发显示模板的过程中，自动补全缺失的语句以及插件，简化了显示模板的开发过程。

可选的，本发明实施例中的显示模板还支持实时预览(live reload)，在保存显示模板后，可以自动更新该显示模板对应的页面。

相关技术中，页面内容的显示样式记录在APP代码中，而安卓操作系统(Android)和苹果公司操作系统(IOS)的APP代码不同，使得发布的新版本需要分别针对Android和IOS进行开发。而在本发明实施例中，用于描述显示内容的显示位置和/或显示样式的组件记录在目标显示模板中，所以不同的操作系统可以通过解析相同的显示模板获得页面内容的显示位置和/或样式，进而根据获得的页面内容的显示位置和/或样式，显示页面内容。开发人员不需要对不同的操作系统显示的同一个页面进行分别开发，简化了对页面内容显示样式的更改方法，提高了开发速度。

而且，由于在修改页面内容的显示样式时，只需要修改该页面对应的显示模板，不需要开发新的APP版本，也不需要对新开发的APP进行编译，提高了修改页面内容的显示样式的效率。

另外，相关技术中各内容的显示样式分别对应一个接口，若修改内容的显示样式，可能存在与接口不兼容的问题。而本发明实施例中页面的显示样式以及显示位置的描述信息保存在显示模板中，无需将各个显示样式对应专门的接口，减少了显示样式以及显示位置的描述信息与接口不兼容的问题。

对应于上述方法实施例，参见图3，本发明实施例还提供一种页面显示装置，应用于终端，该装置包括：获取模块301、生成模块302、确定模块303和显示模板304。

获取模块301，用于当检测到指定页面的显示指令时，获取指定页面对应的目标显示模板；

生成模块302，用于解析获取模块301获取的目标显示模板，根据目标显示模板包括的每一组件以及各组件之间的关联关系，生成文档对象模型DOM树，DOM树的每个节点分别对应目标显示模板的一个组件，目标显示模板包括的组件用于描述显示内容的位置和/或样式；

确定模块303，用于确定生成模块302生成的DOM树的每一节点对应的组件的属性值；

显示模板304，用于根据确定模块303确定的DOM树的每一节点对应的组件的属性值，显示指定页面。

可选的，确定模块303，可以具体用于：

按照从根节点到叶子结点的顺序，针对DOM树的每一节点对应的组件包括的属性，根据指定页面的内容参数和属性对应的预设表达式，确定属性的属性值，内容参数包括从属性所属的组件对应的节点的上游节点对应的属性值中查询到的参数、从服务器中获取的参数、和/或从终端中获取的参数。

可选的，显示模块304，可以具体用于：

根据DOM树的每一节点对应的组件包括的属性的属性值，生成指定页面对应的用户界面UI，并显示UI。

可选的，获取模块301，可以具体用于：

判断本地存储中是否存储有预先从服务器中获取的目标显示模板；

若本地存储中存储有预先从服务器中获取的目标显示模板，则从本地存储中获取目标显示模板；

若本地存储中未存储预先从服务器中获取的目标显示模板，则从服务器中获取目标显示模板。

可选的，该装置还可以包括：发送模块；

发送模块，用于向服务器发送指定页面的描述信息，描述信息包括指定页面的显示原因。

本发明实施例还提供了一种电子设备，如图4所示，包括处理器401、通信接口402、存储器403和通信总线404，其中，处理器401，通信接口402，存储器403通过通信总线404完成相互间的通信，

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

处理器401，用于执行存储器403上所存放的程序时，实现上述方法实施例中由终端执行的步骤。

上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

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

存储器可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一页面显示方法的步骤。

在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一页面显示方法。

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

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

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

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

Claims

1.一种页面显示方法，其特征在于，应用于终端，所述方法包括：

确定所述DOM树的每一节点对应的组件的属性值；

2.根据权利要求1所述的方法，其特征在于，所述确定所述DOM树的每一节点对应的组件的属性值，包括：

3.根据权利要求2所述的方法，其特征在于，所述根据所述DOM树的每一节点对应的组件的属性值，显示所述指定页面，包括：

4.根据权利要求1-3任一项所述的方法，其特征在于，所述获取所述指定页面对应的目标显示模板，包括：

5.根据权利要求1-3任一项所述的方法，其特征在于，所述方法还包括：

6.一种页面显示装置，其特征在于，应用于终端，所述装置包括：

7.根据权利要求6所述的装置，其特征在于，所述确定模块，具体用于：

8.根据权利要求7所述的装置，其特征在于，所述显示模块，具体用于：

9.根据权利要求6-8任一项所述的装置，其特征在于，所述获取模块，具体用于：

10.根据权利要求6-8任一项所述的装置，其特征在于，所述装置还包括：发送模块；

11.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

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

处理器，用于执行存储器上所存放的程序时，实现权利要求1-5任一所述的方法步骤。

12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-5任一所述的方法步骤。