Skeleton screen code generation method and device

Abstract

The invention discloses a skeleton screen code generation method and device.According to the skeleton screen code generation method and device, a skeleton screen generation page can be displayed, the skeleton screen generation page comprises a preview picture of a target webpage and an initial skeleton screen, and the initial skeleton screen comprises a plurality of areas; in response to a modification operation for at least one to-be-adjusted area, adjusting the display effect of the to-be-adjusted area of the initial skeleton screen to obtain a target skeleton screen; in response to a code export operation for the target skeleton screen, generating a skeleton screen code corresponding to the target skeleton screen; according to the method, the skeleton screen code can be simply and efficiently obtained.

Description

Technical Field

[0001] The present application relates to the field of computers, and in particular to a skeleton screen code generation method and device. Background Art

[0002] With the development of Internet technology, the Internet has become an important part of people's daily life. How to optimize the user experience in the process of browsing web content has become the current key development direction. Among them, the skeleton screen, as a buffer before the web page displays the content, can display the general structure of the web page, relieve the user's anxiety when waiting for the web page content, and improve the user experience. Displaying the skeleton screen can be achieved by loading the skeleton screen code. The existing skeleton screen code is usually manually developed by developers based on the web page code, which is labor-intensive and inefficient. Summary of the invention

[0003] The embodiments of the present application provide a skeleton screen code generation method and device, which can generate skeleton screen code simply and efficiently.

[0004] The present application embodiment provides a skeleton screen code generation method, including:

[0005] Displaying a skeleton screen generation page, the skeleton screen generation page includes a preview screen of the target web page and an initial skeleton screen, the initial skeleton screen includes multiple areas;

[0006] In response to a modification operation on at least one area to be adjusted, adjusting the display effect of the area to be adjusted of the initial skeleton screen to obtain a target skeleton screen;

[0007] In response to the code export operation for the target skeleton screen, a skeleton screen code corresponding to the target skeleton screen is generated.

[0008] Accordingly, the embodiment of the present application also provides a skeleton screen code generation device, including:

[0009] A display module, used to display a skeleton screen generation page, the skeleton screen generation page includes a preview screen of the target web page and an initial skeleton screen, the initial skeleton screen includes multiple areas;

[0010] An adjustment module, configured to adjust the display effect of the to-be-adjusted area of ​​the initial skeleton screen in response to a modification operation on at least one to-be-adjusted area, to obtain a target skeleton screen;

[0011] The generating module is used for generating the skeleton screen code corresponding to the target skeleton screen in response to the code exporting operation for the target skeleton screen.

[0012] In some embodiments of the present application, the skeleton screen generation page further includes at least one skeleton screen adjustment control for the initial skeleton screen, and the adjustment module may be specifically used to:

[0013] In response to the operation of adjusting the control on the skeleton screen, the display effect of the area of ​​the initial skeleton screen is adjusted to obtain the target skeleton screen.

[0014] In some embodiments of the present application, the multiple areas include at least one background area and multiple node areas, the multiple node areas are arranged in the background area, the skeleton screen adjustment control includes an animation effect control, a node color control and a background color control, and the adjustment module can be specifically used for:

[0015] If an operation on the animation effect control is detected, add the target animation effect to the node area in the initial skeleton screen;

[0016] If an operation on the node color control is detected, the color value of the node area in the initial skeleton screen is adjusted to the target node color value;

[0017] If an operation on the background color control is detected, the color value of the background area in the initial skeleton screen is adjusted to the target background color value to obtain the target skeleton screen.

[0018] In some embodiments of the present application, the plurality of regions include at least one background region and a plurality of node regions, the skeleton screen generation page further includes at least one node attribute adjustment control for the node region, and the adjustment module may include a determination submodule and an adjustment submodule, wherein:

[0019] A determination submodule, configured to adjust a display effect of the selected node area if an area modification operation on the selected node area is detected when at least one selected node area is determined;

[0020] The adjustment submodule is used to adjust the display effect of the selected node area to obtain the target skeleton screen if an operation on the node attribute adjustment control is detected.

[0021] In some embodiments of the present application, the selected node area is a rectangular area, the node attribute adjustment control includes at least one size adjustment control, a color adjustment control, and a rounded corner adjustment control, and the adjustment submodule can be specifically used for:

[0022] If an operation on a size adjustment control is detected, the size of the selected node area is adjusted to the target size;

[0023] If an operation on the color adjustment control is detected, the color value of the selected node area is adjusted to the color value of the target area;

[0024] If an operation on the fillet adjustment control is detected, the fillet radius of the selected node area is adjusted to the target fillet radius to obtain the target skeleton screen.

[0025] In some embodiments of the present application, the determination submodule includes a determination unit, a position adjustment unit and a size update unit, wherein:

[0026] a determination unit, configured to determine the point positions of the plurality of positioning points based on the area position of the selected node area when at least one selected node area is determined, and to display the plurality of positioning points at the plurality of point positions of the selected node area respectively;

[0027] A position adjustment unit, configured to adjust the region position of the selected node region in the initial skeleton screen to the target region position if a drag operation on the selected node region is detected;

[0028] The size updating unit is used to determine the update size of the selected node area if a drag operation on the target positioning point of the selected node area is detected, and adjust the size of the selected node area to the update size.

[0029] In some embodiments of the present application, the position adjustment unit includes a determination subunit, a calculation subunit, a display subunit and an adjustment subunit, wherein:

[0030] A determination subunit, used to determine the moving direction information of the selected node area within the initial skeleton screen if a drag operation on the selected node area is detected;

[0031] A calculation subunit, used for calculating the distance between the selected node area and at least one other node area in the initial skeleton screen based on the moving direction information;

[0032] A display subunit is used to display an auxiliary graphic between the matching node area and the selected node area corresponding to the matching distance if there is a matching distance matching the preset distance threshold in at least one distance, and the auxiliary graphic is used to assist the object in determining the target area position of the selected node area;

[0033] The adjusting subunit is used to determine the target area position of the selected node area if it is detected that the dragging operation on the selected node area is finished, and adjust the position of the selected node area in the initial skeleton screen to the target area position.

[0034] In some embodiments of the present application, the dragging operation is an operation performed by manipulating the object with a mouse, and the adjusting subunit may be specifically used for:

[0035] Determine a moving distance of the mouse in a first moving direction and a starting trigger position of the mouse in the first moving direction during the drag operation;

[0036] Based on the moving distance, the starting trigger position and the parameter information of the initial skeleton screen, the target area position of the selected node area is determined.

[0037] In some embodiments of the present application, the skeleton screen code generation device further includes:

[0038] A modification control module, configured to display at least one node modification control for the selected node area in response to a trigger operation for the selected node area;

[0039] The area modification module is used to modify the selected node area in response to a trigger operation on the node modification control.

[0040] In some embodiments of the present application, the node modification control includes a node copy control and a node deletion control, and the region modification module can be specifically used for:

[0041] If a trigger operation for a node copy control is detected, at least two selected node areas are displayed in the initial skeleton screen;

[0042] If a trigger operation for a node deletion control is detected, the selected node area is canceled in the initial skeleton screen.

[0043] In some embodiments of the present application, the skeleton screen code generation device further includes:

[0044] The page to be generated module is used to load the skeleton screen generation script and display the skeleton screen to be generated page, which includes the skeleton screen generation control;

[0045] At this time, the display module is specifically used for:

[0046] In response to a trigger operation on a skeleton screen generation control, a skeleton screen generation page is displayed, and the skeleton screen generation page includes a preview screen of a target web page and an initial skeleton screen.

[0047] In some embodiments of the present application, the display module may include a construction submodule, a generation submodule and a display submodule, wherein:

[0048] A construction submodule, configured to construct an initial skeleton screen based on the webpage code of a target webpage in response to a trigger operation for generating a control for the skeleton screen;

[0049] A generation submodule is used to load web page code to generate a preview screen of the target web page;

[0050] The display submodule is used to display the skeleton screen generation page, which includes a preview screen and an initial skeleton screen.

[0051] In some embodiments of the present application, the building block may be specifically used for:

[0052] In response to a trigger operation for generating a skeleton screen control, traverse the webpage code in the target webpage to determine the position information of each of the plurality of visible nodes and the attribute information of each visible node;

[0053] Based on the position information and the attribute information, an initial skeleton screen is constructed, and the initial skeleton screen includes node areas of respective multiple visible nodes.

[0054] In some embodiments of the present application, the generation module may be specifically used to:

[0055] In response to the code export operation for the target skeleton screen, acquiring node information of a plurality of visible nodes of the target skeleton screen;

[0056] Convert multiple node information into target skeleton screen data and determine the saving path information;

[0057] According to the saved path information, the target skeleton screen data is written into the preset position of the preset template, thereby obtaining the skeleton screen code of the target skeleton screen.

[0058] Accordingly, an embodiment of the present application further provides a computer device, including a processor and a memory, wherein the memory stores a computer program, and the processor is used to run the computer program in the memory to implement the steps in the skeleton screen code generation method provided in the embodiment of the present application.

[0059] Accordingly, an embodiment of the present application further provides a computer-readable storage medium on which a computer program is stored, wherein the computer program is executed by a processor to implement the steps in the skeleton screen code generation method provided in the embodiment of the present application.

