An interactive interface building method and device, electronic equipment and storage medium

Abstract

This application proposes an interactive interface construction method, apparatus, electronic device, and storage medium. It determines the current hierarchical relationship between the selected component and other components based on their current positions. If the current hierarchical relationship is sibling, it determines whether the selected component matches a first preset layout. This identifies whether the user's intended design of the selected component conflicts with the preset layout information. If a conflict is found, the layout information is updated. The selected component and other components are designated as child components of a second parent component. A final preview of the selected component and other components is displayed on the canvas interface. This avoids the need for users to first understand the logical positional relationships of each component and then manually adjust them. By constructing a parent component and preset layout information, it improves processing efficiency and user flexibility, lowering the barrier to entry.

Description

Technical Field

[0001] This application relates to the field of human-computer interaction, and more specifically, to a method, apparatus, electronic device, and storage medium for building an interactive interface. Background Technology

[0002] Currently, low-code interface design platforms are typically provided for interactive interfaces such as programs and web pages, making it easier for non-developers to design interactive interfaces that meet their needs.

[0003] These types of interface design platforms often provide relatively fixed page templates with simple interaction logic for designers to choose from.

[0004] However, due to the large design granularity of templates and interaction logic, the page style and interaction logic are relatively fixed when users design pages, which reduces the design freedom of the interface design platform. Summary of the Invention

[0005] The purpose of this application is to provide an interactive interface construction method, device, electronic device, and storage medium to provide more flexible page design logic and improve design freedom.

[0006] To achieve the above objectives, the technical solutions adopted in the embodiments of this application are as follows:

[0007] In a first aspect, embodiments of this application provide a method for building an interactive interface, comprising: responding to a user's component selection operation and displaying a preview of the selected component on a canvas interface; when the component selection operation ends, confirming the current positional relationship between the selected component and other components in the canvas interface; determining the current hierarchical relationship between the selected component and the other components based on the current positional relationship; if the current hierarchical relationship is a sibling relationship, determining whether the selected component matches first preset layout information based on the current positional relationship; the first preset layout information corresponds to a first parent component to which the other components belong; the first preset layout information represents a first type of component arrangement; if the selected component does not match the first preset layout information, generating a second parent component and using the selected component and the other components as child components of the second parent component; displaying a final preview of the selected component and the other components on the canvas interface based on the second preset layout information corresponding to the second parent component; the second preset layout information represents a second type of component arrangement.

[0008] Secondly, embodiments of this application provide an interactive interface building device, including an input / output module for responding to a user's component selection operation and displaying a preview of the selected component on a canvas interface; a processing module for confirming the current positional relationship between the selected component and other components on the canvas interface when the component selection operation ends; determining the current hierarchical relationship between the selected component and other components based on the current positional relationship; if the current hierarchical relationship is a sibling relationship, determining whether the selected component matches first preset layout information based on the current positional relationship; the first preset layout information corresponds to a first parent component to which the other components belong; the first preset layout information represents a first type of component arrangement; if the selected component does not match the first preset layout information, a second parent component is generated, and the selected component and the other components are used as child components of the second parent component; the input / output module is further used to display a final preview of the selected component and other components on the canvas interface based on the second preset layout information corresponding to the second parent component; the second preset layout information represents a second type of component arrangement.

[0009] Thirdly, embodiments of this application provide an electronic device, including: a memory for storing one or more programs; a processor; and when the one or more programs are executed by the processor, the interactive interface construction method described in the first aspect is implemented.

[0010] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the interactive interface construction method described in the first aspect.

[0011] Compared to existing technologies, the interactive interface construction method, apparatus, electronic device, and storage medium provided in this application determine the current hierarchical relationship between the selected component and other components based on the current positional relationship; then identify the current hierarchical relationship, and if the current hierarchical relationship is a sibling relationship, determine whether the selected component matches the first preset layout information based on the current positional relationship. This identifies whether the user's expected design intent for the selected component conflicts with the preset layout information of the template. When a conflict is found, i.e., the selected component does not match the first preset layout information, the layout information is updated, i.e., a second parent component is generated. Then, based on this second parent component, the selected component and other components are used as child components of the second parent component. Finally, based on the second preset layout information corresponding to the second parent component, a final preview diagram of the selected component and other components is displayed on the canvas interface. This avoids the need for the user to first understand the logical positional relationship of each component and then manually adjust conflicting components. By constructing a parent component and matching preset layout information, it ensures that the user's design expectations are consistent with the final preview diagram, thereby improving processing efficiency and the freedom of use, and lowering the barrier to entry.

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

[0013] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0014] Figure 1A This is a schematic diagram of an interactive interface in the prior art.

[0015] Figure 1B This is a schematic diagram of another interactive interface in the prior art;

[0016] Figure 1C This is a schematic diagram of another interactive interface in the prior art;

[0017] Figure 1D This is a schematic diagram of another interactive interface in the prior art;

[0018] Figure 2 A schematic diagram of the architecture of an interface design platform provided in an embodiment of the present invention;

[0019] Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0020] Figure 4 A flowchart illustrating an interactive interface construction method provided in an embodiment of the present invention;

[0021] Figure 5 A schematic diagram of an interactive interface provided for an embodiment of this solution;

[0022] Figure 6 This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0023] Figure 7 This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0024] Figure 8 This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0025] Figure 9 A flowchart illustrating another method for building an interactive interface provided in this embodiment of the solution;

[0026] Figure 10A This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0027] Figure 10B This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0028] Figure 10C This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0029] Figure 10D This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0030] Figure 11 A signaling interaction diagram illustrating an interactive interface construction method provided in this embodiment of the solution;

[0031] Figure 12 A signaling interaction diagram illustrating another method for building an interactive interface provided in this embodiment of the solution;

[0032] Figure 13 A flowchart illustrating another method for building an interactive interface provided in this embodiment of the solution;

[0033] Figure 14A This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0034] Figure 14B This is a schematic diagram of another interactive interface provided in an embodiment of the present solution;

[0035] Figure 15 A flowchart illustrating another method for building an interactive interface provided in this embodiment of the solution;

[0036] Figure 16 A signaling interaction diagram illustrating an interactive interface construction method provided in this embodiment of the solution;

[0037] Figure 17 A schematic diagram of an interface design platform provided in an embodiment of the present invention;

