Skeleton screen processing method, device, equipment and storage medium

Abstract

The present disclosure is about a skeleton screen processing method, device, equipment and storage medium, and relates to the field of computer technology. The method includes: if it is monitored that the first front-end route in the target application is switched to the second front-end route, then the target skeleton screen interface corresponding to the second front-end route is determined from the mapping table in the target application, and the mapping table stores the correspondence between different front-end routes of the target application and the skeleton screen interface; the target skeleton screen interface is displayed; if the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden, and the page data corresponding to the second front-end route is displayed. The present disclosure only needs to find the correspondence between the front-end route of the target application and the skeleton screen interface according to the actual situation to determine the target skeleton screen interface, and the application difficulty and cost are relatively low.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a skeleton screen processing method, device, equipment and storage medium. Background Art

[0002] When a user visits a web page, due to the influence of the network environment, the page data of the web page may not be obtained for a long time, resulting in the browser only being able to display a blank web page or displaying part of the web page content. In order to solve the above problem, before obtaining the page data of the web page, a common practice is to display a skeleton screen of the page in the web page, which can represent the general outline of the page.

[0003] During the route switching process, the skeleton screen will also be different with the change of the route. For the front-end route, it is difficult to ensure that each page corresponding to the front-end route is set with its own skeleton screen. Skeleton screen development is carried out for each page corresponding to the front-end route. It is difficult and costly to configure corresponding monitoring components and control components for each page corresponding to the front-end route. Therefore, how to reduce the difficulty and cost of skeleton screen development during the route switching process has become an urgent problem to be solved. Summary of the invention

[0004] The present disclosure provides a skeleton screen processing method, device and system to at least solve the problem of difficulty and high cost in developing skeleton screens in related technologies. The technical solution of the present disclosure is as follows:

[0005] According to a first aspect of an embodiment of the present disclosure, a skeleton screen processing method is provided, including:

[0006] If it is monitored that the first front-end route in the target application is switched to the second front-end route, the target skeleton screen interface corresponding to the second front-end route is determined from a mapping table in the target application, wherein the mapping table stores the correspondence between different front-end routes of the target application and the skeleton screen interface;

[0007] Display the target skeleton screen interface;

[0008] If the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden and the page data corresponding to the second front-end route is displayed.

[0009] In some embodiments, a listening function is registered in the target application, and the listening function corresponds to the working mode of the front-end routing adopted by the target application;

[0010] The monitoring of switching the first front-end route in the target application to the second front-end route includes:

[0011] The monitoring function monitors that the first front-end route in the target application is switched to the second front-end route.

[0012] In some embodiments, a preset global function is registered in the target application;

[0013] The displaying of the target skeleton screen interface includes:

[0014] The page data corresponding to the first front-end route is hidden through the preset global function, and the target skeleton screen interface is displayed.

[0015] In some embodiments, if the page data corresponding to the second front-end route has been loaded, hiding the target skeleton screen interface and displaying the page data corresponding to the second front-end route includes:

[0016] If the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden through the preset global function, and the page data corresponding to the second front-end route is displayed.

[0017] In some embodiments, before determining the target skeleton screen interface corresponding to the second front-end route from the mapping table in the target application, the method further includes:

[0018] In response to the developer's operation of configuring the skeleton screen interface of different front-end routes of the target application, the mapping table is generated and inserted into the page description document corresponding to the target application.

[0019] According to a second aspect of an embodiment of the present disclosure, a skeleton screen processing device is provided, including:

[0020] A determining unit is configured to determine a target skeleton screen interface corresponding to the second front-end route from a mapping table in the target application if it is monitored that the first front-end route in the target application is switched to the second front-end route, wherein the mapping table stores a correspondence between different front-end routes of the target application and the skeleton screen interface;

[0021] A display unit, configured to display the target skeleton screen interface;

[0022] The display unit is configured to execute, if the page data corresponding to the second front-end route has been loaded, hiding the target skeleton screen interface and displaying the page data corresponding to the second front-end route.

[0023] In some embodiments, a listening function is registered in the target application, and the listening function corresponds to the working mode of the front-end routing adopted by the target application;

[0024] The determining unit is further configured to execute:

