CN114186151A - 骨架屏处理方法、装置、设备及存储介质 - Google Patents

Abstract

本公开关于一种骨架屏处理方法、装置、设备及存储介质，涉及计算机技术领域。该方法包括：若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从目标应用程序内的映射表中确定与第二前端路由对应的目标骨架屏界面，映射表中存储有目标应用程序的不同前端路由与骨架屏界面之间的对应关系；显示目标骨架屏界面；若第二前端路由对应的页面数据已加载完成，则隐藏目标骨架屏界面，展示第二前端路由对应的页面数据。本公开只需根据实际情况查找目标应用程序的前端路由与骨架屏界面之间的对应关系，以确定目标骨架屏界面即可，应用难度和成本较低。

Description

骨架屏处理方法、装置、设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种骨架屏处理方法、装置、设备及存储介质。

背景技术

用户访问网页时，受网络环境的影响，可能较长时间无法获得网页的页面数据，导致浏览器只能展示空白网页或者展示部分网页内容。为了解决上述问题，在获取网页的页面数据之前，常见的做法是在网页中展示页面的骨架屏，该骨架屏可以表示页面的大致轮廓。

在路由切换过程中，骨架屏也会随着路由的变换而有所不同，对于前端路由来说，很难保证每个前端路由对应的页面都设置有自己的骨架屏，而针对每个前端路由对应的页面均进行骨架屏开发，需要针对每个前端路由对应的页面配置相应的监听组件、控制组件等难度和成本较高，因此，如何在路由切换的过程中降低骨架屏的开发难度和成本成为了一个亟需解决的问题。

发明内容

本公开提供一种骨架屏处理方法、装置及***，以至少解决相关技术中骨架屏开发难度和成本高的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种骨架屏处理方法，包括：

若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从所述目标应用程序内的映射表中确定与所述第二前端路由对应的目标骨架屏界面，所述映射表中存储有所述目标应用程序的不同前端路由与骨架屏界面之间的对应关系；

显示所述目标骨架屏界面；

若所述第二前端路由对应的页面数据已加载完成，则隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据。

在一些实施例中，所述目标应用程序中注册有监听函数，所述监听函数与所述目标应用程序所采用的前端路由的工作模式相对应；

所述监听到目标应用程序中的第一前端路由切换为第二前端路由，包括：

通过所述监听函数监听到所述目标应用程序中的第一前端路由切换为第二前端路由。

在一些实施例中，所述目标应用程序中注册有预设全局函数；

所述显示所述目标骨架屏界面，包括：

通过所述预设全局函数隐藏所述第一前端路由对应的页面数据，显示所述目标骨架屏界面。

在一些实施例中，所述若所述第二前端路由对应的页面数据已加载完成，则隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据，包括：

若所述第二前端路由对应的页面数据已加载完成，则通过所述预设全局函数隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据。

在一些实施例中，所述从所述目标应用程序内的映射表中确定与所述第二前端路由对应的目标骨架屏界面之前，所述方法还包括：

响应于开发人员对所述目标应用程序的不同前端路由的骨架屏界面配置操作，生成所述映射表，并将所述映射表***与所述目标应用程序对应的页面描述文档中。

根据本公开实施例的第二方面，提供一种骨架屏处理装置，包括：

确定单元，被配置为执行若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从所述目标应用程序内的映射表中确定与所述第二前端路由对应的目标骨架屏界面，所述映射表中存储有所述目标应用程序的不同前端路由与骨架屏界面之间的对应关系；

显示单元，被配置为执行显示所述目标骨架屏界面；

展示单元，被配置为执行若所述第二前端路由对应的页面数据已加载完成，则隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据。

在一些实施例中，所述目标应用程序中注册有监听函数，所述监听函数与所述目标应用程序所采用的前端路由的工作模式相对应；

所述确定单元还被配置为执行：

通过所述监听函数监听到所述目标应用程序中的第一前端路由切换为第二前端路由。

在一些实施例中，所述目标应用程序中注册有预设全局函数；

所述显示单元还被配置为执行：通过所述预设全局函数隐藏所述第一前端路由对应的页面数据，显示所述目标骨架屏界面。

在一些实施例中，所述展示单元还被配置为执行：

若所述第二前端路由对应的页面数据已加载完成，则通过所述预设全局函数隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据。

在一些实施例中，所述装置还包括：

