Skeleton screen generation method and device, equipment and medium

Abstract

The embodiment of the invention discloses a skeleton screen generation method and device, equipment and a medium. The method comprises the steps of obtaining a reference source code file corresponding to page display content and configuration information corresponding to a skeleton screen to be generated; marking the display page based on the configuration information, and determining marking information corresponding to the skeleton screen; analyzing the reference source code file to determine first page structure information corresponding to the page display content; determining a target source code file based on the mark information and the first page structure information; and running the target source code file, and generating a skeleton screen in the display page. Through the technical scheme of the embodiment of the invention, the target source code file can be accurately and conveniently determined, and the expected skeleton screen is accurately generated in the display page when the target source code file is operated, so that the skeleton screen generation efficiency, accuracy and flexibility are improved.

Description

Technical Field

[0001] Embodiments of the present invention relate to the field of computer technology, and in particular to a skeleton screen generation method, device, equipment and medium. Background Art

[0002] During the display of a web page or page, a skeleton screen is usually used for transition to make the loading of the web page or page smoother, reduce the white screen time of the page, and improve the browsing experience before the web page data is loaded.

[0003] Currently, a skeleton screen is usually determined by reverse deduction for a rendered display page, and skeleton screen code is written for the reverse-derived skeleton screen, and the skeleton screen is generated during page loading using the written skeleton screen code.

[0004] However, this method of reverse deducing the skeleton screen needs to rely on the results of real page rendering, which is affected by actual data and has limited flexibility. In addition, each subsequent page change requires re-parsing the changed real page and rewriting the skeleton screen code to generate an updated skeleton screen, resulting in additional maintenance resource waste. Summary of the invention

[0005] The embodiments of the present invention provide a skeleton screen generation method, device, equipment and medium to accurately and conveniently determine a target source code file, and accurately generate an expected skeleton screen in a display page when running the target source code file, thereby improving the efficiency, accuracy and flexibility of skeleton screen generation.

[0006] In a first aspect, an embodiment of the present invention provides a skeleton screen generation method, comprising:

[0007] Obtain the reference source code file corresponding to the page display content and the configuration information corresponding to the skeleton screen to be generated;

[0008] Marking the display page based on the configuration information to determine the marking information corresponding to the skeleton screen;

[0009] Determine first page structure information corresponding to the page display content by parsing the reference source code file;

[0010] Determining a target source code file based on the tag information and the first page structure information;

[0011] The target source code file is run to generate the skeleton screen in the display page.

[0012] Optionally, the method further includes: parsing the reference source code file in a compiling stage based on the tag information to determine source code information to be selected; and determining first page structure information corresponding to the page display content based on regular expression matching and the source code information to be selected.

[0013] Optionally, the method further includes: copying the first page structure information to obtain copied third page structure information; processing the third page structure information based on the marking information to determine the second page structure information corresponding to the skeleton screen; and determining the target source code file based on the first page structure information and the second page structure information.

[0014] Optionally, the method also includes: based on the marking information, removing content, adding skeleton style, and adjusting skeleton details of the third page structure information to determine the page structure information to be selected corresponding to the skeleton screen; based on a preset attribute whitelist, removing irrelevant attributes of the page structure information to be selected to determine the second page structure information corresponding to the skeleton screen.

[0015] Optionally, the method further includes: determining insertion position information of the second page structure information based on the mark information; inserting the second page structure information into the first page structure information based on the insertion position information, and determining a target source code file.

[0016] Optionally, the method further includes: if there is sub-component marking information in the marking information, then in the running stage, generating a sub-skeleton screen corresponding to the sub-component, and displaying it on the skeleton screen of the display page.

[0017] In a second aspect, an embodiment of the present invention further provides a skeleton screen generating device, the device comprising:

[0018] An information acquisition module is used to acquire the reference source code file corresponding to the page display content and the configuration information corresponding to the skeleton screen to be generated;

[0019] A marking information determining module, used to mark the display page based on the configuration information and determine the marking information corresponding to the skeleton screen;

[0020] A first page structure information determination module, configured to determine first page structure information corresponding to the page display content by parsing the reference source code file;

[0021] A target source code file determination module, used for determining a target source code file based on the tag information and the first page structure information;

[0022] The skeleton screen generation module is used to run the target source code file and generate the skeleton screen in the display page.

