User interface generation method and device, equipment and storage medium

Abstract

The invention discloses a user interface generation method and device, equipment and a storage medium, and relates to the technical field of computers.The method comprises the steps that a first interface state is constructed according to code data, and a second interface state is constructed according to the mapping relation between user interaction and component change, the code data is generated according to an interface established by the interface establishment platform; determining interface components according to the first interface state and the second interface state, and constructing an interface tree according to each interface component; and traversing and rendering each interface component according to the interface tree, and generating the user interface. According to the technical scheme, after the multi-terminal synchronization engine integrated in the client generates the state according to the received code data indicating the interface designed by the UI designer and the mapping relation between the user interaction and the component change, the client generates the user interface according to the state, the generation of the user interface can be realized without updating the version of the client, and the user experience is improved. And real-time publishing and updating of new functions and new contents of the client are facilitated, and the user experience is improved.

Description

Technical Field

[0001] Embodiments of the present invention relate to the field of computer technology, and in particular to a method, apparatus, device and storage medium for generating a user interface. Background Art

[0002] In order to facilitate users to operate the application intuitively and conveniently, the server will provide a corresponding user interface during the operation of the application. The user interface usually includes interface components that implement different functions of the application. When the user triggers the operation of the corresponding interface component in the user interface, the application will perform corresponding data processing operations. In order to improve user participation in the application, the application needs to be updated in a timely manner. The update of the user interface has become a technical problem that needs to be solved urgently.

[0003] The emergence of dynamic technology can solve the problem of difficulty in updating the user interface. By configuring JSON in Tangram (user interface development framework), dynamic construction of the user interface can be achieved.

[0004] However, the use of Tangram depends on a specific technology stack, which increases the learning cost and usage threshold for user interface (UI) designers. Summary of the invention

[0005] The present invention provides a user interface generation method, device, equipment and storage medium to realize fast and convenient generation of a user interface.

[0006] In a first aspect, an embodiment of the present invention provides a method for generating a user interface, comprising:

[0007] Constructing a first interface state according to the code data, and constructing a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface constructed by an interface construction platform;

[0008] Determine an interface component according to the first interface state and the second interface state, and construct an interface tree according to each of the interface components;

[0009] The interface components are traversed and rendered according to the interface tree to generate a user interface.

[0010] The technical solution of an embodiment of the present invention provides an interface generation method, including: constructing a first interface state according to code data, and constructing a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface built by an interface building platform; determining interface components according to the first interface state and the second interface state, and constructing an interface tree according to each of the interface components; traversing and rendering each of the interface components according to the interface tree to generate a user interface. In the above technical solution, the client can firstly process the code data corresponding to the interface built by the interface building platform based on the multi-terminal synchronization engine integrated therein and the mapping relationship between user interaction and component changes to determine the state corresponding to the interface. On the one hand, the code data and the mapping relationship between user interaction and component changes are all determined by the interface building platform, and can be determined without actual code writing, thereby improving convenience and operability. On the other hand, the mapping relationship between user interaction and component changes reflects the interaction logic of the user interface and improves the dynamics of the user interface. Secondly, the state can be processed by the parser corresponding to the state to obtain the interface component, and the interface component is organized according to the layout rules reflected by the component attributes of the interface component to obtain the interface tree, thereby realizing the construction of the interface tree, and then the interface components can be traversed and rendered according to the interface tree to generate the user interface, so that the client can quickly generate the interface designed by the UI designer. Moreover, after the multi-terminal synchronization engine integrated by the client generates the state according to the received code data indicating the interface designed by the UI designer and the mapping relationship between user interaction and component changes, the client generates the user interface according to the state, and the generation of the user interface can be realized without updating the client version, thereby facilitating the real-time release and update of new functions and new content of the client, thereby improving the user experience.

[0011] Further, constructing a first interface state according to the code data includes:

[0012] Determining the style data and business data corresponding to each position identifier in the code data;

[0013] Determine the interface component corresponding to each of the position identifiers by parsing the style data corresponding to each of the position identifiers;

[0014] The first interface state is constructed according to the interface components corresponding to each of the location identifiers and the business data.

[0015] Furthermore, before determining the style data and business data corresponding to each position identifier in the code data, the method further includes:

[0016] According to each of the position identifiers, placeholder style data and placeholder service data corresponding to the position identifier are determined in the placeholder template data.

[0017] Furthermore, when determining the style data and business data corresponding to each position identifier in the code data, it also includes:

[0018] If the code data does not include the style data and the business data corresponding to any of the location identifiers, a data request is determined according to the location identifier, and the style data and the business data corresponding to the location identifier are acquired based on the data request.

[0019] Furthermore, constructing a second interface state according to the mapping relationship between the user interaction and the component change includes:

[0020] Determine the interface components corresponding to each of the user interactions and the transformation mode of each of the interface components, and determine the mapping relationship between the user interactions and component changes according to the interface components corresponding to each of the user interactions and the transformation mode of each of the interface components;