响应单元，被配置为执行响应于开发人员对所述目标应用程序的不同前端路由的骨架屏界面配置操作，生成所述映射表，并将所述映射表***与所述目标应用程序对应的页面描述文档中。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现上述骨架屏处理方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述骨架屏处理方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述骨架屏处理方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

本公开若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从目标应用程序内的映射表中确定与第二前端路由对应的目标骨架屏界面，待确定与第二前端路由对应的目标骨架屏界面后，显示该目标骨架屏界面，保证了在进行路由切换时，骨架屏界面能够顺利展示，且在此过程中，开发人员无需针对第二前端路由对应的目标骨架屏界面进行单独开发，即无需针对第二前端路由对应的目标骨架屏界面开发相应的监听组件、控制组件等，只需根据实际情况查找目标应用程序的前端路由与骨架屏界面之间的对应关系，以确定目标骨架屏界面即可，骨架屏的开发难度和成本较低。而在第二前端路由对应的页面数据已加载完成时，隐藏目标骨架屏界面，展示第二前端路由对应的页面数据，即可完成第一路由对应的页面数据到第二前端路由对应的页面数据的切换。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种骨架屏处理方法的流程图；

图2是根据一示例性实施例示出的一种骨架屏处理方法的具体示例图；

图3是根据一示例性实施例示出的一种骨架屏处理装置的框图；

图4是根据一示例性实施例示出的前端路由变换示例图；

图5是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

以下，对本公开实施例涉及的术语进行解释说明：

路由：单一页面应用程序(Single Page Application，简称SPA)的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理***。而前端路由则可以理解为：把不同理由对应的页面或内容的任务交给前端来做。其中，前端即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。

vue-router：是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。一个页面是由多个组件构成的。传统的页面应用，是用一些超链接来实现页面切换和跳转的。路由的本质就是建立起URL和页面之间的映射关系。

SPA：只有一个完整的页面，在加载页面时，不会加载整个页面，而是只更新某个指定的容器中的内容。SPA的核心之一是：更新视图而不重新请求页面。基于此，vue-router在实现单页面前端路由时，提供了两种方式：Hash History模式和History模式，具体实施时，可以根据mode参数来决定采用哪一种方式。

统一资源定位***(Uniform Resource Locator，简称URL)：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL，它是WWW的统一资源定位标志，就是指网络地址。

对于路由与URL之间的关系，举例来说，若URL为：“www.hao123.com/search”，则此时路由指的是“search”，即路由与URL为包含关系。

用户访问网页时，受网络环境的影响，可能较长时间无法获得网页的页面数据，导致浏览器只能展示空白网页或者展示部分网页内容。为了解决上述问题，在获取网页的页面数据之前，常见的做法是在网页中展示页面的骨架屏，该骨架屏可以表示页面的大致轮廓。在路由切换过程中，骨架屏也会随着路由的变换而有所不同，对于前端路由来说，很难保证每个前端路由对应的页面都设置有自己的骨架屏，而针对每个前端路由对应的页面均进行骨架屏开发，需要针对每个前端路由对应的页面配置相应的监听组件、控制组件等，难度和成本较高，因此，如何在路由切换过程中降低骨架屏的开发难度和成本成为了一个亟需解决的问题。

鉴于此，本公开实施例提供了一种骨架屏处理方法，该方法会实时监听目标应用程序的前端路由变化(实际上也就是URL的变化)，若监听到目标应用程序中的第一前端路由切换为第二前端路由，则说明前端路由发生了变换，此时，从目标应用程序内的映射表中确定与第二前端路由对应的目标骨架屏界面，待确定与第二前端路由对应的目标骨架屏界面后，显示该目标骨架屏界面，保证了在进行前端路由切换时，骨架屏界面能够顺利展示，且在此过程中，开发人员无需针对第二前端路由对应的目标骨架屏界面进行单独开发，即无需针对第二前端路由对应的目标骨架屏界面开发相应的监听组件、控制组件等，只需根据实际情况查找目标应用程序的前端路由与骨架屏界面之间的对应关系，以确定目标骨架屏界面即可，骨架屏的开发难度和成本较低。而为了完成第一路由对应的页面数据到第二前端路由对应的页面数据的切换，进而顺利展示第二前端路由对应的页面数据，本公开在第二前端路由对应的页面数据已加载完成时，隐藏目标骨架屏界面，展示第二前端路由对应的页面数据。可见，在前端路由切换过程中，开发人员无需针对第二前端路由对应的目标骨架屏界面进行单独开发，即无需针对第二前端路由对应的目标骨架屏界面开发相应的监听组件、控制组件等，只需根据实际情况查找目标应用程序的前端路由与骨架屏界面之间的对应关系，以确定目标骨架屏界面即可，骨架屏的开发难度和成本较低。

