Interaction method and system of low-code component and front-end application and storage medium

Abstract

The invention provides an interaction method and system of a low-code component and a front-end application, and a storage medium. The interaction method comprises the steps that a first interaction process is executed through a front-end application, the first interaction process comprises the steps of monitoring whether a first interaction operation associated with a low-code component exists or not, and when the first interaction operation is monitored, obtaining component attribute change information of the low-code component by executing the first interaction operation; transmitting component attribute change information to an information transmission interface in the low-code renderer; executing a second interaction process through the low-code component, the second interaction process including detecting a target request for obtaining component attribute change information, and accessing the component attribute change information from the information transfer interface in response to the detected target request; and performing component updating according to the component attribute change information. According to the application, flexible interaction between the low-code component and the front-end application is realized, and the expandability of the front-end application is improved; interaction is carried out in an interface mode, the complexity of interaction implementation is reduced, maintenance is easy, and the cost is reduced.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular, to an interaction method, system, and storage medium between a low-code component and a front-end application. Background Art

[0002] Low-code development is a popular software development method in recent years. It uses a graphical user interface and a visual modeling tool to simplify the application development process, thereby reducing the need for writing code. A low-code development platform usually provides a series of pre-built components and blocks. Developers can combine them together through simple drag-and-drop operations to quickly build an application. This method can greatly shorten the development cycle, reduce development costs and skill thresholds, enabling more developers at different levels to participate in the development of various applications. Low-code development has been widely applied in fields such as enterprise applications, mobile applications, and web applications. Components built with low-code are usually configured and designed through a visual interface, and then corresponding code is generated. Based on the implementation methods of the low-code development platform and the front-end application, low-code components can be accessed into the front-end application in different ways.

[0003] In the related art, integration is carried out in the form of component modules. In this case, low-code components usually exist in the form of independent modules or libraries. The low-code components are installed and referenced into the front-end application through a package management tool, and the low-code components are displayed in the front-end application, but the low-code components cannot interact with the front-end application. Summary of the Invention

[0004] This application provides an interaction method, system, and storage medium between a low-code component and a front-end application to achieve the effect that the low-code component and the front-end application can interact flexibly.

[0005] In a first aspect, this application provides an interaction method between a low-code component and a front-end application, which is applied to an electronic device. The front-end application is installed in the electronic device, the low-code component is accessed into the front-end application, and a low-code renderer is installed in the front-end application;

[0006] The interaction method includes:

[0007] Execute a first interaction process through the front-end application. The first interaction process includes: monitoring whether there is a first interaction operation associated with the low-code component, and when the first interaction operation is detected, obtaining the component attribute change information of the low-code component caused by executing the first interaction operation; transmitting the component attribute change information to the information transfer interface in the low-code renderer;

[0008] Execute the second interaction process through low-code components. The second interaction process includes: detecting a target request for obtaining component property change information, and in response to detecting the target request, accessing the component property change information from the information transfer interface; updating the component according to the component property change information.

[0009] In a possible implementation, the component property change information includes global properties and / or network requests. The information transfer interface includes the appHelper interface. Transmitting the component property change information to the information transfer interface in the low-code renderer includes:

[0010] Through the appHelper interface, mount the component property change information on the global object window facing the low-code component to transmit the component property change information to the appHelper interface;

[0011] Correspondingly, accessing the component property change information from the information transfer interface includes:

[0012] Access the component property change information from the information transfer interface by accessing window.appHelper.

[0013] In a possible implementation, the component property change information includes variables. The information transfer interface includes the property interface encapsulated in the low-code renderer. Transmitting the component property change information to the information transfer interface in the low-code renderer includes:

[0014] Encapsulate the component property change information into a target object facing the low-code component;

[0015] Transmit the target object to the property interface;

[0016] Correspondingly, accessing the component property change information from the information transfer interface includes:

[0017] Access the component property change information from the property interface based on the keyword this in the class component.

[0018] In a possible implementation, detecting the target request for obtaining component property change information includes:

[0019] Detect a second interaction operation on the source code panel of the low-code component. The second interaction operation is used to obtain the target request for component property change information.

[0020] In a possible implementation, monitoring whether there is a first interaction operation associated with the low-code component includes:

[0021] Monitor whether there is an event trigger associated with a low-code component on the front-end application, and the event trigger includes at least a click operation and an input operation acting on the page of the front-end application. In a possible implementation manner, the interaction method between the low-code component and the front-end application further includes:

[0022] Execute the access process of the low-code component through the front-end application. The access process includes: obtaining the Schema file and asset package of the low-code component. The Schema file is used to describe the structure, attributes, styles, and behaviors of the low-code component, and the asset package contains the static resources of the low-code component; based on the low-code renderer, according to the preset business logic, Schema file, and asset package, display the low-code component on the page of the front-end application.