[0021] The second interface state is determined according to component changes before and after the user interaction occurs.

[0022] Further, determining an interface component according to the first interface state and the second interface state includes:

[0023] Determine, according to the state types of each of the first interface states and each of the second interface states, the parser corresponding to each of the first interface states and each of the second interface states and create the interface components corresponding to each of the first interface states and each of the second interface states;

[0024] The business data corresponding to each of the first interface states and each of the second interface states are bound to the corresponding interface components.

[0025] Furthermore, constructing an interface tree according to each of the interface components includes:

[0026] The interface tree is constructed according to the parent-child relationship and the hierarchical relationship between the interface components.

[0027] In a second aspect, an embodiment of the present invention further provides an interface generation device, comprising:

[0028] A construction module, used to construct a first interface state according to code data, and to construct a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface constructed by an interface construction platform;

[0029] A determination module, configured to determine an interface component according to the first interface state and the second interface state, and to construct an interface tree according to each of the interface components;

[0030] A generation module is used to traverse and render each of the interface components according to the interface tree to generate a user interface.

[0031] In a third aspect, an embodiment of the present invention further provides an electronic device, the electronic device comprising:

[0032] at least one processor; and a memory communicatively coupled to the at least one processor;

[0033] The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the user interface generation method as described in any one of the first aspects.

[0034] In a fourth aspect, an embodiment of the present invention further provides a storage medium comprising computer executable instructions, wherein the computer executable instructions, when executed by a computer processor, are used to execute a user interface generating method as described in any one of the first aspects.

[0035] In a fifth aspect, the present application provides a computer program product, which includes computer instructions. When the computer instructions are executed on a computer, the computer executes the user interface generation method provided in the first aspect.

[0036] It should be noted that the above computer instructions may be stored in whole or in part on a computer-readable storage medium, wherein the computer-readable storage medium may be packaged together with the processor of the user interface generating device, or may be packaged separately from the processor of the user interface generating device, and this application does not limit this.

[0037] The description of the second, third, fourth and fifth aspects in this application can refer to the detailed description of the first aspect; and the beneficial effects of the description of the second, third, fourth and fifth aspects can refer to the beneficial effect analysis of the first aspect, which will not be repeated here.

[0038] In this application, the name of the user interface generating device does not limit the device or functional module itself. In actual implementation, these devices or functional modules may appear with other names. As long as the functions of each device or functional module are similar to those of this application, they fall within the scope of the claims of this application and their equivalent technologies.

[0039] These and other aspects of the present application will become more apparent from the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0041] Figure 1 A flowchart of a method for generating a user interface provided by an embodiment of the present invention;

[0042] Figure 2 Flow chart of another user interface generation method provided by an embodiment of the present invention

[0043] Figure 3 A schematic diagram of a user interface generation system provided by an embodiment of the present invention;

[0044] Figure 4 A schematic diagram of the structure of a user interface generating device provided by an embodiment of the present invention;

[0045] Figure 5 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0046] The present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It is to be understood that the specific embodiments described herein are only used to explain the present invention, rather than to limit the present invention. It should also be noted that, for ease of description, only parts related to the present invention, rather than all structures, are shown in the accompanying drawings.

[0047] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0048] The terms "first" and "second" and the like in the specification and drawings of this application are used to distinguish different objects, or to distinguish different processing of the same object, rather than to describe a specific order of objects.

[0049] In addition, the terms "including" and "having" and any variations thereof mentioned in the description of the present application are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but may optionally include other steps or units that are not listed, or may optionally include other steps or units that are inherent to these processes, methods, products or devices.

[0050] It should be mentioned before discussing exemplary embodiments in more detail that some exemplary embodiments are described as processes or methods depicted as flow charts. Although the flow charts describe various operations (or steps) as sequential processes, many operations therein can be implemented in parallel, concurrently or simultaneously. In addition, the order of various operations can be rearranged. The process can be terminated when its operation is completed, but can also have additional steps not included in the accompanying drawings. The process can correspond to methods, functions, procedures, subroutines, subprograms, etc. In addition, the embodiments in the present invention and the features in the embodiments can be combined with each other without conflict.

[0051] It should be noted that, in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way.

[0052] In the description of the present application, unless otherwise specified, “plurality” means two or more.

[0053] In application development, the emergence of dynamic technologies such as Yoga (an open source layout engine) and Tangram can solve the problem of difficult UI updates. However, these solutions often only provide limited dynamic capabilities. Yoga allows the user interface to achieve consistent layout effects on multiple platforms through the Flexbox algorithm. However, Yoga mainly focuses on the layout itself and does not provide a complete solution for updating dynamic content and displaying interactive logic in the user interface. Tangram supports dynamic construction of user interfaces through JSON configuration, but its performance in interactive processing is insufficient. In addition, the use of Tangram depends on a specific technology stack, which may not be a problem for developers, but it poses a significant obstacle to non-technical professionals such as UI designers.