[0038] Figure 18 This is a schematic diagram illustrating a release based on an interface design platform, as provided in an embodiment of the present invention.

[0039] Figure 19 This is a schematic diagram of an interactive interface building device provided in an embodiment of the present invention. Detailed Implementation

[0040] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. The components of the embodiments of this application described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0041] Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0042] It should be noted that similar reference numerals 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. Furthermore, in the description of this application, terms such as "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0043] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0044] For existing interface design platforms, such as existing low-code platforms, the canvas capabilities, logic, and control granularity they provide are relatively fixed. For ordinary users who are not developers, when designing interfaces on such platforms, the page styles and interaction logic are relatively fixed, which reduces the freedom of design.

[0045] To achieve finer-grained design results, users need to go through more complex setup processes to realize the desired design effect. This may even require users to have some coding skills to achieve the design goals, thus significantly reducing processing efficiency and raising the barrier to entry for using similar interface design platforms.

[0046] The following specific examples illustrate the operation process of existing technologies to demonstrate the problems encountered during their use. Figure 1A This is a schematic diagram of an existing interactive interface; see [link / reference]. Figure 1A The interface design platform includes: canvas 10 and template list 11;

[0047] The canvas 10 is used to display a preview of the interface design. For example, the canvas 10 currently displays a preview of the selected component A.

[0048] Template list 11 can contain various tools for design, such as drawing tools, button sample lists, component lists, etc.; see this... Figure 1A The template list 11 displays a list of components, which includes components A, B, C, and D, allowing users to select the components they need for their design.

[0049] For each selected component, it has a preset layout information while it is displayed on the canvas, so as to... Figure 1ATaking component A displayed on the canvas as an example, when its preview image is displayed on canvas 10, it can be understood that it is placed inside a parent component 102. The parent component 102 can be displayed on canvas 10 or not.

[0050] The parent component 102 acts as a container, and the child components placed within it should have a certain arrangement logic. For example, the child components in the parent component 102 are arranged from left to right, and the next child component should be located at the upper right corner of the previous child component and close to the position of the previous child component. Furthermore, when a new component is dragged into the canvas 10 by the user based on a component selection operation, and the component has a sibling relationship with the existing component A (i.e., they are not parent and child components), then when the user completes the component selection operation, the component will be displayed at position 101 in the preview image.

[0051] It should be noted that for position 101 mentioned above, the information at position 101 may not be displayed on canvas 10 when the user does not interact with the component. In the following solutions, the information shown in the interactive interface diagrams may be displayed or not displayed in the actual product based on actual needs when the user is not interacting with the component. The information in the diagrams of this solution is for illustrative purposes only.

[0052] Specifically, this can be explained in conjunction with the user's specific interaction process. Figure 1A On this basis, Figure 1B This is a schematic diagram of another interactive interface in the prior art. See [link / reference] Figure 1B When the user-controlled cursor 20 selects component B from template list 11 and drags it to position 103 on canvas 10, if the user releases cursor 20, i.e., when the user completes the component selection operation, the selected component B in the preview image will not be displayed at position 103, but rather as shown in the image below. Figure 1C As shown, based on the preset layout information mentioned above, it is displayed at position 101.

[0053] Obviously, after Figure 1A , Figures 1B to 1C In the user's desired interaction flow, component B, as a sibling component of component A, should be displayed below component A in the interface they designed. However, if the default layout information of the parent component 102 to which component A belongs defines that child components are arranged from left to right, then when this arrangement conflicts with the user's intention, the interface design platform's processing flow must follow the default layout information and display component B at position 103. This results in the user's operation result not being the visually intuitive effect.

[0054] Furthermore, in Figure 1A On this basis, Figure 1DThis is a schematic diagram of another interactive interface in the prior art. See [link / reference] Figure 1D If a user wants to display component B below component A, the user needs to manually create a new parent component 104 that encompasses component A, and its new preset layout information is defined as child components arranged from top to bottom. At this point, after the user drags component B from template list 11 below component A, component B will be displayed at position 105 when the user completes the component selection operation.

[0055] In summary, it is clear that with current interface design platforms, when a user's design intent conflicts with the preset layout information of existing components, the solution will display a result based on the original preset layout information, which is not what the user expects. This forces users to first understand the logical hierarchy of each component, and then manually adjust the components and preset layout information to redesign and achieve the desired effect. This means that when the designed interface contains complex component combinations and hierarchical relationships, every time the designer's intent conflicts with the preset layout information, the aforementioned manual adjustments are required. This significantly reduces processing efficiency and raises the barrier to entry for using this design platform.

[0056] To address the aforementioned issues, the core improvement of this solution lies in identifying situations where "the user's design intent contradicts the preset layout information of the original components." Under such conditions, the design platform generates a parent component that matches the designer's intent, displaying a preview image that meets the user's expectations without requiring manual settings from the user. This improves processing efficiency and lowers the barrier to entry for users.

[0057] To achieve the above functionality, a possible implementation method is provided below, exemplarily illustrating the architectural logic of the interface design platform involved in this solution. Specifically, Figure 2 This is a schematic diagram of the architecture of an interface design platform provided in an embodiment of the present invention. See also: Figure 2 The interface design platform includes: an interaction layer 30, a logic layer 31, and a rendering layer 32;

[0058] Among them, the interaction layer 30 is a module used to respond to user interactions. It needs to handle drag, zoom and other actions, draw position lines and reference lines in real time, and display information such as menu bars.

[0059] The logic layer 31 can obtain user interactions based on the interaction layer 30 and determine whether a parent component needs to be generated. In other words, this solution requires the interaction layer 30 and the logic layer 31 to work together to identify how "the user's design intent contradicts the preset layout information of the original component".

[0060] Rendering layer 32 is responsible for rendering the interface, such as rendering the canvas component. It does not involve user interaction and mainly needs to handle the passing of props, data, and events, as well as updating user-configured data.

[0061] Furthermore, this interface design platform can be configured on an electronic device so that users can execute corresponding programs through the device to perform the method flows in the examples below, thereby enabling the corresponding functions of using the interface design platform. Please refer to [link to relevant documentation]. Figure 3 , Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device 40 includes a memory 401, a processor 402, and a communication interface 403;