[0023] In a third aspect, an embodiment of the present invention further provides an electronic device, the electronic device comprising:

[0024] one or more processors;

[0025] A memory for storing one or more programs;

[0026] When the one or more programs are executed by the one or more processors, the one or more processors implement the skeleton screen generation method provided by any embodiment of the present invention.

[0027] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements a skeleton screen generating method as provided in any embodiment of the present invention.

[0028] In a fifth aspect, an embodiment of the present invention provides a computer program product, including a computer program, which, when executed by a processor, implements the skeleton screen generation method provided by any embodiment of the present invention.

[0029] The technical solution of the embodiment of the present invention is to obtain a reference source code file corresponding to the page display content and configuration information corresponding to the skeleton screen to be generated; mark the display page based on the configuration information to determine the marking information corresponding to the skeleton screen; determine the first page structure information corresponding to the page display content by parsing the reference source code file; determine the target source code file based on the marking information and the first page structure information; run the target source code file to generate the skeleton screen in the display page, so that the target source code file can be accurately and conveniently determined, and the expected skeleton screen can be accurately generated in the display page when the target source code file is run, thereby improving the efficiency, accuracy and flexibility of skeleton screen generation.

[0030] It should be understood that the contents described in this section are not intended to identify the key or important features of the embodiments of the present invention, nor are they intended to limit the scope of the present invention. Other features of the present invention will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0032] Figure 1 is a flow chart of a skeleton screen generation method provided in Embodiment 1 of the present invention;

[0033] Figure 2 This is an example diagram of marking information involved in Embodiment 1 of the present invention;

[0034] Figure 3 is a flow chart of a skeleton screen generation method provided in Embodiment 2 of the present invention;

[0035] Figure 4 This is an example diagram of the second page structure information after insertion involved in the second embodiment of the present invention;

[0036] Figure 5 This is a display effect diagram of a skeleton screen involved in the second embodiment of the present invention;

[0037] Figure 6 This is a display effect diagram of a page display content involved in the second embodiment of the present invention;

[0038] Figure 7 It is a flow chart of a preferred embodiment of a skeleton screen generation method involved in the second embodiment of the present invention;

[0039] Figure 8 It is a structural schematic diagram of a skeleton screen generating device provided in Embodiment 3 of the present invention;

[0040] Fig. 9 It is a schematic diagram of the structure of an electronic device for implementing the skeleton screen generation method according to an embodiment of the present invention. DETAILED DESCRIPTION

[0041] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0042] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention 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 invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0043] Embodiment 1

[0044] Figure 1 A flowchart of a skeleton screen generation method is provided for the first embodiment of the present invention. This embodiment is applicable to the case where an expected skeleton screen is accurately generated in a display page. The method can be executed by a skeleton screen generation device. The skeleton screen generation device can be implemented in the form of hardware and / or software. The skeleton screen generation device can be configured in an electronic device. Figure 1 As shown, the method includes:

[0045] S110, obtaining a reference source code file corresponding to the page display content and configuration information corresponding to the skeleton screen to be generated.

[0046] Among them, the page display content may refer to the real content displayed after the page rendering is completed. The reference source code file may refer to the source code that directly generates the page display content without the skeleton screen transition. The skeleton screen may refer to the structural framework of the page display content before it is displayed. The skeleton screen can be used to reduce the page white screen time and improve the browsing experience before the page display content is loaded. Configuration information may refer to information for configuring the properties of the skeleton screen. For example, the configuration information may be, but is not limited to, the property information of the skeleton screen that the user expects to generate or the customized information of the pre-set skeleton screen.

[0047] Specifically, the reference source code file corresponding to the page display content and the configuration information corresponding to the skeleton screen to be generated are obtained. The configuration information may include but is not limited to the size of the skeleton screen, the size of the gray block (skeleton block) in the skeleton screen, and the number of skeleton block appearances.

[0048] S120: Mark the display page based on the configuration information to determine the marking information corresponding to the skeleton screen.

[0049] The display page may refer to a page that displays content. For example, the display page may refer to but is not limited to a web page. The tag information may refer to configuration information marked in the form of code. The tag information may be compiled by a compiler plug-in and converted into a product that can be run in a browser.

