Component generation method and device based on webpage structure unit, equipment and medium

Abstract

The invention relates to the technical field of H5 webpage development, in particular to a webpage structure unit-based component generation method and device, equipment and a medium. The method comprises the steps of obtaining a component design requirement; selecting a plurality of structural unit IDs based on the component design requirement, and determining a plurality of target structural units from a preset mapping table based on the plurality of structural unit IDs; based on the specific sequence, the multiple target structure units are combined, and a target component meeting the component design requirement is obtained. Therefore, different components can be obtained by splitting the component into a plurality of structural units and dynamically combining or updating the structural units, the problems that static and coupled components generated in the prior art are single in application scene and lack of flexible reuse are solved, and the utilization rate of the components is increased.

Description

Technical Field

[0001] The present application relates to the technical field of H5 web page development, and in particular to a component generation method, device, equipment and medium based on a web page structure unit. Background Art

[0002] Existing low-code platforms generate components, use canvas tools to drag and drop components to complete combination and layout, and then perform front-end rendering to obtain web pages.

[0003] However, the components generated by this method are static and coupled. The web pages generated by static and coupled components can only be applied in one scenario. Moreover, the data interaction and visual interaction within the components are also fixed. There is a lack of flexible reuse and it cannot meet the needs of different scenarios on the same page. This problem needs to be solved urgently. Summary of the invention

[0004] The present application provides a component generation method, device, equipment and medium based on a web page structure unit to solve the problem that static and coupled components generated by the prior art have a single application scenario and lack flexible reuse, thereby improving the utilization rate of components.

[0005] To achieve the above-mentioned purpose, the first embodiment of the present application proposes a component generation method based on a web page structure unit, comprising the following steps:

[0006] Obtain component design requirements;

[0007] Based on the component design requirements, multiple structural unit IDs are selected, and multiple target structural units are determined from a preset mapping table based on the multiple structural unit IDs;

[0008] Based on a specific order, the multiple target structural units are combined to generate a target component that meets the component design requirements.

[0009] According to one embodiment of the present application, before determining the multiple target structural units from the preset mapping table based on the multiple structural unit IDs, it also includes:

[0010] Get the style structure data of the component;

[0011] Analyze the style structure data according to preset style rules to generate multiple structure units;

[0012] A corresponding structural unit ID is generated for each structural unit, and the preset mapping table is generated based on each structural unit and the corresponding structural unit ID.

[0013] According to an embodiment of the present application, when the plurality of target structural units are combined based on the specific order to generate the target component that meets the component design requirement, it further includes:

[0014] When at least one structural unit changes, the original mapping relationship between the changed structural unit and the current structural unit ID is released;

[0015] A mapping relationship between the new structural unit and the current structural unit ID is established, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

[0016] According to an embodiment of the present application, when the plurality of target structural units are combined based on the specific order to obtain the target component that meets the component design requirement, it further includes:

[0017] When a new structural unit ID appears, determining a new structural unit corresponding to the new structural unit ID;

[0018] Based on the mapping relationship between the new structural unit ID and the corresponding new structural unit, the preset mapping table is updated, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

[0019] According to one embodiment of the present application, after generating the target component that meets the component design requirement, the method further includes:

[0020] The target component is visually displayed.

[0021] According to the component generation method based on web page structural units proposed in the embodiment of the present application, based on the component design requirements, multiple structural unit IDs can be selected, and multiple target structural units can be determined from a preset mapping table based on the multiple structural unit IDs; based on a specific order, multiple target structural units can be combined to obtain a target component that meets the component design requirements. Thus, by splitting the component into multiple structural units, dynamically combining or updating the structural units, different components can be obtained, which solves the problem of single application scenarios and lack of flexible reuse of static and coupled components generated by the prior art, and improves the utilization rate of components.

[0022] To achieve the above-mentioned purpose, the second embodiment of the present application proposes a component generation device based on a webpage structure unit, comprising:

[0023] Acquisition module, used to obtain component design requirements;

[0024] A determination module, configured to select a plurality of structural unit IDs based on the component design requirements, and determine a plurality of target structural units from a preset mapping table based on the plurality of structural unit IDs;

[0025] A generation module is used to combine the multiple target structural units based on a specific order to generate a target component that meets the component design requirements.

[0026] According to an embodiment of the present application, before determining the multiple target structural units from the preset mapping table based on the multiple structural unit IDs, the determination module is specifically configured to:

[0027] Get the style structure data of the component;

[0028] Analyze the style structure data according to preset style rules to generate multiple structure units;