图1是根据一示例性实施例示出的一种骨架屏处理方法的流程图，如图1所示，骨架屏处理方法用于终端中，具体包括以下步骤。

在步骤S11中，若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从目标应用程序内的映射表中确定与第二前端路由对应的目标骨架屏界面，映射表中存储有目标应用程序的不同前端路由与骨架屏界面之间的对应关系。

在本公开的实施例在实际应用中，实时监听目标应用程序的路由变换，一旦监听到目标应用程序的路由发生变换，即目标应用程序中的第一前端路由切换为第二前端路由，则在预先配置的映射表中查找与第二前端路由对应的目标骨架屏界面。其中，该骨架屏界面由若干界面元素组成，这些界面元素可以通过dom元素、svg字符串等来表示。目标应用程序的类型可以为多种，举例来说，其可以为视频软件类、阅读软件类、游戏软件类等，不以此为限，其还可以其他类型的应用程序。应理解，一个应用程序中一般有多个前端路由，而每个前端路由分别对应有相应的页面，以应用程序“知乎”为例，其存在首页、专题页、个人页等，每个页面均对应有相应的前端路由。

在实际应用中，对于目标应用程序中的第一前端路由切换为第二前端路由，举例来说，第一前端路对应的URL可以为：www.hao123.com/search，第二前端路对应的URL可以为：www.hao123.com/action。此时，URL的变化即表示前端路由的变化，第一前端路对应的URL由“www.hao123.com/search”变化至“www.hao123.com/action”，则表示目标应用程序中的第一前端路由已经切换至了第二前端路。

需要说明的是，目标应用程序内的映射表为预先配置完成的，其具体配置过程如下：

1、将目标应用程序中所有前端路由对应的页面均进行骨架屏化处理，即将所有的前端路由对应的页面均转化为骨架屏界面的形式。

2、建立目标应用程序的不同前端路由与骨架屏界面之间的对应关系。

应理解，由于骨架屏界面由若干界面元素组成，这些界面元素的表现形式可以为dom元素、svg字符串等。因此，映射表中不同前端路由与骨架屏界面之间的对应关系指的是：不同前端路由与骨架屏界面元素的对应关系。而该映射表可以为map对象表，但不以此为限，其还可以为其它格式的映射表。

在一些实施例中，为了实现对目标应用程序中不同前端路由的全局监听，目标应用程序中注册有监听函数，监听函数与目标应用程序所采用的前端路由的工作模式相对应，目标应用程序中的第一前端路由切换为第二前端路由是通过该监听函数监听到的。

应理解，若在每个前端路由对应的页面中均配置监听函数，会极大地增加成本，降低工作效率，而本公开实施例则是在目标应用程序中注册一个总的监听函数，并使该监听函数与目标应用程序所采用的前端路由的工作模式相对应，实现了对目标应用程序中前端路由的监听，降低了成本，提高了工作效率。在实际应用中，监听函数可以以字符串的形式注册在目标应用程序中。

在步骤S12中，显示目标骨架屏界面。

在本公开的实施例中，目标骨架屏界面可以为网页，也可以为应用程序界面，本公开在此不做具体限定。

在一些实施例中，为了实现对目标应用程序中不同路由对应的页面数据以及骨架屏界面的控制，目标应用程序中注册有预设全局函数。在显示目标骨架屏界面时，可以通过预设全局函数隐藏第一前端路由对应的页面数据，进而显示目标骨架屏界面。

应理解，若在每个前端路由对应的页面中均配置控制函数，会极大地增加成本，降低工作效率，本公开实施例提供在目标应用程序中注册预设全局函数，并通过预设全局函数隐藏第一前端路由对应的页面数据，显示目标骨架屏界面，即可完成对第一前端路由对应的页面和目标骨架屏界面的控制，降低了成本，提高了工作效率。在实际应用中，预设全局函数可以以字符串的形式注册在目标应用程序中。

在步骤S13中，若第二前端路由对应的页面数据已加载完成，则隐藏目标骨架屏界面，展示第二前端路由对应的页面数据。

