A page component adding method and device

Abstract

The present disclosure provides a page component adding method and device. The method first displays a page building area. Then, in response to an adding operation on a first target component, the first target component is added in the page building area. After that, in the case that there is a target attribute in attribute information of the first target component, component editing code matched with the target attribute is loaded. Finally, in response to an editing operation on the first target component, a control instruction corresponding to the editing operation in the component editing code is executed. According to the present disclosure, the first target component is endowed with a target attribute, so that the first target component can be identified as a target type. Then, the editing of the first target component is realized by using the component editing code matched with the target attribute, without the need for a developer to write component code for the editing scene, which is efficient.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of computer, and in particular, to a page component adding method and device. BACKGROUND

[0002] In the process of page building development, containers are often used. A container is a space used to store other building elements in page building, and the building elements can include backgrounds, pictures, buttons, links, texts, etc.

[0003] Generally, a developer building a page needs to implement two sets of component solutions, such as Component.js and Component editor.js, where Component.js is used for production environment loading and is used by users after the page building is completed, and Component editor.js is used for editing environment loading and is used by developers building the page. Both sets of component solutions need to be manually written by developers, which is low in efficiency. SUMMARY

[0004] The embodiments of the present disclosure at least provide a page component adding method and device.

[0005] In a first aspect, the embodiments of the present disclosure provide a page component adding method, comprising:

[0006] displaying a page building area;

[0007] adding a first target component in the page building area in response to an adding operation on the first target component;

[0008] loading component editing code matched with a target attribute in attribute information of the first target component in a case where the target attribute exists in the attribute information of the first target component;

[0009] executing control instructions corresponding to an editing operation on the first target component in the component editing code in response to the editing operation on the first target component.

[0010] In an optional implementation, the executing control instructions corresponding to the editing operation on the first target component in the component editing code in response to the editing operation on the first target component comprises:

[0011] in a case where the editing operation is a selection operation, setting the first target component to a selected state according to the control instructions corresponding to the control operation, and displaying editing controls for the first target component.

[0012] In an optional implementation, the editing controls comprise a plurality of layout mode controls; and the method further comprises:

[0013] In response to a selection operation for any layout mode control, the first target component is updated using the layout mode corresponding to the selected layout mode control.

[0014] In one optional implementation, loading the component editing code that matches the target attribute includes:

[0015] Obtain the position information of the first target component in the page construction area, and the size information of the first target component;

[0016] Based on the location information and the size information, the component editing code that matches the target attribute is loaded.

[0017] In one optional implementation, the method further includes:

[0018] In response to the add operation for the second target component, the second target component is added to the page construction area;

[0019] If the second target component is added within the first target component, then the second target component is set as a child component of the first target component.

[0020] In one optional implementation, the method further includes:

[0021] When the second target component is a sub-component of the first target component, in response to the data inheritance operation for the second target component, the inheritable data of the first target component is obtained;

[0022] The area indicated by the data inheritance operation displays the inheritable data that matches the data inheritance operation.

[0023] In one optional implementation, the method further includes:

[0024] If the second target component is a sub-component of the first target component, and a shared rendering instruction for the first target component is detected, the rendering effect of the first target component is applied to the second target component.

[0025] Secondly, embodiments of this disclosure also provide a page component adding device, comprising:

[0026] The display module is used to showcase the page's structure area;

[0027] An add module is used to add the first target component to the page construction area in response to an add operation for the first target component;

[0028] A loading module is used to load component editing code that matches the target attribute when the target attribute exists in the attribute information of the first target component.

[0029] The editing module is used to execute control instructions in the component editing code corresponding to the editing operation in response to the editing operation on the first target component.

[0030] In an optional implementation, when the editing module executes the control instruction corresponding to the editing operation in the component editing code in response to an editing operation on the first target component, it is used to:

[0031] When the editing operation is selected, the first target component is set to the selected state according to the control instruction corresponding to the control operation, and the editing control for the first target component is displayed.