[0054] Therefore, the present application proposes a user interface generation method to achieve fast and convenient generation of a user interface.

[0055] The user interface generation method proposed in this application will be described in detail below with reference to diagrams and embodiments.

[0056] Figure 1 A flowchart of a user interface generation method provided by an embodiment of the present invention. This embodiment is applicable to situations where the user interface of a client needs to be updated in a timely manner. The method can be executed by an interface generation device, such as Figure 1 As shown, the specific steps include:

[0057] Step 110: construct a first interface state according to the code data, and construct a second interface state according to the mapping relationship between user interaction and component change.

[0058] The code data is generated according to the interface built by the interface building platform.

[0059] The interface building platform provides common UI components. UI designers can drag and drop components to assemble the initial interface, adjust the static properties of components, edit and create the dynamic properties of components, and get the built interface. They can also adjust the static properties of components, edit and create dynamic properties based on the previous version of the interface to get an updated interface. After determining the interface, the interface building platform can process the interface and convert it into code data.

[0060] UI designers can also design the mapping relationship between user interaction and component changes through the interface building platform. For example, the user interaction can be determined as clicking a button, sliding the screen, etc. When the user clicks the play button, if the current state of the component is "pause", it is converted to "playing"; if the current state of the component is "playing", it is converted to "pause".

[0061] Furthermore, the interface building platform can send the code data and the mapping relationship between user interaction and component changes to the multi-terminal synchronization engine integrated in the client. The multi-terminal synchronization engine can construct the first interface state through the style data and business data contained in the code data, and can also construct the second interface state through the mapping relationship between user interaction and component changes. In actual applications, the first interface state can be understood as the static state corresponding to each component in the interface, and the second interface state can be understood as the dynamic state corresponding to the interface. The static state corresponding to each component in the interface and the dynamic state corresponding to the interface can be collectively referred to as the state corresponding to the interface. The state represents multiple states of the interface.

[0062] In the embodiment of the present invention, the state corresponding to the interface is constructed according to the code data sent by the interface construction platform and the mapping relationship between user interaction and component changes, providing a data basis for generating the user interface.

[0063] Step 120: determine interface components according to the first interface state and the second interface state, and construct an interface tree according to each of the interface components.

[0064] Specifically, the client can first extract the state from the multi-terminal synchronization engine, and then create the corresponding interface components based on the state. It can also bind the interface components and the business data corresponding to the interface components to ensure the accuracy of the content displayed by the interface components. Finally, the interface components are organized according to the tree structure to generate an interface tree. Specifically, these interface components can be organized according to the layout rules reflected by the component properties of the interface components to generate an interface tree. The component properties here include static properties and dynamic properties. The interface tree defines the hierarchical relationship and parent-child relationship between interface components.

[0065] In the embodiment of the present invention, the client determines the interface components according to the state determined by the multi-terminal synchronization engine, organizes the interface components according to the layout rules reflected by the component properties of the interface components to obtain the interface tree, and implements the construction of the interface tree.

[0066] Step 130: traverse and render each of the interface components according to the interface tree to generate a user interface.

[0067] Specifically, the client can first traverse and render each interface component according to the hierarchical relationship of each interface component in the interface tree to generate the interface component, and then associate the interface components with parent-child relationship according to the parent-child relationship of each interface component in the interface tree to obtain the user interface.

[0068] In the embodiment of the present invention, the client traverses and renders each interface component according to the interface tree to generate a user interface, so that the client can quickly generate the interface designed by the UI designer.

[0069] The user interface generation method provided by an embodiment of the present invention includes: constructing a first interface state according to code data, and constructing a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface built by an interface building platform; determining interface components according to the first interface state and the second interface state, and constructing an interface tree according to each of the interface components; traversing and rendering each of the interface components according to the interface tree to generate a user interface. In the above technical solution, the client can firstly process the code data corresponding to the interface built by the interface building platform based on the multi-terminal synchronization engine integrated therein and the mapping relationship between user interaction and component changes to determine the state corresponding to the interface. On the one hand, the code data and the mapping relationship between user interaction and component changes are all determined by the interface building platform, and can be determined without actual code writing, thereby improving convenience and operability. On the other hand, the mapping relationship between user interaction and component changes reflects the interaction logic of the user interface and improves the dynamics of the user interface. Secondly, the state can be processed by the parser corresponding to the state to obtain the interface component, and the interface component is organized according to the layout rules reflected by the component attributes of the interface component to obtain the interface tree, thereby realizing the construction of the interface tree, and then the interface components can be traversed and rendered according to the interface tree to generate the user interface, so that the client can quickly generate the interface designed by the UI designer. Moreover, after the multi-terminal synchronization engine integrated by the client generates the state according to the received code data indicating the interface designed by the UI designer and the mapping relationship between user interaction and component changes, the client generates the user interface according to the state, and the generation of the user interface can be realized without updating the client version, thereby facilitating the real-time release and update of new functions and new content of the client, thereby improving the user experience.