[0062] The memory 401, processor 402, and communication interface 403 are electrically connected directly or indirectly to enable data transmission or interaction. For example, these components can be electrically connected to each other via one or more communication buses or signal lines. The memory 401 can be used to store software programs and modules, and the processor 402 executes various functional applications and data processing by executing the software programs and modules stored in the memory 401. The communication interface 403 can be used for signaling or data communication with other devices.

[0063] The memory 401 may be, but is not limited to, random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), etc.

[0064] Processor 402 can be an integrated circuit chip with signal processing capabilities. Processor 402 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0065] Understandable. Figure 3 The structure shown is for illustrative purposes only. The electronic device 40 may also include more or fewer components than those shown in Figure 1, or have the same... Figure 3 The different configurations shown. Figure 3 The components shown can be implemented using hardware, software, or a combination thereof. For example, the electronic device 40 includes I / O units, such as a mouse / keyboard / touchscreen, for receiving user interaction operations.

[0066] Optionally, the electronic device may be, but is not limited to, a smartphone, tablet, personal computer, laptop, or other device.

[0067] The following section uses specific examples to illustrate the possible implementation methods of this solution. Figure 4 This is a flowchart illustrating an interactive interface construction method provided by an embodiment of the present invention. This method can be placed as follows: Figure 3 The interface design platform implemented in the shown electronic device can adopt the following architecture: Figure 2 The proposed solution can be found in [reference]. Figure 4 The method includes:

[0068] Step 500: Respond to the user's component selection operation and display a preview image of the selected component on the canvas interface;

[0069] Specifically, Figure 5 This is a schematic diagram of an interactive interface provided in an embodiment of the present solution. See also: Figure 5 In part (a), the user uses the cursor 20 to drag a component B from the menu bar (not shown in the figure) to the canvas 10. At this time, the component B will be displayed on the interface of the canvas 10, which is a preview of the selected component.

[0070] Step 504: When the component selection operation ends, confirm the current positional relationship between the selected component and other components in the canvas interface;

[0071] Specifically, continue to participate Figure 5 In part (b), when cursor 20 drags component B to the position in part (b) and the user releases cursor 20, it is confirmed that the current position relationship between component B and component A in the canvas interface is: component B is below component A and the two do not overlap.

[0072] Step 505: Determine the current hierarchical relationship between the selected component and other components based on the current positional relationship;

[0073] Continuing with the example above, when component B is below component A and their positions in canvas 10 do not overlap, their current hierarchical relationship is that of sibling components.

[0074] Step 506: If the current hierarchical relationship is a sibling relationship, determine whether the selected component matches the first preset layout information based on the current positional relationship;

[0075] Among them, the first preset layout information corresponds to the first parent component to which other components belong; the first preset layout information represents the arrangement of the first type of components.

[0076] Continue to participate Figure 5 In part (b), for component A, its first preset layout information is: in the first parent component / container 102 containing component A, the first type of component arrangement among the child components is: arranged from left to right. That is, for a new sibling component of component A, its preview image is located at 101.

[0077] Step 509: If the selected component does not match the first preset layout information, a second parent component is generated, and the selected component and other components are used as child components of the second parent component.

[0078] Continue to participate Figure 5 From part (b), it can be seen that the position of component B does not match the first preset layout information. Therefore, the original first parent component 102 and the first preset layout information do not meet the user's needs. Therefore, combining... Figure 2 This logic layer 31 can generate a new second parent component, for example, Figure 5 In (c), the second parent component 105, in the second preset layout information corresponding to the second parent component 105, the second type of component arrangement among the child components is: arranged from top to bottom.

[0079] In one possible implementation, the second parent component 105 does not conflict with the first parent component 102 mentioned above; for example, the second parent component 105 can be a child component of the first parent component 102. Alternatively, in another possible implementation, the original first parent component 102 is deleted when the second parent component 105 is generated.

[0080] Step 510: Based on the second preset layout information corresponding to the second parent component, display the final preview diagram of the selected component and other components in the canvas interface;

[0081] Continue to participate Figure 5 In part (d), component B, based on the new second parent component 105 and the second preset layout information, is displayed in the final preview diagram at the second parent component 105 below component A.

[0082] The interactive interface construction method provided in this invention determines the current hierarchical relationship between the selected component and other components based on their current positional relationships. It then identifies the current hierarchical relationship; if the current hierarchical relationship is a sibling relationship, it determines whether the selected component matches the first preset layout information based on the current positional relationship. This identifies whether the user's expected design intent for the selected component conflicts with the preset layout information of the template. When a conflict is found, i.e., the selected component does not match the first preset layout information, the layout information is updated, i.e., a second parent component is generated. Based on this second parent component, the selected component and other components are then used as child components of the second parent component. Finally, based on the second preset layout information corresponding to the second parent component, a final preview diagram of the selected component and other components is displayed on the canvas interface. This avoids the need for the user to first understand the logical positional relationships of each component and then manually adjust conflicting components. By constructing a parent component and matching preset layout information, it ensures that the user's design expectations are consistent with the final preview diagram, thereby improving processing efficiency and the freedom of use, and lowering the barrier to entry.

[0083] Optionally, the component arrangement in the preset layout information mentioned in this article can not only limit the order of components, but also allow for more detailed restrictions through the settings interface. For example, the arrangement of child components can be as follows: arranged from top to bottom, with the next child component immediately below and to the left of the previous child component, such as... Figure 5 The arrangement of component B and component A shown in (d) can also be: arranged from top to bottom, with a set distance between the next sub-component and the previous sub-component, and the next sub-component is centered.

[0084] This embodiment does not limit the arrangement of the components described above. It can be flexibly configured in the settings interface of the interface design platform to meet the user's requirements.

[0085] The example above demonstrates the handling process when the selected component dragged by the user does not match the first preset layout information. The following explains the matching scenario. See also... Figure 4 The method also includes:

[0086] Step 507: If the selected component matches the first preset layout information, display the final preview diagram of the selected component and other components in the canvas interface according to the first preset layout information.

[0087] Specifically, Figure 6 See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 6 In part (a), the user drags a component B from the menu bar (not shown in the figure) to the canvas 10 using cursor 20. The selected component B will then be displayed on the canvas 10 interface as a preview. Correspondingly, the first parent component 102 of component A has its child components arranged from left to right. That is, for a new sibling component of component A, its preview image is located at position 101.

[0088] See further Figure 6 In part (b), if the user drags component B to position 101 using cursor 20 and releases cursor 20, then component B matches the first preset layout information. Therefore... Figure 6 Part (b) can be understood as the final preview diagram of component B and component A.