应理解，为了完整地实现第一前端路由到第二前端路由页面数据的转换，在显示目标骨架屏界面后，第二前端路由对应的页面仍在加载页面数据，只有当第二前端路由对应的页面数据加载完成时，才能获得第二前端路由对应的页面的完整内容。因此，待第二前端路由对应的页面数据加载完成，隐藏目标骨架屏界面，展示第二前端路由对应的页面数据。其中，第一前端路由对应的页面到第二前端路由对应的页面的转换过程可参见图4。在图4中，A图表示的是第一前端路由对应的页面，B图表示的是第二前端路由对应的目标骨架屏界面，C图表示的是第二前端路由对应的页面。在B图中，展示了第二前端路由对应的目标骨架屏界面，隐藏了第一前端路由对应的页面。在C图中，隐藏了第二前端路由对应的目标骨架屏界面，展示了第二前端路由对应的页面。

在一些实施例中，基于步骤S12中的描述，若第二前端路由对应的页面数据已加载完成，则可以通过预设全局函数隐藏目标骨架屏界面，展示第二前端路由对应的页面数据。如此，则可以在实现对第一前端路由对应的页面和目标骨架屏界面控制的同时，实现对第二前端路由对应的页面的控制，即实现目标应用程序前端路由切换过程中的全局控制，极大地提高了工作效率。

在本公开实施例中，为了保证映射表中内容更加全面、准确，从目标应用程序内的映射表中确定与第二前端路由对应的目标骨架屏界面之前，方法还包括：

响应于开发人员对目标应用程序的不同前端路由的骨架屏界面配置操作，生成映射表，并将映射表***与目标应用程序对应的页面描述文档中。

在实际应用中，开发人员输入配置信息，目标应用程序可以基于骨架屏界面配置信息生成映射表并将映射表***与目标应用程序对应的页面描述文档中。其中，页面描述文档可以为超文本标记语言(Hyper Text Markup Language，简称HTML)文档中，但不以此为限，该页面描述文档还可以设置为其他格式的文档。其中，HTML是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。

如图2所示，下面提供一具体实施例对本公开的方案进行说明：

S1、用户首次进入应用程序页面。

S2、获取应用程序页面的URL链接(应理解，URL链接中包含了此时应用程序页面的前端路由)，并在映射表中找到与该URL链接对应的骨架屏界面，并对该骨架屏界面进行展示。

S3、当应用程序页面数据加载完成时，利用全局函数隐藏该骨架屏界面，并展示该应用程序页面完整界面。

S4、确定应用程序前端路由的切换模式，若切换模式为Hash History模式，则利用监听函数，如window.add Event Listener('hashchange'，function(){})监听其变化。若切换模式为History模式则利用监听函数，如window.add Event Listener(“popstate”，function(){})监听其变化。

S5、根据应用程序前端路由的切换模式，确定目标切换页面，并获取该的URL链接，重复S2至S4的步骤。

综上所述，本公开实施例通过在目标应用程序中注册监听函数，监听目标应用程序的前端路由变化，进而从目标应用程序内的映射表中确定与第二前端路由对应的目标骨架屏界面，待确定与第二前端路由对应的目标骨架屏界面后，显示该目标骨架屏界面，保证了在进行路由切换时，目标骨架屏界面能够顺利展示，且在此过程中，开发人员无需针对第二前端路由对应的目标骨架屏界面进行单独开发，即无需针对第二前端路由对应的目标骨架屏界面开发相应的监听组件、控制组件等，只需根据实际情况查找目标应用程序的前端路由与骨架屏界面之间的对应关系，以确定目标骨架屏界面即可，骨架屏的开发难度和成本较低。通过在目标应用程序中注册预设全局函数，不仅可以实现目标骨架屏界面的顺利展示，也可以在第二前端路由对应的页面数据加载完成时，隐藏目标骨架屏界面，展示第二前端路由对应的页面数据，完成第一前端路到第二前端路由的切换。

图3是根据一示例性实施例示出的一种骨架屏处理装置框图。参照图3，该装置包括确定单元321，显示单元322和展示单元323。

确定单元321被配置为执行若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从目标应用程序内的映射表中确定与第二前端路由对应的目标骨架屏界面，映射表中存储有目标应用程序的不同前端路由与骨架屏界面之间的对应关系。

显示单元322被配置为执行显示目标骨架屏界面；

展示单元323被配置为执行若第二前端路由对应的页面数据已加载完成，则隐藏目标骨架屏界面，展示第二前端路由对应的页面数据。

在本公开的一种示例性实施例中，目标应用程序中注册有监听函数，监听函数与目标应用程序所采用的前端路由的工作模式相对应；

确定单元321还被配置为执行：