[0070] Figure 2 This is a flowchart of another user interface generation method provided by an embodiment of the present invention. This embodiment is specific based on the above embodiment. Figure 2 As shown, the method may also include:

[0071] Step 210: construct a first interface state according to the code data.

[0072] The code data is generated according to the interface built by the interface building platform.

[0073] In one implementation, step 210 may specifically include:

[0074] Determine the style data and business data corresponding to each location identifier in the code data; determine the interface component corresponding to each location identifier by parsing the style data corresponding to each location identifier; and construct the first interface state according to the interface component corresponding to each location identifier and the business data.

[0075] The position identifier is used to indicate the display position of the component in the user interface, and the code data includes style data and business data of the component corresponding to each display position of the user interface.

[0076] The interface building platform provides commonly used UI components such as text interface components, button interface components, image interface components, layout interface components, and title interface components. UI designers can assemble the initial interface by dragging and dropping components. They can also adjust static component properties such as width, height, color, rounded corners, spacing, and alignment through the component editing function, and edit and create dynamic properties such as text information and interactive information of interface components through the variable management function. Based on the interface building platform, you can preview the initial interface displayed with different attributes. In addition, the interface building platform can provide commonly used template interfaces, and UI designers can use the template interface to quickly create interfaces. After determining the interface, the interface building platform can process the interface and convert it into code data. For example, it can convert it into JSON data that can be rendered by the front end.

[0077] It should be noted that the interface building platform can save the interface designed by UI designers, which is easy to retrieve and reuse, greatly improving the personalized experience and operation efficiency. The front end of the interface building platform can use the Flutter framework, which provides UI designers with a consistent and smooth interface experience with its cross-platform advantages. The back end can use Spring Boot to ensure efficient and stable services and simplify enterprise-level application development. The data storage uses the MySql database to ensure high performance and reliability of data processing, and ensure the rapid iteration and high scalability of the interface building platform.

[0078] Before the interface building platform sends the code data to the multi-terminal synchronization engine integrated in the client, after the client is started, it can determine whether it is necessary to download the placeholder template data based on the current version information of the client. If the current version information of the client is the latest version information, there is no need to download the placeholder template data. The current interface is the interface corresponding to the latest version information. If the current version information of the client is lower than the latest version information, it is necessary to download the placeholder template data. Specifically, the server can be accessed to obtain compressed placeholder data. The placeholder template data can be obtained by decompressing the compressed placeholder data and deleting the content and compressed package in the original decompressed directory. Of course, the current version information of the client can be updated synchronously.

[0079] After downloading the placeholder template data, the placeholder style data and placeholder service data corresponding to the location identifier can be determined in the placeholder template data according to the location identifier. The placeholder style data is used to display a preset style before receiving the code data, and the placeholder service data is used to display a preset text before receiving the code data to prompt the user to enter the information or content.

[0080] After the interface building platform sends the code data to the multi-terminal synchronization engine integrated in the client, the multi-terminal synchronization engine can determine the style data and business data corresponding to each location identifier in the code data according to the location identifier. Specifically, it can search in the code data according to the location identifier, and determine the data corresponding to the location identifier in the code data as the style data and business data corresponding to the location identifier. Then, the component style of the position corresponding to the location identifier can be determined by parsing the style data. According to the component style, the corresponding state can be constructed, and the business data corresponding to the location identifier is bound to the corresponding state. The first interface state corresponding to the location identifier can be obtained. The first interface state can be understood as the static state corresponding to each component in the interface, that is, the first interface state corresponding to the corresponding position of the location identifier in the interface can be obtained, and then the first interface state corresponding to all positions in the interface can be obtained.

[0081] If the ordinary parsing method cannot parse the style data, the component style may be determined as a judgment box. At this time, the corresponding relational expression, value operation and constant operation can be parsed according to the style data, and the component style of the position corresponding to the position identifier can be determined according to the contents parsed from the style data.

[0082] In actual applications, when determining the style data and business data corresponding to each location identifier in the code data, if the code data does not include the style data and business data corresponding to any location identifier, the data request is determined according to the location identifier, and the interface building platform is accessed based on the data request to obtain the style data and business data corresponding to the location identifier in the MySql database of the interface building platform.

[0083] The interface building platform greatly simplifies interface design, making complex configurations easy, and greatly improves design speed and quality through intelligent suggestions. The interface building platform adopts a shared code strategy, so that code data can be run anywhere after being written once, and the corresponding code data can be quickly determined based on the built interface. The code reusability is greatly improved, which not only makes the code base more tidy, but also reduces the subsequent maintenance costs.

[0084] In the embodiment of the present invention, the first interface state indicating the components in the interface is constructed according to the code data sent by the interface construction platform.

[0085] Step 220: Construct a second interface state according to the mapping relationship between user interaction and component change.