[0023] In a second aspect, the present application provides an interaction system between a low-code component and a front-end application, which is applied to an electronic device. The front-end application is installed in the electronic device, the low-code component is accessed in the front-end application, and the low-code renderer is installed in the front-end application;

[0024] The front-end application is used to execute the first interaction process. The first interaction process includes: monitoring whether there is a first interaction operation associated with the low-code component, and when the first interaction operation is detected, obtaining the component attribute change information of the low-code component caused by executing the first interaction operation; transmitting the component attribute change information to the information transfer interface in the low-code renderer;

[0025] The low-code component is used to execute the second interaction process. The second interaction process includes: detecting a target request for obtaining the component attribute change information, and in response to detecting the target request, accessing the component attribute change information from the information transfer interface; updating the component according to the component attribute change information.

[0026] In a possible implementation manner, the component attribute change information includes global attributes and / or network requests, and the information transfer interface includes the appHelper interface. Specifically, the front-end application is used to: through the appHelper interface, mount the component attribute change information to the global object window facing the low-code component to transmit the component attribute change information to the appHelper interface; correspondingly, the low-code component is used to: access the component attribute change information from the information transfer interface by accessing window.appHelper.

[0027] In a possible implementation manner, the component attribute change information includes variables, and the information transfer interface includes the attribute interface encapsulated in the low-code renderer. The front-end application is further used to: encapsulate the component attribute change information into a target object facing the low-code component; transmit the target object to the attribute interface; correspondingly, the low-code component is further used to: access the component attribute change information from the attribute interface based on the keyword this in the class component.

[0028] In a possible implementation, the low-code component is further configured to: detect a second interaction operation on the source code panel of the low-code component, where the second interaction operation is used to obtain a target request for component attribute change information.

[0029] In a possible implementation, the front-end application is further configured to monitor whether there is an event trigger associated with the low-code component on the front-end application, where the event trigger includes at least a click operation and an input operation on the page of the front-end application.

[0030] In a possible implementation, the front-end application is further configured to execute an access process for the low-code component, where the access process includes: obtaining a Schema file and an asset package of the low-code component, where the Schema file is used to describe the structure, attributes, styles, and behaviors of the low-code component, and the asset package includes static resources of the low-code component; based on a low-code renderer, and according to preset business logics, the Schema file, and the asset package, display the low-code component on the page of the front-end application.

[0031] In a third aspect, the present application provides an electronic device, including: a memory, a processor;

[0032] The memory stores computer-executable instructions;

[0033] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the above first aspect and / or various possible implementation manners of the first aspect.

[0034] In a fourth aspect, the present application provides a computer-readable storage medium, where computer-executable instructions are stored in the computer-readable storage medium, and when the computer-executable instructions are executed, they are used to implement the above first aspect and / or various possible implementation manners of the first aspect.

[0035] In a fifth aspect, the present application provides a computer program product, including a computer program, and when the computer program is executed, it implements the above first aspect and / or various possible implementation manners of the first aspect.

[0036] The interaction method, system, and storage medium for a low-code component and a front-end application provided by this application are applied to an electronic device. The front-end application is installed in the electronic device, the low-code component is connected to the front-end application, and the low-code renderer is installed in the front-end application. The interaction method includes: executing a first interaction process through the front-end application, where the first interaction process includes: monitoring whether there is a first interaction operation associated with the low-code component, and when the first interaction operation is detected, obtaining the component attribute change information of the low-code component caused by executing the first interaction operation; transmitting the component attribute change information to the information transfer interface in the low-code renderer; executing a second interaction process through the low-code component, where the second interaction process includes: detecting a target request for obtaining the component attribute change information, and in response to detecting the target request, accessing the component attribute change information from the information transfer interface; and updating the component according to the component attribute change information. This application monitors and obtains the component attribute change information of the low-code component on the front-end application, and transmits the component attribute change information through the information transfer interface encapsulated on the low-code renderer, realizing flexible interaction between the low-code component and the front-end application, improving the scalability of the front-end application; in addition, by interacting through the interface, the complexity of interaction implementation is reduced, it is easy to maintain, and the cost is reduced. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] The drawings herein are incorporated into the specification and form a part of the specification, showing embodiments consistent with this application, and are used together with the specification to explain the principles of this application.

[0038] Figure 1 It is a schematic diagram of the scenario of the interaction method between the low-code component and the front-end application provided by this application;

[0039] Figure 2 It is a schematic flow chart of the interaction method between the low-code component and the front-end application provided by this application Figure 1 ;

[0040] Figure 3 It is a schematic flow chart of the interaction method between the low-code component and the front-end application provided by this application Figure 2 ;