[0060] Accordingly, an embodiment of the present application further provides a computer program product, including a computer program or instructions, which are executed by a processor to implement the steps in the skeleton screen code generation method provided in the embodiment of the present application.

[0061] In the embodiment of the present application, a preview screen of a target page and an initial skeleton screen automatically generated based on the web page code of the target page can be displayed on the skeleton screen generation page. The initial skeleton screen may include multiple areas. In response to a modification operation on at least one area to be adjusted, the present application may adjust the display effect of the area to be adjusted in the initial skeleton screen to obtain the target skeleton screen. Specifically, the present application may respond to operations such as moving the area to be adjusted and modifying its attributes (such as size and color). This method is simple, easy, fast and efficient. The process of adjusting the initial skeleton screen is directly performed on the page, so the target skeleton screen can be obtained more intuitively. The skeleton screen generation page includes a preview screen and a skeleton screen of the target page, so that the user can adjust the skeleton screen directly by referring to the preview screen, thereby improving the user experience. After obtaining the target skeleton screen, the code export operation on the target skeleton screen may be responded to, and the skeleton screen code corresponding to the target skeleton screen may be automatically generated. Compared with the existing process that requires developers to write skeleton screen codes, view the skeleton screen through the skeleton screen codes, and adjust the skeleton screen codes again according to the skeleton screen, the present application generates the skeleton screen code corresponding to the skeleton screen when the skeleton screen that meets the requirements is first intuitively determined. The entire process of generating the skeleton screen code is obviously simpler and more efficient. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0063] Figure 1 It is a page interaction diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0064] Figure 2 It is a flowchart of a skeleton screen code generation method provided in an embodiment of the present application;

[0065] Figure 3 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0066] Figure 4 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0067] Figure 5 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0068] Figure 6 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0069] Figure 7 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0070] Figure 8 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0071] Fig. 9 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0072] Fig.10 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0073] Fig.11 is another flowchart of the skeleton screen code generation method provided in an embodiment of the present application;

[0074] Fig.12 is another flowchart of the skeleton screen code generation method provided in an embodiment of the present application;

[0075] Fig.13 It is another page interaction schematic diagram of the skeleton screen code generation method provided in an embodiment of the present application;

[0076] Fig.14 It is a structural schematic diagram of a skeleton screen code generating device provided in an embodiment of the present application;

[0077] Fig.15 It is a schematic diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0078] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0079] It is understandable that in several embodiments of the present application, related data such as user information is involved. When the embodiments of the present application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of relevant data need to comply with relevant laws, regulations and standards of relevant countries and regions.

[0080] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present application 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 interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein, for example. In addition, the terms "including" and "corresponding to" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0081] The present application discloses a skeleton screen code generation method and device. The skeleton screen generation method can be integrated in a skeleton screen code generation system. The skeleton screen code generation system is integrated in at least one computer device, such as a terminal, a server, etc.

[0082] The server may be an independent physical server, a server cluster or a distributed system composed of multiple physical servers, or a cloud server providing cloud computing services. The terminal may be a tablet computer, a laptop computer, a desktop computer, a smart screen, etc., but is not limited thereto. The terminal and the server may be directly or indirectly connected via wired or wireless communication, which is not limited in this application.

[0083] The skeleton screen code generation system can be integrated in a terminal, and the terminal can display a skeleton screen generation page. The skeleton screen generation page can include a preview screen of a target web page and an initial skeleton screen. The initial skeleton screen includes multiple areas. In response to a modification operation on at least one area to be adjusted, the terminal adjusts the display effect of the area to be adjusted of the initial skeleton screen to obtain a target skeleton screen. In response to a code export operation on the target skeleton screen, the skeleton screen code corresponding to the target skeleton screen is generated.

[0084] For example, see Figure 1 , the computer device displays a skeleton screen generation page, the skeleton screen generation page includes a preview screen A of the target web page 1 and an initial skeleton screen B, the initial skeleton screen B includes areas b1, b2 and b3, in response to a move operation on area b1, area b1 is adjusted to a target position, and in response to a zoom-in operation on area b3, area b3 is adjusted to a target size to obtain a target skeleton screen C. At this time, the skeleton screen generation page includes the preview screen A and the target skeleton screen C, and in response to a code export operation on the target skeleton screen C, a skeleton screen code for the target skeleton screen C is generated.

[0085] It should be noted that Figure 1 This is an example of an application scenario of the skeleton screen code generation system of the present application, which is mainly used to introduce but not limit the skeleton screen code generation system of the present application. In the process of actually applying the technical solution described in the embodiment of the present application, the computer devices included in the skeleton screen code generation system and the steps performed by each computer device can be flexibly adjusted, and are not limited to Figure 1 The content described in .

[0086] The skeleton screen code generation method of the present application will be described in detail below in conjunction with the embodiments. It should be noted that the description order of the following embodiments is not intended to limit the preferred order of the embodiments. Figure 2 A schematic diagram of the skeleton screen code generation method of the present application is shown in FIG. Figure 2 , the skeleton screen code generation method may include:

[0087] 110. Display a skeleton screen generation page, the skeleton screen generation page including a preview screen of the target web page and an initial skeleton screen, the initial skeleton screen including multiple areas.

[0088] The skeleton screen generation page includes a page that can display the skeleton screen, and the skeleton screen generation page may include a preview screen of the target web page and an initial skeleton screen, wherein the target web page may include a web page displayed on a computing device, such as a browser web page, a mobile web page, a small program web page, etc. Correspondingly, the preview screen may include a screen displayed by the target web page on a computer device, and the preview screen may include a screen displayed by a computer, a mobile device (such as a mobile phone, a tablet computer, etc.), a smart device (such as a smart wearable device, a smart office device, a smart home device, etc.). The preview screen can be obtained by loading the web page code of the target page.

[0089] Specifically, the target web pages of the present application may include various types of web pages on the Internet, such as game web pages, information web pages (such as news, social media, and web pages of professional information providers), product web pages, audio and video web pages, communication web pages (such as email, instant messaging product web pages), and the like.

[0090] The initial skeleton screen may include a skeleton screen automatically generated based on the webpage code of the target webpage, the initial skeleton screen may include multiple areas, the multiple areas may include at least one background area and multiple node areas, the background area may be used as the background of the initial skeleton screen, and the multiple node areas may be set in the background area. The initial skeleton screen may be obtained by loading the initial skeleton screen code, and the initial skeleton screen code may be automatically generated based on the webpage code of the target webpage.

[0091] Specifically, there are many ways to display the skeleton screen generation page. For example, the skeleton screen generation page can be a browser webpage or a client page. You can enter a URL in the browser to display the skeleton screen generation page, or open a client to display the skeleton screen generation page, and so on.

[0092] In some embodiments of the present application, in order to better adapt to the needs of developers and make the skeleton screen code generation method of the present application better adapted to the web page development process, a predetermined skeleton screen generation script can be loaded during the web page development process of the target web page. The skeleton screen generation script can construct an initial skeleton screen based on the web page code of the target web page, display the skeleton screen generation page, load the web page code, and display a preview image of the target web page and the initial skeleton screen on the skeleton screen generation page.

[0093] In some embodiments of the present application, in order to further enhance the developer's control over the display timing of the preview screen and the initial skeleton screen, a skeleton screen generation script is loaded to display the skeleton screen page to be generated. The skeleton screen page to be generated may include a skeleton screen generation control. In response to a trigger operation on the skeleton screen generation control, the initial skeleton screen is constructed based on the web page code of the target web page, the web page code is loaded, and the preview screen and the initial skeleton screen of the target web page are displayed on the skeleton screen generation page.

[0094] For example, see Figure 3 , load the skeleton screen generation script, and display the skeleton screen to be generated page 001, which includes the skeleton screen generation control 001a. In response to the trigger operation on the skeleton screen generation control 001a, display the skeleton screen generation page 002, which includes the preview screen 002a of the target page 1 and the initial skeleton screen 002b.

[0095] If a description is required, in the embodiments of the present application, all controls including the skeleton screen generation control may include buttons, text boxes, drop-down menus, radio / check boxes, etc., and the number of all controls including the skeleton screen generation control may include at least one, which can be flexibly handled according to actual conditions, and the present application does not impose any restrictions on this.

[0096] In some embodiments of the present application, the process of constructing an initial skeleton screen based on the webpage code of the target webpage may include: generating an initial skeleton screen code based on the webpage code, loading the initial skeleton screen code, and displaying the initial skeleton screen on the skeleton screen generation page. Specifically, the webpage code may be traversed to determine multiple visible nodes, position information and attribute information of each visible node, and then the initial skeleton screen may be constructed based on the position information and attribute information, and the initial skeleton screen includes node areas of each of the multiple visible nodes.

[0097] The web page code may include a node tree, the node tree may include multiple nodes, traversing the web page code may include traversing the node tree, the node may include multiple attributes, such as a display attribute, the display attribute may include at least two attribute values, such as a visible value, an invisible value, etc. If the attribute value of the display attribute of a node is a visible value, the node is a visible node, and the process of traversing the node tree may include determining multiple visible nodes from the attribute values ​​of the display attributes of each node, and obtaining the location information and attribute information of each visible node.