[0025] The monitoring function monitors that the first front-end route in the target application is switched to the second front-end route.

[0026] In some embodiments, a preset global function is registered in the target application;

[0027] The display unit is further configured to execute: hiding the page data corresponding to the first front-end route through the preset global function, and displaying the target skeleton screen interface.

[0028] In some embodiments, the display unit is further configured to perform:

[0029] If the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden through the preset global function, and the page data corresponding to the second front-end route is displayed.

[0030] In some embodiments, the apparatus further comprises:

[0031] The response unit is configured to execute a skeleton screen interface configuration operation in response to the developer's different front-end routings of the target application, generate the mapping table, and insert the mapping table into a page description document corresponding to the target application.

[0032] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, including:

[0033] processor;

[0034] a memory for storing instructions executable by the processor;

[0035] Wherein, the processor is configured to execute the instructions to implement the above-mentioned skeleton screen processing method.

[0036] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the above-mentioned skeleton screen processing method.

[0037] According to a fifth aspect of an embodiment of the present disclosure, there is provided a computer program product, including a computer program, wherein when the computer program is executed by a processor, the skeleton screen processing method is implemented.

[0038] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects:

[0039] If the present disclosure monitors that the first front-end route in the target application is switched to the second front-end route, the target skeleton screen interface corresponding to the second front-end route is determined from the mapping table in the target application. After the target skeleton screen interface corresponding to the second front-end route is determined, the target skeleton screen interface is displayed, ensuring that the skeleton screen interface can be displayed smoothly when the route is switched. In this process, the developer does not need to develop a separate target skeleton screen interface corresponding to the second front-end route, that is, there is no need to develop corresponding monitoring components, control components, etc. for the target skeleton screen interface corresponding to the second front-end route. It is only necessary to find the correspondence between the front-end route of the target application and the skeleton screen interface according to the actual situation to determine the target skeleton screen interface. The difficulty and cost of developing the skeleton screen are relatively low. When the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden, and the page data corresponding to the second front-end route is displayed, so that the switching of the page data corresponding to the first route to the page data corresponding to the second front-end route can be completed.

[0040] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0042] Figure 1 is a flow chart of a skeleton screen processing method according to an exemplary embodiment;

[0043] Figure 2 is a specific example diagram showing a skeleton screen processing method according to an exemplary embodiment;

[0044] Figure 3 is a block diagram of a skeleton screen processing device according to an exemplary embodiment;

[0045] Figure 4 is an example diagram of front-end route transformation according to an exemplary embodiment;

[0046] Figure 5 It is a block diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0047] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0048] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0049] The following is an explanation of the terms involved in the embodiments of the present disclosure:

[0050] Routing: The path manager of a single page application (SPA). In layman's terms, vue-router is the link path management system of WebApp. Front-end routing can be understood as: assigning the tasks of pages or content corresponding to different reasons to the front-end. Among them, the front-end is the front-end part of the website, which runs on the browsers of PC and mobile terminals and displays the web pages to users.

[0051] vue-router: It is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. Vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components. A page is composed of multiple components. Traditional page applications use some hyperlinks to achieve page switching and jumping. The essence of routing is to establish a mapping relationship between URLs and pages.

[0052] SPA: There is only one complete page. When loading a page, the entire page will not be loaded, but only the content in a specified container will be updated. One of the core features of SPA is to update the view without re-requesting the page. Based on this, vue-router provides two modes when implementing single-page front-end routing: Hash History mode and History mode. When implementing it, you can decide which mode to use based on the mode parameter.

[0053] Uniform Resource Locator (URL): On the WWW, every information resource has a unified and unique address on the Internet. This address is called URL, which is the uniform resource locator of the WWW, that is, the network address.

[0054] Regarding the relationship between routing and URL, for example, if the URL is: "www.hao123.com / search", then the routing refers to "search", that is, the routing and URL are in an inclusive relationship.

