A method and apparatus for generating code for a skeleton screen

Abstract

The application discloses a method and device for generating code of a skeleton screen, wherein the method comprises the following steps: obtaining a service code used for front-end interface display, the service code comprising description information of a component; generating a ReactElement object corresponding to the component according to the description information of the component; and generating code of a skeleton screen corresponding to the service code according to the ReactElement object corresponding to the component. According to the technical scheme, a developer does not need to manually write skeleton screen code, thereby reducing development cost.

Description

Technical Field

[0001] This invention relates to the field of financial technology (Fintech), and more particularly to a method and apparatus for generating code for a skeleton screen. Background Technology

[0002] With the development of computer technology, more and more technologies are being applied in the financial field. The traditional financial industry is gradually transforming into financial technology (Fintech), and front-end development technology is no exception. However, due to the security and real-time requirements of the financial industry, higher requirements are also being placed on front-end development technology.

[0003] Skeleton screens refer to using simple graphics to roughly outline the basic shape of a page before it is fully rendered, giving users the illusion that the page is loading. Once the page is fully rendered, the skeleton screen is replaced with the actual page, thus reducing the time the page is blank and providing a better user experience.

[0004] In existing technologies, front-end developers write skeleton screen code that mirrors the actual page structure to render data before the front-end page renders the real data. Once the real data is obtained, the rendering of the real page is switched. However, this method requires developers to write a large amount of repetitive code. Each front-end page needs a corresponding set of skeleton screen code, and if the page structure changes, developers need to readjust the skeleton screen code for the changed page structure, resulting in high maintenance costs. Summary of the Invention

[0005] This invention provides a method and apparatus for generating skeleton screen code, eliminating the need for developers to manually write skeleton screen code and reducing development costs.

[0006] This invention provides a method for generating code for a skeleton screen, comprising:

[0007] Obtain the business code used for displaying the front-end interface; the business code includes the component's description information;

[0008] Based on the description information of the component, generate the corresponding ReactElement object for the component;

[0009] Based on the ReactElement object corresponding to the component, generate the skeleton screen code corresponding to the business code.

[0010] Optionally, the ReactElement object corresponding to the component is the JSON object corresponding to the component;

[0011] The step of generating a ReactElement object corresponding to the component based on the component's description information includes:

[0012] Call the component rendering interface to convert the component's description information into a corresponding JSON object;

[0013] If it is determined that the JSON object corresponding to the component includes the description information of the component's first-level sub-components, then the component rendering interface is called to convert the description information of the first-level sub-components into the JSON object corresponding to the first-level sub-components, and further determine whether the JSON object corresponding to the first-level sub-components includes the description information of the component's second-level sub-components, until the JSON objects corresponding to each sub-component of the component are determined.

[0014] Optionally, the component and its sub-components form a ReactElement component tree according to their hierarchical relationship;

[0015] The step of generating the skeleton screen corresponding to the business code based on the ReactElement object corresponding to the component includes:

[0016] Starting from the root node of the ReactElement component tree, traverse from top to bottom; for any component in the ReactElement component tree, perform the following operations:

[0017] Determine whether there is a custom attribute in the JSON object corresponding to the component. If so, generate the skeleton node corresponding to the component based on the custom attribute.

[0018] Otherwise, based on the component type in the JSON object corresponding to the component, after determining the skeleton node to be generated for the component, the skeleton node to be generated for the component is generated based on the component style in the JSON object corresponding to the component.

[0019] Based on the skeleton node corresponding to the component, generate the code for the skeleton screen corresponding to the component.

[0020] Optionally, generating the skeleton node corresponding to the component includes:

[0021] Obtain the generation function corresponding to the component, input the component style of the component into the generation function, and generate the skeleton node corresponding to the component; the generation function is used to indicate the generation rules of the skeleton node corresponding to the component.

[0022] Optionally, after generating the code for the skeleton screen corresponding to the business code, the method further includes:

[0023] Determine the annotation position in the business code; the annotation position is used to indicate the location of the code embedded in the skeleton screen within the business code;