[0089] Optionally, the above embodiments were described with the selected component and other components at the same level. However, there are also cases where a user-drag selected component can be set as a child component of another component. This case will be explained below; please refer to [link to previous section]. Figure 4 The method also includes:

[0090] Step 508: If the current hierarchy is a parent-child relationship, other components are used as the third parent components of the selected component, and the final preview diagram of the selected component and other components is displayed on the canvas interface according to the third preset layout information corresponding to the third parent component.

[0091] Specifically, Figure 7 See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 7 In part (a), the user uses the cursor 20 to drag a component B from the menu bar (not shown in the figure) to the canvas 10. At this time, the component B will be displayed on the interface of the canvas 10, which is a preview of the selected component.

[0092] Further, see Figure 7 Part (b). The user continues to drag component B using cursor 20 until it overlaps with component A, and then releases cursor 20. Based on the current hierarchy, it can be determined that component B and component A have a parent-child relationship, that is, component B is a child component of component A.

[0093] At this point, component A is designated as the third parent component, which can possess third preset layout information. For example, this third preset layout information indicates how to display the component based on its current position. See [link to relevant documentation]. Figure 7 The arrangement of (b) is the final preview diagram; or, if the third type of component arrangement corresponding to the third preset layout information is: the sub-components within component A are arranged sequentially from the top left corner to the right, then see [reference needed]. Figure 7 (c) When the cursor 20 is released, component B will be displayed at position 106 in the final preview diagram.

[0094] Optionally, some components, due to limitations in their own component properties, cannot serve as the parent component of other components. In this case, this solution also provides a possible implementation method, specifically... Figure 8 See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 8 In part (a), the user uses the cursor 20 to drag a component B from the menu bar (not shown in the figure) to the canvas 10. At this time, the component B will be displayed on the interface of the canvas 10, which is a preview of the selected component.

[0095] Furthermore, see Figure 8 Part (b). The user continues to drag component B using cursor 20 until it overlaps with component A, and then releases cursor 20. Based on the current hierarchy, component B and component A are determined to have a parent-child relationship, that is, component B is a child component of component A. However, at this time, the component properties of component A do not allow component A to be the parent component of other components;

[0096] Referring to steps 509 and 510 above, a new parent component can be generated for component A, i.e. Figure 8 As shown in (c), the parent component 102 has a preset layout where the child components are arranged from left to right. Therefore, when the cursor is released from 20, component B is actually displayed at position 101, and the corresponding final preview diagram is as follows. Figure 8 As shown in (d).

[0097] As mentioned above, during the user's component selection process, the changing positions of the selected component on the canvas may involve numerous changes in the hierarchical relationships between the selected component and other components. To more clearly demonstrate the hierarchical relationships between components, this solution introduces a control tree interactive interface to illustrate these relationships.

[0098] As for the interaction between the canvas and the control tree, the information association during user interaction can be achieved in several ways. One way is that when the user drags and drops components in the canvas, the change in the hierarchical relationship between the components and other components in the drawing interface will also be reflected in the change in the positional relationship in the control tree interaction interface. Another way is that when the user drags and drops node information in the control tree interaction interface, the preview diagram of the canvas will also change when the hierarchical information between nodes changes.

[0099] The first method will be illustrated below. Specifically, in Figure 4 On this basis, Figure 9 A flowchart illustrating another method for building an interactive interface provided in this embodiment of the solution. After step 500, the method further includes:

[0100] Step 501: During the component selection operation, obtain the process positional relationship between the selected component and other components in the canvas interface;

[0101] Optionally, Figure 10A See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 10A The interface design platform includes a canvas 10 and a control tree interaction interface 12; to better illustrate the relationship between the canvas 10 and the control tree interaction interface 12 during the interaction process, Figure 10A The components and node information contained herein are illustrated by example.

[0102] For details, see Figure 10A The canvas 10 displays seven components, namely component 1, which contains two sub-components: component 1-1 and component 1-2, arranged from left to right based on preset layout information; component 1-1 contains two sub-components: component A and component B, arranged from top to bottom based on preset layout information; component 1-2 contains two sub-components: component C and component D, also arranged from top to bottom based on preset layout information. Correspondingly, the node information representing each component in the canvas 10 is displayed in the control tree interactive interface 12 in the form of a control tree. This interface displays not only the node information corresponding to each component but also the hierarchical relationship between the nodes.

[0103] Combining step 501, in Figure 10A On this basis, Figure 10B See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 10BWhen the user selects component B with cursor 20 and drags it towards the dotted outline of component B below component D, the cursor 20 is not released and can be understood as being in a "component selection operation in progress" state. At this time, the positional relationship between component B and other components changes: component B was previously below and adjacent to component A, but now it is below and adjacent to component D. Figure 10C As shown.

[0104] Step 502: Determine the process hierarchy relationship between the selected component and other components based on the process position relationship;

[0105] For details, please refer to [link / reference]. Figure 10C When component B is dragged below component D, the hierarchy changes: component B changes from a child component of component 1-1 to a child component of component 1-2. Since the user's cursor 20 has not finished dragging at this time, this hierarchy can be defined as a process hierarchy.

[0106] Step 503: Display process node information representing the hierarchical relationship of the process in the control tree interactive interface.

[0107] For details, please refer to [link / reference]. Figure 10C In the control tree interactive interface, the node information of component B has changed from a child component of component 1-1 to a child component of component 1-2.

[0108] See also Figure 9 Step 511: When the component selection operation ends, update the process node information in the control tree interaction interface to the current node information;

[0109] The current node information represents the current hierarchical relationship. Figure 10C On this basis, Figure 10D See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 10D If cursor 20 continues to drag component B into component C, and then releases cursor 20, this can be interpreted as "component selection operation ended." The current hierarchy is that component B is a child component of component C. Therefore, the process node information in the control tree interaction interface should be updated according to this current hierarchy. The updated node information is the current node information, meaning the node information corresponding to component B is that it is a child component of component C.

[0110] The following is combined Figure 2 The interaction layer 30, logic layer 31, rendering layer 32, and control tree 33 shown illustrate the interaction flow in the above example, where the user drags and drops components in the canvas, thereby linking the interactive interface of the control tree. Specifically, Figure 11 A signaling interaction diagram illustrating an interactive interface construction method provided in this embodiment of the solution is shown below. Figure 11 The signaling interaction process includes:

[0111] Step 600: The interaction layer 30 forwards the component selection operation to the logic layer 31;

[0112] The component selection operation can be understood as the operation of clicking and dragging the component to the canvas in the example above.

[0113] Step 601: The logic layer 31 sends an instruction to the rendering layer 32 to update the preview diagram;

[0114] Specifically, the logic layer 31 can execute the action of step 500 in the above example to achieve step 601; then the rendering layer 32 responds to the instruction of the logic layer 31 and finally displays the updated preview diagram through the interaction layer 30, that is, the preview diagram in the canvas described in the above example.

[0115] It should be noted that, due to step 601, after step 600, an instruction to update the preview diagram is sent to the rendering layer 32 first. Therefore, the delay between user operation and viewing the preview diagram in the canvas can be effectively reduced, that is, the user operation is responded to first to avoid lag.

[0116] Step 602: Interaction layer 30 informs logic layer 31 that the operation is complete;

[0117] Specifically, the operation ends when the above-mentioned components are selected to complete the operation. For example, the user releases the mouse button or leaves the touch screen, thereby releasing the cursor 20 mentioned above.

[0118] Step 603: The logic layer 31 executes the parent component's processing logic;

[0119] Specifically, the parent component processing logic refers to determining whether the user's component selection operation involves generating a parent component for the selected component. This process can be implemented through steps 504, 505, and 506 mentioned above.

[0120] Step 604: Logic layer 31 confirms the final preview diagram;

[0121] At this point, before rendering, logic layer 31 confirms the final preview diagram to be displayed.

[0122] Step 605: Logic layer 31 instructs rendering layer 32 to update the drawing.

[0123] Specifically, the rendering layer 32, based on this instruction, draws the final preview diagram described above. This process can be implemented through steps 507, 508, and 510 mentioned above.

[0124] Step 606: Rendering layer 32 indicates that control tree 33 is updated;

[0125] Specifically, the control tree 33 refers to the node information and hierarchical relationship corresponding to the control tree interactive interface described above. Then, after the control tree 33 is updated, it responds to the interaction layer 30 through the rendering layer 32 and the logic layer 31, thereby achieving the effect of step 511 above.

[0126] Further, see Figure 11 The "recurring" part can be triggered and executed repeatedly based on the user's component selection operation. Below is one possible implementation method for this "recurring" part. Specifically, in... Figure 11 On this basis, Figure 12 A signaling interaction diagram illustrating another method for building an interactive interface provided in this embodiment of the solution is shown below. Figure 11 The signaling interaction process also includes:

[0127] Step 607: Logic layer 31 obtains component process location information;

[0128] Step 608: Logic layer 31 processes the virtual preview diagram;

[0129] Steps 607 to 608 can be understood as determining the positional relationship between the selected component and other components in the canvas interface before displaying the preview diagram, i.e., step 501 in the example above.

[0130] Specifically, after obtaining the component process location information of the component selection operation, the process location relationship can be determined based on the component process location information and the location information of other components.

[0131] That is, based on the positional relationship in the preceding process and the current hierarchical relationship, the rendering layer 32 is instructed to update the components in the preview diagram;

[0132] Step 610: Rendering layer 32 indicates that control tree 33 is updated;

[0133] Specifically, the control tree 33 refers to the node information and hierarchical relationship corresponding to the control tree interactive interface described above. Then, after the control tree 33 is updated, it responds to the interaction layer 30 through the rendering layer 32 and the logic layer 31, thereby achieving the effect of step 503 above.

[0134] Step 611: Update the cache;

[0135] The location information of the aforementioned component processes is stored in a cache. This location information can be cached using a doubly linked list (location information) + hash table (storage + lookup) based on the LRU algorithm.

[0136] Optionally, for Figure 12After the sub-process completes step 611, the signaling interaction process can continue. Figure 11 Step 602 in the process.

[0137] It should be noted that when Figure 11 When the operation in step 602 ends, that is, when the component selection operation ends, the component process position information in the cache can be used to further reduce the resource consumption caused by repeated data caching. Specifically, the current position information of the component in the component selection operation is obtained.

[0138] Furthermore, regarding the above Figure 9 Step 504 in the text can be implemented in one possible way as follows:

[0139] Determine whether the component's current position information matches the component's process position information;

[0140] If so, the current positional relationship is determined based on the component's process positional information and the positional information of other components;

[0141] If not, the current positional relationship is determined based on the current positional information of the component and the positional information of other components.

[0142] Optionally, the criterion for determining whether the current position information of a component matches the component's procedural position information can be a preset distance threshold. If the distance between the current position information of the component and the procedural position information is less than this distance threshold, it means that the current position information of the component matches the procedural position information. Therefore, in the case of a match, the corresponding component position information does not need to be repeatedly cached, thereby reducing the consumption of cache resources.

[0143] Regarding the information association between the canvas and control tree interaction interface mentioned above during user interaction, the following example illustrates the second method, namely, "when the user drags and drops node information in the control tree interaction interface, the preview diagram of the canvas will also change as the hierarchical information between nodes changes."

[0144] Specifically, Figure 13 A flowchart illustrating another method for building an interactive interface provided in this embodiment is available. Figure 13 The method includes:

[0145] Step 700: Display the current node information representing the current hierarchical relationship in the control tree interactive interface;

[0146] Specifically, Figure 14A See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 14AThe canvas 10 displays 7 components, namely component 1, which contains two sub-components: component 1-1 and component 1-2, and the two sub-components are arranged from left to right based on preset layout information; component 1-1 contains two sub-components: component A and component B, and the two sub-components are arranged from top to bottom based on preset layout information; component 1-2 contains two sub-components: component C and component D, and the two sub-components are arranged from top to bottom based on preset layout information.

[0147] Correspondingly, the node information representing each component in the canvas 10 is displayed in the control tree interactive interface 12 in the form of a control tree. In addition to displaying the current node information corresponding to each component, it also includes the current hierarchical relationship between each node.

[0148] Step 701: Respond to the user's node update operation and display the update node information representing the update hierarchy relationship in the control tree interaction interface;

[0149] See also Figure 14A When a user selects node "Component B" in the control tree interaction interface 12 using cursor 20, that is, the selected node; while "Component 1", "Component 1-1", "Component A", etc. are other nodes. The node "Component B" corresponds to Component B in the left canvas 10, and the other nodes correspond one-to-one with the other components in the left canvas 10.