[0055] When a user visits a web page, due to the influence of the network environment, the page data of the web page may not be obtained for a long time, resulting in the browser only being able to display a blank web page or displaying part of the web page content. In order to solve the above problems, before obtaining the page data of the web page, a common practice is to display a skeleton screen of the page in the web page, and the skeleton screen can represent the general outline of the page. During the route switching process, the skeleton screen will also vary with the change of the route. For the front-end route, it is difficult to ensure that each page corresponding to the front-end route is set with its own skeleton screen. For each page corresponding to the front-end route, a skeleton screen is developed. It is necessary to configure corresponding monitoring components, control components, etc. for each page corresponding to the front-end route. The difficulty and cost are high. Therefore, how to reduce the difficulty and cost of skeleton screen development during route switching has become an urgent problem to be solved.

[0056] In view of this, the embodiment of the present disclosure provides a skeleton screen processing method, which monitors the front-end route changes of the target application in real time (actually, the URL changes). If the first front-end route in the target application is switched to the second front-end route, it means that the front-end route has changed. At this time, the target skeleton screen interface corresponding to the second front-end route is determined from the mapping table in the target application. After the target skeleton screen interface corresponding to the second front-end route is determined, the target skeleton screen interface is displayed, ensuring that the skeleton screen interface can be displayed smoothly when the front-end route is switched. In this process, the developer does not need to develop a separate target skeleton screen interface corresponding to the second front-end route, that is, there is no need to develop corresponding monitoring components, control components, etc. for the target skeleton screen interface corresponding to the second front-end route. It is only necessary to find the corresponding relationship between the front-end route of the target application and the skeleton screen interface according to the actual situation to determine the target skeleton screen interface. The development difficulty and cost of the skeleton screen are low. In order to complete the switching of the page data corresponding to the first route to the page data corresponding to the second front-end route, and then smoothly display the page data corresponding to the second front-end route, the present disclosure hides the target skeleton screen interface when the page data corresponding to the second front-end route has been loaded, and displays the page data corresponding to the second front-end route. It can be seen that during the front-end route switching process, developers do not need to carry out separate development for the target skeleton screen interface corresponding to the second front-end route, that is, there is no need to develop corresponding monitoring components, control components, etc. for the target skeleton screen interface corresponding to the second front-end route. They only need to find the correspondence between the front-end route of the target application and the skeleton screen interface according to the actual situation to determine the target skeleton screen interface. The difficulty and cost of developing the skeleton screen are relatively low.

[0057] Figure 1 is a flowchart of a skeleton screen processing method according to an exemplary embodiment. Figure 1 As shown, the skeleton screen processing method is used in a terminal, and specifically includes the following steps.

[0058] In step S11, if it is monitored that the first front-end route in the target application is switched to the second front-end route, the target skeleton screen interface corresponding to the second front-end route is determined from the mapping table in the target application, and the mapping table stores the correspondence between different front-end routes of the target application and the skeleton screen interface.

[0059] In actual application of the embodiments of the present disclosure, the route change of the target application is monitored in real time. Once the route change of the target application is monitored, that is, the first front-end route in the target application is switched to the second front-end route, the target skeleton screen interface corresponding to the second front-end route is searched in the pre-configured mapping table. Among them, the skeleton screen interface is composed of a number of interface elements, and these interface elements can be represented by dom elements, svg strings, etc. The type of target application can be various. For example, it can be a video software class, a reading software class, a game software class, etc., but it is not limited to this. It can also be other types of applications. It should be understood that there are generally multiple front-end routes in an application, and each front-end route corresponds to a corresponding page. Taking the application "Zhihu" as an example, it has a homepage, a special page, a personal page, etc., and each page corresponds to a corresponding front-end route.

[0060] In actual applications, the first front-end route in the target application is switched to the second front-end route. For example, the URL corresponding to the first front-end route may be: www.hao123.com / search, and the URL corresponding to the second front-end route may be: www.hao123.com / action. At this time, the change of the URL indicates the change of the front-end route. The URL corresponding to the first front-end route changes from "www.hao123.com / search" to "www.hao123.com / action", which means that the first front-end route in the target application has been switched to the second front-end route.

[0061] It should be noted that the mapping table in the target application is pre-configured, and the specific configuration process is as follows:

[0062] 1. All pages corresponding to the front-end routes in the target application are processed into skeleton screens, that is, all pages corresponding to the front-end routes are converted into the form of skeleton screen interfaces.