[0098] The preview screen of the target web page may include multiple areas, each of which may display different multimedia content. The visible nodes of the node tree correspond to the areas in the preview screen. The node tree is traversed to determine the multiple visible nodes therein, and the position information and attribute information of the visible nodes are obtained. The position information may include information representing the position of the area corresponding to the visible node in the target web page. The attribute information may include information representing the visible node and the attributes of the area corresponding to the visible node. The attribute information may include multiple, the number of attribute information of each visible node, and the attribute value of the attribute information may be the same or different. Specifically, it can be flexibly handled according to actual conditions, and this application does not impose any restrictions on this. It should be noted here that the position information can be understood as the attribute value of the position attribute, that is, the position information can be understood as a specific attribute information, and the display attribute and its attribute value can also be understood as a specific attribute information.

[0099] The present application can traverse the web page code to determine multiple visible nodes, the location information and attribute information of each visible node, which is equivalent to determining the location information of multiple regions in the target web page, as well as the attribute information of the regions. Based on the location information and attribute information of the visible nodes, an initial skeleton screen is constructed. The initial skeleton screen includes multiple regions, and the regions in the initial skeleton screen correspond to the regions in the target web page. Therefore, the initial skeleton screen can present the regional structure of the target web page.

[0100] In some embodiments of the present application, developers can pre-mark some nodes during the process of writing the web page code of the target web page, and the subsequent process of generating the initial skeleton screen can be based on these nodes. In this case, the process of traversing the web page code includes determining the marked nodes from multiple nodes, at which time the marked nodes are visible nodes, and then constructing the initial skeleton screen based on the acquired location information and attribute information of the marked nodes.

[0101] Correspondingly, the web page code can be simply divided into: web page code with tags and web page code without tags. The skeleton screen generation control of the embodiment of the present application can provide an option of generating a skeleton screen based on the web page code with tags (referred to as the tag generation option), and an option of generating a skeleton screen based on the web page code without tags (referred to as the direct generation option). Specifically, the implementation forms here may include multiple forms. For example, the skeleton screen generation control can be in the form of a radio button, a drop-down menu, etc., which can provide at least two options. The at least two options can be a tag generation option and a direct generation option respectively. The user can select an option based on the actual situation of the web page code, and the computer device can construct the initial skeleton screen based on the selected option and based on different traversal methods.

[0102] For example, see Figure 4 The skeleton screen to be generated page 001 may include a direct generation button 001b and a label generation button 001c. If there is no label pre-added for the node in the web page code, the user can trigger the direct generation 001b; if there is a label pre-added for the node in the web page code, the user can trigger the label generation button 001c. Triggering any button can display the skeleton screen generation page 002 including the preview screen and the initial skeleton screen.

[0103] For example, see Figure 5 , a skeleton screen generation page 002 is displayed. The skeleton screen generation page 002 includes a preview screen 002a of the target web page 1 and an initial skeleton screen 002b. The initial skeleton screen 002b includes area 1, area 2, area 3 and area 4.

[0104] 120. In response to a modification operation on at least one area to be adjusted, adjust the display effect of the area to be adjusted of the initial skeleton screen to obtain a target skeleton screen.

[0105] The area to be adjusted may include an area for which display effect adjustment is required. The display effect may include the color, shape, size, animation effect, etc. of the area. The area may be limited by a border. The display effect may also include the shape of the border, the style of the frame line, etc., which are related to the border. Correspondingly, the modification operation may include modifying the color, shape, size, animation effect, border, etc. of the area.

[0106] There are many ways to implement the modification operation, such as triggering a pre-set control or dragging the area to be adjusted.

[0107] In some embodiments of the present application, a skeleton screen adjustment control may be set on the skeleton screen generation page, and the computer device may adjust the display effect of the area of ​​the initial skeleton screen in response to the operation on the skeleton screen adjustment control to obtain a target skeleton screen.

[0108] Among them, the skeleton screen adjustment control may include a control for indicating the adjustment of the display effect of the area of ​​the skeleton screen. Here, the area of ​​the skeleton screen may include all areas of the skeleton screen, and may also include a part of the multiple areas of the skeleton screen. This part of the area may be at least one, and this part of the area may have the same attributes in a certain aspect, such as having the same size, color, belonging to the upper half of the skeleton screen, etc. The skeleton screen adjustment control may indicate the adjustment of the display effect of at least one aspect of the area. For example, the skeleton screen adjustment control may indicate the adjustment of the position of the area, or may indicate the adjustment of the position, color and size of the area. The number of skeleton screen adjustment controls is one or more, and the position of the skeleton screen adjustment control on the skeleton screen generation page and the display timing can be flexibly adjusted according to actual needs, and this application does not impose any restrictions on this.

[0109] Correspondingly, in response to the operation of adjusting the control on the skeleton screen, the display effect of at least one aspect of the whole or part of the area in the initial skeleton screen may be adjusted to obtain the target skeleton screen.

[0110] In some embodiments of the present application, the area may include multiple types, such as a background area and a node area. The multiple node areas of the initial skeleton screen may include at least one background area and multiple node areas. The multiple node areas may be set in the background area. The skeleton screen adjustment control may include an animation effect control, a node color control, a background color control, etc. In this embodiment, if an operation on the animation effect control is detected, the target animation effect can be determined and the target animation effect is added to the node area. If an operation on the node color control is detected, the target node color value can be determined and the color value of the node area is adjusted to the target node color value. If an operation on the background color control is detected, the target background color value can be determined and the color value of the background area is adjusted to the target background color value, thereby obtaining the target skeleton screen.

[0111] For example, see Figure 6The skeleton screen generation page 002 includes a preview screen 002a of the target web page 1, an initial skeleton screen 002b, an animation effect control 002c, a node color control 002d, and a background color control 002e. The initial skeleton screen 002b includes a node area 1, a node area 2, a node area 3, and a background area 4. The computer detects an input operation for the node color control 002d, determines a target node color value 1, and adjusts the color values ​​of the node area 1, the node area 2, and the node area 3 to the target node color value 1; the computer device detects an input operation for the node color control 002e, determines a target background color value 1, and adjusts the color value of the background area 4 to the target background color value 1; the computer device detects a selection operation for the target animation effect 1 in the animation effect control 002c, and adds the target animation effect 1 to the node area 1, the node area 2, and the node area 3.

[0112] In some embodiments of the present application, in response to a selection operation on at least one area, the at least one area can be determined as a selected area. At this time, the selected area can be the area to be adjusted. Then, in response to a modification operation on the selected area, the display effect of the selected area is adjusted. The modification operation on the selected area can include a direct area modification operation on the selected area, and can also include an indirect modification operation on the selected area through a control. The known area can include a background area and a node area, and correspondingly, the selected area can include a selected background area and a selected node area.

[0113] In some embodiments of the present application, the skeleton screen generation page may further include a node attribute adjustment control. When at least one selected node area is determined, if an area modification operation for the selected node area is detected, the display effect of the selected node area can be adjusted. If an operation for the node attribute adjustment control is detected, the display effect of the selected node area can also be adjusted accordingly to obtain the target skeleton screen.

[0114] There may be multiple area modification operations for the selected node area, such as zoom-in, zoom-out, position adjustment, etc. Specifically, the user may manipulate the cursor by operating the keyboard, mouse, touchpad, finger, etc., to implement the area modification operation.

[0115] Among them, the node attribute adjustment control may include a control for indicating adjustment of the display effect of the selected node area, and the node attribute adjustment control may indicate adjustment of at least one aspect of the display effect of the selected node area, for example, the node attribute adjustment control may indicate adjustment of the color of the selected node area, or may indicate adjustment of the position and size of the selected node area. The number of node attribute adjustment controls is one or more, and the position and display timing of the node attribute adjustment control on the skeleton screen generation page can be flexibly adjusted according to actual needs, and this application does not impose any restrictions on this.

[0116] The adjustment operation for the selected background area and the processing method of the computer device are similar to those for the selected node area, and this application will not go into details.

[0117] In some embodiments of the present application, the selected node area can be a rectangular area, and the node attribute adjustment control includes at least one size adjustment control, a color adjustment control, and a corner adjustment control. If an operation on the size adjustment control is detected, the size of the selected node area is adjusted to the target size; if an operation on the color adjustment control is detected, the color value of the selected node area is adjusted to the target area color value; if an operation on the corner adjustment control is detected, the corner radius of the selected node area is adjusted to the target corner radius to obtain the target skeleton screen.

[0118] For example, see Figure 7 The skeleton screen generation page 002 includes a preview screen 002a of the target web page 1, an initial skeleton screen 002b, a size adjustment control 002f, a color adjustment control 002g and a rounded corner adjustment control 002h. The initial skeleton screen 002b includes a node area 1, a node area 2, a node area 3 and a background area 4. The computer device detects a selection operation on the node area 1 and determines that the node area 1 is the selected node area. If an input operation on the size adjustment control 002f is detected, the target size 1 is determined and the size of the node area 1 is adjusted to the target size 1; the computer device detects a selection operation on the target area color value 1 in the color adjustment control 002g, and adjusts the color value of the node area 1 to the target area color value 1; the computer device detects a modification operation on the rounded corner adjustment control 002h, determines the target rounded corner radius 1, and adjusts the rounded corner radius of the node area 1 to the target rounded corner radius 1.