[0024] The code of the skeleton screen is embedded in the marked position so that the skeleton screen can be rendered and displayed on the front-end interface before the business data corresponding to the business code is obtained.

[0025] Optionally, rendering and displaying the skeleton screen on the front-end interface includes:

[0026] The code for the skeleton screen is rendered and displayed on the front-end interface by calling the interface of the platform corresponding to the React library of the platform.

[0027] In the above technical solution, the business code used for front-end interface display is obtained, and the ReactElement object corresponding to the component is generated based on the component description information in the business code. Then, the skeleton screen code is generated based on the ReactElement object corresponding to the component. In this way, the skeleton screen code corresponding to the business code can be automatically extracted from the business code, eliminating the need for developers to manually write skeleton screen code based on the business code, reducing development costs. Moreover, when the page structure changes, skeleton screen code suitable for the changed page structure can be generated, which is beneficial for maintenance.

[0028] Accordingly, embodiments of the present invention also provide an apparatus for generating code for a skeleton screen, comprising:

[0029] Acquisition unit, processing unit;

[0030] The acquisition unit is used to acquire business code for display on the front-end interface; the business code includes component description information;

[0031] The processing unit is configured to generate a ReactElement object corresponding to the component based on the component's description information; and to generate the skeleton screen code corresponding to the business code based on the ReactElement object corresponding to the component.

[0032] Optionally, the ReactElement object corresponding to the component is the JSON object corresponding to the component;

[0033] The processing unit is specifically used for:

[0034] Call the component rendering interface to convert the component's description information into a corresponding JSON object;

[0035] If it is determined that the JSON object corresponding to the component includes the description information of the component's first-level sub-components, then the component rendering interface is called to convert the description information of the first-level sub-components into the JSON object corresponding to the first-level sub-components, and further determine whether the JSON object corresponding to the first-level sub-components includes the description information of the component's second-level sub-components, until the JSON objects corresponding to each sub-component of the component are determined.

[0036] Optionally, the component and its sub-components form a ReactElement component tree according to their hierarchical relationship;

[0037] The processing unit is specifically used for:

[0038] Starting from the root node of the ReactElement component tree, traverse from top to bottom; for any component in the ReactElement component tree, perform the following operations:

[0039] Determine whether there is a custom attribute in the JSON object corresponding to the component. If so, generate the skeleton node corresponding to the component based on the custom attribute.

[0040] Otherwise, based on the component type in the JSON object corresponding to the component, after determining the skeleton node to be generated for the component, the skeleton node to be generated for the component is generated based on the component style in the JSON object corresponding to the component.

[0041] Based on the skeleton node corresponding to the component, generate the code for the skeleton screen corresponding to the component.

[0042] Optionally, the processing unit is specifically used for:

[0043] Obtain the generation function corresponding to the component, input the component style of the component into the generation function, and generate the skeleton node corresponding to the component; the generation function is used to indicate the generation rules of the skeleton node corresponding to the component.

[0044] Optionally, the processing unit is further configured to:

[0045] After generating the skeleton screen code corresponding to the business code, the annotation position in the business code is determined; the annotation position is used to indicate the position of the skeleton screen code embedded in the business code;

[0046] The code of the skeleton screen is embedded in the marked position so that the skeleton screen can be rendered and displayed on the front-end interface before the business data corresponding to the business code is obtained.

[0047] Optionally, the processing unit is specifically used for:

[0048] The code for the skeleton screen is rendered and displayed on the front-end interface by calling the interface of the platform corresponding to the React library of the platform.

[0049] Accordingly, embodiments of the present invention also provide a computing device, including:

[0050] Memory, used to store program instructions;

[0051] The processor is used to call the program instructions stored in the memory and execute the above-described method for generating the skeleton screen according to the obtained program.

[0052] Accordingly, embodiments of the present invention also provide a computer-readable non-volatile storage medium, including computer-readable instructions, which, when read and executed by a computer, cause the computer to execute the above-described method for generating the skeleton screen. Attached Figure Description