[0050] Specifically, the embodiment of the present invention is specifically described by implementing it in the front-end mainstream framework Vue. In the development stage, the configuration information can be converted into the tag information corresponding to the skeleton screen one by one using the pre-set tag template. For example, Figure 2 An example diagram of labeling information is given. Figure 2, use "v-skeleton" to set "loading" to the DOM that needs to be processed and parsed by the skeleton screen; use "s-line" to set the number of skeleton block appearances to 4 times, that is, the skeleton block needs to be displayed in the form of 4 lines; use "s-mw" to change the DOM that needs to be displayed as a skeleton (to a gray block) and set the specific display width to 40; use "s-mh" to set the specific display height to 30px; use "s-skip" to specify the DOM that is skipped when the skeleton screen is rendered, and the DOM that is set to be skipped will not appear in the skeleton screen.

[0051] It should be noted that you can also use "s-reserve" to specify the DOM that needs to be retained as it is when the skeleton screen is rendered. The DOM that is set to be retained will appear in the skeleton screen. Use "s-direction" to specify the position of the original DOM when the skeleton screen is generated. Such as top or bottom (default). When using "s-mw" to set the width, the value will be automatically converted to percentage, px, rem or vw according to the suffix, and after setting this attribute, its child dom will be cleared. When using "s-mh" to set the height, the value will be automatically converted to percentage, px, rem or vw according to the suffix. Use "s-line" to set the number of times the skeleton block appears to achieve multi-line display. The default value is 1.

[0052] S130: Determine first page structure information corresponding to the page display content by parsing the reference source code file.

[0053] The first page structure information may refer to the page structure information to be processed. For example, the first page structure information may be, but is not limited to, the full page structure information corresponding to the page display content.

[0054] Specifically, in the compilation stage, a reference source code file is searched through a pre-configured file processing plug-in, and the reference source code file is parsed to determine the first page structure information corresponding to the page display content.

[0055] On the basis of the above technical solution, "determining the first page structure information corresponding to the page display content by parsing the reference source code file" may include: parsing the reference source code file in the compilation stage based on the marking information to determine the source code information to be selected; determining the first page structure information corresponding to the page display content based on regular matching and the source code information to be selected.

[0056] The source code information to be selected may refer to the marked source code information related to the skeleton screen. For example, the first page structure information may be, but is not limited to, part of the page structure information related to the skeleton screen corresponding to the page display content.

[0057] Specifically, in the compilation phase, by configuring the file processing plug-in of webpack or vite, the compilation interception processing of the reference source code file is realized to obtain the reference source code file. Based on the tag information, the reference source code file is parsed in the compilation phase to determine the source code information to be selected. The source code information to be selected in the template is obtained through regular matching, and the page structure information is parsed in the nodejs environment through the jsdom library, so as to determine the first page structure information corresponding to the page display content, and then the scope of the first page structure information to be processed can be narrowed in advance, further improving the efficiency of determining the target source code file.

[0058] S140: Determine a target source code file based on the tag information and the first page structure information.

[0059] The target source code file may refer to a page display content generation source code including a skeleton screen transition.

[0060] Specifically, in the compiling stage, the marking information is used to remove the contents irrelevant to the skeleton screen and to add the contents relevant to the skeleton screen to the first page structure information, so as to determine the target source code file.

[0061] S150, running the target source code file, and generating a skeleton screen in the display page.

[0062] The compilation plug-in may refer to a processing tool for source code during the compilation process. During compilation, the plug-in receives the source code content and performs compilation and conversion processing, and finally outputs a product that can be run in the browser.

[0063] Specifically, in the compilation phase, the compilation plug-in is used to compile the target source code file into a target source code file that can be run by the browser, and in the running phase, the target source code file is run to generate a skeleton screen in the display page to achieve display verification of the skeleton screen or formal display of the skeleton screen.

[0064] The technical solution of the embodiment of the present invention is to obtain a reference source code file corresponding to the page display content and configuration information corresponding to the skeleton screen to be generated; mark the display page based on the configuration information to determine the marking information corresponding to the skeleton screen; determine the first page structure information corresponding to the page display content by parsing the reference source code file; determine the target source code file based on the marking information and the first page structure information; run the target source code file to generate the skeleton screen in the display page, so that the target source code file can be accurately and conveniently determined, and the expected skeleton screen can be accurately generated in the display page when the target source code file is run, thereby improving the efficiency, accuracy and flexibility of skeleton screen generation.

[0065] On the basis of the above technical solution, the method further includes: if there is sub-component marking information in the marking information, then in the running stage, a sub-skeleton screen corresponding to the sub-component is generated and displayed on the skeleton screen of the display page.