[0119] In some embodiments of the present application, when the user adjusts the size, shape, etc. of the selected area, in order to further improve the convenience and accuracy of operation, multiple positioning points for auxiliary positioning and modification operations can be determined and displayed in the selected area. The computer device can respond to the drag operation on the positioning point, determine the updated size of the selected area, and adjust the size of the selected area to the updated size on the skeleton screen generation page.

[0120] In some embodiments of the present application, when at least one selected node area is determined, the point positions of multiple positioning points can be determined based on the area position of the selected node area, and the multiple positioning points can be respectively displayed at the multiple point positions of the selected node area; if a drag operation is detected for the selected node area, the area position of the selected node area in the initial skeleton screen is adjusted to the target area position; if a drag operation is detected for the target positioning point of the selected node area, the update size of the selected node area is determined, and the size of the selected node area is adjusted to the updated size.

[0121] Among them, the positioning point can be set at the boundary or inside of the selected node area, the inside can be such as the center point, etc., and the positioning point can be displayed in various shapes, such as displayed as a positioning dot. Specifically, the selected node area can include various shapes, and the corresponding point position determination strategy can be determined according to the shape of the selected node area. If the selected node area is a circle, a preset number of positioning points can be evenly set at the boundary of the selected node area, and the positioning point can also be set at the center of the selected node area. For example, if the selected node area is a rectangle, the positioning points can be set at the four corners of the selected node area, and a set number of positioning points can be set on each of the four sides of the rectangle.

[0122] For example, when the selected node area is a rectangle, the position information of the selected node area in the initial skeleton screen can be obtained, such as multiple position data, such as width, height, distance from the upper, lower, left and right boundaries, etc. The positions of 8 points can be determined based on the multiple position data, and the positioning points corresponding to the 8 point positions are symmetrically distributed in the selected node area.

[0123] If a drag operation is detected for the target positioning point of the selected node area, the process of determining the updated size of the selected node area may include multiple methods. For example, if the drag operation is implemented by a mouse, related events of triggering the positioning point by the mouse may be detected, such as detecting at least one mouse event for the target positioning point. The mouse event may include a mouse release event. If a mouse release event for the target positioning point is detected, the mouse end position information, the position information of the selected node area and the mouse movement distance information are obtained, and the updated size and update area position of the selected node area, as well as the updated point positions of multiple positioning points are calculated based on these data. The updated selected node area is displayed based on the updated area position, the size of the selected node area is updated to the updated size, and the updated positioning point is displayed in the updated selected node area based on the updated point position.

[0124] If a drag operation on the selected node area is detected, the position of the target area can be determined, and the area position of the selected node area in the initial skeleton screen is adjusted to the target area position.

[0125] For example, see Figure 8 The skeleton screen generation page 002 includes a preview screen 002a of the target web page 1 and an initial skeleton screen 002b. The initial skeleton screen 002b includes a node area 1, a node area 2, a node area 3 and a background area 4. The computer detects a selection operation on the node area 2, determines that the node area 2 is a selected node area, and displays 8 positioning dots on the boundary of the node area 2. The computer device detects a drag operation on the positioning dot 2, determines an update size 1 of the node area 2, and adjusts the size of the node area 2 to the update size 1. The computer device detects a drag operation on the node area 3, determines a target area position of the node area 3, and adjusts the area position of the node area 3 in the initial skeleton screen to the target area position.

[0126] In some embodiments of the present application, when adjusting an area, there may be a need to align it with other areas. The embodiments of the present application can also display auxiliary graphics during the process of adjusting the area position to assist the user in adjusting the area to the target area position.

[0127] Specifically, if a drag operation is detected for the selected node area, the moving direction information of the selected node area in the initial skeleton screen is determined; based on the moving direction information, the distance between the selected node area and at least one other node area in the initial skeleton screen is calculated; if there is a matching distance that matches a preset distance threshold in at least one distance, an auxiliary graphic is displayed between the matching node area corresponding to the matching distance and the selected node area, and the auxiliary graphic is used to assist the object in determining the target area position of the selected node area; if it is detected that the drag operation for the selected node area is ended, the target area position of the selected node area is determined, and the position of the selected node area in the initial skeleton screen is adjusted to the target area position.

[0128] Among them, the moving direction information may include information representing the moving direction of the area within the initial skeleton screen. The movement of the dragged area to the left, right, up, and down can be represented by different moving direction information respectively. There are many ways to determine the moving direction information. For example, when the dragging operation is implemented by a mouse, the mouse position when the mouse is pressed and the moving distance information of the mouse in the first target direction (such as horizontal and vertical) can be obtained, and then it is determined whether the difference between the mouse position information and the moving distance information matches the first preset condition, and then the moving direction information is determined. For example, if the difference is greater than 0, the moving direction information 1 is determined, and the moving direction information 1 represents that the area moves to the left; if the difference is less than or equal to 0, the moving direction information 2 is determined, and the moving direction information 2 represents that the area moves to the right.

[0129] Then, the distance between the selected node area and at least one other node area in the initial skeleton screen can be calculated based on the moving direction information. Specifically, different moving direction information can correspond to different position calculation formulas. The corresponding position calculation formula can be determined based on the moving direction information, and then the distance between the selected node and the other node areas can be calculated based on the position calculation formula.

[0130] Specifically, the distance may include a first distance and a second distance, and the logic of the position calculation formula may be as follows:

[0131] If the moving direction information indicates moving to the left, a first distance between the left border of the selected node region and the right border of other node regions and a second distance between the left border of the selected node region and the left border of other node regions may be calculated.

[0132] If the moving direction information indicates moving to the right, a first distance between the right border of the selected node region and the right border of other node regions and a second distance between the left border of the selected node region and the left border of other node regions may be calculated.

[0133] If the moving direction information represents upward movement, a first distance between an upper boundary of the selected node region and lower boundaries of other node regions and a second distance between an upper boundary of the selected node region and upper boundaries of other node regions may be calculated.

[0134] If the moving direction information represents downward movement, a first distance between the lower boundary of the selected node region and the lower boundaries of other node regions and a second distance between the lower boundary of the selected node region and the upper boundaries of other node regions may be calculated.

[0135] If a matching distance that matches a preset distance threshold exists among the calculated multiple distances, an auxiliary graphic may be displayed between a matching node area corresponding to the matching distance and a selected node area.

[0136] Among them, the auxiliary graphics can be used to assist the object in determining the target area position of the selected node area, and the auxiliary graphics can be in various forms, such as the auxiliary graphics can be line segments. The preset distance threshold can be pre-set, and can be flexibly expanded based on actual needs when setting, and this application does not limit this.

[0137] There are many ways in which the distance matches the preset distance threshold, for example, the distance is less than the preset distance threshold.

[0138] In the case where the distance includes multiple ones, one or more preset distance thresholds can be set according to actual needs, and the multiple preset distance thresholds can correspond to the multiple distances respectively. For example, a preset first distance threshold can be set for the first distance, and a preset second distance threshold can be set for the second distance. At this time, if the first distance matches the preset first distance threshold, and the second distance matches the preset second distance threshold, the node area to which the first distance and the second distance belong can be determined as the matching node area, and an auxiliary graphic can be displayed between the matching node area and the selected node area.

[0139] If it is detected that the drag operation for the selected node area is completed, the target area position of the selected node area is determined, and the position of the selected node area in the initial skeleton screen is adjusted to the target area position. There are many ways to detect the end of the drag operation, such as the drag operation can be implemented through a touch pad, a touch screen, a mouse, etc. For example, if the drag operation is implemented through a mouse, a mouse release event for the selected node area can be detected. If a mouse release event for the selected node area is detected, it is determined that the drag operation for the selected node area is completed.

[0140] There are many ways to determine the position of the target area. If the drag operation is implemented by a mouse, the moving distance of the mouse in the first moving direction and the starting trigger position of the mouse in the first moving direction during the drag operation can be determined; based on the moving distance, the starting trigger position and the parameter information of the initial skeleton screen, the target area position of the selected node area is determined. For example, the moving distance of the selected node area in the first moving direction is calculated based on the moving distance, the starting trigger position, and the parameter information, and then the target area position is calculated based on the historical area position of the selected node area and the moving distance.

[0141] For example, the parameter information may include the position information of the outermost node of the skeleton screen, and the moving distance-the starting trigger position-the parameter information may be calculated to obtain the moving distance.

[0142] For example, see Fig. 9 The computer device detects a drag operation on node area 3, determines node area 2 as a matching node area based on the drag operation, and displays auxiliary line segment 1 between node area 3 and node area 4. If the computer device detects that the drag operation ends, it determines the target area position of node area 3 and adjusts the area position of node area 3 in the initial skeleton screen to the target area position.

[0143] In some embodiments of the present application, after determining that the node area is selected, relevant controls for the selected node area can be displayed. The relevant controls can be node property adjustment controls, node modification controls, etc. For example, taking the node modification control as an example, the embodiments of the present application also include: in response to a trigger operation on the selected node area, displaying at least one node modification control for the selected node area; in response to a trigger operation on the node modification control, modifying the selected node area.

[0144] The node modification control may include a control capable of modifying the display condition of the node area in the initial skeleton screen, and the display condition may include display, non-display, display at the target area position, display effect display based on target size, color value, fillet radius and other data, etc. The number of node modification controls may be at least one, and when multiple node modification controls are displayed, each node modification control may modify at least one aspect of the display effect of the selected node area, or at least one display condition.