[0053] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0054] Figure 1 A flowchart illustrating a method for generating skeleton screen code according to an embodiment of the present invention;

[0055] Figure 2 A schematic diagram of a ReactElement component tree provided in an embodiment of the present invention;

[0056] Figure 3 A flowchart illustrating another method for generating a skeleton component provided in an embodiment of the present invention;

[0057] Figure 4 A schematic flowchart of a display skeleton screen provided in an embodiment of the present invention;

[0058] Figure 5 This is a schematic diagram of a device for generating skeleton screen code according to an embodiment of the present invention. Detailed Implementation

[0059] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this invention, and not all of them. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0060] Figure 1 An exemplary embodiment of the present invention illustrates a method for generating a skeleton screen, which can be executed by an apparatus for generating a skeleton screen.

[0061] like Figure 1 As shown, the process specifically includes:

[0062] Step 101: Obtain the business code used for displaying the front-end interface.

[0063] Business logic code, also known as business component code, is used for rendering and displaying on the front-end page. It includes descriptive information about the component, such as its type and style. This component can be a container component, containing first-level child components, second-level child components, and so on, up to a single component. Alternatively, it can be a single component, such as a text component, image component, or button component.

[0064] When obtaining business code, Babel can be used to obtain the abstract syntax tree of the corresponding JSX tag syntax code. By parsing the abstract syntax tree, each JSX tag can be converted into a form that is called through React.createElement. The attributes on the JSX tag can be parsed into the attribute parameters of React.createElement, and the child tags of the JSX tag can be parsed into the child component parameters. In this way, you can obtain the JavaScript code that can run in the JavaScript runtime environment.

[0065] Step 102: Generate the ReactElement object corresponding to the component based on the component's description information.

[0066] In this embodiment of the invention, a custom React renderer is used to render React components into JSON objects without relying on the DOM (Document Object Model) or the native mobile environment. Specifically, the component rendering interface provided by the React renderer is called to convert the component's description information into a corresponding JSON object. The JSON object corresponding to the component can include the component type and component style. If the component has child components, the JSON object corresponding to the component can also include the child component's description information (equivalent to the child component content). That is, after converting the component's description information into the corresponding JSON object, the following steps are performed: if the JSON object corresponding to the component contains the description information of the component's first-level child components, the component rendering interface is called again to convert the description information of the first-level child components into a corresponding JSON object, and it is further determined whether the JSON object corresponding to the first-level child components includes the description information of the component's second-level child components, until the JSON objects corresponding to each child component of the component are determined.

[0067] Step 103: Generate the skeleton screen code corresponding to the business code based on the ReactElement object corresponding to the component.

[0068] Here, after parsing out each sub-component based on the component's description information, the component and its sub-components can be grouped into a ReactElement component tree according to their hierarchical relationship. In other words, the ReactElement component tree includes multiple components with hierarchical relationships.

[0069] In this embodiment of the invention, a ReactElement component tree corresponding to the component is generated based on the component type, component style, and sub-component content description information. This ReactElement component tree is a description and mapping of the actual rendered interface component. It can be understood as the virtual DOM corresponding to the component; that is, based on a custom React renderer, the component's description information is converted into a tree-structured JSON object containing information such as component type, component style, and sub-component content. For example, the ReactElement component tree can be as follows: Figure 2 As shown.

[0070] You can start from the root node of the ReactElement component tree and traverse it from top to bottom; and for any component in the ReactElement component tree, perform the following operations:

[0071] Determine whether there are custom attributes in the JSON object corresponding to the component. If so, generate the skeleton node corresponding to the component based on the custom attributes.

[0072] Otherwise, based on the component type in the JSON object corresponding to the component, after determining the skeleton node to be generated for the component, the skeleton node to be generated for the component is generated based on the component style in the JSON object corresponding to the component.

[0073] Generate the skeleton screen code corresponding to the component based on the skeleton node corresponding to the component.