[0032] In one optional implementation, the editing control includes multiple layout mode controls; the editing module is further configured to:

[0033] In response to a selection operation for any layout mode control, the first target component is updated using the layout mode corresponding to the selected layout mode control.

[0034] In one optional implementation, when loading component editing code that matches the target attribute, the loading module is used to:

[0035] Obtain the position information of the first target component in the page construction area, and the size information of the first target component;

[0036] Based on the location information and the size information, the component editing code that matches the target attribute is loaded.

[0037] In an optional implementation, the adding module is further configured to:

[0038] In response to the add operation for the second target component, the second target component is added to the page construction area;

[0039] If the second target component is added within the first target component, then the second target component is set as a child component of the first target component.

[0040] In one optional implementation, the editing module is further configured to:

[0041] When the second target component is a sub-component of the first target component, in response to the data inheritance operation for the second target component, the inheritable data of the first target component is obtained;

[0042] The area indicated by the data inheritance operation displays the inheritable data that matches the data inheritance operation.

[0043] In one optional implementation, the editing module is further configured to:

[0044] If the second target component is a sub-component of the first target component, and a shared rendering instruction for the first target component is detected, the rendering effect of the first target component is applied to the second target component.

[0045] Thirdly, embodiments of this disclosure also provide an electronic device, including: a processor, a memory, and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the electronic device is running, the processor communicates with the memory via the bus, and when the machine-readable instructions are executed by the processor, the steps of the first aspect above, or any possible implementation of the first aspect, are performed.

[0046] Fourthly, embodiments of this disclosure also provide a computer-readable storage medium storing a computer program that, when executed by a processor, performs the steps of the first aspect or any possible implementation thereof.

[0047] The page component adding method and apparatus provided in this disclosure firstly displays a page construction area; then, in response to an adding operation for a first target component, the first target component is added to the page construction area; subsequently, if a target attribute exists in the attribute information of the first target component, component editing code matching the target attribute is loaded; finally, in response to an editing operation for the first target component, control instructions corresponding to the editing operation in the component editing code are executed.

[0048] This embodiment of the disclosure assigns target attributes to the first target component, enabling the first target component to be identified as a target type. Then, the first target component is edited using component editing code that matches the target attributes. This eliminates the need for developers to write component code for the editing scenario, resulting in higher efficiency.

[0049] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0050] To more clearly illustrate the technical solutions of the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly described below. These drawings are incorporated in and constitute a part of this specification. They illustrate embodiments conforming to this disclosure and, together with the specification, serve to explain the technical solutions of this disclosure. It should be understood that the following drawings only show some embodiments of this disclosure and should not be considered as limiting the scope. Those skilled in the art can obtain other related drawings based on these drawings without creative effort.

[0051] Figure 1 A flowchart illustrating a method for adding page components provided in an embodiment of this disclosure is shown;

[0052] Figure 2 One of the schematic diagrams of the page construction area provided in the embodiments of this disclosure is shown;

[0053] Figure 3 A second schematic diagram of the page construction area provided in an embodiment of this disclosure is shown;

[0054] Figure 4 This is shown as a third schematic diagram of the page construction area provided in an embodiment of the present disclosure;

[0055] Figure 5 A fourth schematic diagram of the page construction area provided in this embodiment of the disclosure is shown;

[0056] Figure 6 A schematic diagram of a page component adding device provided in an embodiment of this disclosure is shown;

[0057] Figure 7 A schematic diagram of an electronic device provided in an embodiment of the present disclosure is shown. Detailed Implementation

[0058] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this disclosure, and not all of them. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely represents selected embodiments of this disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0059] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0060] In this document, the term "and / or" merely describes a relationship, indicating that three relationships can exist. For example, A and / or B can represent three cases: A alone, A and B simultaneously, and B alone. Furthermore, the term "at least one" in this document means any combination of at least two of any one or more elements. For example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0061] Research revealed that developers building web pages need to implement two component solutions for the container: Component.js and Component editor.js. Component.js is used for loading in the production environment for users after the page is built, while Component editor.js is used for loading in the editing environment for developers building the page. Both component solutions need to be written manually by developers, which is inefficient.