[0063] 2. Establish the correspondence between different front-end routes of the target application and the skeleton screen interface.

[0064] It should be understood that since the skeleton screen interface is composed of several interface elements, the expression forms of these interface elements can be DOM elements, SVG strings, etc. Therefore, the correspondence between different front-end routes and skeleton screen interfaces in the mapping table refers to: the correspondence between different front-end routes and skeleton screen interface elements. The mapping table can be a map object table, but it is not limited to this, and it can also be a mapping table in other formats.

[0065] In some embodiments, in order to achieve global monitoring of different front-end routes in the target application, a monitoring function is registered in the target application. The monitoring function corresponds to the working mode of the front-end route adopted by the target application. The switching of the first front-end route in the target application to the second front-end route is monitored by the monitoring function.

[0066] It should be understood that if a listening function is configured in each page corresponding to the front-end route, it will greatly increase the cost and reduce the work efficiency. However, the embodiment of the present disclosure registers a total listening function in the target application, and makes the listening function correspond to the working mode of the front-end route adopted by the target application, thereby realizing the listening of the front-end route in the target application, reducing the cost and improving the work efficiency. In practical applications, the listening function can be registered in the target application in the form of a string.

[0067] In step S12, the target skeleton screen interface is displayed.

[0068] In the embodiments of the present disclosure, the target skeleton screen interface may be a web page or an application program interface, which is not specifically limited in the present disclosure.

[0069] In some embodiments, in order to realize the control of page data and skeleton screen interface corresponding to different routes in the target application, a preset global function is registered in the target application. When displaying the target skeleton screen interface, the page data corresponding to the first front-end route can be hidden by the preset global function, and then the target skeleton screen interface is displayed.

[0070] It should be understood that if the control function is configured in the page corresponding to each front-end route, it will greatly increase the cost and reduce the work efficiency. The embodiment of the present disclosure provides a preset global function registered in the target application, and hides the page data corresponding to the first front-end route through the preset global function, and displays the target skeleton screen interface, so as to complete the control of the page corresponding to the first front-end route and the target skeleton screen interface, thereby reducing the cost and improving the work efficiency. In actual applications, the preset global function can be registered in the target application in the form of a string.

[0071] In step S13, if the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden and the page data corresponding to the second front-end route is displayed.

[0072] It should be understood that in order to completely realize the conversion of the page data from the first front-end route to the second front-end route, after the target skeleton screen interface is displayed, the page corresponding to the second front-end route is still loading page data. Only when the page data corresponding to the second front-end route is loaded, can the complete content of the page corresponding to the second front-end route be obtained. Therefore, after the page data corresponding to the second front-end route is loaded, the target skeleton screen interface is hidden, and the page data corresponding to the second front-end route is displayed. Among them, the conversion process of the page corresponding to the first front-end route to the page corresponding to the second front-end route can be referred to. Figure 4 .exist Figure 4 In the figure, A shows the page corresponding to the first front-end route, B shows the target skeleton screen interface corresponding to the second front-end route, and C shows the page corresponding to the second front-end route. In figure B, the target skeleton screen interface corresponding to the second front-end route is displayed, and the page corresponding to the first front-end route is hidden. In figure C, the target skeleton screen interface corresponding to the second front-end route is hidden, and the page corresponding to the second front-end route is displayed.

[0073] In some embodiments, based on the description in step S12, if the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface can be hidden through a preset global function, and the page data corresponding to the second front-end route can be displayed. In this way, the page corresponding to the second front-end route can be controlled while the page corresponding to the first front-end route and the target skeleton screen interface are controlled, that is, the global control during the switching process of the target application front-end route is realized, which greatly improves the work efficiency.

[0074] In the embodiment of the present disclosure, in order to ensure that the content in the mapping table is more comprehensive and accurate, before determining the target skeleton screen interface corresponding to the second front-end route from the mapping table in the target application, the method further includes:

[0075] In response to the developer's operation of configuring the skeleton screen interface of different front-end routes of the target application, a mapping table is generated and inserted into a page description document corresponding to the target application.