[0041] Figure 4 It is an example diagram of the relevant event handling functions provided by this application;

[0042] Figure 5 It is a schematic structural diagram of the interaction system between the low-code component and the front-end application provided by this application Figure 1 ;

[0043] Figure 6 It is a schematic structural diagram of the interaction system between the low-code component and the front-end application provided by this application Figure 2 ;

[0044] Figure 7Schematic diagram of the electronic device provided by this application.

[0045] Through the above-mentioned drawings, specific embodiments of this application have been shown, and there will be more detailed descriptions hereinafter. These drawings and textual descriptions are not intended to limit the scope of the concept of this application in any way, but to illustrate the concept of this application to those skilled in the art by referring to specific embodiments. Detailed implementation manners

[0046] Here, the exemplary embodiments will be described in detail, and the examples are shown in the drawings. When the following description refers to the drawings, unless otherwise indicated, the same numerals in different drawings represent the same or similar elements. The implementation manners described in the following exemplary embodiments do not represent all implementation manners consistent with this application. On the contrary, they are merely examples of devices and methods consistent with some aspects of this application as detailed in the appended claims.

[0047] A low-code development platform, such as a low-code engine (which is a high-productivity low-code R & D platform based on the Low-Code Engine), aims to help developers quickly build business applications, improve development efficiency and quality, provides a visual development interface (low-code setter) and a rich component library (low-code asset package), enabling developers to quickly build application programs that meet business requirements through simple operations such as dragging and dropping components and configuring attributes. The low-code development platform can also support multiple languages and frameworks, meeting the needs of different development teams. By using the low-code development platform, enterprises can quickly respond to market changes and improve the iteration speed and quality of business applications.

[0048] Components built with low code are usually configured and designed through a visual interface, and then the corresponding code is generated. Based on the implementation manners of the low-code development platform and the front-end application, low-code components can be accessed into the front-end application in different ways.

[0049] In the related art, integration is carried out in the form of component modules. In this case, low-code components usually exist in the form of independent modules or libraries. The low-code components are installed and referenced into the front-end application through a package management tool, and the low-code components are displayed in the front-end application. The low-code components and the front-end application exist independently of each other. Since low-code components are usually designed for specific business scenarios, they may not be suitable for interacting with other components, such as the front-end application. Therefore, the flexibility and scalability of the front-end application will be restricted, and the low-code components cannot interact with the front-end application. In addition, if the interaction between the low-code components and the front-end application is achieved by increasing code, the complexity of the code is relatively high and it is difficult to maintain, which may cause developers to spend a lot of time and effort maintaining the code.

[0050] To solve the above technical problems, the present application provides an interaction method, system, and storage medium for low-code components and front-end applications. The front-end application passes the obtained component attribute change information into the information transfer interface encapsulated on the low-code renderer. The low-code component accesses the component attribute change information from the information transfer interface and updates the component according to the component attribute change information, realizing flexible interaction between the low-code component and the front-end application and improving the scalability of the front-end application. In addition, by interacting through an interface, the complexity of interaction implementation is reduced, it is easy to maintain, and the cost is reduced.

[0051] The technical solutions of the present application and how the technical solutions of the present application solve the above technical problems will be described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below with reference to the accompanying drawings.

[0052] Figure 1 It is a schematic diagram of the scenario of the interaction method between the low-code component and the front-end application provided by the present application. Refer to Figure 1 As shown, a low-code development platform is deployed on the terminal device 13. On the low-code development platform, a low-code component is constructed through a visual interface and the low-code component is saved or published. At this time, the Schema file (configuration) and asset package of the low-code component are uploaded to the server 12. The front-end application is installed on the terminal device 11. The terminal device 11 obtains the Schema file and asset package of the low-code component from the server 12. Based on the Schema file and asset package, the low-code component is rendered in the front-end application, and the low-code component is displayed in the user interface of the front-end application. Relevant personnel operate on the page of the front-end application on the terminal device 11, trigger the interaction between the low-code component and the front-end application through the terminal device 11. In response to the first interaction operation of the relevant personnel, the front-end application obtains the component attribute change information of the low-code component for executing the first interaction operation and passes the component attribute change information into the information transfer interface in the low-code renderer. When the low-code component detects the target request of the component attribute change information, it accesses the component attribute change information from the information transfer interface and re-renders based on the built-in rendering logic according to the component attribute change information to realize the update of the component.

[0053] It should be noted that Figure 1 The application scenario shown is only for illustrative purposes. Among them, the terminal device 11 and the server 12 can be the same device or different devices, and the number of various devices is not limited. The terminal device 11 can be a wearable device, a mobile phone, a computer, a notebook, or a personal digital assistant (Personal Digital Assistant, abbreviated as PDA), etc.; the server 12 can also be replaced by a server cluster.