[0086] In one implementation, step 220 may specifically include:

[0087] Determine the interface component corresponding to each user interaction and the transformation method of each interface component, and determine the mapping relationship between the user interaction and the component change according to the interface component corresponding to each user interaction and the transformation method of each interface component; determine the second interface state according to the mapping relationship between the user interaction and the component change.

[0088] Among them, user interaction can be click to jump, click to visit, click to display animation, etc.

[0089] Specifically, first, the interface components corresponding to the user interaction can be determined. For example, the pre-click interface components and post-click interface components corresponding to the click jump and the transformation methods of the pre-click and post-click interface components can be determined. Secondly, the mapping relationship between user interaction and component change can be determined based on the interface components corresponding to each user interaction and the transformation methods of each interface component. Then, the second interface state can be determined based on this mapping relationship. The second interface state can be understood as the dynamic state corresponding to the interface, which is used to indicate the dynamic interaction between the user and the interface.

[0090] In addition, the static state corresponding to each component in the interface and the dynamic state corresponding to the interface can be collectively referred to as the state corresponding to the interface. The state represents the various states of the interface. The state is obtained by optimizing the code data for the user interface display, ensuring efficient data flow and utilization.

[0091] In the embodiment of the present invention, a second interface state of dynamic interaction between a user and an interface is constructed according to a mapping relationship between user interaction and component changes sent by an interface construction platform.

[0092] Step 230: Determine an interface component according to the first interface state and the second interface state.

[0093] In one implementation, step 230 may specifically include:

[0094] Determine the parser corresponding to each of the first interface states and each of the second interface states according to the state type of each of the first interface states and each of the second interface states, and create the interface components corresponding to each of the first interface states and each of the second interface states; bind the business data corresponding to each of the first interface states and each of the second interface states to the corresponding interface components.

[0095] Among them, state types include basic data types (numbers, strings, Boolean values), conforming data types (objects, arrays), special state types (immutable state, asynchronous state), interface-specific states (form state, routing state, component state), etc.

[0096] Specifically, the client has built-in parsers of various types, and different types of parsers can be used to parse different types of states. Therefore, first, the parser suitable for the state can be determined according to the type of state. The parser can be understood as a tool or function library that converts the state into an interface component. Secondly, the interface component corresponding to the state can be created based on the parser corresponding to the state. Specifically, the component factory can be called based on the parser to process the state to create the interface component corresponding to the state. For example, a label / textview type interface component can be created based on textstate and markdownstate, an imageview type interface component can be created based on imagestate, a button type interface component can be created based on buttonstate, and a view type interface component can be created based on linestate and containerstate. Then, the business data corresponding to the state can be bound to the interface component created above to ensure the accuracy of the content displayed by the interface component.

[0097] The state is converted into specific interface components based on the state-corresponding parser, which not only considers the accuracy of the layout but also ensures the fidelity of the design.

[0098] In the embodiment of the present invention, the interface component is generated according to the state determined by the multi-terminal synchronization engine, thereby realizing the local generation of the interface component.

[0099] Step 240: construct an interface tree according to each of the interface components.

[0100] In one implementation, step 240 may specifically include:

[0101] The interface tree is constructed according to the parent-child relationship and the hierarchical relationship between the interface components.

[0102] Specifically, the interface components can be organized according to a tree structure to generate an interface tree. Specifically, the parent-child relationship and hierarchical relationship between the interface components can be determined according to the layout rules reflected by the component properties of the interface components, and then the interface tree can be generated according to the parent-child relationship and hierarchical relationship between the components.

[0103] In the embodiment of the present invention, the interface components are organized according to the layout rules reflected by the component properties of the interface components to obtain the interface tree, thereby realizing the construction of the interface tree.

[0104] Step 250: traverse and render each of the interface components according to the interface tree to generate a user interface.

[0105] As mentioned above, the client can traverse and render each interface component according to the hierarchical relationship of each interface component in the interface tree, generate interface components, and associate interface components with parent-child relationships according to the parent-child relationship of each interface component in the interface tree, so that the interface components are arranged and rendered on the client according to established layout rules, ensuring that the user interface displayed by the client is both beautiful and practical.

[0106] In the embodiment of the present invention, the client traverses and renders each interface component according to the interface tree to generate a user interface, so that the client can quickly generate the interface designed by the UI designer.