[0074] Here, components or sub-components in the ReactElement component tree are collectively referred to as components. The JSON object corresponding to each component can include not only the component style, component type, and description information of the sub-components, but also the component's custom properties. If it is determined that a component includes custom properties, then it can be determined that the component is a component that needs to generate skeleton nodes. Custom properties can include custom width, height, color, shape, layout, etc. of the component.

[0075] Of course, if the JSON object corresponding to the component does not include custom attributes, it is necessary to determine whether the component needs to generate a skeleton node. The specific principle for determining this is to determine the component type in the JSON object corresponding to the component. For example, if the component type is an image component, text component, button component, etc., then it can be determined that the component needs to generate a skeleton node. Then, the component style in the JSON object corresponding to the component can be read. The component style here can also include the component's width, height, color, shape, layout, etc., and then the skeleton node can be generated based on the component attributes.

[0076] It should be noted that the skeleton node here can also be understood as a ReactElement object. Based on this ReactElement object, the corresponding skeleton code can be generated, and then the skeleton code of all skeleton nodes can be combined into skeleton screen code.

[0077] In this embodiment of the invention, the component generation process can also be predefined. By calling the configuration interface of the component generation process, the component generation function can be configured in the corresponding configuration file. This generation function is used to indicate the generation rules for the skeleton nodes corresponding to the component, such as rules for animation generation, rules for static content generation, etc. When generating the skeleton nodes corresponding to the component based on the component's component style, the generation function corresponding to the component can be obtained, and the component's component style can be input into the generation function to generate the skeleton nodes corresponding to the component according to the preset generation rules.

[0078] like Figure 3 This is a flowchart illustrating a method for generating skeleton nodes according to an embodiment of the present invention. The process specifically includes:

[0079] Step 301: Babel translates JSX into JavaScript;

[0080] Step 302: Render the component into a corresponding JSON object using a custom React renderer;

[0081] Execute steps 303 to 308 for each component in the ReactElement component tree.

[0082] Step 303: Determine whether the component is a custom component; if yes, proceed to step 304; otherwise, proceed to step 305.

[0083] Step 304: Generate color block nodes based on the component style of the custom component;

[0084] Step 305: Determine whether the component generates a skeleton node. If so, proceed to step 306; otherwise, do nothing.

[0085] Step 306: Reuse the component styles in the business code to generate color block nodes;

[0086] Step 307: Call the component's custom generation function;

[0087] Step 308: Generate skeleton nodes.

[0088] After assembling multiple skeleton nodes into a skeleton screen, the skeleton screen code needs to be embedded into the business logic. Specifically, the annotation position in the business logic needs to be determined. This annotation position is used to indicate the location where the skeleton screen code is embedded in the business logic. Depending on the business scenario, when the page requests data, the page state can be defined. In the logic of the page loading state, the comment { / *$skeleton* / } can be used to mark the location. After determining the annotation position in the business logic, the skeleton screen code is embedded into that annotation position.

[0089] When business logic is rendered and displayed on the front-end interface, it can be like this: Figure 4 The process involves determining whether actual business data has been obtained. If so, the actual page data is rendered and displayed on the front-end page; otherwise, a skeleton screen is rendered and displayed on the front-end page based on the skeleton screen's code. In other words, the skeleton screen's code is used to render and display the skeleton screen on the front-end interface before the corresponding business data is obtained. This method allows the skeleton screen to be displayed on the front-end interface even before the actual business data is available, thus improving the user experience.

[0090] The skeleton screen can be rendered and displayed on the front-end interface by calling the corresponding API of the front-end interface platform, thereby achieving cross-platform display of the same skeleton screen code. Specifically, it can be achieved by using methods provided by the browser's ReactDOM library to call the browser API to render the skeleton screen code into a real DOM and display it on the browser's display interface; another implementation method is to use methods provided by the app's ReactNative library to call the API of the mobile terminal (such as Android platform, iOS platform) to render the skeleton screen code into a real native component and display it on the app's display interface. Of course, the embodiments of the present invention can also be applied to the rendering and display of front-end interfaces on other platforms.