[0076] In actual applications, developers input configuration information, and the target application can generate a mapping table based on the skeleton screen interface configuration information and insert the mapping table into the page description document corresponding to the target application. The page description document can be a Hypertext Markup Language (HTML) document, but it is not limited to this. The page description document can also be set as a document in other formats. HTML is a markup language. It includes a series of tags. Through these tags, the document format on the network can be unified, so that scattered network resources can be connected into a logical whole.

[0077] like Figure 2 As shown, a specific embodiment is provided below to illustrate the solution of the present disclosure:

[0078] S1. The user enters the application page for the first time.

[0079] S2. Get the URL link of the application page (it should be understood that the URL link contains the front-end route of the application page at this time), find the skeleton screen interface corresponding to the URL link in the mapping table, and display the skeleton screen interface.

[0080] S3. When the application page data is loaded, the skeleton screen interface is hidden using a global function, and the complete interface of the application page is displayed.

[0081] S4. Determine the switching mode of the front-end route of the application. If the switching mode is Hash History mode, use a monitoring function such as window.add Event Listener('hashchange', function(){}) to monitor its changes. If the switching mode is History mode, use a monitoring function such as window.add Event Listener("popstate", function(){}) to monitor its changes.

[0082] S5. According to the switching mode of the front-end routing of the application, determine the target switching page, obtain the URL link, and repeat steps S2 to S4.

[0083] In summary, the disclosed embodiment registers a monitoring function in the target application to monitor the front-end route changes of the target application, and then determines the target skeleton screen interface corresponding to the second front-end route from the mapping table in the target application. After the target skeleton screen interface corresponding to the second front-end route is determined, the target skeleton screen interface is displayed, ensuring that the target skeleton screen interface can be displayed smoothly when the route is switched. In this process, the developer does not need to develop a separate target skeleton screen interface corresponding to the second front-end route, that is, there is no need to develop corresponding monitoring components, control components, etc. for the target skeleton screen interface corresponding to the second front-end route. It is only necessary to find the correspondence between the front-end route of the target application and the skeleton screen interface according to the actual situation to determine the target skeleton screen interface. The difficulty and cost of skeleton screen development are low. By registering a preset global function in the target application, not only can the target skeleton screen interface be displayed smoothly, but also when the page data corresponding to the second front-end route is loaded, the target skeleton screen interface can be hidden, and the page data corresponding to the second front-end route can be displayed, completing the switch from the first front-end route to the second front-end route.

[0084] Figure 3 FIG. 1 is a block diagram of a skeleton screen processing device according to an exemplary embodiment. Figure 3 The device includes a determining unit 321, a display unit 322 and a presentation unit 323.

[0085] The determination unit 321 is configured to execute if it monitors that the first front-end route in the target application is switched to the second front-end route, then determine the target skeleton screen interface corresponding to the second front-end route from the mapping table in the target application, and the mapping table stores the correspondence between different front-end routes of the target application and the skeleton screen interface.

[0086] The display unit 322 is configured to execute display of the target skeleton screen interface;

[0087] The display unit 323 is configured to execute, if the page data corresponding to the second front-end route has been loaded, hiding the target skeleton screen interface and displaying the page data corresponding to the second front-end route.

[0088] In an exemplary embodiment of the present disclosure, a listening function is registered in the target application, and the listening function corresponds to the working mode of the front-end routing adopted by the target application;

[0089] The determining unit 321 is further configured to execute:

[0090] The first front-end route in the target application is monitored by the monitoring function and switched to the second front-end route.

[0091] In an exemplary embodiment of the present disclosure, a preset global function is registered in the target application;

[0092] The display unit 322 is further configured to execute: hiding the page data corresponding to the first front-end route through a preset global function, and displaying the target skeleton screen interface.

[0093] In an exemplary embodiment of the present disclosure, the display unit 323 is further configured to execute:

[0094] If the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden through a preset global function, and the page data corresponding to the second front-end route is displayed.

[0095] In an exemplary embodiment of the present disclosure, the device further includes:

[0096] The response unit 324 is configured to execute a skeleton screen interface configuration operation in response to the developer's different front-end routes of the target application, generate a mapping table, and insert the mapping table into a page description document corresponding to the target application.