[0029] A corresponding structural unit ID is generated for each structural unit, and a preset mapping table is generated based on each structural unit and the corresponding structural unit ID.

[0030] According to an embodiment of the present application, when the multiple target structural units are combined based on the specific order to generate the target component that meets the component design requirements, the generating module is further used to:

[0031] When at least one structural unit changes, the original mapping relationship between the changed structural unit and the current structural unit ID is released;

[0032] A mapping relationship between the new structural unit and the current structural unit ID is established, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

[0033] According to an embodiment of the present application, when the multiple target structural units are combined based on the specific order to generate the target component that meets the component design requirements, the generating module is further used to:

[0034] When a new structural unit ID appears, determining a new structural unit corresponding to the new structural unit ID;

[0035] Based on the mapping relationship between the new structural unit ID and the corresponding new structural unit, the preset mapping table is updated, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

[0036] According to an embodiment of the present application, after generating the target component that meets the component design requirement, the generating module is further used to:

[0037] The target component is visually displayed.

[0038] According to the component generation device based on web page structural units proposed in the embodiment of the present application, multiple structural unit IDs can be selected based on component design requirements, and multiple target structural units can be determined from a preset mapping table based on multiple structural unit IDs; based on a specific order, multiple target structural units can be combined to obtain a target component that meets the component design requirements. Therefore, by splitting the component into multiple structural units, dynamically combining or updating the structural units, different components can be obtained, which solves the problem of single application scenarios and lack of flexible reuse of static and coupled components generated by the prior art, and improves the utilization rate of components.

[0039] To achieve the above-mentioned objectives, the third aspect of the present application proposes an electronic device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the component generation method based on the web page structure unit as described in the above-mentioned embodiment.

[0040] To achieve the above objectives, the fourth aspect of the present application proposes a computer-readable storage medium on which a computer program is stored, and the program is executed by a processor to implement the component generation method based on the web page structure unit as described in the above embodiment.

[0041] Additional aspects and advantages of the present application will be given in part in the description below, and in part will become apparent from the description below, or will be learned through the practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the following description of the embodiments in conjunction with the accompanying drawings, in which:

[0043] Figure 1 A flowchart of a component generation method based on a web page structure unit provided according to an embodiment of the present application;

[0044] Figure 2 A schematic diagram of a component generation process based on a web page structure unit according to an embodiment of the present application;

[0045] Figure 3 A flowchart of another component generation method based on a web page structure unit provided according to an embodiment of the present application;

[0046] Figure 4 A block diagram of a component generation device based on a webpage structure unit provided according to an embodiment of the present application;

[0047] Figure 5It is a schematic diagram of the structure of an electronic device provided according to an embodiment of the present application. DETAILED DESCRIPTION

[0048] The embodiments of the present application are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present application, and should not be construed as limiting the present application.

[0049] The following describes a component generation method, apparatus, device and medium based on a web page structure unit according to an embodiment of the present application with reference to the accompanying drawings.

[0050] Figure 1 It is a flowchart of a component generation method based on a web page structure unit according to an embodiment of the present application.

[0051] For example, Figure 1 As shown, the component generation method based on the webpage structure unit includes the following steps:

[0052] In step S101, component design requirements are obtained.

[0053] It can be understood that component design requirements refer to the designer's specific requirements and expected goals for the appearance, functionality, etc. of web page components.

[0054] In step S102, based on the component design requirements, a plurality of structural unit IDs are selected, and a plurality of target structural units are determined from a preset mapping table based on the plurality of structural unit IDs.

[0055] That is, after clarifying the component design requirements, one or more web page structural unit identifiers (ie structural unit IDs) can be selected according to the component design requirements, and structural units corresponding to these IDs can be found from a preset mapping table based on the selected structural unit IDs.

[0056] For ease of understanding, the following describes in detail how to obtain the preset mapping table.

[0057] As a possible implementation method, in some embodiments, before determining multiple target structural units from a preset mapping table based on multiple structural unit IDs, it also includes: obtaining style structure data of the component; analyzing the style structure data according to preset style rules to generate multiple structural units; generating a corresponding structural unit ID for each structural unit, and generating a preset mapping table based on each structural unit and the corresponding structural unit ID.

[0058] The component style structure data refers to the component appearance and layout information, including but not limited to color, font, margin, alignment and other related visual attributes.