[0054] Figure 2 Flow diagram of the interaction method between the low-code component and the front-end application provided by this application Figure 1 。The interaction method between the low-code component and the front-end application is applied to an electronic device. The front-end application is installed in the electronic device, the low-code component is accessed in the front-end application, and the low-code renderer is installed in the front-end application. As shown in combination Figure 1 , the electronic device is like the terminal device 11.

[0055] The interaction method may include the following steps:

[0056] S201. Execute the first interaction process through the front-end application. The first interaction process includes: monitoring whether there is a first interaction operation associated with the low-code component, and when the first interaction operation is detected, obtaining the component attribute change information of the low-code component caused by executing the first interaction operation; transmitting the component attribute change information to the information transmission interface in the low-code renderer.

[0057] Among them, the information transmission interface is encapsulated in the low-code renderer, and this information transmission interface is used to transmit component attribute change information. It can be understood that on the basis of the original low-code renderer function, the low-code renderer is re-encapsulated twice, an information transmission interface is added, and it is packaged into a new independent module, for example, named SchemaRender, so that the encapsulated low-code renderer SchemaRender not only has a rendering function, but also provides a function for transmitting component attribute change information.

[0058] Exemplarily, the first interaction operation includes a user's click, input, or other interaction behaviors on the page of the front-end application. In front-end development, event listening and handling are the core parts of user interaction. In the front-end application, the first interaction operation can be captured by setting an event listener. When the first interaction operation (also called the listened event) is triggered, for example, if React is used, the 'useEffect' hook can be used to listen for specific events and call a predefined event handling function for processing. React is a JavaScript library for building user interfaces.