[0097] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0098] Figure 5 1 is a block diagram of an electronic device according to an exemplary embodiment. The electronic device 500 may be an electronic device used by a user. The electronic device 500 may be a smart phone, a smart watch, a desktop computer, a laptop computer, a laptop electronic device, a desktop electronic device, or other names.

[0099] Typically, the electronic device 500 includes a processor 501 and a memory 502 .

[0100] Among them, the processor 501 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 501 can be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 501 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 501 may be integrated with a GPU (Graphics Processing Unit), and the GPU is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 501 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0101] The memory 502 may include one or more storage media, which may be non-transitory. The memory 502 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices and flash memory storage devices.

[0102] In some embodiments, the electronic device 500 may further optionally include: a peripheral device interface 503 and at least one peripheral device. The processor 501, the memory 502 and the peripheral device interface 503 may be connected via a bus or a signal line. Each peripheral device may be connected to the peripheral device interface 503 via a bus, a signal line or a circuit board. Specifically, the peripheral device includes: at least one of a radio frequency circuit 504, a display screen 505, a camera assembly 506, an audio circuit 507, a positioning assembly 508 and a power supply 509.

[0103] The peripheral device interface 503 may be used to connect at least one peripheral device related to I / O (Input / Output) to the processor 501 and the memory 502. In some embodiments, the processor 501, the memory 502, and the peripheral device interface 503 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 501, the memory 502, and the peripheral device interface 503 may be implemented on a separate chip or circuit board, which is not limited in this embodiment.

[0104] The radio frequency circuit 504 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The radio frequency circuit 504 communicates with the communication network and other communication devices through electromagnetic signals. The radio frequency circuit 504 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals into electrical signals. Optionally, the radio frequency circuit 504 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, and the like. The radio frequency circuit 504 can communicate with other terminals through at least one wireless communication protocol. The wireless communication protocol includes, but is not limited to: a metropolitan area network, various generations of mobile communication networks (2G, 3G, 4G and 5G), a wireless local area network and / or a WiFi (Wireless Fidelity) network. In some embodiments, the radio frequency circuit 504 may also include circuits related to NFC (Near Field Communication), which is not limited in the present disclosure.

[0105] The display screen 505 is used to display a UI (User Interface). The UI may include images, texts, icons, videos, and any combination thereof. When the display screen 505 is a touch display screen, the display screen 505 also has the ability to collect touch signals on the surface or above the surface of the display screen 505. The touch signal can be input to the processor 501 as a control signal for processing. At this time, the display screen 505 can also be used to provide virtual buttons and / or virtual keyboards, also known as soft buttons and / or soft keyboards. In some embodiments, the display screen 505 can be one, and the front panel of the electronic device 500 is set; in other embodiments, the display screen 505 can be at least two, which are respectively set on different surfaces of the electronic device 500 or are folded; in some other embodiments, the display screen 505 can be a flexible display screen, which is set on the curved surface or folded surface of the electronic device 500. Even, the display screen 505 can also be set to a non-rectangular irregular image, that is, a special-shaped screen. The display screen 505 can be made of materials such as LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode, organic light-emitting diode).

[0106] The camera assembly 506 is used to capture images or videos. Optionally, the camera assembly 506 includes a front camera and a rear camera. Typically, the front camera is arranged on the front panel of the terminal, and the rear camera is arranged on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth of field camera, a wide-angle camera, and a telephoto camera, so as to realize the fusion of the main camera and the depth of field camera to realize the background blur function, the fusion of the main camera and the wide-angle camera to realize the panoramic shooting and VR (Virtual Reality) shooting function or other fusion shooting functions. In some embodiments, the camera assembly 506 may also include a flash. The flash can be a monochrome temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm light flash and a cold light flash, which can be used for light compensation at different color temperatures.

[0107] The audio circuit 507 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, and convert the sound waves into electrical signals and input them into the processor 501 for processing, or input them into the radio frequency circuit 504 to achieve voice communication. For the purpose of stereo acquisition or noise reduction, there may be multiple microphones, which are respectively arranged at different parts of the electronic device 500. The microphone may also be an array microphone or an omnidirectional acquisition microphone. The speaker is used to convert the electrical signal from the processor 501 or the radio frequency circuit 504 into sound waves. The speaker may be a traditional film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signal into sound waves audible to humans, but also convert the electrical signal into sound waves inaudible to humans for purposes such as ranging. In some embodiments, the audio circuit 507 may also include a headphone jack.