[0059] Specifically, if Figure 2 As shown, in the dynamic generation system of web page structural units, the style structure data of the components is saved. The system can parse the style structure data of the components according to the preset style rules to generate multiple independent structural units. These structural units are the basic building blocks of web pages. They can be combined and nested to form complex page layouts. In order to facilitate the visual management of these structural units, the system can assign a unique structural unit ID to each structural unit. This ID is the unique identifier of each structural unit, so that each structural unit can be clearly identified and referenced. Since each structural unit corresponds to a structural unit ID, a clear mapping relationship is established between the two. This mapping relationship enables the system to manage and track the status and properties of each structural unit. In this way, the system can generate a preset mapping table, which records in detail the connection between each structural unit ID and its corresponding structural unit. This mapping table not only helps to quickly locate and modify specific structural units, but also facilitates the expansion and maintenance of the system. Through this mapping mechanism, developers can design and develop web pages more efficiently, and also enable end users to enjoy a richer and more dynamic web page experience.

[0060] In step S103, multiple target structural units are combined based on a specific order to generate a target component that meets the component design requirements.

[0061] The specific order refers to the order rules followed when combining structural units, which may be based on design logic or user experience considerations.

[0062] That is to say, Figure 2 As shown, after the required structural units are determined, these structural units can be combined in a certain order to form a complete component (ie, the target component) that meets the initial component design requirements.

[0063] Optionally, in some embodiments, when combining multiple target structural units based on a specific order to generate a target component that meets the component design requirements, it also includes: when at least one structural unit changes, releasing the original mapping relationship between the changed structural unit and the current structural unit ID; establishing a mapping relationship between the new structural unit and the current structural unit ID, and updating all components that have a combination relationship with the current structural unit ID to obtain an updated target component.

[0064] Specifically, when a structural unit in the system changes, the mapping relationship between the original structural unit ID and the structural unit will be released by the system. Subsequently, the structural unit ID will be reallocated to a new structural unit. Such a change will cause all components associated with this structural unit ID to need to be updated accordingly. In other words, the system will automatically detect all components that have a combination relationship with the structural unit ID and perform corresponding update operations on these components to ensure that each component in the system can correctly interact with the new structural unit, thereby maintaining the overall consistency and stability of the system. In this way, the system can flexibly respond to changes in structural units, ensure the collaborative work between various components, and improve the reliability and efficiency of the system.

[0065] Optionally, in some embodiments, when combining multiple target structural units based on a specific order to generate a target component that meets the component design requirements, it also includes: when a new structural unit ID appears, determining a new structural unit corresponding to the new structural unit ID; based on the mapping relationship between the new structural unit ID and the corresponding new structural unit, updating a preset mapping table, and updating all components that have a combination relationship with the current structural unit ID to obtain an updated target component.

[0066] Specifically, when the system detects the appearance of a new structural unit ID, it means that the system has successfully generated a new structural unit. At this time, the system will automatically establish a new mapping relationship to closely associate the new unit ID with the new structural unit. Then, the system will further analyze all components that have a combination relationship with this new structural unit, and make necessary updates or recombination of these components, that is, either make necessary updates and adjustments to the existing components, or combine these components to generate new target components to meet the needs of other specific scenarios. This process ensures the flexibility and scalability of the system, allowing the system to continuously adapt to the introduction of new structural units, thereby better serving various complex application scenarios.

[0067] Therefore, by using the structural unit ID to control the structural unit, the component requirements of different application scenarios on the same page can be met.

[0068] In addition, when the combination order of the result units changes again, the system will re-obtain the order of the new mapping relationship based on the mapping relationship between the structural unit ID and the structural unit. In this process, the system will update all components that have a combination relationship with the structural unit ID. It should be noted that although the components will be updated according to the new mapping relationship, the structural unit itself will not be updated. This is because the structural unit is the minimum unit that constitutes the component, and its stability is the basis for ensuring the normal operation of the entire system.

[0069] Furthermore, in some embodiments, after generating a target component that meets the component design requirements, the method further includes: visually displaying the target component.

[0070] That is, in the design process, after creating a target component that meets specific requirements, the next step is to present the target component in a visual way. This means that the designer will convert the designed component into a graphical interface so that it can be intuitively seen and understood by the user, so that it can be further evaluated and used.

[0071] To facilitate those skilled in the art to further understand the component generation method based on the webpage structure unit proposed in the embodiment of the present application, the following is a combined description of the component generation method based on the webpage structure unit. Figure 3 For further elaboration.

[0072] like Figure 3 As shown, the component generation method based on the webpage structure unit may include the following steps:

[0073] Step S301, in the web page structure unit generation system, save the style structure data of the component.