[0107] The user interface generation method provided by the embodiment of the present invention includes: constructing a first interface state according to code data; constructing a second interface state according to the mapping relationship between user interaction and component change; determining interface components according to the first interface state and the second interface state; constructing an interface tree according to each of the interface components; traversing and rendering each of the interface components according to the interface tree to generate a user interface. In the above technical solution, the client can firstly process the code data corresponding to the interface built by the interface building platform based on the multi-terminal synchronization engine integrated by it and the mapping relationship between user interaction and component change to determine the state corresponding to the interface. On the one hand, the code data and the mapping relationship between user interaction and component change are all determined by the interface building platform, which can be determined without actual code writing, thereby improving convenience and operability. On the other hand, the mapping relationship between user interaction and component change reflects the interaction logic of the user interface and improves the dynamics of the user interface. Secondly, the state can be processed by the parser corresponding to the state to obtain the interface component, and the interface component can be organized according to the layout rules reflected by the component attributes of the interface component to obtain the interface tree, thereby realizing the construction of the interface tree, and then the interface components can be traversed and rendered according to the interface tree to generate the user interface, so that the client can quickly generate the interface designed by the UI designer. In addition, the multi-terminal synchronization engine integrated in the client generates the state based on the received code data indicating the interface designed by the UI designer and the mapping relationship between user interaction and component changes. The client generates the user interface based on the state, and the user interface can be generated without updating the client version, which facilitates the real-time release and update of new functions and new content on the client, and improves the diversity of user experience. In addition, such an update mechanism effectively reduces data usage and ensures that users always receive the latest information.

[0108] Figure 3 A schematic diagram of a user interface generation system provided by an embodiment of the present invention is shown in FIG. Figure 3 As shown, the user interface generation system includes an interface building platform and a client.

[0109] Among them, the interface building platform has template management function, component management function, variable management function, user management function, code management function and interface display function. The template management function is used to provide interface templates for UI designers. UI designers can use interface templates to quickly create interfaces. The component management function is used to provide UI designers with component dragging and component static property editing functions. The variable management function is used to provide UI designers with component dynamic property creation, editing and saving functions. The user management function is used to provide a fine-grained permission management system to ensure that each UI designer can only edit authorized component dynamic properties, thereby ensuring data security and integrity. The user management function is also used to save the interfaces created historically by UI designers for easy retrieval and reuse, improving personalized experience and operational efficiency. The code management function is used to generate Json data that can be rendered on the front end for the interface created by the UI designer, and when the UI designer creates the interface, he can view the current Json data in real time. In addition, the Json data can also be edited manually. The interface display function is used to display the interface created by the UI designer in real time, so that the UI designer can view the created interface in real time and adapt the interface layout and / or component properties in time according to needs.

[0110] The client is integrated with a multi-terminal synchronization engine, which can adapt to different environmental requirements through flexible strategies to efficiently synchronize the data of the interface building platform and the client, and ensure data accuracy and integrity. Based on the observer pattern, the user interface is updated in a timely manner according to data changes. This automatic update mechanism greatly simplifies the update process of the user interface and improves the response speed of user interaction. Based on the command pattern, user operations are converted into execution commands, making the interaction logic clear and easy to manage. It can handle more complex user input and facilitate function expansion and modification. Maintain a common rendering state definition and generate interface components through the component factory to ensure cross-platform consistency. In addition, the use of the singleton pattern ensures the global uniqueness of this state and simplifies state access and management.

[0111] The multi-terminal synchronization engine includes a data module, a layout module, an interaction module and an expression module. The data module is used to determine style data and business data based on code data, and is also used to store code data and corresponding style data and business data. The layout module and the expression module are used to build a static state based on style data and business data. The interaction module is used to build a dynamic state based on the mapping relationship between user interaction and component changes.

[0112] The client uses lightweight data description formats such as JSON to define a set of highly abstract interface components and layout rules, supporting the rapid construction and customization of complex interfaces. Combined with the concept of functional programming, the responsive update of the user interface is realized, so that the user interface can automatically respond to changes in the underlying data model. The front-end rendering engine based on modern cross-platform technologies such as WebAssembly and Flutter ensures that user interfaces compatible with various platforms are generated from a single source code.

[0113] The user interface generation system provided by the embodiment of the present invention can execute the user interface generation method provided by any embodiment of the present invention, and has the corresponding functional modules and beneficial effects for executing the user interface generation method.

[0114] Figure 4 This is a schematic diagram of the structure of a user interface generation device provided by an embodiment of the present invention, which can be applied to situations where the user interface of a client needs to be updated in a timely manner. The device can be implemented by software and / or hardware and is generally integrated in an electronic device, such as a user terminal.

[0115] like Figure 4 As shown, the device comprises:

[0116] A construction module 410 is used to construct a first interface state according to code data, and to construct a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface constructed by an interface construction platform;

[0117] A determination module 420, configured to determine an interface component according to the first interface state and the second interface state, and construct an interface tree according to each of the interface components;

[0118] The generation module 430 is used to traverse and render each of the interface components according to the interface tree to generate a user interface.