[0059] It can be understood that the execution of the first interaction operation can affect the attribute change of the low-code component. For example, a state management tool (such as React's 'useState' or Redux, etc.) is used to track the change of component attributes. After obtaining the component attribute change information for the low-code component, the component attribute change information is passed into the information transmission interface, and the component attribute change information is transmitted between the front-end application and the low-code component through the information transmission interface.

[0060] Among them, the component property change information for the low-code component generated by performing the first interaction operation includes, but is not limited to, various contents of front-end applications such as network proxies, class attributes, global attributes, methods, or fields, and can also be passed into the toolkits of the front-end project, such as appHelper, skipLibs, etc.

[0061] It is worth noting that the front-end application is the output of the front-end project and is the application program that users ultimately use in the browser. It is generated through the development and construction process of the front-end project. The front-end project generally refers to the front-end part of a software development project, including all codes, resources, configuration files, and tools, etc., for building the user interface and user experience.

[0062] S202. Execute the second interaction process through the low-code component. The second interaction process includes: detecting a target request for obtaining component property change information, and in response to detecting the target request, accessing the component property change information from the information transfer interface; updating the component according to the component property change information.

[0063] Exemplarily, the low-code component can obtain the component property change information by listening to specific events or API requests, and the API requests are used to obtain the component property change information. Optionally, the target request for obtaining the component property change information can also be triggered in the source code panel of the low-code. The source code panel can be set on the electronic device where the front-end application is located, or can also be set in other devices that establish communication with the electronic device.

[0064] The low-code component obtains the specific component property change information through the information transfer interface. According to the obtained component property change information, the low-code component re-executes the rendering logic based on the low-code renderer, which may include updating the state of the component, recalculating the layout or content of the component, or triggering other related update logics, etc.

[0065] After the low-code component completes the re-rendering, the corresponding part on the front-end application page will be updated to display the latest changes.

[0066] It should be noted that the number of information transfer interfaces is not limited in the embodiments of the present application. In practical applications, it can be expanded as needed according to business scenarios, application types, etc.

[0067] In the embodiments of the present application, the component property change information for the low-code component on the front-end application is monitored and obtained, and the component property change information is transmitted through the information transfer interface encapsulated on the low-code renderer, realizing flexible interaction between the low-code component and the front-end application, improving the scalability of the front-end application; the encapsulated low-code renderer is more customizable and easy to use, and the low-code renderer is packaged into an independent module to provide an interface externally, and its internal algorithms and implementation details are hidden inside the module, improving the security of the system.

[0068] In addition, compared with implementing the interaction between the low-code component and the front-end application by adding code, the present application realizes the interaction by extending the interface on the low-code renderer, reduces the complexity of interaction implementation, is easy to maintain, and reduces costs.

[0069] In the related art, implementing the interaction between the low-code component and the front-end application through external means such as adding caches and routers may introduce security vulnerabilities, making the front-end application or front-end project vulnerable to attacks, resulting in data leakage or other security problems. The present application realizes the interaction between components within the front-end project through the interface by extending the interface, with higher security.

[0070] In some embodiments, the component property change information includes global properties and / or network requests. The information transfer interface includes the appHelper interface. Transmitting the component property change information to the information transfer interface in the low-code renderer includes: through the appHelper interface, mounting the component property change information on the global object window facing the low-code component, and transmitting the component property change information to the appHelper interface; correspondingly, accessing the component property change information from the information transfer interface includes: accessing the component property change information from the information transfer interface by accessing window.appHelper.

[0071] Exemplarily, the component property change information includes global properties, or network requests, or global properties and network requests.

[0072] In JavaScript, defining the appHelper interface can capture and transmit the component property change information, and mount the component property change information on the object window through the appHelper interface for global access. Other components or modules can obtain the component property change information by accessing window.appHelper.

[0073] Optionally, considering the accessibility of the global object window, appropriate protection and verification processing can also be performed on sensitive information to improve security.

[0074] Optionally, the front-end application can also transmit data information such as global public functions, global constants, location instances, and history instances to the low-code component through the appHelper interface. Dynamically adjust the library names to be skipped through the skipLibs interface.

[0075] In the embodiments of the present application, the front-end application mounts the component attribute change information to the window through the appHelper interface, and the low-code component obtains the component attribute change information by accessing window.appHelper, so as to effectively manage the component state and attribute changes, and improve the fluency and real-time performance of data interaction between the front-end application and the low-code component.

[0076] In some embodiments, the component attribute change information includes variables, and the information transfer interface includes an attribute interface encapsulated in the low-code renderer. Transmitting the component attribute change information through the information transfer interface includes: encapsulating the component attribute change information into a target object for the low-code component; transmitting the target object to the attribute interface.

[0077] Exemplarily, a content interface is reserved in SchemaRender specifically for the front-end application to transmit variables to the low-code component. The variable is encapsulated into the target object and the target object is transmitted to the content interface.

[0078] Correspondingly, accessing the component attribute change information from the information transfer interface includes: accessing the component attribute change information from the information transfer interface based on the keyword this in the class component.

[0079] Exemplarily, the component attribute change information (such as variables) is obtained from the content interface through this.procs.content. Among them, the this keyword is usually used to access the state or attributes of the component in the method of the class component.

[0080] The interaction between the low-code component and the front-end application can be regarded as using the method of passing values between React components, similar to passing values between the parent component (front-end application) and the child component (low-code component). The value is passed through the component passing value method. The difference is that the child component is a low-code component and cannot directly process the received value in the component. It needs to be called through, for example, this.content, which is a method that visualizes the value passing between components and supports user-side custom operations.

[0081] In the embodiments of the present application, the front-end application encapsulates the component attribute change information into a target object for the low-code component through the attribute interface, and the low-code component accesses the component attribute change information from the attribute interface through the this keyword, so as to effectively manage the component state and attribute changes, and improve the fluency and real-time performance of data interaction between the front-end application and the low-code component.

[0082] In some embodiments, detecting the target request for obtaining the component attribute change information includes: detecting a second interaction operation on the source code panel of the low-code component, and the second interaction operation is used for the target request for obtaining the component attribute change information.

[0083] For example, on the source code panel of a low-code component, the interactive logic, methods, etc. of the front-end interface can be defined or modified, and the execution of the interactive logic can also be triggered. For example, when the user enters the source code panel of the low-code component and generates a target request for obtaining component property change information through operations such as clicking. For example, triggering the execution of this.procs.content, after detecting this request, the low-code component obtains procs from the content interface. After receiving the new props, the low-code component will re-execute its rendering logic, which may include operations such as updating the internal state of the component, recalculating the layout or content of the component, etc.

[0084] In some embodiments, monitoring whether there is a first interactive operation associated with the low-code component includes: monitoring whether there is an event trigger associated with the low-code component on the front-end application, and the event trigger includes at least click operations and input operations on the page of the front-end application. In some embodiments, the method for the low-code component to interact with the front-end application further includes: executing the access process of the low-code component through the front-end application, and the access process includes: obtaining the Schema file and asset package of the low-code component, where the Schema file is used to describe the structure, properties, styles, and behaviors of the low-code component, and the asset package contains the static resources of the low-code component; based on the low-code renderer, according to the preset business logic, Schema file, and asset package, display the low-code component on the page of the front-end application.

[0085] For example, on the low-code platform, the user constructs a low-code component through a visual interface and saves or publishes the low-code component. Through the save or publish operation, the Schema file and asset package of the low-code component will be uploaded to the corresponding repository. Among them, the Schema file is stored in a structured data format (such as JSON or XML) and describes the properties, layout, and interactive logic, etc. of the low-code component.

[0086] Furthermore, the front-end application obtains the Schema file and asset package of the low-code component from the repository. Specifically, the low-code renderer parses the Schema file, applies the resources in the asset package, and combines with the preset business logic in the front-end application to generate the final representation of the low-code component. Optionally, the preset business logic can also be integrated with the low-code renderer, and the front-end application calls the low-code renderer to complete the access of the low-code component.

[0087] In the embodiments of the present application, by executing the access process of the low-code component through the front-end application, the low-code component is dynamically displayed on the page of the front-end application, improving the development efficiency and flexibility; in addition, it enables users to experience real-time updates and rich interactive component displays in the front-end application, improving the user experience.

[0088] Next, the interaction method between the low-code component and the front-end application will be described through a specific embodiment. Figure 3 Schematic flow of the interaction method between the low-code component and the front-end application provided by this application Figure 2 .

[0089] As Figure 3 shown, this interaction method involves four key links, including:

[0090] Link 1: Build a low-code component on the low-code development platform, and obtain the Schema file and asset package of this component.

[0091] Link 2: Install a low-code renderer in the front-end application.

[0092] Exemplarily, use a package management tool (such as npm or yarn) to install the low-code renderer.

[0093] Link 3: Inject the Schema file, asset package, and information of various front-end applications into the low-code component through an interface.

[0094] Specifically, this link displays (renders) the low-code component in the interface of the front-end application, including the access process in the above embodiment.

[0095] Link 4: Implement interaction between the front-end application and the low-code component.

[0096] In the front-end application, when a monitored event such as a user's click, input, or other interaction behavior is triggered, the corresponding event handling function will be called. In the event handling function, through operations such as relevant logical judgments, calculations, or data acquisition, it can be determined that the props (component property change information) of the low-code component need to be updated. Package the props into an object, and pass this object to the low-code component through an interface. After the low-code component obtains the props, it triggers a re-render of itself, so that the corresponding part on the front-end page will be updated to display the latest changes.

[0097] Exemplarily, in the front-end application, use the useStat hook to declare a state variable and a function for updating this variable, as shown in Figure 4 (a) below, Figure 4 is a sample diagram of the relevant event handling function provided by this application. Define a function to handle the change of a button in the host project (front-end application), as shown in Figure 4 (b) below. In the low-code component, pass in the declared content, as shown in Figure 4The code example shown in (c) can also be regarded as a low-code renderer. Among them, by configuring pageMark, for example, configuring it to 'wodemo5', the Schema and asset of the low-code component named 'wodemo5' can be obtained from the repository and put into the low-code renderer.

[0098] The low-code component is dynamically changed based on this.content.trigger according to the state change of the button in the front-end application. Among them, the value of this.content.trigger is used to update the low-code component.

[0099] The above embodiments complete the description of the interaction method. The following is the system embodiment of the present application, which can be used to execute the method embodiment of the present application. For the details not disclosed in the system embodiment of the present application, please refer to the method embodiment of the present application.

[0100] Figure 5 Structural schematic of the interaction system between the low-code component and the front-end application provided by the present application Figure 1 . The interaction system between the low-code component and the front-end application is applied to an electronic device. The front-end application is installed in the electronic device. The low-code component is accessed in the front-end application, and the low-code renderer is installed in the front-end application. As Figure 5 shown, the interaction system 50 between the low-code component and the front-end application includes: a front-end application 51 and a low-code component 52. Among them:

[0101] The front-end application 51 is used to execute the first interaction process. The first interaction process includes: monitoring whether there is a first interaction operation associated with the low-code component, and when the first interaction operation is detected, obtaining the component attribute change information of the low-code component caused by executing the first interaction operation; transmitting the component attribute change information to the information transfer interface in the low-code renderer;

[0102] The low-code component 52 is used to execute the second interaction process. The second interaction process includes: detecting a target request for obtaining the component attribute change information, and in response to detecting the target request, accessing the component attribute change information from the information transfer interface; updating the component according to the component attribute change information.

[0103] In a possible implementation manner, the component attribute change information includes global attributes and / or network requests. The information transfer interface includes the appHelper interface. The front-end application 51 is specifically used for: through the appHelper interface, mounting the component attribute change information on the global object window facing the low-code component to transmit the component attribute change information to the appHelper interface; correspondingly, the low-code component 52 is specifically used for: accessing the component attribute change information from the information transfer interface by accessing window.appHelper.

[0104] In a possible implementation, the component property change information includes variables, and the information transfer interface includes the property interface encapsulated in the low-code renderer. The front-end application 51 is further configured to: encapsulate the component property change information into a target object for the low-code component; and transmit the target object to the property interface.

[0105] Correspondingly, the low-code component 52 is further configured to: access the component property change information from the property interface based on the keyword this in the class component.

[0106] In a possible implementation, the low-code component 52 is further configured to: detect a second interaction operation on the source code panel of the low-code component, where the second interaction operation is used to obtain a target request for the component property change information.

[0107] In a possible implementation, the front-end application 51 is further configured to monitor whether there is an event trigger associated with the low-code component on the front-end application. The event trigger includes at least a click operation and an input operation on the page of the front-end application. In a possible implementation, the front-end application 51 is further configured to execute the access process of the low-code component. The access process includes: obtaining the Schema file and the asset package of the low-code component. The Schema file is used to describe the structure, properties, styles, and behaviors of the low-code component, and the asset package includes the static resources of the low-code component; and based on the low-code renderer, and according to the preset business logic, the Schema file, and the asset package, display the low-code component on the page of the front-end application.

[0108] The interaction system between the low-code component and the front-end application provided by the embodiments of the present application can execute the technical solutions shown in the above method embodiments. The implementation principles and beneficial effects are similar and will not be described in detail here.

[0109] Figure 6 It is a schematic structure of the interaction system between the low-code component and the front-end application provided by the present application. Figure 2 . As Figure 6As shown in the figure, the interactive system includes a low-code component 52, a front-end application 51, and a low-code renderer 53. Among them, the front-end application 51 transmits component property change information to the information transfer interface encapsulated on the low-code renderer 53, and the low-code component 52 obtains the component property change information from the information transfer interface, that is, realizes information transfer between the low-code component 52 and the front-end application 51. The information transfer interface includes an appHelper interface, a content interface, other custom interfaces, etc. After the front-end application 51 obtains the Schema file (referred to as Schema) and the asset package (assets) of the low-code component 52, it is placed in the low-code renderer 53. Based on the low-code renderer 53, according to the preset business logic, Schema, and assets, the low-code component 52 is displayed on the page of the front-end application 51.

[0110] Figure 7 The structural schematic diagram of the electronic device provided by this application is as Figure 7 As shown in the figure, the electronic device 70 provided in this embodiment includes: at least one processor 71 and a memory 72. Optionally, the electronic device 70 further includes a communication component 73. Among them, the processor 71, the memory 72, and the communication component 73 are connected through a bus 74.

[0111] In the specific implementation process, at least one processor 71 executes the computer execution instructions stored in the memory 72, so that at least one processor 71 executes the above method.

[0112] For the specific implementation process of the processor 71, reference can be made to the above method embodiment, and its implementation principle and technical effects are similar, so they will not be elaborated here in this embodiment.

[0113] In the above embodiment, it should be understood that the processor may be a central processing unit (English: Central Processing Unit, abbreviated: CPU), or other general-purpose processors, digital signal processors (English: Digital Signal Processor, abbreviated: DSP), application-specific integrated circuits (English: Application Specific Integrated Circuit, abbreviated: ASIC), etc. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in combination with the invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules in the processor.

[0114] The memory may include a high-speed memory (Random Access Memory, RAM), and may also include a non-volatile memory (Non-volatile Memory, NVM), such as at least one disk memory.

[0115] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, the buses in the drawings of this application are not limited to only one bus or one type of bus.

[0116] This application also provides a computer program product, including a computer program, which implements the above interaction method when executed.

[0117] This application also provides a computer-readable storage medium, in which computer-executable instructions are stored. When the processor executes the computer-executable instructions, the above interaction method is implemented.

[0118] The above-readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as a static random access memory (SRAM), an electrically erasable programmable read-only memory (EEPROM), an erasable programmable read-only memory (EPROM), a programmable read-only memory (PROM), a read-only memory (ROM), a magnetic memory, a flash memory, a magnetic disk, or an optical disc. The readable storage medium can be any available medium accessible by a general-purpose or special-purpose computer.

[0119] An exemplary readable storage medium is coupled to the processor, enabling the processor to read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can be located in an application-specific integrated circuit (ASIC). Of course, the processor and the readable storage medium can also exist as discrete components in a device.

[0120] The division of units is only a logical function division. In actual implementation, there can be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling or direct coupling or communication connection between each other can be through some interfaces, and the indirect coupling or communication connection of devices or units can be in electrical, mechanical, or other forms.

[0121] The unit described as a separation component may or may not be physically separated. The component displayed as a unit may or may not be a physical unit, that is, it may be located in one place or distributed across multiple network units. Some or all of these units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0122] In addition, in each embodiment of the present invention, each functional unit may be integrated into one processing unit, may exist physically separately for each unit, or two or more units may be integrated into one unit.