[0066] The subcomponent tag information may refer to the tag information of the vue subcomponent. The subcomponent tag information may be used to display the sub-skeleton screen corresponding to the subcomponent on the initial skeleton screen.

[0067] Specifically, if there is no subcomponent tag information in the tag information, then in the running stage, the display page displays the skeleton screen during the loading process of the page display content, and displays the page display content when the page display content is loaded. If there is subcomponent tag information in the tag information, then in the running stage, the display page displays the skeleton screen during the loading process of the page display content, and because "v-skeleton" is a custom attribute in vue, the skeleton belonging to the vue subcomponent will be processed for sub-skeleton screen generation (repeat the skeleton screen generation logic in S130 and S140), generate the sub-skeleton screen corresponding to the subcomponent, and display the sub-skeleton screen on the skeleton screen of the display page, thereby realizing the display and hiding of multiple skeleton screens; display the page display content when the page display content is loaded. Therefore, only the initial skeleton screen needs to be compiled in the compilation stage, and the sub-skeleton screen corresponding to the subcomponent does not need to be compiled in the compilation stage, and the sub-skeleton screen corresponding to the subcomponent is generated in the running stage and displayed step by step, which further improves the efficiency of skeleton screen generation.

[0068] Embodiment 2

[0069] Figure 3 This is a flowchart of a skeleton screen generation method provided in the second embodiment of the present invention. Based on the above embodiments, this embodiment describes in detail the process of determining the target source code file. The explanations of the terms that are the same or corresponding to the above embodiments are not repeated here. Figure 3 As shown, the method includes:

[0070] S310: Obtain the reference source code file corresponding to the page display content and the configuration information corresponding to the skeleton screen to be generated.

[0071] S320: Mark the display page based on the configuration information to determine the marking information corresponding to the skeleton screen.

[0072] S330: Determine first page structure information corresponding to the page display content by parsing the reference source code file.

[0073] S340: Copy the first page structure information to obtain copied third page structure information.

[0074] The third page structure information corresponds to the first page structure information.

[0075] For example, a copy of the DOM to be processed is made.

[0076] S350: Process the third page structure information based on the mark information to determine the second page structure information corresponding to the skeleton screen.

[0077] The second page structure information may refer to page structure information including only the skeleton screen.

[0078] Specifically, the third page structure information is recursively processed according to the mark information to determine the second page structure information corresponding to the skeleton screen.

[0079] On the basis of the above technical solution, "processing the third page structure information based on the marking information to determine the second page structure information corresponding to the skeleton screen" may include: based on the marking information, removing content from the third page structure information, adding skeleton style and adjusting skeleton details to determine the selected page structure information corresponding to the skeleton screen; based on the preset attribute whitelist, removing irrelevant attributes from the selected page structure information to determine the second page structure information corresponding to the skeleton screen.

[0080] The page structure information to be selected may refer to the page structure information that still retains some information irrelevant to the skeleton screen. The preset attribute whitelist may refer to a preset list of attributes related to the skeleton screen that need to be retained.

[0081] Specifically, the third page structure information is recursively subjected to content removal, skeleton style addition, and skeleton detail adjustment according to the tag information to determine the candidate page structure information corresponding to the skeleton screen. Based on the preset attribute whitelist, irrelevant attributes of the candidate page structure information are removed, and only style-related attributes are retained. The attribute whitelist may include but is not limited to skeleton screen tag attributes, "class" and "style".

[0082] S360: Determine a target source code file based on the first page structure information and the second page structure information.

[0083] Specifically, the second page structure information is inserted into the first page structure information at a preset insertion position, thereby obtaining a target source code file containing the second page structure information of the skeleton screen. The preset insertion position may be, but is not limited to, a preset default insertion position or an insertion position in the mark information.

[0084] Based on the above technical solution, "determining the target source code file based on the first page structure information and the second page structure information" may include: determining the insertion position information of the second page structure information based on the mark information; inserting the second page structure information into the first page structure information based on the insertion position information to determine the target source code file.

[0085] The insertion position information may refer to the insertion position set corresponding to the “s-direction”.

[0086] For example, Figure 4 FIG. 1 shows an example of inserting the second page structure information. Figure 4 , based on the number of occurrences of the skeleton block set in the above tag information being 4, source code containing 4 skeleton blocks appears. The size of each skeleton block is consistent with the above tag information.