[0108] Positioning component 508 is used to locate the current geographic location of electronic device 500 to implement navigation or LBS (Location Based Service). Positioning component 508 can be a positioning component based on the US GPS (Global Positioning System), China's Beidou system, Russia's Grenas system or the European Union's Galileo system.

[0109] The power supply 509 is used to power various components in the electronic device 500. The power supply 509 can be an alternating current, a direct current, a disposable battery, or a rechargeable battery. When the power supply 509 includes a rechargeable battery, the rechargeable battery can support wired charging or wireless charging. The rechargeable battery can also be used to support fast charging technology.

[0110] In some embodiments, the electronic device 500 further includes one or more sensors 510 , including but not limited to: an acceleration sensor 511 , a gyroscope sensor 512 , a pressure sensor 513 , a fingerprint sensor 514 , an optical sensor 515 , and a proximity sensor 516 .

[0111] The acceleration sensor 511 can detect the magnitude of acceleration on the three coordinate axes of the coordinate system established by the electronic device 500. For example, the acceleration sensor 511 can be used to detect the components of gravity acceleration on the three coordinate axes. The processor 501 can control the display screen 505 to display the user interface in a horizontal view or a vertical view according to the gravity acceleration signal collected by the acceleration sensor 511. The acceleration sensor 511 can also be used for collecting game or user motion data.

[0112] The gyro sensor 512 can detect the body direction and rotation angle of the electronic device 500, and the gyro sensor 512 can cooperate with the acceleration sensor 511 to collect the user's 3D actions on the electronic device 500. The processor 501 can implement the following functions based on the data collected by the gyro sensor 512: motion sensing (such as changing the UI according to the user's tilt operation), image stabilization during shooting, game control, and inertial navigation.

[0113] The pressure sensor 513 can be set on the side frame of the electronic device 500 and / or the lower layer of the display screen 505. When the pressure sensor 513 is set on the side frame of the electronic device 500, it can detect the user's holding signal of the electronic device 500, and the processor 501 performs left and right hand recognition or shortcut operation according to the holding signal collected by the pressure sensor 513. When the pressure sensor 513 is set on the lower layer of the display screen 505, the processor 501 controls the operability controls on the UI interface according to the user's pressure operation on the display screen 505. The operability controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0114] The fingerprint sensor 514 is used to collect the user's fingerprint, and the processor 501 identifies the user's identity based on the fingerprint collected by the fingerprint sensor 514, or the fingerprint sensor 514 identifies the user's identity based on the collected fingerprint. When the user's identity is recognized as a trusted identity, the processor 501 authorizes the user to perform relevant sensitive operations, which include unlocking the screen, viewing encrypted information, downloading software, paying, and changing settings. The fingerprint sensor 514 can be set on the front, back, or side of the electronic device 500. When a physical button or a manufacturer logo is set on the electronic device 500, the fingerprint sensor 514 can be integrated with the physical button or the manufacturer logo.

[0115] The optical sensor 515 is used to collect the ambient light intensity. In one embodiment, the processor 501 can control the display brightness of the display screen 505 according to the ambient light intensity collected by the optical sensor 515. Specifically, when the ambient light intensity is high, the display brightness of the display screen 505 is increased; when the ambient light intensity is low, the display brightness of the display screen 505 is reduced. In another embodiment, the processor 501 can also dynamically adjust the shooting parameters of the camera component 506 according to the ambient light intensity collected by the optical sensor 515.

[0116] The proximity sensor 516, also called a distance sensor, is usually disposed on the front panel of the electronic device 500. The proximity sensor 516 is used to collect the distance between the user and the front of the electronic device 500. In one embodiment, when the proximity sensor 516 detects that the distance between the user and the front of the electronic device 500 is gradually decreasing, the processor 501 controls the display screen 505 to switch from the screen-on state to the screen-off state; when the proximity sensor 516 detects that the distance between the user and the front of the electronic device 500 is gradually increasing, the processor 501 controls the display screen 505 to switch from the screen-off state to the screen-on state.