[0062] Based on the above research, this disclosure provides a method for adding page components. By assigning target attributes to the first target component, the first target component can be identified as a target type. Then, the first target component can be edited using component editing code that matches the target attributes. This eliminates the need for developers to write component code for the editing scenario, resulting in higher efficiency.

[0063] To facilitate understanding of this embodiment, a page component adding method disclosed in this disclosure will first be described in detail. The execution subject of the page component adding method provided in this disclosure is generally a computer device with certain computing capabilities, such as a terminal device, a server, or other processing devices. In some possible implementations, the page component adding method can be implemented by a processor calling computer-readable instructions stored in memory.

[0064] See Figure 1 The diagram shows a flowchart of a method for adding page components according to an embodiment of this disclosure. The method includes steps S101 to S104, wherein:

[0065] S101, Display page construction area.

[0066] In this step, the page building area can be displayed on a screen, allowing developers to build the page, add containers, and various building elements. The page building area can include a building area and an information area. The building area visually demonstrates the effects of containers and building elements through images, while the information area displays detailed information about the current page or a specific container or building element within the page, along with editing options.

[0067] S102. In response to the addition operation for the first target component, the first target component is added to the page construction area.

[0068] In this step, the user can interact with the virtual button corresponding to the first target component to add it to the page construction area. This addition operation can include clicking, dragging, gestures, and commands. The position of the first target component in the page construction area can be determined based on the addition operation.

[0069] Here, the first target component added to the page building area can be a preset component or a component imported into the page building system by the developer. The first target component mentioned above is a component used for loading in the production environment.

[0070] S103. If a target attribute exists in the attribute information of the first target component, load the component editing code that matches the target attribute.

[0071] Here, the target attribute can be a property defined by the developer, such as "slot". When the developer is developing the component, the developer assigns "slot" as an attribute value to the component. When building the page, the attribute information of the added component can be read. If the target attribute exists in the component's attribute information, the component editing code that matches the target attribute is loaded.

[0072] The component editing code can be pre-written by the developers. This component editing code is code for a specific type of component. Using this component code, as long as the component has the target attribute, it can be edited. Furthermore, it is possible to insert new components or materials into components with the target attribute, so that the inserted component and the inserted component or material form an inclusion relationship.

[0073] Because different components need to be adapted, when loading the component editing code, it is necessary to obtain the position information of the first target component in the page construction area, as well as the size information of the first target component. Then, the obtained position information and size information can be used to initialize the component editing code that matches the target attributes, thus completing the loading of the component editing code.

[0074] S104. In response to the editing operation on the first target component, execute the control instruction in the component editing code corresponding to the editing operation.

[0075] This step allows for various editing operations to be set up. These operations can trigger various control commands in the component editing code, thereby enabling the editing of the first target component.

[0076] For example, editing operations may include clicking operations on different editing buttons, as well as dragging operations, scaling operations, gesture operations, etc. on the first target component. Different editing operations may correspond to different instructions in the component editing code. By determining the type of the triggered editing operation, the control instructions to be executed can be determined. These control instructions are usually used to implement the editing of the first target component. Different control instructions can apply different editing effects to the first target component, such as scaling, stretching, changing the layout mode, adjusting the color, adding or deleting new components, etc.

[0077] For example, the editing operation can be a selection operation. When the editing operation is a selection operation, the first target component can be set to the selected state, and the editing control of the first target component in the selected state can be displayed.