[0087] S370, running the target source code file, and generating a skeleton screen in the display page.

[0088] For example, Figure 5 A skeleton screen display effect diagram is given. Figure 5 , there are 4 skeleton blocks, which is consistent with the marking information, and the skeleton blocks have the same size. Figure 6 A display effect diagram of the page display content is given. Figure 6 Before the page display content is loaded, the display page shows Figure 5 The skeleton screen in the display page displays the real content in the display page when the page display content is loaded.

[0089] The technical solution of the embodiment of the present invention is to obtain the copied third page structure information by copying the first page structure information; process the third page structure information based on the marking information to determine the second page structure information corresponding to the skeleton screen; determine the target source code file based on the first page structure information and the second page structure information, so that when running the target source code file, the expected skeleton screen can be accurately generated in the display page, and the real page content can be displayed in the display page when the page rendering is completed.

[0090] On the basis of the above technical solution, the embodiment of the present invention further provides a preferred embodiment of a skeleton screen generation method. Figure 7 A flowchart of a preferred embodiment of a skeleton screen generation method is given. Figure 7 As shown, the method includes:

[0091] S710. The developer performs simple manual marking of the page structure (marking the skeleton area and details) during the development phase.

[0092] S720. Based on the developer's mark (equivalent to the mark information), parse the source code content (equivalent to the reference source code file) during the compilation phase, and obtain the page structure content to be processed (equivalent to the first page structure information) through regular matching.

[0093] S730, mark and parse the page structure content (equivalent to the first page structure information) obtained in S720, and generate a skeleton screen structure (equivalent to the second page structure information), which is injected into the original structure (equivalent to the first page structure information) to obtain a target source code file.

[0094] The tag parsing is used to obtain the structure to be parsed. Generating the skeleton screen structure includes: processing the marked structure, and copying the original structure (equivalent to the first page structure information) for recursive processing, such as eliminating text, eliminating images, and processing using a preset attribute whitelist.

[0095] S740. During the running stage, "v-skeleton" is a custom attribute in vue. It will generate a sub-skeleton screen for the skeleton belonging to the vue subcomponent (repeating the skeleton screen generation logic in S720 and S730), and control the display / hide of the skeleton.

[0096] S750. Finally, the expected skeleton screen content is displayed on the page.

[0097] The technical solution of the embodiment of the present invention is to mark a small number of identifiers on the page during the development stage, and automatically generate the code of the skeleton screen based on the original structure and the marking information during the compilation stage and inject it into the source code. In addition, the generated skeleton screen structure directly reuses the existing structure and style for display. When the page is subsequently revised and updated, the mark can be maintained at a low cost, and the corresponding skeleton screen after the revision and update can be quickly generated.

[0098] The technical solution of the embodiment of the present invention does not require writing a large amount of code, but only requires simple marking to automatically generate the skeleton screen code. At the same time, the marking supports adjusting the skeleton details (such as local skeleton, ignore, etc.) to meet the needs of different scenarios. Moreover, there is no need to perform additional parsing or reverse deduction on the real page in operation to ensure the consistency of the skeleton screen and the real page. The skeleton screen in the embodiment of the present invention is automatically generated after the code (equivalent to the reference source code file) derived from the page structure removes the content that is not related to the skeleton screen, thereby ensuring the high flexibility of the skeleton screen generation while greatly reducing the human maintenance costs brought about by the development and subsequent page revision changes.

[0099] The following is an embodiment of a skeleton screen generating device provided in an embodiment of the present invention. The device and the skeleton screen generating methods of the above embodiments belong to the same inventive concept. For details not described in detail in the embodiment of the skeleton screen generating device, reference can be made to the embodiment of the above skeleton screen generating method.

[0100] Embodiment 3

[0101] Figure 8 This is a schematic diagram of the structure of a skeleton screen generating device provided in Embodiment 3 of the present invention. Figure 8 As shown, the device includes: an information acquisition module 810 , a mark information determination module 820 , a first page structure information determination module 830 , a target source code file determination module 840 and a skeleton screen generation module 850 .