[0123] If the function is implemented in the form of a software functional unit 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 the present invention, in essence, or the part that contributes to the prior art, or a part of this 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 for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods in each embodiment of the present invention. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memories (ROM, Read-Only Memory), random access memories (RAM, Random Access Memory), magnetic disks, or optical discs that can store program codes.

[0124] Those of ordinary skill in the art can understand that all or part of the steps to implement the above method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When this program is executed, it executes the steps including the above method embodiments; and the aforementioned storage medium includes: various media such as ROM, RAM, magnetic disks, or optical discs that can store program codes.

[0125] Finally, it should be noted that: After considering the specification and practicing the invention disclosed herein, those skilled in the art will easily think of other implementation schemes of the present invention. The present invention aims to cover any variations, uses, or adaptive changes of the present invention. These variations, uses, or adaptive changes follow the general principles of the present invention and include common general knowledge or conventional technical means in the technical field not disclosed in the present invention. It is not limited to the precise structures already described and shown in the drawings, and various modifications and changes can be made without departing from its scope. The scope of the present invention is only limited by the appended claims.

Claims

1. A method for interaction between a low-code component and a front-end application, characterized in that: Applied to an electronic device, wherein a front-end application is installed in the electronic device, a low-code component is connected to the front-end application, and a low-code renderer is installed in the front-end application; The interaction method comprises: Executing a first interactive process through the front-end application, the first interactive process includes: monitoring whether there is a first interactive operation associated with the low-code component, and when the first interactive operation is detected, obtaining component property change information of the low-code component caused by executing the first interactive operation; transmitting the component property change information to the information transmission interface in the low-code renderer; A second interaction process is executed through the low-code component, and the second interaction process includes: detecting a target request for obtaining the component property change information, accessing the component property change information from the information transmission interface in response to detecting the target request; and updating the component according to the component property change information.