通过监听函数监听到目标应用程序中的第一前端路由切换为第二前端路由。

在本公开的一种示例性实施例中，目标应用程序中注册有预设全局函数；

显示单元322还被配置为执行：通过预设全局函数隐藏第一前端路由对应的页面数据，显示目标骨架屏界面。

在本公开的一种示例性实施例中，展示单元323还被配置为执行：

若第二前端路由对应的页面数据已加载完成，则通过预设全局函数隐藏目标骨架屏界面，展示第二前端路由对应的页面数据。

在本公开的一种示例性实施例中，装置还包括：

响应单元324，被配置为执行响应于开发人员对目标应用程序的不同前端路由的骨架屏界面配置操作，生成映射表，并将映射表***与目标应用程序对应的页面描述文档中。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图5是根据一示例性实施例示出的一种电子设备的框图。该电子设备500可以为用户所使用的电子设备。该电子设备500可以是：智能手机、智能手表、台式电脑、手提电脑和膝上型电子设备、台式电子设备等其他名称。

通常，电子设备500包括有：处理器501和存储器502。

其中，处理器501可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器501可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field-Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器501也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器501可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器501还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器502可以包括一个或多个存储介质，该存储介质可以是非暂态的。存储器502还可以包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。

在一些实施例中，电子设备500还可选包括有：***设备接口503和至少一个***设备。处理器501、存储器502和***设备接口503之间可以通过总线或信号线相连。各个***设备可以通过总线、信号线或电路板与***设备接口503相连。具体地，***设备包括：射频电路504、显示屏505、摄像头组件506、音频电路507、定位组件508和电源509中的至少一种。

***设备接口503可被用于将I/O(Input/Output，输入/输出)相关的至少一个***设备连接到处理器501和存储器502。在一些实施例中，处理器501、存储器502和***设备接口503被集成在同一芯片或电路板上；在一些其他实施例中，处理器501、存储器502和***设备接口503中的任意一个或两个可以在单独的芯片或电路板上实现，本实施了对此不加以限定。

射频电路504用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路504通过电磁信号与通信网络以及其他通信设备进行通信。射频电路504将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选的，射频电路504包括：天线***、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路504可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路504还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本公开对此不加以限定。

显示屏505用于显示UI(User Interface，用户界面)。该UI可以包括图像、文本、图标、视频及其它们的任意组合。当显示屏505是触摸显示屏时，显示屏505还具有采集在显示屏505的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器501进行处理。此时，显示屏505还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏505可以为一个，设置电子设备500的前面板；在另一些实施例中，显示屏505可以为至少两个，分别设置在电子设备500的不同表面或呈折叠设计；在再一些实施例中，显示屏505可以是柔性显示屏，设置在电子设备500的弯曲表面上或折叠面上。甚至，显示屏505还可以设置成非矩形的不规则图像，也即异形屏。显示屏505可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode，有机发光二极管)等材质制备。

摄像头组件506用于采集图像或视频。可选的，摄像头组件506包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件506还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路507可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器501进行处理，或者输入至射频电路504以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在电子设备500的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器501或射频电路504的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路507还可以包括耳机插孔。

定位组件508用于定位电子设备500的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件508可以是基于美国的GPS(GlobalPositioning System，全球定位***)、中国的北斗***、俄罗斯的格雷纳斯***或欧盟的伽利略***的定位组件。

电源509用于为电子设备500中的各个组件进行供电。电源509可以是交流电、直流电、一次性电池或可充电电池。当电源509包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，电子设备500还包括有一个或多个传感器510。该一个或多个传感器510包括但不限于：加速度传感器511、陀螺仪传感器512、压力传感器513、指纹传感器514、光学传感器515以及接近传感器516。

加速度传感器511可以检测以电子设备500建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器511可以用于检测重力加速度在三个坐标轴上的分量。处理器501可以根据加速度传感器511采集的重力加速度信号，控制显示屏505以横向视图或纵向视图进行用户界面的显示。加速度传感器511还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器512可以检测电子设备500的机体方向及转动角度，陀螺仪传感器512可以与加速度传感器511协同采集用户对电子设备500的3D动作。处理器501根据陀螺仪传感器512采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器513可以设置在电子设备500的侧边框和/或显示屏505的下层。当压力传感器513设置在电子设备500的侧边框时，可以检测用户对电子设备500的握持信号，由处理器501根据压力传感器513采集的握持信号进行左右手识别或快捷操作。当压力传感器513设置在显示屏505的下层时，由处理器501根据用户对显示屏505的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器514用于采集用户的指纹，由处理器501根据指纹传感器514采集到的指纹识别用户的身份，或者，由指纹传感器514根据采集到的指纹识别用户的身份。在识出用户的身份为可信身份时，由处理器501授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器514可以被设置电子设备500的正面、背面或侧面。当电子设备500上设置有物理按键或厂商Logo时，指纹传感器514可以与物理按键或厂商Logo集成在一起。