[0102] Among them, the information acquisition module 810 is used to obtain the reference source code file corresponding to the page display content and the configuration information corresponding to the skeleton screen to be generated; the marking information determination module 820 is used to mark the display page based on the configuration information and determine the marking information corresponding to the skeleton screen; the first page structure information determination module 830 is used to determine the first page structure information corresponding to the page display content by parsing the reference source code file; the target source code file determination module 840 is used to determine the target source code file based on the marking information and the first page structure information; the skeleton screen generation module 850 is used to run the target source code file to generate a skeleton screen in the display page.

[0103] The technical solution of the embodiment of the present invention is to obtain a reference source code file corresponding to the page display content and configuration information corresponding to the skeleton screen to be generated; mark the display page based on the configuration information to determine the marking information corresponding to the skeleton screen; determine the first page structure information corresponding to the page display content by parsing the reference source code file; determine the target source code file based on the marking information and the first page structure information; run the target source code file to generate the skeleton screen in the display page, so that the target source code file can be accurately and conveniently determined, and the expected skeleton screen can be accurately generated in the display page when the target source code file is run, thereby improving the efficiency, accuracy and flexibility of skeleton screen generation.

[0104] Based on the above technical solution, the first page structure information determination module 830 is specifically used to: parse the reference source code file in the compilation stage based on the tag information to determine the source code information to be selected; based on regular matching and the source code information to be selected, determine the first page structure information corresponding to the page display content.

[0105] Based on the above technical solution, the target source code file determination module 840 may include:

[0106] A third page structure information determination submodule, used for copying a copy of the first page structure information to obtain the copied third page structure information;

[0107] A second page structure information determination submodule, used to process the third page structure information based on the marking information to determine the second page structure information corresponding to the skeleton screen;

[0108] The target source code file determination submodule is used to determine the target source code file based on the first page structure information and the second page structure information.

[0109] Based on the above technical solution, the second page structure information determination submodule is specifically used for: based on the marking information, removing content from the third page structure information, adding skeleton style, and adjusting skeleton details to determine the page structure information to be selected corresponding to the skeleton screen; based on the preset attribute whitelist, removing irrelevant attributes from the page structure information to be selected to determine the second page structure information corresponding to the skeleton screen.

[0110] Based on the above technical solution, the target source code file determination submodule is specifically used to: determine the insertion position information of the second page structure information based on the marking information; insert the second page structure information into the first page structure information based on the insertion position information, and determine the target source code file.

[0111] On the basis of the above technical solution, the device also includes:

[0112] The sub-skeleton screen generation module is used to generate a sub-skeleton screen corresponding to the sub-component during the running stage if there is sub-component marking information in the marking information, and display it on the skeleton screen of the display page.

[0113] The skeleton screen generation device provided in the embodiment of the present invention can execute the skeleton screen generation method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of executing the skeleton screen generation method.

[0114] It is worth noting that in the above-mentioned embodiment of skeleton screen generation, the various units and modules included are only divided according to functional logic, but are not limited to the above-mentioned division, as long as the corresponding functions can be realized; in addition, the specific names of the functional units are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of the present invention.

[0115] Embodiment 4

[0116] Fig. 9 A schematic diagram of the structure of an electronic device 10 that can be used to implement an embodiment of the present invention is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices (such as helmets, glasses, watches, etc.) and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present invention described and / or required herein.

[0117] like Fig. 9As shown, the electronic device 10 includes at least one processor 11, and a memory connected to the at least one processor 11, such as a read-only memory (ROM) 12, a random access memory (RAM) 13, etc., wherein the memory stores a computer program that can be executed by at least one processor, and the processor 11 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 12 or the computer program loaded from the storage unit 18 to the random access memory (RAM) 13. In the RAM 13, various programs and data required for the operation of the electronic device 10 can also be stored. The processor 11, the ROM 12, and the RAM 13 are connected to each other through a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0118] A number of components in the electronic device 10 are connected to the I / O interface 15, including: an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a disk, an optical disk, etc.; and a communication unit 19, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0119] The processor 11 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The processor 11 executes the various methods and processes described above, such as a skeleton screen generation method.

[0120] In some embodiments, the skeleton screen generation method may be implemented as a computer program, which is tangibly contained in a computer-readable storage medium, such as a storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 10 via the ROM 12 and / or the communication unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the skeleton screen generation method described above may be performed. Alternatively, in other embodiments, the processor 11 may be configured to execute the skeleton screen generation method in any other appropriate manner (e.g., by means of firmware).