[0078] The editing controls can be displayed in the aforementioned information area. These controls can include various editing buttons. For example, the editing controls can include multiple layout mode controls, each corresponding to a different layout mode within the component. Layout modes can include flow mode, module mode, flexible mode, grid mode, etc. Layout modes can be used to adjust the distribution positions of other components within the first target component. See [link to relevant documentation]. Figure 2 , Figure 3 , Figure 4 , Figure 5 As shown, Figure 2 This is one of the schematic diagrams of the page construction area provided in the embodiments of this disclosure. Figure 3 This is a second schematic diagram of the page construction area provided in an embodiment of this disclosure. Figure 4 This is the third schematic diagram of the page construction area provided in the embodiments of this disclosure. Figure 5 This is the fourth schematic diagram of the page construction area provided in the embodiments of this disclosure. Figure 2 In the middle, the first target component is in streaming mode. Newly added sub-components or materials to the first target component are added to the first target component in streaming mode. Each component occupies a row and is arranged downwards in a tiling manner. Figure 3 In the first target component, the module mode is in which newly added child components do not need to be arranged at the beginning of each line, but can be arranged at any position in the line. The specific position can be adjusted by adjusting the parameters of the module mode.Figure 4 In the middle, the first target component is in elastic mode. The child components added into the first target component can be arranged in any position without aligning rows and columns or occupying an entire row. Figure 5 In this layout, the first target component is in grid mode, and its interior is divided into multiple grids. Newly added components can occupy one or more grids as needed. The layout mode controls also provide controls for adjusting parameters such as the arrangement direction, horizontal distribution mode, vertical alignment mode, line wrapping strategy, and grid size of other child components in the first target component. Users can use these controls to modify these parameters, thereby adjusting the layout of the first target component.

[0079] When an add operation is received for the second target component, the second component can be added to the page building area. If the add position indicated by the add operation is within the first target component, it can be determined that the second target component is added within the first target component. In this case, the second target component is set as a child component of the first target component. The position and / or size of the second target component can be adjusted according to the layout mode of the first target component.

[0080] In addition to being able to adapt to control commands of various components, the embodiments of this disclosure can also perform data inheritance on the sub-components of the target attribute component. In the code of the first target component, there may be a field used to indicate inheritable data. When the second target component is a sub-component of the first target component, the inheritable data of the first target component can be obtained in response to the data inheritance operation for the second target component. The inheritable data can be used as a parameter of the component editing code corresponding to the second target component, or as data that needs to be displayed in the second target component. The inheritable data can be displayed in the area indicated by the data inheritance operation.

[0081] Furthermore, in addition to inheriting data, child components can also inherit the rendering effects of the first target component. When the second target component is a child component of the first target component, if a shared rendering instruction for the first target component is detected, the rendering effects of the first target component can be applied to the second target component and other child components of the first target component. For example, if the rendering effect of the first target component includes a red border, then after the shared rendering effect, the rendering effect of the second target component will also include a red border.

[0082] The page component addition method provided in this embodiment first displays a page construction area; then, in response to an addition operation for a first target component, the first target component is added to the page construction area; subsequently, if a target attribute exists in the attribute information of the first target component, component editing code matching the target attribute is loaded; finally, in response to an editing operation for the first target component, control instructions corresponding to the editing operation in the component editing code are executed.

[0083] This embodiment of the disclosure assigns target attributes to the first target component, enabling the first target component to be identified as a target type. Then, the first target component is edited using component editing code that matches the target attributes. This eliminates the need for developers to write component code for the editing scenario, resulting in higher efficiency.

[0084] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0085] Based on the same inventive concept, this disclosure also provides a page component adding device corresponding to the page component adding method. Since the principle of the device in this disclosure for solving the problem is similar to the page component adding method described above, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0086] Reference Figure 6 The diagram shown is a schematic of a page component adding device provided in an embodiment of this disclosure. The device includes:

[0087] Display module 61 is used to display the page construction area;

[0088] Add module 62, in response to an add operation for the first target component, to add the first target component to the page construction area;

[0089] Loading module 63 is used to load component editing code that matches the target attribute when the target attribute exists in the attribute information of the first target component;

[0090] The editing module 64 is used to execute the control instructions in the component editing code corresponding to the editing operation in response to the editing operation for the first target component.