[0074] Step S302: Analyze the style structure data to generate independent structure units.

[0075] Step S303: assign a unique unit ID to each structural unit.

[0076] Step S304: Establish a mapping relationship between each unit ID and the structural unit.

[0077] Step S305 , visualizing the unit ID of each structural unit, and the user selects the unit ID.

[0078] Step S306: Acquire the mapping relationship of the structural units according to different unit IDs.

[0079] Step S307, obtaining the order of the mapping relationship, combining the structural units, and generating components that meet the scenario.

[0080] Step S308a, (when the combination order changes) obtain a new mapping relationship order according to the mapping relationship between the unit ID and the structural unit.

[0081] Step S309a: update all components that have a combination relationship with the structural unit, and the structural unit itself is not updated.

[0082] Step S308b, (when the structural unit sends a change) the mapping relationship between the original unit ID and the structural unit is cancelled, and the mapping relationship between the unit ID and the new structural unit is re-established.

[0083] Step S309b: update all components that have a combination relationship with the structural unit.

[0084] Step S308c, (when generating a new unit ID) a new mapping relationship is established between the new unit ID and the new structural unit.

[0085] Step S309c: update or combine all components that have a combination relationship with the structural unit into target components that meet other scenarios.

[0086] According to the component generation method based on web page structural units proposed in the embodiment of the present application, multiple structural unit IDs can be selected based on component design requirements, and multiple target structural units can be selected from a preset mapping table based on the multiple structural unit IDs; based on a specific order, multiple target structural units can be combined to obtain a target component that meets the component design requirements. Therefore, by splitting the component into multiple structural units, dynamically combining or updating the structural units, different components can be obtained, which solves the problem of single application scenarios and lack of flexible reuse of static and coupled components generated by the prior art, and improves the utilization rate of components.

[0087] Next, a component generation device based on a web page structure unit proposed in an embodiment of the present application is described with reference to the accompanying drawings.

[0088] Figure 4 It is a block diagram of a component generation device based on a web page structure unit according to an embodiment of the present application.

[0089] like Figure 4 As shown, the component generation device 10 based on the webpage structure unit includes: an acquisition module 100 , a determination module 200 and a generation module 300 .

[0090] Wherein, the acquisition module 100 is used to acquire component design requirements;

[0091] A determination module 200 is used to select a plurality of structural unit IDs based on component design requirements, and determine a plurality of target structural units from a preset mapping table based on the plurality of structural unit IDs;

[0092] The generation module 300 is used to combine multiple target structural units based on a specific order to generate a target component that meets the component design requirements.

[0093] According to an embodiment of the present application, before determining multiple target structural units from a preset mapping table based on multiple structural unit IDs, the determination module 200 is specifically used to:

[0094] Get the style structure data of the component;

[0095] Analyze the style structure data according to preset style rules to generate multiple structure units;

[0096] A corresponding structural unit ID is generated for each structural unit, and a preset mapping table is generated based on each structural unit and the corresponding structural unit ID.

[0097] According to an embodiment of the present application, when a plurality of target structural units are combined based on a specific order to generate a target component that meets the component design requirements, the generating module 300 is further used to:

[0098] When at least one structural unit changes, the original mapping relationship between the changed structural unit and the current structural unit ID is released;

[0099] A mapping relationship between the new structural unit and the current structural unit ID is established, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

[0100] According to an embodiment of the present application, when a plurality of target structural units are combined based on a specific order to generate a target component that meets the component design requirements, the generating module 300 is further used to:

[0101] When a new structural unit ID appears, a new structural unit corresponding to the new structural unit ID is determined;

[0102] Based on the mapping relationship between the new structural unit ID and the corresponding new structural unit, the preset mapping table is updated, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

[0103] According to an embodiment of the present application, after generating a target component that meets the component design requirements, the generating module 300 is further used to:

[0104] Visualize the target component.

[0105] It should be noted that the above explanation of the embodiment of the component generation method based on the web page structure unit is also applicable to the component generation device based on the web page structure unit of this embodiment, and will not be repeated here.

[0106] According to the component generation device based on web page structural units proposed in the embodiment of the present application, multiple structural unit IDs can be selected based on component design requirements, and multiple target structural units can be determined from a preset mapping table based on multiple structural unit IDs; based on a specific order, multiple target structural units can be combined to obtain a target component that meets the component design requirements. Therefore, by splitting the component into multiple structural units, dynamically combining or updating the structural units, different components can be obtained, which solves the problem of single application scenarios and lack of flexible reuse of static and coupled components generated by the prior art, and improves the utilization rate of components.