[0119] In the user interface generation device provided in this embodiment, the client can firstly process the code data corresponding to the interface built by the interface building platform based on the multi-terminal synchronization engine integrated therein and the mapping relationship between user interaction and component changes to determine the state corresponding to the interface. On the one hand, the code data and the mapping relationship between user interaction and component changes are all determined by the interface building platform, and can be determined without actual code writing, thereby improving convenience and operability. On the other hand, the mapping relationship between user interaction and component changes reflects the interaction logic of the user interface and improves the dynamic nature of the user interface. Secondly, the state can be processed by the parser corresponding to the state to obtain the interface component, and the interface component is organized according to the layout rules reflected by the component attributes of the interface component to obtain the interface tree, thereby realizing the construction of the interface tree, and then the interface components can be traversed and rendered according to the interface tree to generate the user interface, so that the client can quickly generate the interface designed by the UI designer. Moreover, after the multi-terminal synchronization engine integrated by the client generates the state based on the received code data indicating the interface designed by the UI designer and the mapping relationship between user interaction and component changes, the client generates the user interface based on the state, and the user interface generation can be realized without updating the client version, thereby facilitating the real-time release and update of new functions and new content of the client, thereby improving the user experience.

[0120] Based on the above embodiment, a module 410 is constructed, which is specifically used for:

[0121] Determine the style data and business data corresponding to each location identifier in the code data; determine the interface component corresponding to each location identifier by parsing the style data corresponding to each location identifier; construct the first interface state according to the interface component corresponding to each location identifier and the business data;

[0122] Determine the interface component corresponding to each user interaction and the transformation method of each interface component, and determine the mapping relationship between the user interaction and the component change according to the interface component corresponding to each user interaction and the transformation method of each interface component; determine the second interface state according to the component change before and after the user interaction occurs.

[0123] In one implementation, before determining the style data and business data corresponding to each position identifier in the code data, the method further includes:

[0124] According to each of the position identifiers, placeholder style data and placeholder service data corresponding to the position identifier are determined in the placeholder template data.

[0125] In one implementation, when determining the style data and business data corresponding to each position identifier in the code data, it also includes:

[0126] If the code data does not include the style data and the business data corresponding to any of the location identifiers, a data request is determined according to the location identifier, and the style data and the business data corresponding to the location identifier are acquired based on the data request.

[0127] Based on the above embodiment, the determination module 420 is specifically used for:

[0128] Determine the parser corresponding to each of the first interface states and each of the second interface states according to the state type of each of the first interface states and each of the second interface states, and create the interface components corresponding to each of the first interface states and each of the second interface states; bind the business data corresponding to each of the first interface states and each of the second interface states to the corresponding interface components; and construct the interface tree according to the parent-child relationship and the hierarchical relationship between each of the interface components.

[0129] The user interface generating device provided in the embodiment of the present invention can execute the user interface generating method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects for executing the user interface generating method.

[0130] It is worth noting that in the embodiment of the above-mentioned user interface generating device, the various units and modules included are only divided according to functional logic, but are not limited to the above-mentioned division, as long as the corresponding functions can be realized; in addition, the specific names of the functional units are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of the present invention.

[0131] Figure 5 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. Figure 5 A block diagram of an exemplary electronic device 5 suitable for implementing embodiments of the present invention is shown. Figure 5 The electronic device 5 shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0132] like Figure 5 As shown, the electronic device 5 is in the form of a general computing electronic device. The interface components of the electronic device 5 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 connecting different system interface components (including the system memory 28 and the processing unit 16).

[0133] Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor or a local bus using any of a variety of bus architectures. By way of example, these architectures include, but are not limited to, an Industry Standard Architecture (ISA) bus, a Micro Channel Architecture (MAC) bus, an Enhanced ISA bus, a Video Electronics Standards Association (VESA) local bus, and a Peripheral Component Interconnect (PCI) bus.

[0134] The electronic device 5 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by the electronic device 5, including volatile and non-volatile media, removable and non-removable media.

[0135] The system memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. The electronic device 5 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, the storage system 34 may be used to read and write non-removable, non-volatile magnetic media ( Figure 5 not shown, usually called a "hard drive"). Although Figure 5 Not shown in the figure, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk"), and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, a DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to the bus 18 via one or more data medium interfaces. The system memory 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to perform the functions of the various embodiments of the present invention.

[0136] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in system memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment. Program modules 42 generally perform the functions and / or methods of the embodiments described herein.

[0137] The electronic device 5 may also communicate with one or more external devices 14 (e.g., keyboards, pointing devices, displays 24, etc.), one or more devices that enable a user to interact with the electronic device 5, and / or any device that enables the electronic device 5 to communicate with one or more other computing devices (e.g., network cards, modems, etc.). Such communication may be performed via an input / output (I / O) interface 22. Furthermore, the electronic device 5 may also communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) via a network adapter 20. Figure 5 As shown, the network adapter 20 communicates with other modules of the electronic device 5 via the bus 18. It should be understood that although Figure 5 Not shown, other hardware and / or software modules may be used in conjunction with the electronic device 5, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0138] The processing unit 16 executes various functional applications and page displays by running the programs stored in the system memory 28, for example, implementing the user interface generation method provided in the embodiment of the present invention, which includes:

[0139] Constructing a first interface state according to the code data, and constructing a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface constructed by an interface construction platform;