[0091] In an optional implementation, when the editing module 64 executes the control instruction corresponding to the editing operation in the component editing code in response to the editing operation for the first target component, it is used to:

[0092] When the editing operation is selected, the first target component is set to the selected state according to the control instruction corresponding to the control operation, and the editing control for the first target component is displayed.

[0093] In one optional implementation, the editing control includes multiple layout mode controls; the editing module 64 is further configured to:

[0094] In response to a selection operation for any layout mode control, the first target component is updated using the layout mode corresponding to the selected layout mode control.

[0095] In one optional implementation, when loading component editing code that matches the target attribute, the loading module 63 is used to:

[0096] Obtain the position information of the first target component in the page construction area, and the size information of the first target component;

[0097] Based on the location information and the size information, the component editing code that matches the target attribute is loaded.

[0098] In an optional implementation, the adding module 62 is further configured to:

[0099] In response to the add operation for the second target component, the second target component is added to the page construction area;

[0100] If the second target component is added within the first target component, then the second target component is set as a child component of the first target component.

[0101] In an optional implementation, the editing module 64 is further configured to:

[0102] When the second target component is a sub-component of the first target component, in response to the data inheritance operation for the second target component, the inheritable data of the first target component is obtained;

[0103] The area indicated by the data inheritance operation displays the inheritable data that matches the data inheritance operation.

[0104] In an optional implementation, the editing module 64 is further configured to:

[0105] If the second target component is a sub-component of the first target component, and a shared rendering instruction for the first target component is detected, the rendering effect of the first target component is applied to the second target component.

[0106] The processing flow of each module in the device and the interaction flow between each module can be referred to the relevant descriptions in the above method embodiments, and will not be detailed here.

[0107] Corresponding to Figure 1 In addition to the method for adding page components, this disclosure also provides an electronic device 700, such as... Figure 7 The diagram shown is a structural schematic of an electronic device 700 provided in an embodiment of this disclosure, including:

[0108] The system includes a processor 71, a memory 72, and a bus 73. The memory 72 stores execution instructions and includes main memory 721 and external memory 722. The main memory 721, also called internal memory, temporarily stores the computational data in the processor 71, as well as data exchanged with external memory such as a hard disk. The processor 71 exchanges data with the external memory 722 through the main memory 721. When the electronic device 700 is running, the processor 71 communicates with the memory 72 through the bus 73, causing the processor 71 to execute the following instructions:

[0109] Display page construction area;

[0110] In response to the add operation for the first target component, the first target component is added to the page construction area;

[0111] If a target attribute exists in the attribute information of the first target component, load the component editing code that matches the target attribute;

[0112] In response to an editing operation on the first target component, the control instruction corresponding to the editing operation in the component editing code is executed.

[0113] In one optional implementation, the instructions executed by the processor 71, wherein the step of executing the control instruction in the component editing code corresponding to the editing operation in response to the editing operation for the first target component, includes:

[0114] When the editing operation is selected, the first target component is set to the selected state according to the control instruction corresponding to the control operation, and the editing control for the first target component is displayed.

[0115] In one optional implementation, the instructions executed by processor 71 include an editing control comprising multiple layout mode controls; the method further includes:

[0116] In response to a selection operation for any layout mode control, the first target component is updated using the layout mode corresponding to the selected layout mode control.

[0117] In one optional implementation, the instructions executed by processor 71, wherein loading component editing code matching the target attribute, includes:

[0118] Obtain the position information of the first target component in the page construction area, and the size information of the first target component;

[0119] Based on the location information and the size information, the component editing code that matches the target attribute is loaded.

[0120] In one optional implementation, the instructions executed by processor 71 further include:

[0121] In response to the add operation for the second target component, the second target component is added to the page construction area;

[0122] If the second target component is added within the first target component, then the second target component is set as a child component of the first target component.

[0123] In one optional implementation, the instructions executed by processor 71 further include:

[0124] When the second target component is a sub-component of the first target component, in response to the data inheritance operation for the second target component, the inheritable data of the first target component is obtained;