2. The interactive method according to claim 1, characterized in that: The component property change information includes global properties and / or network requests, the information transfer interface includes an appHelper interface, and the component property change information is transferred to the information transfer interface in the low-code renderer, including: Through the appHelper interface, the component property change information is mounted on the global object window facing the low-code component to pass the component property change information to the appHelper interface; Accordingly, accessing the component attribute change information from the information transfer interface includes: By accessing window.appHelper, the component property change information is accessed from the appHelper interface.

3. The interactive method according to claim 1, characterized in that: The component property change information includes variables, the information transfer interface includes a property interface encapsulated in the low-code renderer, and the component property change information is transferred to the information transfer interface in the low-code renderer, including: Encapsulating the component attribute change information as a target object for the low-code component; Passing the target object to the property interface; Accordingly, accessing the component attribute change information from the information transfer interface includes: Based on the keyword this in the class component, the component property change information is accessed from the property interface.

4. The interactive method according to claim 2 or 3, characterized in that: The detecting and obtaining the target request for the component attribute change information includes: Detect a second interactive operation acting on the source code panel of the low-code component, where the second interactive operation is used to obtain a target request for the component property change information.

5. The interactive method according to claim 2 or 3, characterized in that: The monitoring whether there is a first interactive operation associated with the low-code component includes: Monitor whether there is an event trigger associated with the low-code component on the front-end application, and the event trigger includes at least click operations and input operations on the page of the front-end application.