[0140] Determine an interface component according to the first interface state and the second interface state, and construct an interface tree according to each of the interface components;

[0141] The interface components are traversed and rendered according to the interface tree to generate a user interface.

[0142] Of course, those skilled in the art can understand that the processor can also implement the technical solution of the user interface generating method provided by any embodiment of the present invention.

[0143] An embodiment of the present invention provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, for example, a user interface generation method provided by an embodiment of the present invention is implemented. The method includes:

[0144] Constructing a first interface state according to the code data, and constructing a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface constructed by an interface construction platform;

[0145] Determine an interface component according to the first interface state and the second interface state, and construct an interface tree according to each of the interface components;

[0146] The interface components are traversed and rendered according to the interface tree to generate a user interface.

[0147] The computer storage medium of the embodiment of the present invention can adopt any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium can be, for example, but not limited to: an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples (non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this document, a computer-readable storage medium can be any tangible medium containing or storing a program, which can be used by an instruction execution system, device or device or used in combination with it.

[0148] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, which carry computer-readable program code. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0149] The program code embodied on the computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0150] Computer program code for performing the operations of the present invention may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0151] It should be understood by those skilled in the art that the modules or steps of the present invention described above can be implemented by a general-purpose computing device, they can be concentrated on a single computing device, or distributed on a network composed of multiple computing devices, optionally, they can be implemented by a program code executable by a computer device, so that they can be stored in a storage device and executed by the computing device, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. Thus, the present invention is not limited to any specific combination of hardware and software.

[0152] In addition, the acquisition, storage, use, and processing of data in the technical solution of the present invention are in compliance with the relevant provisions of national laws and regulations.

[0153] Note that the above are only preferred embodiments of the present invention and the technical principles used. Those skilled in the art will understand that the present invention is not limited to the specific embodiments herein, and that various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in more detail through the above embodiments, the present invention is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A method for generating a user interface, characterized in that: include: Constructing a first interface state according to the code data, and constructing a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface constructed by an interface construction platform; Determine an interface component according to the first interface state and the second interface state, and construct an interface tree according to each of the interface components; The interface components are traversed and rendered according to the interface tree to generate a user interface.

2. The user interface generation method according to claim 1, characterized in that: Constructing the first interface state according to the code data includes: Determining the style data and business data corresponding to each position identifier in the code data; The first interface state corresponding to each location identifier is determined by parsing the style data corresponding to each location identifier, and the business data corresponding to each location identifier is bound to the first interface state corresponding to each location identifier.

3. The user interface generation method according to claim 2, characterized in that: Before determining the style data and business data corresponding to each position identifier in the code data, the method further includes: According to each of the position identifiers, placeholder style data and placeholder service data corresponding to the position identifier are determined in the placeholder template data.

4. The user interface generation method according to claim 2, characterized in that: When determining the style data and business data corresponding to each position identifier in the code data, it also includes: If the code data does not include the style data and the business data corresponding to any of the location identifiers, a data request is determined according to the location identifier, and the style data and the business data corresponding to the location identifier are acquired based on the data request.

5. The user interface generation method according to claim 1, characterized in that: The second interface state is constructed according to the mapping relationship between user interaction and component changes, including: Determine the interface components corresponding to each of the user interactions and the transformation mode of each of the interface components, and determine the mapping relationship between the user interactions and component changes according to the interface components corresponding to each of the user interactions and the transformation mode of each of the interface components; The second interface state is determined according to a mapping relationship between the user interaction and the component change.

6. The user interface generation method according to claim 2, characterized in that: Determining an interface component according to the first interface state and the second interface state includes: Determine, according to the state types of each of the first interface states and each of the second interface states, the parser corresponding to each of the first interface states and each of the second interface states and create the interface components corresponding to each of the first interface states and each of the second interface states; The business data corresponding to each of the first interface states and each of the second interface states are bound to the corresponding interface components.

7. The user interface generation method according to claim 1, characterized in that: Constructing an interface tree according to each of the interface components includes: The interface tree is constructed according to the parent-child relationship and the hierarchical relationship between the interface components.

8. A user interface generating device, characterized in that: include: A construction module, used to construct a first interface state according to code data, and to construct a second interface state according to a mapping relationship between user interaction and component change, wherein the code data is generated according to an interface constructed by an interface construction platform; A determination module, configured to determine an interface component according to the first interface state and the second interface state, and to construct an interface tree according to each of the interface components; A generation module is used to traverse and render each of the interface components according to the interface tree to generate a user interface.

9. An electronic device, characterized in that: The electronic device comprises: at least one processor; and a memory communicatively coupled to the at least one processor; The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the user interface generating method as described in any one of claims 1-7.

10. A storage medium containing computer executable instructions, characterized in that: When the computer executable instructions are executed by a computer processor, they are used to execute the user interface generating method as described in any one of claims 1 to 7.

Images