[0125] The area indicated by the data inheritance operation displays the inheritable data that matches the data inheritance operation.

[0126] In one optional implementation, the instructions executed by processor 71 further include:

[0127] If the second target component is a sub-component of the first target component, and a shared rendering instruction for the first target component is detected, the rendering effect of the first target component is applied to the second target component.

[0128] This disclosure also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the page component adding method described in the above method embodiments. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0129] This disclosure also provides a computer program product carrying program code. The program code includes instructions that can be used to execute the steps of the page component adding method described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0130] The aforementioned computer program product can be implemented through hardware, software, or a combination thereof. In one optional embodiment, the computer program product is specifically embodied in a computer storage medium; in another optional embodiment, the computer program product is specifically embodied in a software product, such as a software development kit (SDK), etc.

[0131] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or units may be electrical, mechanical, or other forms.

[0132] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0133] In addition, the functional units in the various embodiments of this disclosure can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0134] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0135] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A method for adding page components, characterized in that, include: Display page construction area; In response to the add operation for the first target component, the first target component is added to the page construction area; If a target attribute exists in the attribute information of the first target component, load the component editing code that matches the target attribute; In response to an editing operation on the first target component, execute the control instruction in the component editing code corresponding to the editing operation; Insert a new component or material into a first target component having the target attribute, so that the first target component and the inserted new component or material form an inclusion relationship; Among them, the child components of the first target component inherit the inheritable data and rendering effects of the first target component; The loading of component editing code matching the target attribute includes: Obtain the position information of the first target component in the page construction area, and the size information of the first target component; Based on the location information and the size information, the component editing code that matches the target attribute is initialized to complete the loading of the component editing code that matches the target attribute.

2. The method according to claim 1, characterized in that, The step of executing the control instruction corresponding to the editing operation in the component editing code in response to the editing operation for the first target component includes: When the editing operation is selected, the first target component is set to the selected state according to the control instruction corresponding to the selection operation, and the editing control for the first target component is displayed.

3. The method according to claim 2, characterized in that, The editing control includes multiple layout mode controls; the method further includes: In response to a selection operation for any layout mode control, the first target component is updated using the layout mode corresponding to the selected layout mode control.

4. The method according to claim 1, characterized in that, The method further includes: In response to the add operation for the second target component, the second target component is added to the page construction area; If the second target component is added within the first target component, then the second target component is set as a child component of the first target component.

5. The method according to claim 4, characterized in that, The method further includes: When the second target component is a child component of the first target component, in response to the data inheritance operation for the second target component, the inheritable data of the first target component is obtained as the data to be displayed in the second target component; The area indicated by the data inheritance operation displays the inheritable data that matches the data inheritance operation.

6. The method according to claim 4, characterized in that, The method further includes: If the second target component is a sub-component of the first target component, and a shared rendering instruction for the first target component is detected, the rendering effect of the first target component is applied to the second target component.

7. A page component adding device, characterized in that, include: The display module is used to showcase the page's structure area; An add module is used to add the first target component to the page construction area in response to an add operation for the first target component; A loading module is used to load component editing code that matches the target attribute when the target attribute exists in the attribute information of the first target component. An editing module is configured to: in response to an editing operation on the first target component, execute a control instruction in the component editing code corresponding to the editing operation; and insert a new component or material into the first target component having the target attribute, such that the first target component and the inserted new component or material form an inclusion relationship; Among them, the child components of the first target component inherit the inheritable data and rendering effects of the first target component; The loading module is further configured to: obtain the position information of the first target component in the page construction area, and the size information of the first target component; and initialize the component editing code matching the target attribute based on the position information and the size information, so as to complete the loading of the component editing code matching the target attribute.

8. An electronic device, characterized in that, include: The device includes a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the electronic device is running, the processor communicates with the memory via the bus. When the machine-readable instructions are executed by the processor, the steps of the page component addition method as described in any one of claims 1 to 6 are performed.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the page component addition method as described in any one of claims 1 to 6.

Images