[0145] In some embodiments of the present application, the node modification control includes a node copy control and a node deletion control. If a trigger operation for the node copy control is detected, at least two selected node areas are displayed in the initial skeleton screen; if a trigger operation for the node deletion control is detected, the selected node area is undisplayed in the initial skeleton screen.

[0146] For example, see Fig.10 The skeleton screen generation page 002 includes a preview screen 002a of the target web page 1 and an initial skeleton screen 002b. The initial skeleton screen 002b includes node area 1, node area 2, node area 3 and background area 4. In response to a trigger operation on node area 1, a node copy control 002n and a node deletion control 002p of node area 1 are displayed. In response to a trigger operation on the node copy control 002n, a node area 5 is displayed on the skeleton screen generation page 002. Node area 5 is an area having the same display effect as node area 1.

[0147] In response to the trigger operation on the node area 1 again, the node copy control 002n and the node deletion control p of the node area 1 are displayed. In response to the trigger operation on the node deletion control p, the node area 2 is cancelled from being displayed on the skeleton screen generation page 002.

[0148] For example, see Figure 5 In response to the modification operation on area 1, the display effect of area 1 of the initial skeleton screen is adjusted to obtain the target skeleton screen 002c.

[0149] 130. In response to the code export operation for the target skeleton screen, generate a skeleton screen code corresponding to the target skeleton screen.

[0150] Specifically, the code export operation may include multiple methods, such as voice control, preset gestures, trigger controls, etc., which can be flexibly handled according to needs during practice.

[0151] There are many ways to generate skeleton screen codes, for example, calling a preset generation interface to generate skeleton screen codes corresponding to a target skeleton screen.

[0152] In some embodiments of the present application, in response to a code export operation for a target skeleton screen, node information of multiple visible nodes of the target skeleton screen can be obtained; the multiple node information can be converted into target skeleton screen data, and the saving path information can be determined; according to the saving path information, the target skeleton screen data can be written at a preset position of a preset template, thereby obtaining the skeleton screen code of the target skeleton screen.

[0153] Specifically, there are multiple ways to obtain the node information of each visible node, such as determining the visible node based on the label, class name, etc. included in the node, and then obtaining the node information of the visible node. The label can be a div tag, and the class can be a class class. Converting multiple node information into target skeleton screen data can be, for example, storing the node information into an array, and then converting the array through a preset function to obtain the target skeleton screen data. The preset function can convert the array into other types of data, such as string type data, and then determine the save path information, such as being obtained from a local computer or other computer device, or at least two pieces of data can be obtained, and the at least two pieces of data can be spliced ​​to obtain the save path information, and the target skeleton screen data can be saved to the path corresponding to the save path information, and automatically loaded and packaged here, specifically, the target skeleton screen data is written to the preset position of the preset template, and the target file is obtained through the automatic packaging tool. The target file includes the skeleton screen code, and the target file also includes the web page code. This target file can be sent to the computer device at the user end, so that the target skeleton screen and the target web page are displayed on the computer device.

[0154] For example, see Figure 5 The skeleton screen generation page 002 also includes an export button 002q. In response to a trigger operation on the export button 002q, a skeleton screen code corresponding to the target skeleton screen is generated.

[0155] In the embodiment of the present application, a preview screen of a target page and an initial skeleton screen automatically generated based on the web page code of the target page can be displayed on the skeleton screen generation page. The initial skeleton screen may include multiple areas. In response to a modification operation on at least one area to be adjusted, the present application may adjust the display effect of the area to be adjusted in the initial skeleton screen to obtain the target skeleton screen. Specifically, the present application may respond to operations such as moving the area to be adjusted and modifying its attributes (such as size and color). This method is simple, easy, fast and efficient. The process of adjusting the initial skeleton screen is directly performed on the page, so the target skeleton screen can be obtained more intuitively. The skeleton screen generation page includes a preview screen and a skeleton screen of the target page, so that the user can adjust the skeleton screen directly by referring to the preview screen, thereby improving the user experience. After obtaining the target skeleton screen, the code export operation on the target skeleton screen may be responded to, and the skeleton screen code corresponding to the target skeleton screen may be automatically generated. Compared with the existing process that requires developers to write skeleton screen codes, view the skeleton screen through the skeleton screen codes, and adjust the skeleton screen codes again according to the skeleton screen, the present application generates the skeleton screen code corresponding to the skeleton screen when the skeleton screen that meets the requirements is first intuitively determined. The entire process of generating the skeleton screen code is obviously simpler and more efficient.

[0156] The skeleton screen code generation method of the present application will be further introduced below with reference to specific examples. Fig.11 , Fig.11 A flowchart is disclosed, and the skeleton screen code generation method may include:

[0157] 210. The computer device loads a skeleton screen generation script and displays a skeleton screen to be generated page, where the skeleton screen to be generated page includes a skeleton screen generation control.

[0158] Developers can import the skeleton screen generation script into the file of the project where the target web page is located. The computer device can load the skeleton screen generation script and display the skeleton screen page to be generated. The skeleton screen page to be generated can include an automatic generation button and a label generation button. The developer can choose to trigger the direct automatic generation button or the label generation button based on the JS web page code of the target web page.

[0159] The target web page can include various types of HTML web pages, such as browser pages on personal computers, embedded H5 pages in applications, H5 pages in public accounts, etc.

[0160] The embodiment of the present application can control the initial skeleton screen code and the generation timing of the initial skeleton screen by setting the skeleton screen generation control.

[0161] 220. In response to a trigger operation on a skeleton screen generation control, the computer device displays a skeleton screen generation page, where the skeleton screen generation page includes a code export control, a preview screen of a target web page, and an initial skeleton screen, where the initial skeleton screen includes multiple areas.

[0162] The present application also provides a process Fig.12 , Fig.12 The steps in can be reflected in this embodiment. For example, if the automatic generation button is triggered, the skeleton screen generation script in the computer device will directly generate and display the initial skeleton screen based on the JS web page code; if the tag generation button is triggered, the skeleton screen generation script in the computer device will generate and display the initial skeleton screen based on the JS web page code that is pre-attributed.

[0163] The web page code of the target web page may include a document object model tree (DOM tree for short), and the DOM tree includes multiple DOM elements. In response to the trigger operation for the skeleton screen generation control, the computer device can automatically perform a deep traversal of the DOM tree through the skeleton screen generation script. The traversal process can be carried out with the root node of the DOM tree as the entry node. The multiple visible DOM elements in the DOM tree can be determined through the display attributes of the DOM elements, or the multiple visible DOM elements in the DOM tree can be determined through the attribute tags of the DOM elements.

[0164] The preset position method can be used to obtain the size of an element and its position information relative to the viewport. The preset position method can be used to obtain the position information of a DOM element, such as the width, height, and the absolute value of the distance from the viewport (the visible area of ​​the web page) border, and calculate based on this position information to obtain the width, height, absolute value of the distance from the upper border of the viewport, absolute value of the distance from the left border of the viewport and other position data in percentage units. The position data in percentage units can be adapted to screens of various sizes.

[0165] Determine the visible DOM elements that can generate the initial skeleton screen, calculate the size data, position data, etc. of the node area of ​​the initial skeleton screen to be generated based on the information of these visible DOM elements, and obtain the initial skeleton screen code of the initial skeleton screen, the initial skeleton screen code includes a DOM tree, and the DOM tree includes multiple DOM elements corresponding to each of the multiple node areas. This process can filter all DOM elements in the DOM tree of the target web page based on pre-added tags or display attributes, thereby making the initial skeleton screen more concise and the initial skeleton screen code more lightweight.

[0166] The computer device can render the initial skeleton screen and the target web page together to the skeleton screen generation page through the skeleton screen generation script. The skeleton screen generation page can include a preview screen of the target web page and the initial skeleton screen.

[0167] See also Fig.13 The skeleton screen generation page can display the preview screen of the target web page and the initial skeleton screen on the right, and display multiple adjustment controls on the left. The adjustment controls can be skeleton screen adjustment controls for the initial skeleton screen, such as dynamic effect selection controls, node color change menus, background color change menus, etc. The adjustment controls can also be node attribute adjustment controls for the selected node area, such as input boxes for adjusting the width of the selected node area, input boxes for the height, input boxes for the color, and input boxes for the fillet radius.

[0168] 230. In response to the modification operation on the initial skeleton screen, the computer device adjusts the display effect of the to-be-adjusted area in the initial skeleton screen to obtain a target skeleton screen.

[0169] The skeleton screen generation script can configure functions such as dragging, copying, deleting, modifying node size and color for multiple DOM elements (i.e., multiple node areas) of the initial skeleton screen. This can be achieved by detecting multiple DOM elements of the initial skeleton screen. If a modification operation is detected for the node area corresponding to the DOM element, the regional position, size, color and other attribute information of the DOM element can be recalculated, and the display effect of the node area can be adjusted to obtain the target skeleton screen. The process of detecting DOM elements does not require the detection of each DOM element. Due to the characteristics of the DOM tree itself, the outer parent DOM element can be detected, and the detection of all elements of the DOM tree can be achieved.

[0170] In this way, developers can adjust the display effect of the initial skeleton screen directly on the page without writing any code to obtain the target skeleton screen.