[0150] Furthermore, when the user drags the node "Component B" to the dotted frame position in the control tree interaction interface 12 using cursor 20, it can be understood that a node update operation has occurred. Figure 14A On this basis, Figure 14B See also the schematic diagram of another interactive interface provided in this embodiment of the solution. Figure 14B The new position of node "Component B" corresponds to the updated node information mentioned above, and it also constitutes a new update hierarchy relationship, that is, "Component B" has changed from a child node of the original node "Component 1-1" to a child component of node "Component 1-2".

[0151] Optionally, at this time, the preview diagram of canvas 10 can also be updated based on the changes in the process hierarchy of component B.

[0152] Step 706: When the node update operation is finished, determine the update position relationship according to the update hierarchy relationship;

[0153] Furthermore, when the cursor 20 is released, it can be understood as "the node update operation is over". The above update hierarchy is then determined, and the positional relationship of component B in canvas 10 is updated. That is, the positional relationship between component B and components 1-1, 1-2, A, C and D is updated. At this time, component B becomes a child component of component 1-2.

[0154] Step 707: Determine the fourth preset layout information based on the updated positional relationship;

[0155] Furthermore, based on the above-mentioned updated positional relationship: "Component B becomes a child component of Component 1-2", at this time, the fourth preset layout information of Component 1-2 is: its child components are arranged sequentially from top to bottom, and thus in canvas 10, Component B should be located below Component D.

[0156] Step 708: Based on the fourth preset layout information, display the final preview diagram of the selected component and at least one other component in the canvas interface.

[0157] Based on the fourth preset layout information of 707, component B is displayed below component D in the interface of canvas 10.

[0158] The interactive interface construction method provided in this embodiment of the invention utilizes user adjustments to nodes in the control tree interactive interface to achieve linked updates of the positional relationships of components in the canvas, thereby updating the preview diagram, further simplifying the design process and improving the flexibility of use.

[0159] Optionally, for nodes where the update operation is not yet complete, corresponding possible implementation methods can be provided based on real-time process information. Specifically, in Figure 13 On this basis, Figure 15 A flowchart illustrating another method for building an interactive interface provided in this embodiment is available. Figure 15 The method, prior to step 705, further includes:

[0160] Step 702: During the execution of the node update operation, obtain the update process node information that represents the hierarchical relationship of the update process;

[0161] The update process node information includes the selected node and at least one other node;

[0162] Step 703: Determine the positional relationship of the update process based on the hierarchical relationship of the update process;

[0163] The update process positional relationship refers to the update process positional relationship between the selected component and at least one other node;

[0164] Step 704: Determine the fifth preset layout information based on the positional relationship during the update process;

[0165] Step 705: Based on the fifth preset layout information, display a process preview diagram of the selected component and at least one other component in the canvas interface.

[0166] Specifically, in combination Figure 14BWhen cursor 20 is not released, it can be understood as being in the "node update operation execution" state. At this time, node "Component B" is located as a child node under node "Component 1-2", which is the node information of the update process mentioned above. The corresponding positional relationship of this update process is the positional relationship of Component B and other nodes at canvas 10. Based on Figure 14B For example, this fifth preset layout information is the same as the fourth preset layout information mentioned above. Unless the user drags the node "Component B" to another location that would cause changes to the node information.

[0167] The following is combined Figure 2 The interactive layer 30, logic layer 31, rendering layer 32, and control tree 33 shown illustrate the interactive flow in the above example where the user drags and drops nodes in the control tree interactive interface to create a linked layout. It can be understood that, for this solution, the control tree 33, i.e., the "control tree interactive interface," can be part of the aforementioned interactive layer 30. Specifically, Figure 16 A signaling interaction diagram illustrating an interactive interface construction method provided in this embodiment of the solution is shown below. Figure 16 The signaling interaction process includes:

[0168] Step 800: The control tree 33 sends the node update operation to the logic layer 31;

[0169] Step 801: Logic layer 31 determines the node process location information;

[0170] Specifically, in one possible implementation of step 702 above: obtain the node process position information corresponding to the component selection operation; the node process position information represents the process position of the selected node;

[0171] Step 802: Logic layer 31 processes the virtual preview diagram;

[0172] The logic layer 31 can determine the hierarchical relationship of the update process based on the position information of the node process and the position information of other nodes. Then, based on the hierarchical relationship of the update process, it can confirm whether the node information in the control tree interaction interface has changed, thereby confirming the virtual preview diagram before display.

[0173] Step 803: The logic layer 31 instructs the control tree 33 to update;

[0174] Specifically, it indicates the node information in the control tree interaction interface during the update of control tree 33. Since the node update operation is not yet complete, it specifically refers to the node information during the update process.

[0175] Then control tree 33 responds.

[0176] Step 804: Update the cache;

[0177] and Figure 12 The component process location information in the example is similar, storing the node process location information in a cache. This node process location information can also be cached using a doubly linked list (location information) + hash table (storage + lookup) based on the LRU algorithm.

[0178] Step 805: Control tree 33 informs logic layer 31 that the operation is complete;

[0179] Specifically, the operation ends when the above-mentioned node update operation is completed. For example, the user releases the mouse button or leaves the touch screen, thereby releasing the cursor 20 mentioned above.

[0180] Step 806: Logic layer 31 instructs rendering layer 32 to update the preview diagram.

[0181] Specifically, the rendering layer 32, based on this instruction, draws the final preview diagram described above. This process can be achieved through step 708 described above.

[0182] Step 807: Rendering layer 32 indicates that control tree 33 is updated;

[0183] Specifically, the control tree 33 refers to the node information and hierarchical relationship corresponding to the control tree interactive interface described above. Then, after the control tree 33 is updated, it is responded to the logic layer 31 through the rendering layer 32.

[0184] It should be noted that when Figure 16 When the operation in step 805 ends, that is, when the node update operation ends, the node process location information in the cache can be used to further reduce the resource consumption caused by repeated data caching. Specifically, the node process location information of the node update operation is obtained.

[0185] Furthermore, in Figure 13 Before step 706, it may also include:

[0186] When the node update operation is completed, the node position information corresponding to the component selection operation is obtained; the node position information represents the current position of the selected node.