[0117] Those skilled in the art will understand that Figure 5 The structure shown in the figure does not constitute a limitation on the electronic device 500, and may include more or less components than those shown in the figure, or combine some components, or adopt a different component arrangement.

[0118] In an exemplary embodiment, the present disclosure further provides a computer-readable storage medium including instructions, such as a memory including instructions, and the above instructions can be executed by the processor 501 of the electronic device 500 to complete the above skeleton screen processing method. Optionally, the storage medium can be a non-temporary storage medium, for example, the non-temporary storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0119] In an exemplary embodiment, the present disclosure further provides a computer program product, including a computer program, which can be executed by a processor of an electronic device to implement the above-mentioned skeleton screen processing method.

[0120] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0121] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A skeleton screen processing method, characterized in that: include: If it is monitored that the first front-end route in the target application is switched to the second front-end route, the target skeleton screen interface corresponding to the second front-end route is determined from the mapping table in the target application, wherein the mapping table stores the correspondence between different front-end routes of the target application and the skeleton screen interface, and a monitoring function is registered in the target application, and the monitoring function corresponds to the working mode of the front-end route adopted by the target application; Display the target skeleton screen interface; If the page data corresponding to the second front-end route has been loaded, hiding the target skeleton screen interface and displaying the page data corresponding to the second front-end route; A preset global function is registered in the target application; The displaying of the target skeleton screen interface includes: hiding the page data corresponding to the first front-end route through the preset global function, and displaying the target skeleton screen interface.

2. The skeleton screen processing method according to claim 1, characterized in that: The monitoring of switching the first front-end route in the target application to the second front-end route includes: The monitoring function monitors that the first front-end route in the target application is switched to the second front-end route.

3. The skeleton screen processing method according to claim 1, characterized in that: If the page data corresponding to the second front-end route has been loaded, hiding the target skeleton screen interface and displaying the page data corresponding to the second front-end route includes: If the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden through the preset global function, and the page data corresponding to the second front-end route is displayed.

4. The skeleton screen processing method according to claim 1, characterized in that: Before determining the target skeleton screen interface corresponding to the second front-end route from the mapping table in the target application, the method further includes: In response to the developer's operation of configuring the skeleton screen interface of different front-end routes of the target application, the mapping table is generated and inserted into the page description document corresponding to the target application.

5. A skeleton screen processing device, characterized in that: include: A determination unit is configured to determine a target skeleton screen interface corresponding to the second front-end route from a mapping table in the target application if it is monitored that the first front-end route in the target application is switched to the second front-end route, wherein the mapping table stores the correspondence between different front-end routes of the target application and the skeleton screen interface, and a monitoring function is registered in the target application, and the monitoring function corresponds to the working mode of the front-end route adopted by the target application; A display unit, configured to display the target skeleton screen interface; a display unit configured to hide the target skeleton screen interface and display the page data corresponding to the second front-end route if the page data corresponding to the second front-end route has been loaded; A preset global function is registered in the target application; and the display unit is further configured to execute: hiding the page data corresponding to the first front-end route through the preset global function, and displaying the target skeleton screen interface.

6. The skeleton screen processing device according to claim 5, characterized in that: The device also includes: The response unit is configured to execute a skeleton screen interface configuration operation in response to the developer's different front-end routings of the target application, generate the mapping table, and insert the mapping table into a page description document corresponding to the target application.

7. The skeleton screen processing device according to claim 5, characterized in that: A monitoring function is registered in the target application, and the monitoring function corresponds to the working mode of the front-end routing adopted by the target application; The determining unit is further configured to execute: The monitoring function monitors that the first front-end route in the target application is switched to the second front-end route.

8. The skeleton screen processing device according to claim 5, characterized in that: The display unit is further configured to perform: If the page data corresponding to the second front-end route has been loaded, the target skeleton screen interface is hidden through the preset global function, and the page data corresponding to the second front-end route is displayed.

9. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the skeleton screen processing method according to any one of claims 1 to 4.

10. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the skeleton screen processing method according to any one of claims 1 to 4.

11. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the skeleton screen processing method according to any one of claims 1 to 4 is implemented.

Images