光学传感器515用于采集环境光强度。在一个实施例中，处理器501可以根据光学传感器515采集的环境光强度，控制显示屏505的显示亮度。具体地，当环境光强度较高时，调高显示屏505的显示亮度；当环境光强度较低时，调低显示屏505的显示亮度。在另一个实施例中，处理器501还可以根据光学传感器515采集的环境光强度，动态调整摄像头组件506的拍摄参数。

接近传感器516，也称距离传感器，通常设置在电子设备500的前面板。接近传感器516用于采集用户与电子设备500的正面之间的距离。在一个实施例中，当接近传感器516检测到用户与电子设备500的正面之间的距离逐渐变小时，由处理器501控制显示屏505从亮屏状态切换为息屏状态；当接近传感器516检测到用户与电子设备500的正面之间的距离逐渐变大时，由处理器501控制显示屏505从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图5中示出的结构并不构成对电子设备500的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

在示例性实施例中，本公开还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器，上述指令可由电子设备500的处理器501执行以完成上述骨架屏处理方法。可选的，存储介质可以是非临时性存储介质，例如，所述非临时性存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，本公开还提供了一种计算机程序产品，包括计算机程序，该计算机程序可以由电子设备的处理器执行，以实现上述骨架屏处理方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种骨架屏处理方法，其特征在于，包括：

若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从所述目标应用程序内的映射表中确定与所述第二前端路由对应的目标骨架屏界面，所述映射表中存储有所述目标应用程序的不同前端路由与骨架屏界面之间的对应关系；

显示所述目标骨架屏界面；

若所述第二前端路由对应的页面数据已加载完成，则隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据。

2.根据权利要求1所述的骨架屏处理方法，其特征在于，所述目标应用程序中注册有监听函数，所述监听函数与所述目标应用程序所采用的前端路由的工作模式相对应；

所述监听到目标应用程序中的第一前端路由切换为第二前端路由，包括：

通过所述监听函数监听到所述目标应用程序中的第一前端路由切换为第二前端路由。

3.根据权利要求1所述的骨架屏处理方法，其特征在于，所述目标应用程序中注册有预设全局函数；

所述显示所述目标骨架屏界面，包括：

通过所述预设全局函数隐藏所述第一前端路由对应的页面数据，显示所述目标骨架屏界面。

4.根据权利要求3所述的骨架屏处理方法，其特征在于，所述若所述第二前端路由对应的页面数据已加载完成，则隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据，包括：

若所述第二前端路由对应的页面数据已加载完成，则通过所述预设全局函数隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据。

5.根据权利要求1所述的骨架屏处理方法，其特征在于，所述从所述目标应用程序内的映射表中确定与所述第二前端路由对应的目标骨架屏界面之前，所述方法还包括：

响应于开发人员对所述目标应用程序的不同前端路由的骨架屏界面配置操作，生成所述映射表，并将所述映射表***与所述目标应用程序对应的页面描述文档中。

6.一种骨架屏处理装置，其特征在于，包括：

确定单元，被配置为执行若监听到目标应用程序中的第一前端路由切换为第二前端路由，则从所述目标应用程序内的映射表中确定与所述第二前端路由对应的目标骨架屏界面，所述映射表中存储有所述目标应用程序的不同前端路由与骨架屏界面之间的对应关系；

显示单元，被配置为执行显示所述目标骨架屏界面；

展示单元，被配置为执行若所述第二前端路由对应的页面数据已加载完成，则隐藏所述目标骨架屏界面，展示所述第二前端路由对应的页面数据。

7.根据权利要求6所述的骨架屏处理装置，其特征在于，所述装置还包括：

响应单元，被配置为执行响应于开发人员对所述目标应用程序的不同前端路由的骨架屏界面配置操作，生成所述映射表，并将所述映射表***与所述目标应用程序对应的页面描述文档中。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至5中任一项所述的骨架屏处理方法。

9.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至5中任一项所述的骨架屏处理方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至5中任一项所述的骨架屏处理方法。

Images