[0187] Determine whether the node location information matches the node process location information;

[0188] If so, the update hierarchy is determined based on the node's process location information and the location information of other nodes;

[0189] If not, the update hierarchy is determined based on the node's location information and the location information of other nodes.

[0190] Optionally, the criterion for determining whether node location information matches node process location information can be a preset distance threshold. If the distance between node location information and node process location information is less than this distance threshold, it means that the node location information matches the node process location information. Therefore, in the case of a match, the corresponding node location information does not need to be repeatedly cached, thereby reducing the consumption of cache resources.

[0191] Based on the solutions shown in the above embodiments, the following presents a possible implementation method for the interface design platform of this solution. Specifically, Figure 17 A schematic diagram of an interface design platform provided in an embodiment of the present invention is shown below. Figure 17 The interface design platform includes: canvas 10, control tree interactive interface 12, settings interface 14, component list interface 13, and toolbar 15.

[0192] The canvas 10 can be used to display information related to the canvas in the above embodiments;

[0193] The control tree interaction interface 12 can be used to display information related to the control tree interaction interface in the above embodiments;

[0194] The component list interface 13 can be used to display various components, such as buttons, images, and text; users can drag and drop specific components from the component list interface 13 onto the canvas 10 based on the cursor.

[0195] The settings interface 14 allows you to set specific information about the components, such as the preset layout information shown above, including size and layout, position information, background color, margin, etc.

[0196] Toolbar 15 provides basic operation tools, such as back, forward, and save functions.

[0197] Furthermore, based on the interface design platform provided in the above example, users can design the required interface using its component list interface, canvas, control tree interactive interface, settings interface, and toolbar, and then publish the corresponding interface. Optionally, Figure 18 This is a schematic diagram illustrating a release based on an interface design platform, provided as an embodiment of the present invention. (See attached diagram.) Figure 18 The release process includes:

[0198] Users can select and combine components using the canvas described in the example above.

[0199] Then, during the component design process, the data covered in the component is determined, such as the component's name, displayed text content, and images; at the same time, the corresponding events of the component are determined, such as clicks and drags, that is, the component is given functions related to the corresponding interactive operations.

[0200] Once the combination of selected components, data, and corresponding events is determined, the platform generates the corresponding code, such as Lizard / RN code.

[0201] And based on the above code, construct the interface data package to be published.

[0202] Finally, the interface data package is published.

[0203] Specifically, the aforementioned interface data package can be a new version of the program's interactive interface, or a new plugin interface within the existing interface; there are no limitations on this.

[0204] Furthermore, based on the above embodiments, this embodiment of the invention also provides an interactive interface building device, which can be used to execute the various steps of the above examples to achieve the corresponding technical effects. Specifically, Figure 19 This is a schematic diagram of an interactive interface building device provided in an embodiment of the present invention. See also: Figure 19 The device 90 includes: an input / output module 900 and a processing module 901; the input / output module 900 is used to respond to the user's component selection operation and display a preview diagram of the selected component on the canvas interface;

[0205] The processing module 901 is used to, when the component selection operation ends, confirm the current positional relationship between the selected component and other components in the canvas interface; determine the current hierarchical relationship between the selected component and other components based on the current positional relationship; if the current hierarchical relationship is a sibling relationship, determine whether the selected component matches the first preset layout information based on the current positional relationship; if the selected component does not match the first preset layout information, generate a second parent component, and use the selected component and other components as child components of the second parent component;

[0206] The input / output module 900 is also used to display the final preview diagram of the selected component and other components in the canvas interface based on the second preset layout information corresponding to the second parent component.

[0207] Optionally, the input / output module 900 is also used for:

[0208] If the selected component matches the first preset layout information, the final preview diagram of the selected component and other components is displayed on the canvas interface according to the first preset layout information.

[0209] If the current hierarchy is a parent-child relationship, other components are used as the third parent component of the selected component, and the final preview diagram of the selected component and other components is displayed on the canvas interface according to the third preset layout information corresponding to the third parent component.

[0210] Optionally, the processing module 901 is further configured to obtain the process positional relationship between the selected component and other components in the canvas interface during the execution of the component selection operation; and determine the process hierarchy relationship between the selected component and other components based on the process positional relationship.

[0211] Correspondingly, the input / output module 900 is also used to display process node information representing the hierarchical relationship of the process in the control tree interactive interface.

[0212] Optionally, the processing module 901 is further configured to obtain component process position information of the component selection operation, wherein the current position information represents the process position of the selected component; cache the component process position information; and determine the process position relationship based on the component process position information and the position information of other components.

[0213] Optionally, the processing module 901 is further configured to, when the component selection operation ends, obtain the current position information of the component in the component selection operation; determine whether the current position information of the component matches the component process position information; if yes, determine the current position relationship based on the component process position information and the position information of other components; if no, determine the current position relationship based on the current position information of the component and the position information of other components.

[0214] Correspondingly, the input / output module 900 is also used to update the process node information in the control tree interaction interface to the current node information when the component selection operation ends, and the current node information represents the current hierarchical relationship.

[0215] Optionally, the input / output module 900 is also used to display the current node information representing the current hierarchical relationship in the control tree interactive interface; and to display the updated node information representing the updated hierarchical relationship in the control tree interactive interface in response to the user's node update operation.

[0216] Accordingly, the processing module 901 is also used to determine the update position relationship based on the update hierarchy relationship when the node update operation ends; and to determine the fourth preset layout information based on the update position relationship.

[0217] Accordingly, the input / output module 900 is also used to display a final preview diagram of the selected component and at least one other component in the canvas interface based on the fourth preset layout information.

[0218] Optionally, the processing module 901 is further configured to, during the execution of the node update operation, obtain update process node information representing the hierarchical relationship of the update process; determine the positional relationship of the update process based on the hierarchical relationship of the update process; and determine the fifth preset layout information based on the positional relationship of the update process.

[0219] Correspondingly, the input / output module 900 is also used to display a process preview diagram of the selected component and at least one other component in the canvas interface according to the fifth preset layout information.

[0220] Optionally, the processing module 901 is further configured to obtain the node process position information corresponding to the component selection operation; cache the node process position information; determine the update process hierarchy relationship based on the node process position information and the position information of other nodes; when the node update operation ends, obtain the node position information corresponding to the component selection operation; the node position information represents the current position of the selected node; determine whether the node position information matches the node process position information; if yes, determine the update hierarchy relationship based on the node process position information and the position information of other nodes; if no, determine the update hierarchy relationship based on the node position information and the position information of other nodes.