[0121] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0122] Computer programs for implementing the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that when the computer program is executed by the processor, the functions / operations specified in the flow chart and / or block diagram are implemented. The computer program may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0123] In the context of the present invention, a computer-readable storage medium may be a tangible medium that may contain or store a computer program for use by or in combination with an instruction execution system, device or equipment. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or equipment, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0124] To provide interaction with a user, the systems and techniques described herein may be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or trackball) through which the user can provide input to the electronic device. Other types of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form (including acoustic input, voice input, or tactile input).

[0125] The systems and techniques described herein may be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0126] A computing system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The client and server relationship is generated by computer programs running on the corresponding computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system to solve the defects of difficult management and weak business scalability in traditional physical hosts and VPS services.

[0127] An embodiment of the present invention further provides a computer program product, including a computer program, which, when executed by a processor, implements the skeleton screen generation method provided in any embodiment of the present application.

[0128] In the process of implementation, the computer program product can be written in one or more programming languages ​​or a combination thereof to perform the computer program code of the present invention. The programming language includes an object-oriented programming language, such as Java, Smalltalk, C++, and also includes a conventional procedural programming language, such as "C" language or similar programming languages. The program code can be executed completely on the user's computer, partially on the user's computer, as an independent software package, partially on the user's computer and partially on a remote computer, or completely on a remote computer or server. In the case of a remote computer, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (for example, using an Internet service provider to connect through the Internet). The program product and the skeleton screen generation method disclosed in each embodiment of the present application belong to the same inventive concept, so it will not be repeated here.

[0129] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps described in the present invention can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solution of the present invention can be achieved, and this document does not limit this.

[0130] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A skeleton screen generation method, characterized in that: include: Obtain the reference source code file corresponding to the page display content and the configuration information corresponding to the skeleton screen to be generated; Marking the display page based on the configuration information to determine the marking information corresponding to the skeleton screen; Determine first page structure information corresponding to the page display content by parsing the reference source code file; Determine a target source code file based on the tag information and the first page structure information; The target source code file is run to generate the skeleton screen in the display page.

2. The method according to claim 1, characterized in that The step of parsing the reference source code file to determine the first page structure information corresponding to the page display content includes: Parsing the reference source code file in a compiling phase based on the tag information to determine source code information to be selected; Based on the regular expression matching and the selected source code information, first page structure information corresponding to the page display content is determined.

3. The method according to claim 1, characterized in that The step of determining a target source code file based on the tag information and the first page structure information includes: Copying the first page structure information to obtain copied third page structure information; Processing the third page structure information based on the mark information to determine the second page structure information corresponding to the skeleton screen; A target source code file is determined based on the first page structure information and the second page structure information.

4. The method according to claim 3, characterized in that: The processing of the third page structure information based on the mark information to determine the second page structure information corresponding to the skeleton screen includes: Based on the mark information, content is removed, skeleton style is added, and skeleton details are adjusted for the third page structure information to determine the to-be-selected page structure information corresponding to the skeleton screen; Based on a preset attribute whitelist, irrelevant attributes are eliminated from the to-be-selected page structure information to determine the second page structure information corresponding to the skeleton screen.

5. The method according to claim 3, characterized in that: The determining the target source code file based on the first page structure information and the second page structure information includes: Determine the insertion position information of the second page structure information based on the mark information; The second page structure information is inserted into the first page structure information based on the insertion position information, and a target source code file is determined.

6. The method according to claim 1, characterized in that After running the target source code file, the method further includes: If the tag information includes sub-component tag information, a sub-skeleton screen corresponding to the sub-component is generated during the running phase and displayed on the skeleton screen of the display page.

7. A skeleton screen generating device, characterized in that: The device comprises: An information acquisition module is used to acquire the reference source code file corresponding to the page display content and the configuration information corresponding to the skeleton screen to be generated; A marking information determining module, used to mark the display page based on the configuration information, and determine the marking information corresponding to the skeleton screen; A first page structure information determination module, configured to determine first page structure information corresponding to the page display content by parsing the reference source code file; A target source code file determination module, used to determine a target source code file based on the tag information and the first page structure information; The skeleton screen generation module is used to run the target source code file and generate the skeleton screen in the display page.

8. An electronic device, characterized in that: The electronic device comprises: one or more processors; A memory for storing one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the skeleton screen generation method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the skeleton screen generation method as described in any one of claims 1 to 6 is implemented.

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

Images