[0171] If the developer triggers the selected node area in the skeleton screen generation page, the computer device can also display node modification controls, such as node copy button and node delete button. Among them, the node copy button is triggered, and the implementation logic of the computer device displaying the new node area can include: recording the mouse position when the mouse is right-clicked, changing the display attribute of the menu from invisible state to visible state, and locating it at the mouse click position. It should be noted that the DOM element corresponding to the newly copied node area should also detect the right-click event and mount the functions mounted by other DOM elements.

[0172] When the developer drags the node area to adjust the area position of the node area in the initial skeleton screen, the computer device can also display auxiliary markings between the node area and other node areas to assist the developer in aligning the node area with other node areas. The computer device can calculate the offset of the node area during the dragging process by: offset = mouse movement distance in the first direction - mouse initial position in the first direction - initial position of the outermost DOM container of the skeleton screen in the first direction. 22ffset–.

[0173] When implementing the marking function, the computer device can determine the moving direction of the node area and determine the distance calculation method according to the moving direction. The moving direction of the node area can be determined by calculating the difference between the position value when the mouse is pressed in the first direction and the movement amount of the mouse in the first direction. If the difference is greater than 0, it is dragging to the left, otherwise it is dragging to the right.

[0174] The calculation method for determining the distance corresponding to the moving direction can be as follows: if the moving direction information represents movement to the left, the first distance between the left border of the selected node area and the right border of other node areas, and the second distance between the left border of the selected node area and the left border of other node areas can be calculated.

[0175] If the moving direction information indicates moving to the right, a first distance between the right border of the selected node region and the right border of other node regions and a second distance between the left border of the selected node region and the left border of other node regions may be calculated.

[0176] If the moving direction information represents upward movement, a first distance between an upper boundary of the selected node region and lower boundaries of other node regions and a second distance between an upper boundary of the selected node region and upper boundaries of other node regions may be calculated.

[0177] If the moving direction information represents downward movement, a first distance between the lower boundary of the selected node region and the lower boundaries of other node regions and a second distance between the lower boundary of the selected node region and the upper boundaries of other node regions may be calculated.

[0178] The method of determining whether to display the marking line according to the distance information can be as follows:

[0179] If the first distance and the second distance of a certain other node region are both smaller than a preset threshold (eg, 0.5%), a marking line is displayed between the node region and the other node region.

[0180] When the developer triggers the selection of the node area, the computer device can also display multiple positioning dots at the border of the node area, so that the developer can drag the positioning dots to adjust the size of the node area. The computer device can determine and display 8 clickable positioning dots based on the width, height, absolute value of the distance from the upper border of the visual port, absolute value of the distance from the left border of the visual port and other position information of the selected node area. The computer device can detect the mouse release event for each positioning dot. When the mouse release event is triggered, the computer device executes the scaling function to determine the updated size of the selected node area.

[0181] The logic of this scaling function can be: record the mouse position, the existing width and height, then subtract or add the mouse movement distance, and redetermine the dot and the latest DOM width and height based on the current width and height and positioning.

[0182] The options in the motion effect selection control may include horizontal ripple motion effects, classic flashing motion effects, etc. After preliminary adjustments are made to the areas to be adjusted in the initial skeleton screen, animation effects can be added to each node area through the motion effect selection control to obtain the target skeleton screen.

[0183] 240. The computer device generates target skeleton screen data in response to a trigger operation on the code export control.

[0184] 250. The computer device packages the web page code, target skeleton screen data and preset display control function of the target web page through a module packager to obtain a target file, wherein the preset display control function is used to control the page to switch the target skeleton screen to the target web page when all relevant data of the target web page are received.

[0185] The computer device can package the project folder through a module packager (such as Webpack) to obtain a target file. The target file can include a preset display control function. Through the preset display control function, in the process of displaying the target skeleton screen and the target web page based on the target file, the computer device is controlled to switch the target skeleton screen to the target web page when all relevant data of the target web page is received, thereby optimizing the display effect.

[0186] Developers can trigger the export code button, and the skeleton screen generation script can generate the target skeleton screen data and save it in the folder where the local project is located.

[0187] The principle of saving the skeleton screen to the project can be as follows: 1) Get the node in the browser: Get the skeleton screen code in the page, initiate a request to the server's custom communication interface, add the DOM element class name that meets the generated skeleton screen node code to the empty array), use the conversion function to convert the data in the array into a string, and send the string to the background. 2) Determine the path to save the string: Get the page node and use the location of the document where the node is located to filter it, get the corresponding positioning identifier (such as the domain name) and return it to the background, and perform path splicing to obtain the path to be saved. 3) Server-side configuration: The server needs to complete the processing of the data returned by the front end and save it locally. In order to facilitate the future project operation, it can be automatically loaded and packaged, so the string is saved to the folder corresponding to each path, and then the string is loaded at the corresponding position in the template, so that the skeleton screen can be automatically loaded when packaging. The skeleton screen with animation effects defines the animation identifier when saving and passes it to the background. When clicking Save, the front end removes the corresponding class name according to the animation identifier, and the back end adds the corresponding animation style. In order to optimize the effect, use webpack to inject the skeleton screen and control the display timing: encapsulate a function to control the time when the skeleton screen ends display through this function, so it is necessary to call this function at the end of the rendering data request in each page to hide the skeleton screen and display the project page itself.

[0188] The embodiment of the present application can load a skeleton screen generation script to display the skeleton screen to be generated page, trigger the skeleton screen generation control of the skeleton screen to be generated page, and then display the skeleton screen generation page, thereby improving the developer's controllability over the display timing of the preview screen and the initial skeleton screen.

[0189] The skeleton screen generation page may include a preview screen of the target web page and its corresponding initial skeleton screen. The present application can respond to modification operations on the area to be adjusted in the initial skeleton screen (such as dragging to move the position, change the size, trigger controls to adjust properties, etc.), and obtain the target skeleton screen that meets the requirements conveniently and intuitively. In this process, the user can modify the initial skeleton screen with reference to the preview screen, which further improves the user experience. After obtaining the target skeleton screen, the code for the target skeleton screen can also be operated everywhere to automatically generate the skeleton screen code, eliminating the complicated process of developers writing skeleton screen code, running skeleton screen code to view the skeleton screen, and then adjusting the skeleton screen code according to the skeleton screen seen in the prior art. The present application is obviously simpler and more efficient.

[0190] The embodiment of the present application can also package the web page code, target skeleton screen data and preset display control function of the target web page through a module packager to obtain a target file. Through the preset display control function, in the process of displaying the target skeleton screen and the target web page based on the target file, the computer device can be controlled to switch the target skeleton screen to the target web page when all relevant data of the target web page are received, thereby realizing seamless display of the target skeleton screen and the target web page and optimizing the display effect.

[0191] In order to better implement the above method, the embodiment of the present application also provides a skeleton screen code generation device, such as Fig.14 As shown, the skeleton screen code generating device may include a display module 310, an adjustment module 320 and a generation module 330, specifically:

[0192] Display module 310, used to display a skeleton screen generation page, the skeleton screen generation page includes a preview screen of the target web page and an initial skeleton screen, the initial skeleton screen includes multiple areas;

[0193] An adjustment module 320, configured to adjust the display effect of the to-be-adjusted area of ​​the initial skeleton screen in response to a modification operation on at least one to-be-adjusted area, to obtain a target skeleton screen;

[0194] The generating module 330 is used to generate the skeleton screen code corresponding to the target skeleton screen in response to the code exporting operation for the target skeleton screen.

[0195] In some embodiments of the present application, the skeleton screen generation page further includes at least one skeleton screen adjustment control for the initial skeleton screen, and the adjustment module may be specifically used to:

[0196] In response to the operation of adjusting the control on the skeleton screen, the display effect of the area of ​​the initial skeleton screen is adjusted to obtain the target skeleton screen.

[0197] In some embodiments of the present application, the multiple areas include at least one background area and multiple node areas, the multiple node areas are arranged in the background area, the skeleton screen adjustment control includes an animation effect control, a node color control and a background color control, and the adjustment module can be specifically used for:

[0198] If an operation on the animation effect control is detected, add the target animation effect to the node area in the initial skeleton screen;

[0199] If an operation on the node color control is detected, the color value of the node area in the initial skeleton screen is adjusted to the target node color value;

[0200] If an operation on the background color control is detected, the color value of the background area in the initial skeleton screen is adjusted to the target background color value to obtain the target skeleton screen.

[0201] In some embodiments of the present application, the plurality of regions include at least one background region and a plurality of node regions, the skeleton screen generation page further includes at least one node attribute adjustment control for the node region, and the adjustment module may include a determination submodule and an adjustment submodule, wherein:

[0202] A determination submodule, configured to adjust a display effect of the selected node area if an area modification operation on the selected node area is detected when at least one selected node area is determined;

[0203] The adjustment submodule is used to adjust the display effect of the selected node area to obtain the target skeleton screen if an operation on the node attribute adjustment control is detected.

[0204] In some embodiments of the present application, the selected node area is a rectangular area, the node attribute adjustment control includes at least one size adjustment control, a color adjustment control, and a rounded corner adjustment control, and the adjustment submodule can be specifically used for:

[0205] If an operation on a size adjustment control is detected, the size of the selected node area is adjusted to the target size;

[0206] If an operation on the color adjustment control is detected, the color value of the selected node area is adjusted to the color value of the target area;