[0091] In the above embodiments, business code used for front-end interface display is obtained, ReactElement objects corresponding to the components are generated based on the component description information in the business code, and skeleton screen code is generated based on the ReactElement objects corresponding to the components. In this way, skeleton screen code corresponding to the business code can be automatically extracted from the business code, eliminating the need for developers to manually write skeleton screen code based on the business code, reducing development costs. Furthermore, when the page structure changes, skeleton screen code suitable for the changed page structure can be generated, which is beneficial for maintenance.

[0092] Based on the same inventive concept Figure 5 An exemplary embodiment of the present invention illustrates the structure of an apparatus for generating a skeleton screen, which can execute the process of a method for generating a skeleton screen.

[0093] The device includes:

[0094] Acquisition unit 501, processing unit 502;

[0095] The acquisition unit 501 is used to acquire business code for display on the front-end interface; the business code includes component description information;

[0096] The processing unit 502 is configured to generate a ReactElement object corresponding to the component based on the component's description information; and to generate the skeleton screen code corresponding to the business code based on the ReactElement object corresponding to the component.

[0097] Optionally, the ReactElement object corresponding to the component is the JSON object corresponding to the component;

[0098] The processing unit 502 is specifically used for:

[0099] Call the component rendering interface to convert the component's description information into a corresponding JSON object;

[0100] If it is determined that the JSON object corresponding to the component includes the description information of the component's first-level sub-components, then the component rendering interface is called to convert the description information of the first-level sub-components into the JSON object corresponding to the first-level sub-components, and further determine whether the JSON object corresponding to the first-level sub-components includes the description information of the component's second-level sub-components, until the JSON objects corresponding to each sub-component of the component are determined.

[0101] Optionally, the component and its sub-components form a ReactElement component tree according to their hierarchical relationship;

[0102] The processing unit 502 is specifically used for:

[0103] Starting from the root node of the ReactElement component tree, traverse from top to bottom; for any component in the ReactElement component tree, perform the following operations:

[0104] Determine whether there is a custom attribute in the JSON object corresponding to the component. If so, generate the skeleton node corresponding to the component based on the custom attribute.

[0105] Otherwise, based on the component type in the JSON object corresponding to the component, after determining the skeleton node to be generated for the component, the skeleton node to be generated for the component is generated based on the component style in the JSON object corresponding to the component.

[0106] Based on the skeleton node corresponding to the component, generate the code for the skeleton screen corresponding to the component.

[0107] Optionally, the processing unit 502 is specifically used for:

[0108] Obtain the generation function corresponding to the component, input the component style of the component into the generation function, and generate the skeleton node corresponding to the component; the generation function is used to indicate the generation rules of the skeleton node corresponding to the component.

[0109] Optionally, the processing unit 502 is further configured to:

[0110] After generating the skeleton screen code corresponding to the business code, the annotation position in the business code is determined; the annotation position is used to indicate the position of the skeleton screen code embedded in the business code;

[0111] The code of the skeleton screen is embedded in the marked position so that the skeleton screen can be rendered and displayed on the front-end interface before the business data corresponding to the business code is obtained.

[0112] Optionally, the processing unit 502 is specifically used for:

[0113] The code for the skeleton screen is rendered and displayed on the front-end interface by calling the interface of the platform corresponding to the React library of the platform.

[0114] Based on the same inventive concept, embodiments of the present invention also provide a computing device, including:

[0115] Memory, used to store program instructions;

[0116] The processor is used to call the program instructions stored in the memory and execute the above-described method for generating the skeleton screen according to the obtained program.

[0117] Based on the same inventive concept, embodiments of the present invention also provide a computer-readable non-volatile storage medium, including computer-readable instructions, which, when read and executed by a computer, cause the computer to perform the above-described method for generating a skeleton screen.

[0118] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0119] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0120] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0121] Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including both the preferred embodiments and all changes and modifications falling within the scope of the invention.