6. The interactive method according to any one of claims 1 to 3, characterized in that: Also includes: The access process of the low-code component is executed through the front-end application, and the access process includes: obtaining the Schema file and asset package of the low-code component, the Schema file is used to describe the structure, properties, style and behavior of the low-code component, and the asset package contains the static resources of the low-code component; Based on the low-code renderer, the low-code component is displayed on the page of the front-end application according to the preset business logic, the Schema file and the asset package.

7. An interactive system between low-code components and front-end applications, characterized in that: Applied to an electronic device, the electronic device has the front-end application installed in it, the low-code component is connected to the front-end application, and a low-code renderer is installed in the front-end application; The front-end application is used to execute a first interaction process, which includes: monitoring whether there is a first interaction operation associated with the low-code component, and when the first interaction operation is monitored, obtaining component property change information of the low-code component caused by executing the first interaction operation; and transmitting the component property change information to an information transmission interface in the low-code renderer; The low-code component is used to execute a second interaction process, which includes: detecting a target request for obtaining the component property change information, accessing the component property change information from the information transmission interface in response to detecting the target request; and updating the component according to the component property change information.

8. An electronic device, characterized in that: include: Memory, processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory, so that the processor performs the interaction method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, which are used to implement the interactive method according to any one of claims 1 to 6 when executed.

10. A computer program product, characterized in that The invention comprises a computer program, which implements the interactive method according to any one of claims 1 to 6 when being executed.

Images