[0207] If an operation on the fillet adjustment control is detected, the fillet radius of the selected node area is adjusted to the target fillet radius to obtain the target skeleton screen.

[0208] In some embodiments of the present application, the determination submodule includes a determination unit, a position adjustment unit and a size update unit, wherein:

[0209] a determination unit, configured to determine the point positions of the plurality of positioning points based on the area position of the selected node area when at least one selected node area is determined, and to display the plurality of positioning points at the plurality of point positions of the selected node area respectively;

[0210] A position adjustment unit, configured to adjust the region position of the selected node region in the initial skeleton screen to the target region position if a drag operation on the selected node region is detected;

[0211] The size updating unit is used to determine the update size of the selected node area if a drag operation on the target positioning point of the selected node area is detected, and adjust the size of the selected node area to the update size.

[0212] In some embodiments of the present application, the position adjustment unit includes a determination subunit, a calculation subunit, a display subunit and an adjustment subunit, wherein:

[0213] A determination subunit, used to determine the moving direction information of the selected node area within the initial skeleton screen if a drag operation on the selected node area is detected;

[0214] A calculation subunit, used for calculating the distance between the selected node area and at least one other node area in the initial skeleton screen based on the moving direction information;

[0215] A display subunit is used to display an auxiliary graphic between the matching node area and the selected node area corresponding to the matching distance if there is a matching distance matching the preset distance threshold in at least one distance, and the auxiliary graphic is used to assist the object in determining the target area position of the selected node area;

[0216] The adjusting subunit is used to determine the target area position of the selected node area if it is detected that the dragging operation on the selected node area is finished, and adjust the position of the selected node area in the initial skeleton screen to the target area position.

[0217] In some embodiments of the present application, the dragging operation is an operation performed by manipulating the object with a mouse, and the adjusting subunit may be specifically used for:

[0218] Determine a moving distance of the mouse in a first moving direction and a starting trigger position of the mouse in the first moving direction during the drag operation;

[0219] Based on the moving distance, the starting trigger position and the parameter information of the initial skeleton screen, the target area position of the selected node area is determined.

[0220] In some embodiments of the present application, the skeleton screen code generation device further includes:

[0221] A modification control module, configured to display at least one node modification control for the selected node area in response to a trigger operation for the selected node area;

[0222] The area modification module is used to modify the selected node area in response to a trigger operation on the node modification control.

[0223] In some embodiments of the present application, the node modification control includes a node copy control and a node deletion control, and the region modification module can be specifically used for:

[0224] If a trigger operation for a node copy control is detected, at least two selected node areas are displayed in the initial skeleton screen;

[0225] If a trigger operation for a node deletion control is detected, the selected node area is canceled in the initial skeleton screen.

[0226] In some embodiments of the present application, the skeleton screen code generation device further includes:

[0227] The page to be generated module is used to load the skeleton screen generation script and display the skeleton screen to be generated page, which includes the skeleton screen generation control;

[0228] At this time, the display module is specifically used for:

[0229] In response to a trigger operation on a skeleton screen generation control, a skeleton screen generation page is displayed, and the skeleton screen generation page includes a preview screen of a target web page and an initial skeleton screen.

[0230] In some embodiments of the present application, the display module may include a construction submodule, a generation submodule and a display submodule, wherein:

[0231] A construction submodule, configured to construct an initial skeleton screen based on the webpage code of a target webpage in response to a trigger operation for generating a control for the skeleton screen;

[0232] A generation submodule is used to load web page code to generate a preview screen of the target web page;

[0233] The display submodule is used to display the skeleton screen generation page, which includes a preview screen and an initial skeleton screen.

[0234] In some embodiments of the present application, the building block may be specifically used for:

[0235] In response to a trigger operation for generating a skeleton screen control, the web page code in the target web page is traversed to determine the position information of each of the multiple visible nodes and the attribute information of each visible node; based on the position information and the attribute information, an initial skeleton screen is constructed, and the initial skeleton screen includes node areas of each of the multiple visible nodes.

[0236] In some embodiments of the present application, the generation module may be specifically used to:

[0237] In response to the code export operation for the target skeleton screen, node information of multiple visible nodes of the target skeleton screen is obtained; the multiple node information is converted into target skeleton screen data, and the saving path information is determined; according to the saving path information, the target skeleton screen data is written at a preset position of a preset template, thereby obtaining the skeleton screen code of the target skeleton screen.

[0238] In an embodiment of the present application, the display module 310 can display a skeleton screen generation page, which includes a preview screen of the target web page and an initial skeleton screen. The initial skeleton screen includes multiple areas. The adjustment module 320 can adjust the display effect of the area to be adjusted of the initial skeleton screen in response to a modification operation on at least one area to be adjusted to obtain a target skeleton screen. Finally, the generation module 330 can generate a skeleton screen code corresponding to the target skeleton screen in response to a code export operation on the target skeleton screen.

[0239] In the embodiment of the present application, a preview screen of a target page and an initial skeleton screen automatically generated based on the web page code of the target page can be displayed on the skeleton screen generation page. The initial skeleton screen may include multiple areas. In response to a modification operation on at least one area to be adjusted, the present application may adjust the display effect of the area to be adjusted in the initial skeleton screen to obtain the target skeleton screen. Specifically, the present application may respond to operations such as moving the area to be adjusted and modifying its attributes (such as size and color). This method is simple, easy, fast and efficient. The process of adjusting the initial skeleton screen is directly performed on the page, so the target skeleton screen can be obtained more intuitively. The skeleton screen generation page includes a preview screen and a skeleton screen of the target page, so that the user can adjust the skeleton screen directly by referring to the preview screen, thereby improving the user experience. After obtaining the target skeleton screen, the code export operation on the target skeleton screen may be responded to, and the skeleton screen code corresponding to the target skeleton screen may be automatically generated. Compared with the existing process that requires developers to write skeleton screen codes, view the skeleton screen through the skeleton screen codes, and adjust the skeleton screen codes again according to the skeleton screen, the present application generates the skeleton screen code corresponding to the skeleton screen when the skeleton screen that meets the requirements is first intuitively determined. The entire process of generating the skeleton screen code is obviously simpler and more efficient.

[0240] The present application also provides a computer device, such as Fig.15 As shown, it shows a schematic diagram of the structure of a computer device involved in an embodiment of the present application. The computer device may be a terminal or a server, etc. Specifically:

[0241] The computer device may include one or more processing core processors 401, one or more computer-readable storage media memories 402, a power supply 403, an input unit 404 and other components. Those skilled in the art will appreciate that Fig.15 The computer device structure shown in the figure does not constitute a limitation on the computer device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently. Among them:

[0242] The processor 401 is the control center of the computer device, and uses various interfaces and lines to connect various parts of the entire computer device. By running or executing computer programs and / or modules stored in the memory 402, and calling data stored in the memory 402, the processor 401 performs various functions of the computer device and processes data. Optionally, the processor 401 may include one or more processing cores; preferably, the processor 401 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and computer programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 401.

[0243] The memory 402 can be used to store computer programs and modules. The processor 401 executes various functional applications and data processing by running the computer programs and modules stored in the memory 402. The memory 402 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, a computer program required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 402 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 402 may also include a memory controller to provide the processor 401 with access to the memory 402.

[0244] The computer device also includes a power supply 403 for supplying power to various components. Preferably, the power supply 403 can be logically connected to the processor 401 through a power management system, so as to manage charging, discharging, and power consumption through the power management system. The power supply 403 can also include any components such as one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, and power status indicators.

[0245] The computer device may further include an input unit 404, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal input related to user settings and function control.

[0246] Although not shown, the computer device may also include a display unit, etc., which will not be described in detail here. Specifically in this embodiment, the processor 401 in the computer device will load the executable files corresponding to the processes of one or more computer programs into the memory 402 according to the following instructions, and the processor 401 will run the application program stored in the memory 402 to achieve various functions, as follows:

[0247] A skeleton screen generation page is displayed, the skeleton screen generation page includes a preview screen of a target web page and an initial skeleton screen, the initial skeleton screen includes multiple areas; in response to a modification operation on at least one area to be adjusted, the display effect of the area to be adjusted of the initial skeleton screen is adjusted to obtain a target skeleton screen; in response to a code export operation on the target skeleton screen, a skeleton screen code corresponding to the target skeleton screen is generated.

[0248] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0249] In the embodiment of the present application, a preview screen of a target page and an initial skeleton screen automatically generated based on the web page code of the target page can be displayed on the skeleton screen generation page. The initial skeleton screen may include multiple areas. In response to a modification operation on at least one area to be adjusted, the present application may adjust the display effect of the area to be adjusted in the initial skeleton screen to obtain the target skeleton screen. Specifically, the present application may respond to operations such as moving the area to be adjusted and modifying its attributes (such as size and color). This method is simple, easy, fast and efficient. The process of adjusting the initial skeleton screen is directly performed on the page, so the target skeleton screen can be obtained more intuitively. The skeleton screen generation page includes a preview screen and a skeleton screen of the target page, so that the user can adjust the skeleton screen directly by referring to the preview screen, thereby improving the user experience. After obtaining the target skeleton screen, the code export operation on the target skeleton screen may be responded to, and the skeleton screen code corresponding to the target skeleton screen may be automatically generated. Compared with the existing process that requires developers to write skeleton screen codes, view the skeleton screen through the skeleton screen codes, and adjust the skeleton screen codes again according to the skeleton screen, the present application generates the skeleton screen code corresponding to the skeleton screen when the skeleton screen that meets the requirements is first intuitively determined. The entire process of generating the skeleton screen code is obviously simpler and more efficient.