[0122] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A method for generating code for a skeleton screen, characterized in that, include: Obtain the business code used for displaying the front-end interface; the business code includes the component's description information; Call the component rendering interface provided by the component renderer to convert the description information of the component into a JSON object corresponding to the component. The JSON object corresponding to the component includes the component type and component style of the component. If it is determined that the JSON object corresponding to the component includes the description information of the first-level sub-component of the component, then the component rendering interface is called to convert the description information of the first-level sub-component into the JSON object corresponding to the first-level sub-component, and further determine whether the JSON object corresponding to the first-level sub-component includes the description information of the second-level sub-component of the component, until the JSON objects corresponding to each sub-component of the component are determined. The component and its sub-components form a ReactElement component tree according to their hierarchical relationship; Starting from the root node of the ReactElement component tree, traverse from top to bottom; for any component in the ReactElement component tree, perform the following operations: Determine whether there is a custom attribute in the JSON object corresponding to the component. If so, generate the skeleton node corresponding to the component based on the custom attribute. Otherwise, based on the component type in the JSON object corresponding to the component, after determining the skeleton node to be generated for the component, the skeleton node to be generated for the component is generated based on the component style in the JSON object corresponding to the component. Based on the skeleton node corresponding to the component, generate the code for the skeleton screen corresponding to the component.

2. The method as described in claim 1, characterized in that, The generation of the skeleton node corresponding to the component includes: Obtain the generation function corresponding to the component, input the component style of the component into the generation function, and generate the skeleton node corresponding to the component; the generation function is used to indicate the generation rules of the skeleton node corresponding to the component.

3. The method as described in claim 1 or 2, characterized in that, After generating the code for the skeleton screen corresponding to the business code, the code also includes: Determine the annotation position in the business code; the annotation position is used to indicate the location of the code embedded in the skeleton screen within the business code; The code of the skeleton screen is embedded in the marked position so that the skeleton screen can be rendered and displayed on the front-end interface before the business data corresponding to the business code is obtained.

4. The method as described in claim 3, characterized in that, The step of rendering and displaying the skeleton screen on the front-end interface includes: The code for the skeleton screen is rendered and displayed on the front-end interface by calling the interface of the platform corresponding to the React library of the platform.

5. An apparatus for generating code for a skeleton screen, characterized in that, include: Acquisition unit, processing unit; The acquisition unit is used to acquire business code for display on the front-end interface; The business code includes the component's description information; The processing unit is used to call the component rendering interface provided by the component renderer to convert the description information of the component into a JSON object corresponding to the component. The JSON object corresponding to the component includes the component type and component style of the component. If it is determined that the JSON object corresponding to the component includes the description information of the first-level sub-component of the component, then the component rendering interface is called to convert the description information of the first-level sub-component into the JSON object corresponding to the first-level sub-component, and further determine whether the JSON object corresponding to the first-level sub-component includes the description information of the second-level sub-component of the component, until the JSON objects corresponding to each sub-component of the component are determined. The component and its sub-components form a ReactElement component tree according to their hierarchical relationship; Starting from the root node of the ReactElement component tree, traverse from top to bottom; for any component in the ReactElement component tree, perform the following operations: Determine whether there is a custom attribute in the JSON object corresponding to the component. If so, generate the skeleton node corresponding to the component based on the custom attribute. Otherwise, based on the component type in the JSON object corresponding to the component, after determining the skeleton node to be generated for the component, the skeleton node to be generated for the component is generated based on the component style in the JSON object corresponding to the component. Based on the skeleton node corresponding to the component, generate the code for the skeleton screen corresponding to the component.

6. A computing device, characterized in that, include: Memory, used to store program instructions; A processor is configured to invoke program instructions stored in the memory and execute the method according to any one of claims 1 to 4.

7. A computer-readable non-volatile storage medium, characterized in that, Includes computer-readable instructions that, when read and executed by a computer, cause the computer to perform the method as described in any one of claims 1 to 4.

Images