[0221] Optionally, embodiments of the present invention also provide a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the method flow as shown in the above example to achieve the corresponding technical effects.

[0222] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0223] In addition, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0224] If a function is implemented as a software module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part 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 of the various embodiments of this application. 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.

[0225] The above are merely preferred embodiments of this application and are not intended to limit this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. An interactive interface building method, characterized in that, include: In response to the user's component selection, display a preview of the selected component on the canvas interface; When the component selection operation ends, confirm the current positional relationship between the selected component and other components in the canvas interface; The current hierarchical relationship between the selected component and the other components is determined based on the current positional relationship; If the current hierarchical relationship is a sibling relationship, it is determined whether the selected component matches the first preset layout information based on the current positional relationship; the first preset layout information corresponds to the first parent component to which the other components belong; the first preset layout information represents the arrangement of the first type of components. If the selected component does not match the first preset layout information, a second parent component is generated, and the selected component and the other components are used as child components of the second parent component. Based on the second preset layout information corresponding to the second parent component, the final preview diagram of the selected component and the other components is displayed in the canvas interface; The second preset layout information represents the arrangement of the second type of components; If the current hierarchical relationship is a parent-child relationship, the other components are used as the third parent component of the selected component, and the final preview diagram of the selected component and the other components is displayed in the canvas interface according to the third preset layout information corresponding to the third parent component.

2. The method of claim 1, wherein, Also includes: If the selected component matches the first preset layout information, the final preview diagram of the selected component and the other components is displayed on the canvas interface according to the first preset layout information.

3. The method of claim 1, wherein, After responding to the user's component selection and displaying a preview of the selected component on the canvas interface, the process also includes: During the execution of the component selection operation, the process positional relationship between the selected component and other components in the canvas interface is obtained; The process hierarchy relationship between the selected component and the other components is determined based on the process positional relationship. The process node information representing the hierarchical relationship of the process is displayed in the control tree interactive interface.

4. The method of claim 3, wherein, The step of obtaining the positional relationship between the selected component and other components in the canvas interface during the component selection operation includes: Obtain the component process position information of the component selection operation, wherein the component process position information represents the process position of the selected component; Cache the process location information of the component; The process position relationship is determined based on the process position information of the component and the position information of the other components; The step of confirming the current positional relationship between the selected component and other components in the canvas interface when the component selection operation ends includes: When the component selection operation ends, obtain the current position information of the component selected in the component selection operation; Determine whether the current position information of the component matches the process position information of the component; If so, the current positional relationship is determined based on the component process position information and the position information of the other components; If not, the current position relationship is determined based on the current position information of the component and the position information of the other components.

5. The method of claim 4, wherein, Also includes: When the component selection operation ends, the process node information in the control tree interaction interface is updated to the current node information, and the current node information represents the current hierarchical relationship.

6. The method of claim 1, wherein, Also includes: The current node information representing the current hierarchical relationship is displayed in the control tree interactive interface; The current node information includes the selected node and at least one other node; The selected node corresponds to the selected component; The other nodes correspond to the other components; In response to the user's node update operation, the updated node information representing the update hierarchy relationship is displayed on the control tree interaction interface; The updated node information includes the selected node and at least one of the other nodes; When the node update operation is completed, the update position relationship is determined according to the update hierarchy relationship; The updated positional relationship is the updated positional relationship between the selected component and at least one of the other nodes; The fourth preset layout information is determined based on the updated positional relationship; Based on the fourth preset layout information, a final preview diagram of the selected component and at least one of the other components is displayed on the canvas interface.

7. The method of claim 6, wherein, Before the step of determining the update position relationship based on the update hierarchy relationship when the node update operation ends, the method further includes: During the execution of the node update operation, update process node information representing the hierarchical relationship of the update process is obtained; the update process node information includes the selected node and at least one of the other nodes. The update process position relationship is determined based on the hierarchical relationship of the update process; the update process position relationship is the update process position relationship between the selected component and at least one of the other nodes; The fifth preset layout information is determined based on the positional relationship during the update process; Based on the fifth preset layout information, a process preview diagram of displaying the selected component and at least one of the other components in the canvas interface is shown.

8. The method as described in claim 7, characterized in that, The steps for obtaining the hierarchical relationship of the update process during the execution of the node update operation include: Obtain the node process position information corresponding to the component selection operation; the node process position information represents the process position of the selected node. Cache the node process location information; The hierarchical relationship of the update process is determined based on the location information of the node process and the location information of the other nodes; Before the step of determining the update position relationship based on the update hierarchy relationship when the node update operation ends, the method further includes: When the node update operation ends, the node position information corresponding to the component selection operation is obtained; the node position information represents the current position of the selected node. Determine whether the node location information matches the node process location information; If so, the update hierarchy relationship is determined based on the node process location information and the location information of the other nodes; If not, the update hierarchy relationship is determined based on the node location information and the location information of the other nodes.

9. An interactive interface building device, characterized in that, The input / output module is used to respond to the user's component selection operation and display a preview of the selected component on the canvas interface; The processing module is used to confirm the current positional relationship between the selected component and other components in the canvas interface when the component selection operation ends. The current hierarchical relationship between the selected component and the other components is determined based on the current positional relationship; If the current hierarchical relationship is a sibling relationship, determine whether the selected component matches the first preset layout information based on the current positional relationship; the first preset layout information corresponds to the first parent component to which the other components belong; the first preset layout information represents the arrangement of the first type of components; if the selected component does not match the first preset layout information, generate a second parent component, and use the selected component and the other components as child components of the second parent component; The input / output module is further configured to display a final preview diagram of the selected component and the other components in the canvas interface according to the second preset layout information corresponding to the second parent component; the second preset layout information represents the arrangement of the second type of components; The input / output module is further configured to, if the current hierarchical relationship is a parent-child relationship, use the other components as the third parent component of the selected component, and display the final preview diagram of the selected component and the other components in the canvas interface according to the third preset layout information corresponding to the third parent component.

10. An electronic device, characterized in that, include: Memory, used to store one or more programs; processor; When the one or more programs are executed by the processor, the method as described in any one of claims 1-8 is implemented.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1-8.

Images