[0250] Those skilled in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by a computer program, or by controlling related hardware through a computer program. The computer program may be stored in a computer-readable storage medium and loaded and executed by a processor.

[0251] To this end, an embodiment of the present application provides a computer-readable storage medium, in which a computer program is stored, and the computer program can be loaded by a processor to execute the steps in any of the skeleton screen code generation methods provided in the embodiments of the present application. For example, the computer program can execute the following steps:

[0252] A skeleton screen generation page is displayed, the skeleton screen generation page includes a preview screen of a target web page and an initial skeleton screen, the initial skeleton screen includes multiple areas; in response to a modification operation on at least one area to be adjusted, the display effect of the area to be adjusted of the initial skeleton screen is adjusted to obtain a target skeleton screen; in response to a code export operation on the target skeleton screen, a skeleton screen code corresponding to the target skeleton screen is generated.

[0253] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0254] The computer-readable storage medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0255] Since the computer program stored in the computer-readable storage medium can execute the steps in any one of the skeleton screen code generation methods provided in the embodiments of the present application, the beneficial effects that can be achieved by any one of the skeleton screen code generation methods provided in the embodiments of the present application can be achieved. Please see the previous embodiments for details and will not be repeated here.

[0256] The embodiment of the present application also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. The processor of the computer device reads the computer program from the computer-readable storage medium, and the processor executes the computer program, so that the computer device executes the method provided in various optional implementations of the skeleton screen code generation method.

[0257] The above is a detailed introduction to a skeleton screen code generation method and device provided in an embodiment of the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for technical personnel in this field, based on the ideas of the present application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A skeleton screen code generation method, characterized in that: include: Displaying a skeleton screen generation page, the skeleton screen generation page including a preview screen of the target web page and an initial skeleton screen, the initial skeleton screen including multiple areas; In response to a modification operation on at least one area to be adjusted, adjusting the display effect of the area to be adjusted of the initial skeleton screen to obtain a target skeleton screen; In response to the code export operation for the target skeleton screen, a skeleton screen code corresponding to the target skeleton screen is generated.

2. The method according to claim 1, characterized in that The skeleton screen generation page also includes at least one skeleton screen adjustment control for the initial skeleton screen. In response to the modification operation on at least one area to be adjusted, adjusting the display effect of the area to be adjusted of the initial skeleton screen to obtain a target skeleton screen includes: In response to the operation of adjusting the control on the skeleton screen, the display effect of the area of ​​the initial skeleton screen is adjusted to obtain a target skeleton screen.

3. The method according to claim 2, characterized in that The multiple areas include at least one background area and multiple node areas, the multiple node areas are arranged in the background area, the skeleton screen adjustment control includes an animation effect control, a node color control and a background color control, The step of adjusting the display effect of the to-be-adjusted area of ​​the initial skeleton screen in response to the operation of the skeleton screen adjustment control to obtain a target skeleton screen includes: If an operation on the animation effect control is detected, adding a target animation effect to the node area in the initial skeleton screen; If an operation on the node color control is detected, adjusting the color value of the node area in the initial skeleton screen to the target node color value; If an operation on the background color control is detected, the color value of the background area in the initial skeleton screen is adjusted to a target background color value to obtain a target skeleton screen.

4. The method according to claim 1, characterized in that: The multiple regions include at least one background region and multiple node regions, and the skeleton screen generation page also includes at least one node attribute adjustment control for the node region. In response to the modification operation on at least one area to be adjusted, adjusting the display effect of the area to be adjusted of the initial skeleton screen to obtain a target skeleton screen includes: In the case of determining at least one selected node area, if an area modification operation for the selected node area is detected, adjusting a display effect of the selected node area; If an operation on the node attribute adjustment control is detected, the display effect of the selected node area is adjusted to obtain a target skeleton screen.

5. The method according to claim 4, characterized in that The selected node area is a rectangular area, and the node attribute adjustment control includes at least one size adjustment control, a color adjustment control, and a rounded corner adjustment control. If a trigger operation for adjusting the node attribute control is detected, adjusting the display effect of the selected node area to obtain a target skeleton screen includes: If an operation on the size adjustment control is detected, adjusting the size of the selected node area to a target size; If an operation on the color adjustment control is detected, the color value of the selected node area is adjusted to the target area color value; If an operation on the fillet adjustment control is detected, the fillet radius of the selected node area is adjusted to the target fillet radius to obtain a target skeleton screen.

6. The method according to claim 4, characterized in that In the case of determining at least one selected node region, in response to a region modification operation on the selected node region, adjusting a display effect of the selected node region includes: In the case of determining at least one selected node area, determining the point positions of a plurality of positioning points based on the area position of the selected node area, and displaying the plurality of positioning points at the plurality of point positions of the selected node area respectively; If a drag operation on the selected node area is detected, adjusting the area position of the selected node area in the initial skeleton screen to the target area position; If a drag operation on the target positioning point of the selected node area is detected, an updated size of the selected node area is determined, and the size of the selected node area is adjusted to the updated size.

7. The method according to claim 6, characterized in that If a drag operation on the selected node area is detected, adjusting the area position of the selected node area in the initial skeleton screen to the target area position includes: If a drag operation on the selected node area is detected, determining the moving direction information of the selected node area within the initial skeleton screen; Based on the moving direction information, calculating a distance between the selected node region and at least one other node region in the initial skeleton screen; If there is a matching distance matching the preset distance threshold in at least one of the distances, an auxiliary graphic is displayed between the matching node area corresponding to the matching distance and the selected node area, and the auxiliary graphic is used to assist the object in determining the target area position of the selected node area; If it is detected that the dragging operation on the selected node area is finished, the target area position of the selected node area is determined, and the position of the selected node area in the initial skeleton screen is adjusted to the target area position.

8. The method according to claim 7, characterized in that The dragging operation is an operation performed by manipulating the mouse to perform the operation. If it is detected that the dragging operation on the selected node area ends, determining the target area position of the selected node area includes: Determine a moving distance of the mouse in a first moving direction and a starting trigger position of the mouse in the first moving direction during the dragging operation; Based on the moving distance, the starting trigger position and the parameter information of the initial skeleton screen, a target area position of the selected node area is determined.

9. The method according to claim 4, characterized in that The method further comprises: In response to a trigger operation on the selected node area, displaying at least one node modification control on the selected node area; In response to a triggering operation on the node modification control, the selected node area is modified.

10. The method according to claim 9, wherein the node modification control comprises a node copy control and a node deletion control, and the modifying the selected node area in response to a trigger operation on the node modification control comprises: If a trigger operation for the node copy control is detected, at least two selected node areas are displayed in the initial skeleton screen; If a trigger operation for the node deletion control is detected, the selected node area is cancelled from display in the initial skeleton screen.

11. The method according to claim 1, characterized in that: The method further comprises: Loading a skeleton screen generation script and displaying a skeleton screen to be generated page, wherein the skeleton screen to be generated page includes a skeleton screen generation control; The display skeleton screen generation page includes: In response to a trigger operation on the skeleton screen generation control, a skeleton screen generation page is displayed, wherein the skeleton screen generation page includes a preview screen of a target web page and an initial skeleton screen.

12. The method according to claim 11, characterized in that The displaying the skeleton screen generation page in response to the triggering operation on the skeleton screen generation control includes: In response to a triggering operation for generating a control for the skeleton screen, constructing an initial skeleton screen based on a webpage code of a target webpage; Loading the webpage code to generate a preview screen of the target webpage; The skeleton screen generation page is displayed, wherein the skeleton screen generation page includes the preview screen and the initial skeleton screen.

13. The method according to claim 12, characterized in that The step of constructing an initial skeleton screen based on the webpage code of the target webpage in response to the triggering operation of generating the control for the skeleton screen includes: In response to a trigger operation for the skeleton screen generation control, traverse the webpage code in the target webpage to determine the position information of each of the plurality of visible nodes and the attribute information of each of the visible nodes; An initial skeleton screen is constructed based on the position information and the attribute information, wherein the initial skeleton screen includes node areas of the respective visible nodes.

14. The method according to claim 1, characterized in that The step of generating the skeleton screen code of the target skeleton screen in response to the code export operation for the target skeleton screen comprises: In response to the code export operation for the target skeleton screen, acquiring node information of a plurality of visible nodes of the target skeleton screen; Converting the plurality of node information into target skeleton screen data, and determining the saving path information; According to the saving path information, the target skeleton screen data is written into a preset position of a preset template, thereby obtaining a skeleton screen code of the target skeleton screen.

15. A skeleton screen code generating device, characterized in that: include: A display module, used to display a skeleton screen generation page, wherein the skeleton screen generation page includes a preview screen of a target web page and an initial skeleton screen, wherein the initial skeleton screen includes multiple areas; An adjustment module, configured to adjust the display effect of the to-be-adjusted area of ​​the initial skeleton screen in response to a modification operation on at least one to-be-adjusted area, to obtain a target skeleton screen; A generating module is used to generate a skeleton screen code corresponding to the target skeleton screen in response to a code export operation for the target skeleton screen.

Images