[0107] Figure 5 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. The electronic device may include:

[0108] A memory 501 , a processor 502 , and a computer program stored in the memory 501 and executable on the processor 502 .

[0109] When the processor 502 executes the program, the component generation method based on the web page structure unit provided in the above embodiment is implemented.

[0110] Furthermore, the electronic device further comprises:

[0111] The communication interface 503 is used for communication between the memory 501 and the processor 502 .

[0112] The memory 501 is used to store computer programs that can be executed on the processor 502 .

[0113] The memory 501 may include a high-speed RAM (Random Access Memory) memory, and may also include a non-volatile memory, such as a plurality of disk memories.

[0114] If the memory 501, the processor 502 and the communication interface 503 are implemented independently, the communication interface 503, the memory 501 and the processor 502 can be connected to each other through a bus and communicate with each other. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 5 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0115] Optionally, in a specific implementation, if the memory 501, the processor 502 and the communication interface 503 are integrated on a chip, the memory 501, the processor 502 and the communication interface 503 can communicate with each other through an internal interface.

[0116] The processor 502 may be a CPU (Central Processing Unit), or an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present application.

[0117] The embodiment of the present application also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the component generation method based on the web page structure unit is implemented as described above.

[0118] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include multiple such features. In the description of this application, the meaning of "multiple" is at least two, such as two, three, etc., unless otherwise clearly and specifically defined.

[0119] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in multiple embodiments or examples of the present application. In this specification, the schematic representations of the above terms are not necessarily for the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

[0120] Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limitations on the present application. Ordinary technicians in this field can change, modify, replace and modify the above embodiments within the scope of the present application.

Claims

1. A component generation method based on a web page structure unit, characterized in that: The following steps are involved: Obtain component design requirements; Based on the component design requirements, multiple structural unit IDs are selected, and multiple target structural units are determined from a preset mapping table based on the multiple structural unit IDs; Based on a specific order, the multiple target structural units are combined to generate a target component that meets the component design requirements.

2. The method according to claim 1, characterized in that Before determining the plurality of target structural units from the preset mapping table based on the plurality of structural unit IDs, the method further includes: Get the style structure data of the component; Analyze the style structure data according to preset style rules to generate multiple structure units; A corresponding structural unit ID is generated for each structural unit, and the preset mapping table is generated based on each structural unit and the corresponding structural unit ID.

3. The method according to claim 1, characterized in that When the plurality of target structural units are combined based on the specific order to generate the target component that meets the component design requirement, the method further includes: When at least one structural unit changes, the original mapping relationship between the changed structural unit and the current structural unit ID is released; A mapping relationship between the new structural unit and the current structural unit ID is established, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

4. The method according to claim 1, characterized in that: When the plurality of target structural units are combined based on the specific order to generate the target component that meets the component design requirement, the method further includes: When a new structural unit ID appears, determining a new structural unit corresponding to the new structural unit ID; Based on the mapping relationship between the new structural unit ID and the corresponding new structural unit, the preset mapping table is updated, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

5. The method according to claim 1, characterized in that After generating the target component that meets the component design requirements, the method further includes: The target component is visually displayed.

6. A component generation device based on a web page structure unit, characterized in that: include: Acquisition module, used to obtain component design requirements; A determination module, configured to select a plurality of structural unit IDs based on the component design requirements, and determine a plurality of target structural units from a preset mapping table based on the plurality of structural unit IDs; A generation module is used to combine the multiple target structural units based on a specific order to generate a target component that meets the component design requirements.

7. The device according to claim 6, characterized in that Before determining the plurality of target structural units from the preset mapping table based on the plurality of structural unit IDs, the determining module is specifically configured to: Get the style structure data of the component; Analyze the style structure data according to preset style rules to generate multiple structure units; A corresponding structural unit ID is generated for each structural unit, and the preset mapping table is generated based on each structural unit and the corresponding structural unit ID.

8. The device according to claim 6, characterized in that When the plurality of target structural units are combined based on the specific order to generate the target component that meets the component design requirement, the generating module is further used to: When at least one structural unit changes, the original mapping relationship between the changed structural unit and the current structural unit ID is released; A mapping relationship between the new structural unit and the current structural unit ID is established, and all components that have a combination relationship with the current structural unit ID are updated to obtain an updated target component.

9. An electronic device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the component generation method based on the web page structure unit according to any one of claims 1 to 5.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: The program is executed by a processor to implement the component generation method based on a web page structure unit as described in any one of claims 1 to 5.

Images