CN111857878B - Skeleton screen page generation method and device, electronic equipment and storage medium - Google Patents
Skeleton screen page generation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111857878B CN111857878B CN202010703186.2A CN202010703186A CN111857878B CN 111857878 B CN111857878 B CN 111857878B CN 202010703186 A CN202010703186 A CN 202010703186A CN 111857878 B CN111857878 B CN 111857878B
- Authority
- CN
- China
- Prior art keywords
- page
- target page
- generating
- target
- skeleton screen
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 238000012544 monitoring process Methods 0.000 claims abstract description 25
- 230000008859 change Effects 0.000 claims abstract description 18
- 230000002452 interceptive effect Effects 0.000 claims abstract description 9
- 230000003993 interaction Effects 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 8
- 238000012545 processing Methods 0.000 claims description 7
- 238000010586 diagram Methods 0.000 description 10
- 230000000694 effects Effects 0.000 description 6
- 230000008569 process Effects 0.000 description 6
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 206010047571 Visual impairment Diseases 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000008451 emotion Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 208000029257 vision disease Diseases 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
- 230000004393 visual impairment Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
- G06F9/452—Remote windowing, e.g. X-Window System, desktop virtualisation
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L45/00—Routing or path finding of packets in data switching networks
- H04L45/70—Routing based on monitoring results
Abstract
The embodiment of the invention provides a skeleton screen page generation method, a device, electronic equipment and a storage medium, wherein configuration files are used for determining generation parameters of a skeleton screen by acquiring configuration information; according to the configuration information, accessing a first target page, and carrying out route monitoring on the first target page; determining a second target page according to the page route change condition of the first target page; in the second target page, generating the interactive control, and generating the skeleton screen page matched with the second target page according to the triggering event of the interactive control.
Description
Technical Field
The present invention relates to the field of internet technologies, and in particular, to a method and apparatus for generating a skeleton screen page, an electronic device, and a storage medium.
Background
The skeleton screen is a rough structure for displaying a page to a user before page data is not returned or before the page is completely rendered, the user can see the outline of the current page consisting of gray blocks, and in the process, the user can feel that the content is gradually loaded, so that the page becomes smooth in visual aspect, and the problem of white screen when the page is loaded can be effectively solved.
In the prior art, the generation scheme of the skeleton screen page is generally that a specific layout structure of the page is grabbed, then manual design is carried out, and the designed picture is embedded into a webpage item to realize the generation of the skeleton screen page.
Then, the scheme is more suitable for comparing fixed page structures, the skeleton screen cannot be dynamically generated, and for pages which are generated after user operation, such as pages which can be accessed after login, the complete structure of the logged pages cannot be obtained, so that the problem that the skeleton screen pages cannot be rapidly generated is caused.
Disclosure of Invention
The invention provides a skeleton screen page generation method, a device, electronic equipment and a storage medium, which are used for solving the problem that a skeleton screen page cannot be generated rapidly.
According to a first aspect of an embodiment of the present disclosure, the present invention provides a method for generating a skeleton screen page, where the method includes:
acquiring configuration information, wherein the configuration file is used for determining generation parameters of a skeleton screen;
according to the configuration information, accessing the first target page, and carrying out route monitoring on the first target page;
determining a second target page according to the page route change condition of the first target page;
and generating an interaction control in the second target page, and generating a skeleton screen page matched with the second target page according to a trigger event of the interaction control.
In one possible implementation manner, the configuration information includes a page address and a page name, and according to the configuration information, accessing the first target page and performing route monitoring on the first target page includes:
creating a headless browser by using a control library, wherein the control library is used for providing an operation interface of the headless browser;
receiving an instance returned by the headless browser;
and accessing a first target page corresponding to the page address and the page name through the headless browser, executing a target change event, and carrying out route monitoring on the first target page.
In one possible implementation manner, determining the second target page according to the page route change condition of the first target page includes:
if the page route changes, acquiring a route address corresponding to the changed page route;
and determining the page corresponding to the routing address as a second target page.
In a possible implementation manner, the interaction control includes a skeleton screen generating control, where the skeleton screen generating control is configured to receive an operation instruction input by a user, generate a trigger event, and generate, in the second target page, the interaction control, where the interaction control includes:
acquiring size information of the second target page;
and setting the skeleton screen generating control at the edge position of the second target page according to the size information.
In one possible implementation, generating a skeletal screen page that matches the second target page includes:
acquiring a page layout style of the second target page;
dividing the page layout style to generate one or more block areas;
processing the block area respectively to enable the block area to be consistent with the outline of the display object in the second target page;
and gray filling is carried out on the processed block area generation, and a skeleton screen page matched with the second target page is generated.
In a possible implementation manner, the configuration file further includes a filling node, and after the block areas are processed respectively to make the block areas coincide with the outlines of the display objects in the second target page, the configuration file further includes:
and filling the processed block area according to the corresponding filling node to generate a skeleton screen page matched with the second target page.
In a possible implementation manner, the configuration information includes storage location information, and after generating a skeleton screen page matched with the second target page, the method further includes:
and storing the code file corresponding to the skeleton screen page in a target storage position according to the storage position information.
According to a second aspect of the embodiments of the present disclosure, the present invention provides a skeletal screen page generating apparatus, including:
the method comprises the steps of obtaining a template, wherein the template is used for obtaining configuration information, and the configuration file is used for determining generation parameters of a skeleton screen;
the monitoring module is used for accessing the first target page according to the configuration information and carrying out route monitoring on the first target page;
the determining module is used for determining a second target page according to the page route change condition of the first target page;
and the generation module is used for generating an interaction control in the second target page and generating a skeleton screen page matched with the second target page according to a trigger event of the interaction control.
In one possible implementation manner, the configuration information includes a page address and a page name, and the monitoring module is specifically configured to:
creating a headless browser by using a control library, wherein the control library is used for providing an operation interface of the headless browser;
receiving an instance returned by the headless browser;
and accessing a first target page corresponding to the page address and the page name through the headless browser, executing a target change event, and carrying out route monitoring on the first target page.
In one possible implementation manner, the determining module is specifically configured to:
if the page route changes, acquiring a route address corresponding to the changed page route;
and determining the page corresponding to the routing address as a second target page.
In one possible implementation manner, the interaction control includes a skeleton screen generation control, where the skeleton screen generation control is used to receive an operation instruction input by a user and generate a trigger event; the generating module is specifically configured to, when generating the interaction control in the second target page:
acquiring size information of the second target page;
and setting the skeleton screen generating control at the edge position of the second target page according to the size information.
In one possible implementation manner, the generating module is specifically configured to, when generating a skeleton screen page that matches the second target page:
acquiring a page layout style of the second target page;
dividing the page layout style to generate one or more block areas;
processing the block area respectively to enable the block area to be consistent with the outline of the display object in the second target page;
and gray filling is carried out on the processed block area generation, and a skeleton screen page matched with the second target page is generated.
In a possible implementation manner, the configuration file further includes a filling node, and the generating module is specifically configured to, after processing the block areas respectively and making the block areas consistent with the outlines of the display objects in the second target page:
and filling the processed block area according to the corresponding filling node to generate a skeleton screen page matched with the second target page.
In a possible implementation manner, the configuration information includes storage location information, and the generating module is further configured to:
and storing the code file corresponding to the skeleton screen page in a target storage position according to the storage position information.
According to a third aspect of the embodiments of the present disclosure, there is provided an electronic device, including: a memory, a processor, and a computer program;
wherein the computer program is stored in the memory and configured to perform, by the processor, the skeletal screen page generating method of any one of the first aspects of the embodiments of the present disclosure.
According to a fourth aspect of the embodiments of the present disclosure, the present disclosure provides a computer-readable storage medium having stored therein computer-executable instructions, which when executed by a processor, are configured to implement the skeletal screen page generating method of any one of the first aspects of the embodiments of the present disclosure.
The embodiment of the invention provides a skeleton screen page generation method, a device, electronic equipment and a storage medium, wherein configuration information is acquired, and the configuration file is used for determining generation parameters of a skeleton screen; according to the configuration information, accessing the first target page, and carrying out route monitoring on the first target page; determining a second target page according to the page route change condition of the first target page; and generating an interaction control in the second target page, and generating a skeleton screen page matched with the second target page according to a trigger event of the interaction control.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure.
FIG. 1a is a schematic diagram of a static generated skeleton screen page provided by an embodiment of the present invention;
FIG. 1b is a schematic diagram of a dynamically generated skeletal screen page provided by an embodiment of the present invention;
FIG. 2 is a flowchart of a method for generating a skeleton screen page according to an embodiment of the present invention;
FIG. 3 is a flowchart of a method for generating a skeleton screen page according to another embodiment of the present invention;
FIG. 4 is a flowchart of step S208 in the embodiment shown in FIG. 3;
FIG. 5 is a schematic structural diagram of a device for generating a skeleton screen page according to an embodiment of the present invention;
fig. 6 is a schematic diagram of an electronic device according to an embodiment of the present invention.
Specific embodiments of the present disclosure have been shown by way of the above drawings and will be described in more detail below. These drawings and the written description are not intended to limit the scope of the disclosed concepts in any way, but rather to illustrate the disclosed concepts to those skilled in the art by reference to specific embodiments.
Detailed Description
Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present disclosure as detailed in the accompanying claims.
First, the terms involved in the present invention will be explained:
skeleton screen: the Skeleton Screen (Skeleton Screen) is that before the page data is loaded, the rough structure (gray occupied bitmap) of the page is displayed for the user, and the actual page content is rendered and then replaced after the interface data is taken. Skeleton screens are popular loading controls beginning in the last two years, essentially transitional effects in the interface loading process. The outline of the webpage is displayed in advance before loading, and then the real content is gradually loaded, so that the scorching emotion of a user is reduced, the interface loading process is naturally smooth, and long-time white screen or flickering of the webpage is avoided. The skeleton screen can give a feeling that the page content has rendered a part, and compared with the traditional loading effect, the user experience can be improved to a certain extent.
The following explains the application scenario of the embodiment of the present invention:
fig. 1a is a schematic diagram of a static generation skeleton screen page provided in an embodiment of the present invention, as shown in fig. 1a, when a developer user generates a skeleton screen page through a terminal device, for example, a computer, the developer first opens a target webpage through the computer, then generates a corresponding page structure diagram according to a page structure of the target webpage, and writes a code of the skeleton screen page by using the page structure diagram to realize generation of the skeleton screen page.
However, in the prior art, for example, a picture is embedded into a project, and then a page is generated by packing, or a scalable vector graphic (Scalable Vector Graphics, SVG) with a fixed width and height and the picture realize a skeleton screen effect, which are only applicable to a fixed structure, or a target page with a smaller page structure difference, a skeleton screen page cannot be dynamically generated, and when the page structure changes, for example, a page which is displayed only after login is needed, a corresponding skeleton screen page cannot be generated because the complete structure of the page after login cannot be obtained.
Fig. 1b is a schematic diagram of a dynamically generated skeleton screen page provided in an embodiment of the present invention, as shown in fig. 1b, in the embodiment of the present invention, by performing route monitoring on a first target page, when a page route changes, an interaction control is automatically generated in a second target page corresponding to a target route address, and meanwhile, a skeleton screen is generated according to a user's needs, so that the problem that the skeleton screen cannot be dynamically generated is solved.
The following describes the technical scheme of the present invention and how the technical scheme of the present application solves the above technical problems in detail with specific embodiments. The following embodiments may be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments. Embodiments of the present invention will be described below with reference to the accompanying drawings.
Fig. 2 is a flowchart of a method for generating a skeleton screen page according to an embodiment of the present invention, and an execution body of the method according to the embodiment is a terminal device, as shown in fig. 2, where the method for generating a skeleton screen page according to the embodiment includes the following steps:
step S101, configuration information is acquired, and the configuration file is used for determining generation parameters of the skeleton screen.
For example, the configuration information may be a configuration file, and when the skeleton screen is produced, the configuration of the skeleton screen page is realized by loading the configuration information in a corresponding program item. The content in the configuration information includes a variety of, for example: the method includes generating one or more of an address of a skeleton screen page, a name of the page, the skeleton screen page generated on any device, an output path of the skeleton screen page, a developer self-defined node recursion ending option, a root node for inserting the content of the skeleton screen node, a background color, an animation, operations needed to be performed when initializing the page, whether to display interaction controls and the like. The configuration information may be all the contents of the configuration information by one configuration table, or may be the contents of the configuration information by a plurality of configuration tables, and may be set according to specific requirements, which is not limited herein.
Step S102, according to the configuration information, the first target page is accessed, and route monitoring is conducted on the first target page.
Specifically, according to address information preset in the configuration information, for example, url information, a target address, i.e., a first target page, required to be generated by the skeleton screen page can be determined. According to url information, a first target page is opened, and the route monitoring on the target page can be realized by continuously monitoring the address information change condition of the first target page.
Step S103, determining a second target page according to the page route change condition of the first target page.
When the page route of the first target page changes, the corresponding page information also changes. For example, the user performs a login operation on a first target page, after the first target page completes login, the first target page jumps to another new logged page, namely a second target page, and the second target page can be determined according to the address of the newly jumped webpage.
And step S104, generating an interaction control in the second target page, and generating a skeleton screen page matched with the second target page according to a trigger event of the interaction control.
In the second target page of the new jump, whether the skeleton screen page needs to be correspondingly generated or not cannot be extracted and determined, so that if the skeleton screen page generation is directly performed on the second target page after the jump, the problem of error in the skeleton screen page generation can be caused. Therefore, in the second target page, an interaction space, such as a button, a slider and the like, is generated, and when the user needs to generate the skeleton screen, the interaction control can be operated to realize the input of the generation instruction. After receiving an instruction input by a user, the interactive control correspondingly generates a trigger event, and the corresponding skeleton screen generating program is executed through the trigger event, so that the skeleton screen page can be generated.
In this embodiment, the configuration file is used to determine the generation parameters of the skeleton screen by acquiring configuration information; according to the configuration information, accessing a first target page, and carrying out route monitoring on the first target page; determining a second target page according to the page route change condition of the first target page; in the second target page, generating the interactive control, and generating the skeleton screen page matched with the second target page according to the triggering event of the interactive control.
Fig. 3 is a flowchart of a skeleton screen page generating method according to another embodiment of the present invention, where, as shown in fig. 3, the skeleton screen page generating method according to this embodiment further refines steps S102 to S104 on the basis of the skeleton screen page generating method according to the embodiment shown in fig. 2, and adds a step of saving a code file of the skeleton screen page to a target storage location after step S104, and then the skeleton screen page generating method according to this embodiment includes the following steps:
step S201, obtaining configuration information, wherein the configuration file is used for determining generation parameters of a skeleton screen, and the configuration information comprises a page address and a page name.
Step S202, a headless browser is newly built by using a control library, and the control library is used for providing an operation interface of the headless browser.
Illustratively, the control library is Puppeterer, which may provide an application program interface (Application Programming Interface, API) to operate the Chrome browser and crawl web page data. Specifically, a headless browser is opened by using the method of pulling by puppeter, wherein the specific method of opening the headless browser is a prior art means in the field, and will not be described herein.
Step S203, receiving an instance returned by the headless browser.
After a browser is newly built, a browser instance corresponding to the browser is received, and the process of instantiating the browser is a prior art means in the field, which is not described herein again.
Step S204, the first target page corresponding to the page address and the page name is accessed through the headless browser, the target change event is executed, and the route monitoring is carried out on the first target page.
Access to the first target page may be achieved by means of page address and page name parameters, for example using a target change event, listening for changes in the page route, which may trigger events such as login operations.
In step S205, if the page route changes, the routing address corresponding to the changed page route is obtained.
Step S206, determining the page corresponding to the routing address as a second target page.
Specifically, when the page route changes, for example, from the a address to the B address, the changed page route address, that is, the B address, is obtained, and the B address is the second target page.
Step S207, obtaining the size information of the second target page.
The size information of the second target page includes a page size of the second target page, which may be obtained by analyzing a program code of the second target page or by reading from preset configuration information, and is not specifically limited herein.
And step S208, setting the skeleton screen generation control at the edge position of the second target page according to the size information. The skeleton screen generation control is used for receiving an operation instruction input by a user and generating a trigger event.
And generating a skeleton screen generation control, such as a generation button, at an edge part of the second target page, such as a plane or the lower right corner of the page, according to the size information. When the developer user clicks the generation button, a corresponding trigger event is triggered, and then corresponding execution codes are executed, so that the generation of the skeleton screen page corresponding to the second target page is realized.
Step S209, if the skeleton screen generation control is triggered, a skeleton screen page matched with the second target page is generated.
Alternatively, as shown in fig. 4, step S208 includes three specific implementation steps of steps S2091, S2092, S2093, and S2094:
in step S2091, the page layout style of the second target page is acquired.
Illustratively, an initialization function in the configuration information is executed to obtain all child nodes below the root node of the root node recursion, and a developer custom node recursion ending option matched with the configuration information in the recursion process is taken as an ending condition of the current node recursion. After the recursion is finished, all node information in the page can be obtained, and then the page layout style can be obtained by distinguishing and positioning the node information.
In step S2092, the page layout style is divided to generate one or more block areas.
Illustratively, the page layout style corresponds to different specific display objects in the page, e.g., text regions, image regions, etc., or such as background images, elements, text, video frames, audio frames, etc. For different areas, a plurality of block areas can be formed for better representing the display objects in the page.
In step S2093, the block areas are processed so that the block areas match the outline of the display object on the second target page.
Since the display objects in the page are arranged in an overlapping manner, each block area needs to be processed and trimmed, for example, the block area causing the visual impairment of the user is deleted or subdivided, so that each block area is basically consistent with the outline of the display object, and the money area can more clearly represent the position of the display object in the page.
Optionally, the configuration file further includes a filling node.
And step 2094, filling the processed block area according to the corresponding filling node to generate a skeleton screen page matched with the second target page.
The filling nodes may be gray blocks, or may be shapes or graphs of other shapes or colors, and may be configured according to specific needs, so as to improve expressive force and applicability of the skeleton screen page, and after filling through different filling nodes, the skeleton screen page matched with the second target page is generated, where the specific implementation method is an existing technical means in the field, and will not be described herein.
Step S210, according to the storage position information, storing the code file corresponding to the skeleton screen page in the target storage position.
After the codes of the skeleton screen pages are generated, the codes are stored in a preset target storage position, and the generated skeleton screen Html codes are written into an Html file with a page name Key, and then the skeleton screen folder of the current project is placed, so that the quick configuration of the subsequent skeleton screen pages can be realized, and the generation efficiency of the skeleton screen pages is improved.
In this embodiment, the implementation manner of step S201 is the same as the implementation manner of step S101 in the embodiment shown in fig. 2 of the present invention, and will not be described in detail here.
The skeleton screen page generation method provided by the embodiment provides the capability of actively and dynamically generating the skeleton screen, provides rich configurable flexible parameters to help a developer to generate the skeleton screen page with better effect, can quickly generate a new skeleton screen page if the page structure is changed, does not need the developer to do additional development work, and reduces the comprehensive cost of webpage development.
Fig. 5 is a schematic structural diagram of a device for generating a skeleton screen page according to an embodiment of the present invention, as shown in fig. 5, the device 5 for generating a skeleton screen page according to the present embodiment includes:
the obtaining template 51 is used for obtaining configuration information, and the configuration file is used for determining the generating parameters of the skeleton screen.
The monitoring module 52 is configured to access the first target page according to the configuration information, and perform route monitoring on the first target page.
The determining module 53 is configured to determine a second target page according to a page route change condition of the first target page.
And the generating module 54 is configured to generate an interaction control in the second target page, and generate a skeleton screen page matched with the second target page according to a trigger event of the interaction control.
In one possible implementation, the configuration information includes a page address and a page name, and the monitoring module 52 is specifically configured to:
and creating a headless browser by using a control library, wherein the control library is used for providing an operation interface of the headless browser.
And receiving an instance returned by the headless browser.
And accessing a first target page corresponding to the page address and the page name through the headless browser, executing a target change event, and carrying out route monitoring on the first target page.
In one possible implementation, the determining module 53 is specifically configured to:
if the page route changes, the route address corresponding to the changed page route is obtained.
And determining the page corresponding to the routing address as a second target page.
In one possible implementation, the interactive control includes a skeleton screen generation control, where the skeleton screen generation control is configured to receive an operation instruction input by a user and generate a trigger event; the generating module 54 is specifically configured to, when generating the interaction control in the second target page:
and acquiring the size information of the second target page.
And setting the skeleton screen generating control at the edge position of the second target page according to the size information.
In one possible implementation, the generating module 54 is specifically configured to, when generating the skeletal screen page that matches the second target page:
and acquiring the page layout style of the second target page.
The page layout style is divided to generate one or more block regions.
And respectively processing the block areas to enable the block areas to be consistent with the outlines of the display objects in the second target page.
And gray filling is carried out on the processed block area generation, and a skeleton screen page matched with the second target page is generated.
In a possible implementation manner, the configuration file further includes a filling node, and the generating module 54 is specifically configured to, after processing the block areas respectively to make the block areas conform to the outlines of the display objects in the second target page:
and filling the processed block area according to the corresponding filling node to generate a skeleton screen page matched with the second target page.
In one possible implementation, the configuration information includes storage location information, and the generating module 54 is further configured to:
and storing the code file corresponding to the skeleton screen page in a target storage position according to the storage position information.
The acquisition template 51, the monitoring module 52, the determining module 53 and the generating module 54 are sequentially connected. The skeleton screen page generating device 5 provided in this embodiment may execute the technical scheme of the method embodiment shown in fig. 2 to 4, and its implementation principle and technical effect are similar, and will not be described herein again.
Fig. 6 is a schematic diagram of an electronic device according to an embodiment of the present invention, as shown in fig. 6, where the electronic device provided in the embodiment includes: memory 601, processor 602 and computer programs.
Wherein a computer program is stored in the memory 601 and configured to be executed by the processor 602 to implement the skeletal screen page generating method provided by any one of the embodiments corresponding to fig. 2-4 of the present invention.
Wherein the memory 601 and the processor 602 are connected via a bus 603.
The relevant descriptions and effects corresponding to the steps in the embodiments corresponding to fig. 2-4 may be understood correspondingly, and are not described in detail herein.
An embodiment of the present invention provides a computer readable storage medium having a computer program stored thereon, where the computer program is executed by a processor to implement the skeletal screen page generating method provided in any one of the embodiments corresponding to fig. 2-4 of the present invention.
The computer readable storage medium may be, among other things, ROM, random Access Memory (RAM), CD-ROM, magnetic tape, floppy disk, optical data storage device, etc.
In the several embodiments provided by the present invention, it should be understood that the disclosed apparatus and method may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, e.g., the division of modules is merely a logical function division, and there may be additional divisions of actual implementation, e.g., multiple modules or components may be combined or integrated into another system, or some features may be omitted, or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or modules, which may be in electrical, mechanical, or other forms.
Other embodiments of the invention will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of the invention following, in general, the principles of the invention and including such departures from the present disclosure as come within known or customary practice within the art to which the invention pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the invention being indicated by the following claims.
It is to be understood that the invention is not limited to the precise arrangements and instrumentalities shown in the drawings, which have been described above, and that various modifications and changes may be effected without departing from the scope thereof. The scope of the invention is limited only by the appended claims.
Claims (9)
1. The skeleton screen page generation method is characterized by comprising the following steps of:
acquiring configuration information, wherein the configuration file is used for determining generation parameters of a skeleton screen;
according to the configuration information, a first target page is accessed, and route monitoring is carried out on the first target page;
determining a second target page according to the page route change condition of the first target page;
generating an interaction control in the second target page, and generating a skeleton screen page matched with the second target page according to a trigger event of the interaction control;
the interactive control comprises a skeleton screen generating control, the skeleton screen generating control is used for receiving an operation instruction input by a user, generating a trigger event, and generating the interactive control in the second target page comprises the following steps:
acquiring size information of the second target page;
and setting the skeleton screen generating control at the edge position of the second target page according to the size information.
2. The method of claim 1, wherein the configuration information includes a page address and a page name, wherein accessing the first target page and performing route monitoring on the first target page according to the configuration information includes:
creating a headless browser by using a control library, wherein the control library is used for providing an operation interface of the headless browser;
receiving an instance returned by the headless browser;
and accessing a first target page corresponding to the page address and the page name through the headless browser, executing a target change event, and carrying out route monitoring on the first target page.
3. The method of claim 1, wherein determining a second destination page based on the page route change condition of the first destination page comprises:
if the page route changes, acquiring a route address corresponding to the changed page route;
and determining the page corresponding to the routing address as a second target page.
4. The method of claim 1, wherein generating a skeletal screen page that matches the second target page comprises:
acquiring a page layout style of the second target page;
dividing the page layout style to generate one or more block areas;
processing the block area respectively to enable the block area to be consistent with the outline of the display object in the second target page;
and gray filling is carried out on the processed block area generation, and a skeleton screen page matched with the second target page is generated.
5. The method of claim 4, wherein the configuration file further includes a filling node, and wherein after processing the block areas respectively to make the block areas conform to the outline of the display object in the second target page, the method further includes:
and filling the processed block area according to the corresponding filling node to generate a skeleton screen page matched with the second target page.
6. A method according to any one of claims 1-3, wherein the configuration information includes storage location information, and after generating a skeletal screen page that matches the second target page, further comprising:
and storing the code file corresponding to the skeleton screen page in a target storage position according to the storage position information.
7. A skeleton screen page generating device, characterized by comprising:
the method comprises the steps of obtaining a template, wherein the template is used for obtaining configuration information, and the configuration file is used for determining generation parameters of a skeleton screen;
the monitoring module is used for accessing a first target page according to the configuration information and carrying out route monitoring on the first target page;
the determining module is used for determining a second target page according to the page route change condition of the first target page;
the generation module is used for generating an interaction control in the second target page and generating a skeleton screen page matched with the second target page according to a trigger event of the interaction control;
the interactive control comprises a skeleton screen generating control which is used for receiving an operation instruction input by a user and generating a trigger event; the generation module is specifically configured to obtain size information of the second target page when generating the interaction control in the second target page; and setting the skeleton screen generating control at the edge position of the second target page according to the size information.
8. An electronic device, comprising: a memory, a processor, and a computer program;
wherein the computer program is stored in the memory and configured to be executed by the processor to implement the skeletal screen page generating method of any one of claims 1 to 6.
9. A computer readable storage medium having stored therein computer executable instructions which when executed by a processor are for implementing the skeletal screen page generating method of any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010703186.2A CN111857878B (en) | 2020-07-21 | 2020-07-21 | Skeleton screen page generation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010703186.2A CN111857878B (en) | 2020-07-21 | 2020-07-21 | Skeleton screen page generation method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111857878A CN111857878A (en) | 2020-10-30 |
| CN111857878B true CN111857878B (en) | 2024-04-09 |
Family
ID=73002136
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010703186.2A Active CN111857878B (en) | 2020-07-21 | 2020-07-21 | Skeleton screen page generation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111857878B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113076504B (en) * | 2021-06-03 | 2021-10-01 | 北京达佳互联信息技术有限公司 | Skeleton screen generation method, device, equipment and storage medium |
| CN113434847B (en) * | 2021-06-25 | 2023-10-27 | 深圳赛安特技术服务有限公司 | Privacy module processing method and device of application program, electronic equipment and medium |
| CN115857932A (en) * | 2022-12-21 | 2023-03-28 | 贝壳找房(北京)科技有限公司 | Skeleton screen file generation method and device and skeleton screen display method and device |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108933697A (en) * | 2018-06-30 | 2018-12-04 | 江苏有线数据网络有限责任公司 | A kind of broadband quality determining method |
| CN109254773A (en) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | Skeleton page generation method, device, equipment and storage medium |
| CN109902248A (en) * | 2019-02-25 | 2019-06-18 | 百度在线网络技术（北京）有限公司 | Page display method, device, computer equipment and readable storage medium storing program for executing |
| CN110162720A (en) * | 2019-04-16 | 2019-08-23 | 平安科技（深圳）有限公司 | Webpage loading method, device, computer equipment and storage medium |
| CN110430324A (en) * | 2019-08-07 | 2019-11-08 | 华为技术有限公司 | A kind of application is spread its tail the display methods and electronic equipment of information |
| CN110874446A (en) * | 2018-08-31 | 2020-03-10 | 北京京东尚科信息技术有限公司 | Page display method and system, computer system and computer readable medium |
| CN111259286A (en) * | 2020-01-14 | 2020-06-09 | 上海英方软件股份有限公司 | Universal WEB page layout generation device and method |
-
2020
- 2020-07-21 CN CN202010703186.2A patent/CN111857878B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108933697A (en) * | 2018-06-30 | 2018-12-04 | 江苏有线数据网络有限责任公司 | A kind of broadband quality determining method |
| CN110874446A (en) * | 2018-08-31 | 2020-03-10 | 北京京东尚科信息技术有限公司 | Page display method and system, computer system and computer readable medium |
| CN109254773A (en) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | Skeleton page generation method, device, equipment and storage medium |
| CN109902248A (en) * | 2019-02-25 | 2019-06-18 | 百度在线网络技术（北京）有限公司 | Page display method, device, computer equipment and readable storage medium storing program for executing |
| CN110162720A (en) * | 2019-04-16 | 2019-08-23 | 平安科技（深圳）有限公司 | Webpage loading method, device, computer equipment and storage medium |
| CN110430324A (en) * | 2019-08-07 | 2019-11-08 | 华为技术有限公司 | A kind of application is spread its tail the display methods and electronic equipment of information |
| CN111259286A (en) * | 2020-01-14 | 2020-06-09 | 上海英方软件股份有限公司 | Universal WEB page layout generation device and method |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111857878A (en) | 2020-10-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111857878B (en) | Skeleton screen page generation method and device, electronic equipment and storage medium | |
| US10417316B2 (en) | Emphasizing a portion of the visible content elements of a markup language document | |
| CN108010112B (en) | Animation processing method, device and storage medium | |
| CN111177621B (en) | Web page development method, device and system | |
| CN111291533B (en) | Sentence segment to be displayed display method and device, computer equipment and storage medium | |
| US20160188558A1 (en) | Information processing device, information processing method, and program | |
| CN112667235A (en) | Visual layout editing implementation method and device and electronic equipment | |
| CN113411664A (en) | Video processing method and device based on sub-application and computer equipment | |
| CN112306486B (en) | Interface generation method and device, server and storage medium | |
| CN112102446A (en) | Animation processing method and device and computer readable storage medium | |
| CN111324381B (en) | Development system, development method, development apparatus, computer device, and storage medium | |
| Fischer et al. | Brassau: automatic generation of graphical user interfaces for virtual assistants | |
| Cecco | Supercharged JavaScript Graphics: with HTML5 canvas, jQuery, and More | |
| Khan et al. | A retargetable model-driven framework for the development of mobile user interfaces | |
| CN113742432A (en) | Editable ER graph generation method and device | |
| KR102146557B1 (en) | Method and apparatus for rendering data of web application and recording medium thereof | |
| CN114089982A (en) | Front-end page generation method, device, equipment and medium | |
| Sainty | Blazor in Action | |
| Urbieta et al. | A Model-driven Approach for Empowering Advance Web Augmentation From Client-side to Server-side Support | |
| CN112783660B (en) | Resource processing method and device in virtual scene and electronic equipment | |
| US20230298239A1 (en) | Data processing method based on augmented reality | |
| CN111782333B (en) | Interface display method and device in game, storage medium and terminal equipment | |
| CN117065327A (en) | Game scenario display method and device and electronic equipment | |
| CN117274991A (en) | Resource information generation method and device, electronic equipment and readable storage medium | |
| CN114288666A (en) | Game element detection method, device, equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |