Methods, apparatus, devices and storage media for cross-stack application processing and page rendering.

Abstract

This application provides a method, apparatus, device, and storage medium for cross-stack application processing and page rendering. In this embodiment, an intermediate syntax format is used to uniformly and systematically describe components from different technology stacks, resulting in description files corresponding to the components. The application development platform can then present the node objects corresponding to those components based on these description files, and generate the application's front-end code based on editing operations on these node objects. Throughout this process, when generating the application through the application development platform, the platform uses a first technology stack to generate the application's back-end code, and a second technology stack (different from the first) to generate the application's front-end code. This eliminates the need to regenerate the application development platform for the second technology stack, saving application generation costs.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a method, apparatus, device and storage medium for cross-stack application processing and page rendering. Background Technology

[0002] A page layout system is a system for designing the background, layout, or font size of a page. Page layout systems are usually developed using a technology stack. For example, the development of a page layout system can be done using a technology stack that includes a progressive framework (Vue) for building user interfaces, or it can be done using a technology stack that includes a JavaScript library (React) for building user interfaces.

[0003] When page design is required through a page layout system, the page can only be designed according to the technology stack of the local page system, which is quite limiting. If other technology stacks are used for page design, it will cost more to integrate those other technology stacks into the local page system. Summary of the Invention

[0004] This application provides a method, apparatus, device, and storage medium for cross-stack application processing and page rendering, thereby reducing the cost of application development.

[0005] This application provides a cross-stack application processing method applied to an application development platform. The method includes: importing a description file of a target component, the description file having an intermediate syntax format recognizable by both a first technology stack and a second technology stack, the first technology stack being used to develop the backend code of the target application, the backend code describing the backend logic of the target application, and the frontend view of the target application depending on the target component in the frontend component library of the second technology stack; based on the description file of the target component, presenting a first node object corresponding to the target component on the development interface, the first node object reflecting the attribute information of the target component; responding to the editing operation of the first node object, generating the frontend code of the target application based on the intermediate syntax format, the frontend code describing the identifier, style, and layout information of the target component on which the frontend view of the target application depends.

[0006] This application also provides a page rendering method for cross-stack applications, applied to an electronic device. The electronic device has a target application installed on it. The target application is developed based on a first technology stack and at least one second technology stack. The method includes: running the target application, which includes at least one front-end code and back-end code. The back-end code is developed based on the first technology stack and describes the back-end logic of the target application. When the number of at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack. The target front-end code in the at least one front-end code describes the identifier, style, and layout information of the target component on which the front-end view of the target front-end code depends. When the target front-end code is run, the target component required for rendering the target front-end code is loaded, and the rendering engine of the target technology stack corresponding to the target front-end code is used to render the front-end view of the target front-end code for the target component.

[0007] This application embodiment also provides a cross-stack application processing device, including: an import module, a presentation module, and a generation module; the import module is used to import a description file of a target component, the description file having an intermediate syntax format recognizable by both a first technology stack and a second technology stack, the first technology stack being used to develop the backend code of the target application, the backend code describing the backend logic of the target application, and the frontend view of the target application depending on the target component in the frontend component library of the second technology stack; the presentation module is used to present a first node object corresponding to the target component on the development interface based on the description file of the target component, the first node object reflecting the attribute information of the target component; the generation module is used to respond to the editing operation of the first node object and generate the frontend code of the target application based on the intermediate syntax format, the frontend code describing the identifier, style, and layout information of the target component on which the frontend view of the target application depends.

[0008] This application embodiment also provides a page rendering device for cross-stack applications. The cross-stack application page rendering device has a target application installed on it. The target application is developed based on a first technology stack and at least one second technology stack. The cross-stack application page rendering device includes: a running module and a loading module; the running module is used to run the target application, which includes at least one front-end code and back-end code. The back-end code is developed based on the first technology stack and describes the back-end logic of the target application. When the number of at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack. The target front-end code in the at least one front-end code describes the identifier, style, and layout information of the target component on which the front-end view of the target front-end code depends; the loading module is used to load the target components required for rendering the target front-end code when the target front-end code is run, and to render a front-end view for the target front-end code using the rendering engine of the target technology stack corresponding to the target front-end code.

[0009] This application also provides a cross-stack application processing device, including: a memory and a processor; the memory for storing computer programs; and the processor, coupled to the memory, for executing the computer programs to implement the steps in the cross-stack application processing method provided in this application.

[0010] This application also provides a page rendering device for cross-stack applications. The page rendering device for cross-stack applications has a target application installed on it. The target application is developed based on a first technology stack and at least one second technology stack. The page rendering device for cross-stack applications includes: a memory and a processor; the memory is used to store computer programs; the processor is coupled to the memory and is used to execute the computer programs to implement the steps in the page rendering method for cross-stack applications provided in this application.

[0011] This application also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, causes the processor to implement the steps in the cross-stack application processing method and / or the cross-stack application page rendering method provided in this application.

[0012] In this embodiment, an intermediate syntax format is used to uniformly and systematically describe components from different technology stacks, resulting in a description file for each component. The application development platform can then use this description file to generate the corresponding node object and, based on editing operations on this node object, generate the application's front-end code. Throughout this process, when generating the application through the application development platform, the platform uses a first technology stack to generate the application's back-end code and a second technology stack (different from the first) to generate the application's front-end code. This eliminates the need to regenerate the application development platform for the second technology stack, saving application generation costs. Attached Figure Description

[0013] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0014] Figure 1 A flowchart illustrating a cross-stack application processing method provided for an exemplary embodiment of this application;

[0015] Figure 2a A schematic diagram of a description file for a target component provided for an exemplary embodiment of this application;

[0016] Figure 2b Description information of an intermediate syntax tree provided for an exemplary embodiment of this application;

[0017] Figure 2c A schematic diagram illustrating the conversion of a description file of a target component into an intermediate syntax tree, as provided in an exemplary embodiment of this application;

[0018] Figure 3a A schematic diagram illustrating a cross-stack application processing procedure provided for an exemplary embodiment of this application;

[0019] Figure 3b A schematic diagram illustrating another cross-stack application processing procedure provided for an exemplary embodiment of this application;

[0020] Figure 3c A schematic diagram illustrating a rendering engine generating a front-end view, provided as an exemplary embodiment of this application;

[0021] Figure 4 A flowchart illustrating a page rendering method for a cross-stack application provided as an exemplary embodiment of this application;

[0022] Figure 5a A schematic diagram of the structure of a cross-stack application processing device provided for an exemplary embodiment of this application;

[0023] Figure 5b A schematic diagram of the structure of a page rendering apparatus for a cross-stack application provided as an exemplary embodiment of this application;

[0024] Figure 6 A schematic diagram of the structure of a cross-stack application processing device provided as an exemplary embodiment of this application;

[0025] Figure 7 This is a schematic diagram of the structure of a page rendering device for a cross-stack application, provided as an exemplary embodiment of this application. Detailed Implementation

[0026] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0027] To address the issue that existing technologies require regenerating application development platforms to generate front-end code for different technology stacks, this application embodiment uses an intermediate syntax format to uniformly and systematically describe components of different technology stacks, resulting in description files for each component. The application development platform can then present the corresponding node objects based on these description files and generate the application's front-end code based on editing these node objects. Throughout this process, if different development teams use different technology stacks than the application development platform when generating applications through the platform, the development team can access the platform based on its existing technology stack without needing to regenerate the platform for its current technology stack, thus saving application generation costs. For example, if a development team uses the application development platform to generate the application's back-end code using a first technology stack, and generates the front-end code based on a second technology stack (which can be the technology stack used by the development team), there is no need to regenerate the application development platform for the second technology stack, saving application generation costs.

[0028] The technical solutions provided by the various embodiments of this application are described in detail below with reference to the accompanying drawings.

[0029] Figure 1 This is a flowchart illustrating a cross-stack application processing method provided as an exemplary embodiment of this application. The method is applied to an application development platform, such as... Figure 1 As shown, the method includes:

[0030] 101. Import the description file of the target component. The description file has an intermediate syntax format that can be recognized by both the first technology stack and the second technology stack. The first technology stack is used to develop the backend code of the target application. The backend code describes the backend logic of the target application. The frontend view of the target application depends on the target component in the frontend component library of the second technology stack.

[0031] 102. Based on the description file of the target component, the first node object corresponding to the target component is presented on the development interface. The first node object can reflect the attribute information of the target component.

[0032] 103. In response to the editing operation on the first node object, generate the front-end code of the target application based on the intermediate state syntax format. The front-end code describes the identifier, style and layout information of the target components on which the front-end view of the target application depends.

[0033] In this embodiment, the application development platform is software based on a first technology stack. This platform serves as a framework for application development, allowing application developers to create various types of applications. The platform can be embedded in a browser as a browser plugin, or it can function as a Software Development Kit (SDK) for application software. The first technology stack refers to the technology stack used by the application development platform. When developing a target application using the application development platform, the backend code for the target application can be developed based on the first technology stack. This backend code describes the backend logic of the target application.

[0034] In this embodiment, application developers can develop the front-end code of the target application based on the second technology stack, and the front-end view of the target application depends on the target component in the front-end component library of the second technology stack.

[0035] This description file possesses an intermediate syntax format recognizable by both the first and second technology stacks. It's a platform-independent description file with an intermediate syntax format (general data format), obtained by abstracting and re-expressing the attribute information of the target component. This means the description file does not depend on the specific platform used by the target application's front-end view. The description file describes the target component's name, identifier, style, layout, functionality, attributes, etc. It's important to note that the target component's description file has default initial values, which can be modified later based on the first node object corresponding to the target component. For example, the description file can be implemented as a Domain Specific Language (DSL) object, i.e., a component description object. Figure 2aThis is an example of a description file for a target component. The description file for the target component includes: component name (name): "Image", Chinese name (cname), component version (version): "0.0.1", component description (desc), image description (IMGDesc), author / responsible person (author), component type (type): "common", props are used to define attribute names and types, including width (width): "number type", source address (src): "string", where the component type includes: common, layout, form, and custom.

[0036] Figure 2a The content includes:

[0037]

[0038]

[0039] In this embodiment, after importing the description file of the target component, a first node object corresponding to the target component can be presented on the development interface based on the description file. The first node object can reflect the attribute information of the target component, including but not limited to: the target component's name, identifier, version, type, and its layout or style in the front-end view. The first node object can be text, a list, an image, or an icon, etc., without limitation. When the first node object is triggered, an editing operation on the first node object can be responded to, and the front-end code of the target application can be generated based on the intermediate state syntax format. The front-end code describes the identifier, style, and layout information of the target component on which the front-end view of the target application depends. Editing operations on the first node object can include, but are not limited to: drag, modify, add, delete, click, or jump operations. For example, when a drag operation is performed on the first node object, the attribute information of the first node object after the drag operation can be obtained, and the attribute information can be described based on the intermediate state syntax format to obtain the front-end code of the target application.

[0040] In this embodiment, an intermediate syntax format is used to uniformly and systematically describe components from different technology stacks, resulting in a description file for each component. The application development platform can then use this description file to generate the corresponding node object and, based on editing operations on this node object, generate the application's front-end code. Throughout this process, when generating the application through the application development platform, the platform uses a first technology stack to generate the application's back-end code and a second technology stack (different from the first) to generate the application's front-end code. This eliminates the need to regenerate the application development platform for the second technology stack, saving application generation costs.

[0041] In this embodiment, the method of generating the description file corresponding to the target component is not limited. In one optional embodiment, before importing the description file of the target component into the application development platform, the target component in the front-end component library of the second technology stack can be described using an intermediate syntax format to obtain the description file of the target component. In another optional embodiment, before importing the description file of the target component into the application development platform, each component in the front-end component library of the second technology stack can be described using an intermediate syntax format to obtain the description file corresponding to each component; a component description information library is generated based on the description files of each component in the front-end component library of the second technology stack. When a description file corresponding to the target component is required, the description file corresponding to the target component is imported from the component description information library into the application development platform so that the application development platform can generate the front-end code of the target application accordingly; or, when it is necessary to generate an application based on each component in the front-end component library of the second technology stack, the component description information library is imported into the application development platform so that the application development platform can generate the front-end code of the target application accordingly.

[0042] This approach does not limit the use of intermediate syntax to describe the components in the front-end component library of the second technology stack, thus obtaining the implementation method of the description files corresponding to each component. Optionally, the components in the front-end component library of the second technology stack may include, but are not limited to, containers, text, images, tables, icons, dialog boxes, progress bars, or panels, etc., and the description files may include, but are not limited to, information such as component properties, logic, animations, behaviors, and data. The front-end view described by the front-end code may include information such as components, component styles, layouts, logic, behaviors, animations, or data.

[0043] In one optional embodiment, an implementation method for presenting a first node object corresponding to a target component on a development interface based on a description file of a target component includes: parsing the description file of the target component based on an intermediate syntax format to obtain the attribute information of the target component under a second technology stack; generating a first node object recognizable by the first technology stack based on the attribute information of the target component under the second technology stack, and presenting the first node object on the development interface so that application developers can perform editing operations based on the first node object.

[0044] Optionally, an implementation method for generating a first node object recognizable by the first technology stack based on the attribute information of the target component under the second technology stack includes: resolving the target component into a container, text, or image based on the attribute information of the target component under the second technology stack, and using this as a first node object recognizable by the first technology stack. For example, the attribute information of the target component under the second technology stack includes: the name, layout, and size information of the target component. If the component's attribute information includes: name: container, layout: center of the page view, size: 300x500, and this attribute information points to a container component, then the icon corresponding to the container can be displayed in the sidebar of the page, and this icon can be used as the first node object corresponding to the container component, so that application developers can edit the icon.

[0045] In this embodiment, the implementation of generating the front-end code of the target application based on the intermediate state syntax format in response to editing operations on the first node object is not limited. The following descriptions will address different scenarios.

[0046] In an optional embodiment, when the number of node objects required to generate the front-end code of the target application is 1, when the first node object is edited, the attribute information of the first node object can be obtained in response to the editing operation of the first node object. Based on the attribute information of the first node object, an intermediate syntax tree is generated as the front-end code of the target application. The nodes and their attribute information on the intermediate syntax tree respectively represent the first node object and its attribute information.

[0047] In another optional embodiment, when there are multiple node objects required to generate the front-end code of the target application, the node objects required to generate the front-end code of the target application include a first node object and a second node object that has a hierarchical relationship with the first node object. For ease of distinction and description, the node objects required to generate the front-end code of the target application are referred to as third node objects. That is, the third node object includes the first node object and the second node object. The number of second node objects is one or more. The attribute information of the third node object represents the attribute information of its corresponding target component under the second technology stack. The hierarchical relationship between the first node object and the second node object represents the hierarchical relationship of its corresponding target component in the second technology stack. When the first node object is edited, the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object can be obtained in response to the editing operation of the first node object. Based on the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, an intermediate syntax tree is generated as the front-end code of the target application. The nodes and their attribute information on the intermediate syntax tree respectively represent the third node object and its attribute information. The attribute information of the third node object includes at least the identifier and style of the third node object. In addition, the attribute information of the third node object also includes: position information and size information, etc.

[0048] It should be noted that, in the process of generating the intermediate syntax tree, the application development system requires not only the description file of the target component but also the description file of the rendering engine corresponding to the target component. The rendering engine can recognize the intermediate syntax tree and render based on the intermediate syntax tree to obtain the front-end view. For the rendering process of the rendering engine, please refer to the subsequent embodiments, which will not be repeated here.

[0049] In this embodiment, the front-end view, or user interface (UI) layout, is parsed and rendered in a tree structure. Therefore, an intermediate syntax tree is used to describe the front-end view, resulting in the front-end code of the target application. Nodes in the intermediate syntax tree need to conform to the characteristics of UI nodes and also possess extensibility. For example, the modules used by nodes, node styles, parent-child relationships, and the properties of the corresponding components must conform to the characteristics of the respective UI nodes. Preferably, a lightweight data exchange format such as JavaScript Object Notation (JSON) can be used to describe the intermediate syntax tree. Figure 2bThe image shows information describing an intermediate syntax tree in JSON format. It describes the names, unique identifiers, styles, layouts, and relationships between nodes in the intermediate syntax tree. The view component is named "view," with a unique identifier (id) of "1." Its style and layout descriptions include: display as "flex," and horizontal alignment as center. The view component's child node is an image, named "Image," with a unique identifier of "2." The component's props include a URL for the image.

[0050] Figure 2b The content includes:

[0051]

[0052]

[0053] In this embodiment, the description file of the target component can reflect the attribute information of the target component. Figure 2c This is an exemplary demonstration of converting a description file of a target component into nodes on an intermediate syntax tree. Figure 2c In the middle, the attribute information of the target component can be found in the reference to Figure 2a The description of the intermediate syntax tree mainly includes the following nodes: name: "Image", type: "Common", unique identifier: "uuid", style, props: width: "100%", source address: "url", and event.

[0054] In one optional embodiment, an implementation method for obtaining attribute information of a first node object and the hierarchical relationship between the first node object and a second node object in response to an editing operation on a first node object includes: when an application developer performs an editing operation on the attribute information of the first node object, the attribute information of the first node object can be obtained in response to an input operation on the first node object, and the hierarchical relationship between the first node object and the second node object can be maintained; or when an application developer performs an editing operation on the hierarchical relationship of the first node object, the hierarchical information of the first node object can be determined in response to a drag operation on the first node object, and the hierarchical relationship between the first node object and the second node object can be established; or when an application developer performs an editing operation on the attribute information and hierarchical relationship of the first node object, the attribute information and hierarchical information of the first node object can be obtained in response to a modification operation on the first node object, and the hierarchical relationship between the first node object and the second node object can be established.

[0055] The modification operation on the first node object is not limited. For example, in response to the editing operation on the first node object, at least one attribute item of the first node object and its corresponding initial attribute value are obtained, and at least one attribute item and its corresponding initial attribute value are displayed through a pop-up, a dialog box, or a scroll box; in response to the editing operation on the initial attribute value corresponding to any attribute item, the target attribute information corresponding to any attribute item is obtained, and each attribute item is one of whether it is associated with a component, hierarchical information, length, width, color, or display position.

[0056] In one optional embodiment, the application development platform integrates at least one second technology stack. Different second technology stacks generate front-end code corresponding to the target application. One or more front-end codes can be generated based on the same second technology stack, and different second technology stacks can generate different front-end codes. When the number of front-end codes corresponding to the target application is greater than or equal to two, the front-end code of the target application corresponds to at least two different second technology stacks, or the front-end code of the target application corresponds to the same second technology stack. When the number of front-end codes of the target application is one, that front-end code corresponds to one second technology stack. The second technology stack can be implemented as a progressive framework like Vue or a JavaScript library like React. Figure 3a and Figure 3b The illustration is based on the example of two second technology stacks: WEB-Vue and WEB-React, but it is not limited to this.

[0057] After generating at least one front-end code corresponding to the target application, this code can be encapsulated with back-end code to obtain the installation code for the target application, which is developed across technology stacks. The target application is then installed and run based on this installation code. For example, if the installation code is implemented as a browser plugin, it can be imported into the browser to install and run the application. Alternatively, if the target application is implemented as a terminal device application, it can be installed and run on the terminal device based on the installation code.

[0058] Specifically, for at least one target front-end code in the front-end code, when the target front-end code is executed, the target component required for rendering the target front-end code is loaded, and the rendering engine of the target technology stack corresponding to the target front-end code is used to render the front-end view for the target front-end code for the target component.

[0059] in, Figure 3c This paper describes how to render the intermediate syntax tree generated by the application development platform using both Vue and React rendering engines to obtain the front-end view. The intermediate syntax tree generated by the application development platform consists of hierarchical containers, images, and text. The Vue or React rendering engine recursively processes the front-end nodes in the intermediate syntax tree, generating document object model (DOM) nodes. These DOM nodes are then rendered to obtain an HTML5 (H5) page, which is then displayed on the terminal device.

[0060] Optionally, the implementation of loading the target components required for rendering the target front-end code includes: obtaining a description file of the target components required for the target front-end code; dynamically loading the target components required for the target front-end code based on the description file; or, directly loading the target components required for the target front-end code from the front-end component library of the target technology stack.

[0061] Optionally, the implementation method of rendering a front-end view of the target front-end code using the rendering engine of the target technology stack corresponding to the target front-end code includes: when the target front-end code is implemented as an intermediate syntax tree, identifying the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects; converting the attribute information of the multiple third-node objects into description information of multiple target components that can be recognized by the target technology stack, wherein the description information of the target components can reflect the attribute information of the target components under the target technology stack; converting the hierarchical relationship between the multiple third-node objects into page layout information corresponding to the multiple target components, wherein the page layout information can reflect which components are on the page, as well as the style, layout, logic, behavior, and other information of the components; and rendering the page using the multiple target components based on the page layout information and the description information of the multiple target components to obtain the front-end view of the target front-end code.

[0062] In this embodiment, when generating the front-end code corresponding to the target application, instead of importing the target component into the application development platform, the description file of the target component is imported into the application development platform. This decouples the application development platform from the front-end component library of the second technology stack. This decoupling design eliminates the need for application developers to generate an application development platform for each component library; different front-end component libraries can all access a single application development platform, saving costs and preventing the second technology stack from intruding on the existing application development platform, thus ensuring the security of the target application. Furthermore, based on this decoupling design, the second technology stack can be dynamically switched during the generation of the target application to obtain front-end code corresponding to different second technology stacks. Moreover, since the front-end component library of the second technology stack is decoupled from the application development system, the front-end component library may not be present during the initialization or use of the application development platform. The corresponding components can be loaded when needed. For example, during the rendering of an intermediate syntax tree, the required components are loaded to perform rendering operations on the intermediate syntax tree, enabling a combination of editing and previewing.

[0063] Figure 4 A flowchart illustrating a page rendering method for a cross-stack application, provided as an exemplary embodiment of this application, is applied to an electronic device. The electronic device has a target application installed on it, and the target application is developed based on a first technology stack and at least one second technology stack, such as... Figure 4 As shown, the method includes:

[0064] 401. Run the target application. The target application includes at least one front-end code and back-end code. The back-end code is developed based on the first technology stack. The back-end code describes the back-end logic of the target application. When the number of at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack. The target front-end code in the at least one front-end code describes the identification, style and layout information of the target components on which the front-end view of the target front-end code depends.

[0065] 402. When the target front-end code is executed, the target components required for rendering the target front-end code are loaded, and the rendering engine of the target technology stack corresponding to the target front-end code is used to render the front-end view for the target front-end code.

[0066] In one optional embodiment, loading the target components required for rendering the target front-end code includes: obtaining a description file of the target components required for the target front-end code; dynamically loading the target components required for the target front-end code based on the description file; or, directly loading the target components required for the target front-end code from the front-end component library of the target technology stack.

[0067] In one optional embodiment, the rendering engine of the target technology stack corresponding to the target front-end code is used to render a front-end view for the target component, including: when the target front-end code is implemented as an intermediate syntax tree, identifying the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects; converting the attribute information of the multiple third-node objects into description information of multiple target components that can be recognized by the target technology stack; converting the hierarchical relationship between the multiple third-node objects into page layout information corresponding to the multiple target components; and rendering the page using the multiple target components according to the page layout information and the description information of the multiple target components to obtain the front-end view of the target front-end code.

[0068] It should be noted that the execution subject of each step of the method provided in the above embodiments can be the same device, or the method can be executed by different devices. For example, the execution subject of steps 101 to 103 can be device A; or the execution subject of steps 101 and 102 can be device A, and the execution subject of step 103 can be device B; and so on.

[0069] Furthermore, some processes described in the above embodiments and accompanying drawings include multiple operations appearing in a specific order. However, it should be clearly understood that these operations may not be executed in the order they appear herein, or they may be executed in parallel. The operation numbers, such as 101, 102, etc., are merely used to distinguish different operations and do not represent any execution order. Additionally, these processes may include more or fewer operations, and these operations may be executed sequentially or in parallel. It should be noted that the descriptions such as "first" and "second" in this document are used to distinguish different messages, devices, modules, etc., and do not represent a sequential order, nor do they limit "first" and "second" to different types.

[0070] Figure 5a A schematic diagram of the structure of a cross-stack application processing device provided as an exemplary embodiment of this application is shown below. Figure 5a As shown, the cross-stack application processing device includes: an import module 51a, a presentation module 52a, and a generation module 53a.

[0071] Import module 51a is used to import the description file of the target component. The description file has an intermediate syntax format that can be recognized by both the first technology stack and the second technology stack. The first technology stack is used to develop the backend code of the target application. The backend code describes the backend logic of the target application. The frontend view of the target application depends on the target component in the frontend component library of the second technology stack.

[0072] The presentation module 52a is used to present the first node object corresponding to the target component on the development interface based on the description file of the target component. The first node object can reflect the attribute information of the target component.

[0073] The generation module 53a is used to respond to the editing operation of the first node object and generate the front-end code of the target application based on the intermediate state syntax format. The front-end code describes the identifier, style and layout information of the target components on which the front-end view of the target application depends.

[0074] In an optional embodiment, the cross-stack application processing apparatus further includes: a description module; the description module is used to describe the target component in the front-end component library of the second technology stack using an intermediate state syntax format to obtain a description file of the target component.

[0075] In an optional embodiment, the presentation module 52a is specifically used to: parse the description file of the target component based on the intermediate state syntax format to obtain the attribute information of the target component under the second technology stack; generate a first node object that can be recognized by the first technology stack based on the attribute information of the target component under the second technology stack, and present the first node object on the development interface so that application developers can perform editing operations based on the first node object.

[0076] In an optional embodiment, the generation module 53a is specifically configured to: respond to an editing operation on a first node object, obtain the attribute information of the first node object and the hierarchical relationship between the first node object and a second node object, wherein the second node object is the other node objects excluding the first node object among the third node objects required to generate the front-end code; generate an intermediate syntax tree as the front-end code based on the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, wherein the nodes and their attribute information on the intermediate syntax tree respectively represent the third node object and its attribute information, and the attribute information of the third node object includes at least the identifier and style of the third node object; wherein the attribute information of the third node object represents the attribute information of its corresponding target component under the second technology stack, and the hierarchical relationship between the first node object and the second node object represents the hierarchical relationship between its corresponding target component in the second technology stack.

[0077] In an optional embodiment, the generation module 53a is specifically configured to: in response to an input operation on a first node object, obtain the attribute information of the first node object and maintain the hierarchical relationship between the first node object and the second node object; or in response to a drag operation on a first node object, determine the hierarchical information of the first node object and establish the hierarchical relationship between the first node object and the second node object; or in response to a modification operation on a first node object, obtain the attribute information and hierarchical information of the first node object and establish the hierarchical relationship between the first node object and the second node object.

[0078] In an optional embodiment, the presentation module 52a is specifically used to: based on the attribute information of the target component under the second technology stack, parse the target component into a container, text or image, and use it as a first node object that can be recognized by the first technology stack.

[0079] In one optional embodiment, the cross-stack application processing apparatus further includes: an encapsulation module, a processing module, and a loading module; the encapsulation module is used to encapsulate at least one front-end code and back-end code to obtain the installation code of the target application developed across technology stacks; when the number of at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack; the processing module is used to install and run the target application according to the installation code of the target application; the loading module is used to load the target components required for rendering the target front-end code when running the target front-end code in the at least one front-end code; the processing module is also used to render a front-end view for the target front-end code using the rendering engine of the target technology stack corresponding to the target front-end code.

[0080] In one optional embodiment, the loading module is specifically used to: obtain the description file of the target component required by the target front-end code; dynamically load the target component required by the target front-end code based on the description file; or, directly load the target component required by the target front-end code from the front-end component library of the target technology stack.

[0081] In an optional embodiment, the processing module is specifically configured to: when the target front-end code is implemented as an intermediate syntax tree, identify the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects; convert the attribute information of the multiple third-node objects into description information of multiple target components that can be recognized by the target technology stack; convert the hierarchical relationship between the multiple third-node objects into page layout information corresponding to the multiple target components; and render the page using the multiple target components according to the page layout information and the description information of the multiple target components to obtain the front-end view of the target front-end code.

[0082] In one alternative embodiment, the second technology stack includes the progressive framework Vue or the JavaScript library React.

[0083] Figure 5b This is a schematic diagram of the structure of a page rendering device for a cross-stack application provided as an exemplary embodiment of the present application. The page rendering device for the cross-stack application has a target application installed on it. The target application is developed based on a first technology stack and at least one second technology stack. The page rendering device for the cross-stack application includes: a running module 51b, a loading module 52b, and a processing module 53b.

[0084] Run module 51b is used to run a target application. The target application includes at least one front-end code and back-end code. The back-end code is developed based on a first technology stack. The back-end code describes the back-end logic of the target application. When the number of at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack. The target front-end code in the at least one front-end code describes the identification, style and layout information of the target components on which the front-end view of the target front-end code depends.

[0085] Loading module 52b is used to load the target components required for rendering the target front-end code when the target front-end code is executed;

[0086] Processing module 53b is used to render a front-end view for the target front-end code using the rendering engine of the target technology stack corresponding to the target front-end code.

[0087] In an optional embodiment, the loading module 52b is specifically used to: obtain the description file of the target component required by the target front-end code; dynamically load the target component required by the target front-end code based on the description file; or, directly load the target component required by the target front-end code from the front-end component library of the target technology stack.

[0088] In an optional embodiment, the processing module 53b is specifically used to: when the target front-end code is implemented as an intermediate syntax tree, identify the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects; convert the attribute information of the multiple third-node objects into description information of multiple target components that can be recognized by the target technology stack; convert the hierarchical relationship between the multiple third-node objects into page layout information corresponding to the multiple target components; and perform page rendering using the multiple target components based on the page layout information and the description information of the multiple target components to obtain the front-end view of the target front-end code.

[0089] Figure 6 This is a schematic diagram of the structure of a cross-stack application processing device provided as an exemplary embodiment of this application. For example... Figure 6 As shown, the device includes a memory 64 and a processor 65.

[0090] Memory 64 is used to store computer programs and can be configured to store various other data to support operation on a cross-stack application processing device. Examples of this data include instructions for any application or method used to operate on the cross-stack application processing device.

[0091] The memory 64 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0092] Processor 65, coupled to memory 64, is used to execute computer programs in memory 64 for: importing a description file of a target component, the description file having an intermediate syntax format recognizable by both a first technology stack and a second technology stack, the first technology stack being used to develop backend code for the target application, the backend code describing the backend logic of the target application, and the frontend view of the target application depending on the target component in the frontend component library of the second technology stack; based on the description file of the target component, presenting a first node object corresponding to the target component on the development interface, the first node object reflecting the attribute information of the target component; and responding to editing operations on the first node object, generating frontend code for the target application based on the intermediate syntax format, the frontend code describing the identifier, style, and layout information of the target component on which the frontend view of the target application depends.

[0093] In an optional embodiment, before importing the description file of the target component, the processor 65 is further configured to: describe the target component in the front-end component library of the second technology stack using an intermediate syntax format to obtain the description file of the target component.

[0094] In an optional embodiment, when the first node object corresponding to the target component is presented on the development interface based on the description file of the target component, the processor 65 is specifically used to: parse the description file of the target component based on the intermediate state syntax format to obtain the attribute information of the target component under the second technology stack; generate a first node object that can be recognized by the first technology stack based on the attribute information of the target component under the second technology stack, and present the first node object on the development interface so that the application developers can perform editing operations based on the first node object.

[0095] In an optional embodiment, when generating the front-end code of the target application based on the intermediate syntax format in response to an editing operation on the first node object, the processor 65 is specifically configured to: in response to the editing operation on the first node object, obtain the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, wherein the second node object is the other node objects excluding the first node object among the third node objects required to generate the front-end code; generate an intermediate syntax tree as the front-end code based on the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, wherein the nodes and their attribute information on the intermediate syntax tree respectively represent the third node object and its attribute information, and the attribute information of the third node object includes at least the identifier and style of the third node object; wherein the attribute information of the third node object represents the attribute information of its corresponding target component under the second technology stack, and the hierarchical relationship between the first node object and the second node object represents the hierarchical relationship between its corresponding target component in the second technology stack.

[0096] In an optional embodiment, when responding to an edit operation on a first node object and obtaining the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, the processor 65 is specifically configured to: respond to an input operation on the first node object, obtain the attribute information of the first node object, and maintain the hierarchical relationship between the first node object and the second node object; or respond to a drag operation on the first node object, determine the hierarchical information of the first node object, and establish the hierarchical relationship between the first node object and the second node object; or respond to a modification operation on the first node object, obtain the attribute information and hierarchical information of the first node object, and establish the hierarchical relationship between the first node object and the second node object.

[0097] In an optional embodiment, when generating a first node object recognizable by the first technology stack based on the attribute information of the target component under the second technology stack, the processor 65 is specifically used to: parse the target component into a container, text, or image based on the attribute information of the target component under the second technology stack, and use it as a first node object recognizable by the first technology stack.

[0098] In an optional embodiment, the processor 65 is further configured to: encapsulate at least one front-end code with back-end code to obtain installation code for a target application developed across technology stacks; when the number of at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack; install and run the target application according to the installation code of the target application; and for the target front-end code in the at least one front-end code, when running the target front-end code, load the target component required for rendering the target front-end code, and use the rendering engine of the target technology stack corresponding to the target front-end code to render a front-end view for the target front-end code for the target component.

[0099] In one optional embodiment, when the processor 65 loads the target components required for rendering the target front-end code, it is specifically configured to: obtain the description file of the target components required for the target front-end code; dynamically load the target components required for the target front-end code based on the description file; or, directly load the target components required for the target front-end code from the front-end component library of the target technology stack.

[0100] In an optional embodiment, when the processor 65 renders a front-end view of the target front-end code for the target component using the rendering engine of the target technology stack corresponding to the target front-end code, it specifically performs the following steps: when the target front-end code is implemented as an intermediate syntax tree, it identifies the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects; it converts the attribute information of the multiple third-node objects into description information of multiple target components that can be recognized by the target technology stack; it converts the hierarchical relationship between the multiple third-node objects into page layout information corresponding to the multiple target components; and it renders the page using the multiple target components based on the page layout information and the description information of the multiple target components to obtain the front-end view of the target front-end code.

[0101] In one alternative embodiment, the second technology stack includes the progressive framework Vue or the JavaScript library React.

[0102] Furthermore, such as Figure 6 As shown, the cross-stack application processing device also includes other components such as a communication component 66, a display 67, a power supply component 68, and an audio component 69. Figure 6 The diagram only shows a portion of the components and does not imply that the cross-stack application processing device only includes... Figure 6 The components shown. It should be noted that... Figure 6 The components within the dashed box are optional, not mandatory, and their specific requirements depend on the product form of the cross-stack application processing device.

[0103] Figure 7 A schematic diagram of a page rendering device for a cross-stack application, provided as an exemplary embodiment of this application, is shown. The page rendering device for the cross-stack application has a target application installed on it. The target application is developed based on a first technology stack and at least one second technology stack, such as... Figure 7 As shown, the device includes a memory 74 and a processor 75.

[0104] Memory 74 is used to store computer programs and can be configured to store various other data to support operation on a cross-stack application processing device. Examples of this data include instructions for any application or method used to operate on the cross-stack application processing device.

[0105] The memory 74 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0106] The processor 75, coupled to the memory 74, is used to execute a computer program in the memory 74 for: running a target application, the target application including at least one front-end code and back-end code, the back-end code being developed based on a first technology stack, the back-end code describing the back-end logic of the target application; when the number of at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack; the target front-end code in the at least one front-end code describes the identification, style, and layout information of the target components on which the front-end view of the target front-end code depends; when running the target front-end code, loading the target components required for rendering the target front-end code, and rendering the front-end view of the target front-end code for the target components using the rendering engine of the target technology stack corresponding to the target front-end code.

[0107] In one optional embodiment, when the processor 75 loads the target components required for rendering the target front-end code, it is specifically configured to: obtain the description file of the target components required for the target front-end code; dynamically load the target components required for the target front-end code based on the description file; or, directly load the target components required for the target front-end code from the front-end component library of the target technology stack.

[0108] In an optional embodiment, when the processor 75 renders a front-end view of the target front-end code for the target component using the rendering engine of the target technology stack corresponding to the target front-end code, it specifically performs the following steps: when the target front-end code is implemented as an intermediate syntax tree, it identifies the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects; it converts the attribute information of the multiple third-node objects into description information of multiple target components that can be recognized by the target technology stack; it converts the hierarchical relationship between the multiple third-node objects into page layout information corresponding to the multiple target components; and it renders the page using the multiple target components based on the page layout information and the description information of the multiple target components to obtain the front-end view of the target front-end code.

[0109] Furthermore, such as Figure 7 As shown, the page rendering device of this cross-stack application also includes: communication component 76, display 77, power component 78, audio component 79, and other components. Figure 7 The diagram only shows a portion of the components and does not imply that the page rendering devices for cross-stack applications only include... Figure 7 The components shown. It should be noted that... Figure 7 The components within the dashed box are optional, not mandatory, and their specific requirements depend on the product type of the page rendering device used in the cross-stack application.

[0110] Accordingly, embodiments of this application also provide a computer-readable storage medium storing a computer program, which, when executed by a processor, causes the processor to implement the functions provided in embodiments of this application. Figure 1 and / or Figure 4 The steps in the method shown.

[0111] The above Figure 6 and Figure 7 The communication component is configured to facilitate wired or wireless communication between the device containing the communication component and other devices. The device containing the communication component can access wireless networks based on communication standards, such as WiFi, 2G, 3G, 4G / LTE, 5G, or combinations thereof. In one exemplary embodiment, the communication component receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, the communication component also includes a Near Field Communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID), Infrared Data Association (IrDA) technology, Ultra-Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0112] The above Figure 6 and Figure 7 The display includes a screen, which may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen can be implemented as a touchscreen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors can sense not only the boundaries of the touch or swipe action, but also the duration and pressure associated with the touch or swipe operation.

[0113] The above Figure 6 and Figure 7 The power supply component provides power to the various components of the device in which it resides. The power supply component may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the device in which it resides.

[0114] The above Figure 6 and Figure 7 The audio component can be configured to output and / or input audio signals. For example, the audio component includes a microphone (MIC) configured to receive external audio signals when the device containing the audio component is in an operating mode, such as call mode, recording mode, or voice recognition mode. The received audio signals can be further stored in memory or transmitted via a communication component. In some embodiments, the audio component also includes a speaker for outputting audio signals.

[0115] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0116] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0117] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0118] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0119] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0120] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0121] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0122] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0123] The foregoing is merely an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.

Claims

1. A method for handling cross-stack applications, characterized in that, The method is applied to an application development platform that uses a first technology stack and connects to at least one second technology stack. The first technology stack is used to develop the backend code of a target application, and the backend code describes the backend logic of the target application. The second technology stack is used to develop the frontend code of the target application. The frontend view of the target application depends on target components in the frontend component library of the second technology stack. The application development platform is decoupled from the frontend component library of the second technology stack. During the generation of the target application, the second technology stack is dynamically switched to obtain frontend code corresponding to different second technology stacks. The target application includes at least one frontend code and the backend code. When the number of the at least one frontend code is greater than or equal to two, the at least one frontend code corresponds to at least two different second technology stacks or the same second technology stack. The target frontend code in the at least one frontend code describes the identifier, style, and layout information of the target component on which the frontend view of the target application depends. For any second technology stack, the method includes: Import the description file of the target component, which has an intermediate syntax format that can be recognized by both the first and second technology stacks; the target component belongs to the front-end component library of the second technology stack; Based on the description file of the target component, a first node object corresponding to the target component is presented on the development interface. The first node object can reflect the attribute information of the target component and can be recognized by the first technology stack. The first node object corresponds to a second node object, which is the other node objects excluding the first node object among the third node objects required to generate the front-end code. In response to the editing operation on the first node object, an intermediate syntax tree is generated as the front-end code based on the attribute information of the first node object after editing and the hierarchical relationship between the first node object and the second node object. The nodes and their attribute information on the intermediate syntax tree respectively represent the third node object and its attribute information.

2. The method according to claim 1, characterized in that, Before importing the description file of the target component, the following is also included: For the target component in the front-end component library of the second technology stack, the intermediate state syntax format is used to describe the target component to obtain the description file of the target component.

3. The method according to claim 1, characterized in that, Based on the description file of the target component, the first node object corresponding to the target component is presented on the development interface, including: Based on the intermediate state syntax format, the description file of the target component is parsed to obtain the attribute information of the target component under the second technology stack; Based on the attribute information of the target component under the second technology stack, a first node object that can be recognized by the first technology stack is generated, and the first node object is presented on the development interface so that application developers can perform editing operations based on the first node object.

4. The method according to claim 3, characterized in that, Based on the attribute information of the target component under the second technology stack, a first node object recognizable by the first technology stack is generated, including: Based on the attribute information of the target component under the second technology stack, the target component is parsed into a container, text, or image, and used as a first node object that can be recognized by the first technology stack.

5. The method according to claim 1, characterized in that, The attribute information of the third node object includes at least the identifier and style of the third node object; the attribute information of the third node object represents the attribute information of its corresponding target component under the second technology stack, and the hierarchical relationship between the first node object and the second node object represents the hierarchical relationship between their corresponding target components in the second technology stack.

6. The method according to claim 5, characterized in that, In response to an edit operation on the first node object, the system retrieves the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, including: In response to an input operation on the first node object, the attribute information of the first node object is obtained, and the hierarchical relationship between the first node object and the second node object is maintained; or In response to a drag operation on the first node object, determine the hierarchical information of the first node object and establish a hierarchical relationship between the first node object and the second node object; or In response to a modification operation on the first node object, the attribute information and hierarchical information of the first node object are obtained, and a hierarchical relationship is established between the first node object and the second node object.

7. The method according to claim 5, characterized in that, Also includes: At least one front-end code is encapsulated with the back-end code to obtain the installation code of the target application developed across technology stacks; Install and run the target application according to the installation code of the target application; For at least one target front-end code in the front-end code, when the target front-end code is executed, the target component required for rendering the target front-end code is loaded, and the rendering engine of the target technology stack corresponding to the target front-end code is used to render a front-end view for the target front-end code for the target component.

8. The method according to claim 7, characterized in that, Dynamically load and render the target components required for the target front-end code, including: Obtain the description file of the target component required to obtain the target front-end code; The target components required by the target front-end code are dynamically loaded based on the description file; or, the target components required by the target front-end code are dynamically loaded directly from the front-end component library of the target technology stack.

9. The method according to claim 7, characterized in that, Rendering a front-end view for the target front-end code using the rendering engine of the target technology stack corresponding to the target front-end code, including: When the target front-end code is implemented as an intermediate syntax tree, the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects are identified; the attribute information of the multiple third-node objects is converted into description information of multiple target components that can be recognized by the target technology stack; the hierarchical relationship between the multiple third-node objects is converted into page layout information corresponding to the multiple target components; based on the page layout information and the description information of the multiple target components, the page is rendered using the multiple target components to obtain the front-end view of the target front-end code.

10. The method according to any one of claims 1-9, characterized in that, The second technology stack includes the progressive framework Vue or the JavaScript library React.

11. A page rendering method for cross-stack applications, characterized in that, The method is applied to an electronic device on which a target application is installed. The target application is developed by an application development platform based on a first technology stack and at least one second technology stack. The application development platform uses the first technology stack and connects to at least one second technology stack. The first technology stack is used to develop the backend code of the target application, which describes the backend logic of the target application. The second technology stack is used to develop the frontend code of the target application. The frontend view of the target application depends on target components in the frontend component library of the second technology stack. The application development platform is decoupled from the frontend component library of the second technology stack. During the generation of the target application, the second technology stack is dynamically switched to obtain frontend code corresponding to different second technology stacks. For any second technology stack, the method includes: The target application is run, the target application includes at least one front-end code and back-end code, and when the number of the at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack, and the target front-end code in the at least one front-end code describes the identification, style and layout information of the target components on which the front-end view of the target application depends for the target front-end code; The development process of any front-end code is implemented through the following steps: For any second technology stack, import the description file of the target component, the description file having an intermediate syntax format that can be recognized by both the first and second technology stacks; the target component belongs to the front-end component library of the second technology stack; based on the description file of the target component, present the first node object corresponding to the target component on the development interface, the first node object can reflect the attribute information of the target component and can be recognized by the first technology stack, the first node object corresponds to a second node object, the second node object is the other node objects excluding the first node object among the third node objects required to generate the front-end code; in response to the editing operation of the first node object, according to the attribute information of the first node object after editing and the hierarchical relationship between the first node object and the second node object, generate an intermediate syntax tree as the front-end code, the nodes and their attribute information on the intermediate syntax tree respectively represent the third node object and its attribute information.

12. The method according to claim 11, characterized in that, Load the target components required to render the target front-end code, including: Obtain the description file of the target component required to obtain the target front-end code; The target components required by the target front-end code are dynamically loaded based on the description file; or, the target components required by the target front-end code are directly loaded from the front-end component library of the target technology stack.

13. The method according to claim 11, characterized in that, Rendering a front-end view for the target front-end code using the rendering engine of the target technology stack corresponding to the target front-end code, including: When the target front-end code is implemented as an intermediate syntax tree, the attribute information of multiple third-node objects contained in the intermediate syntax tree and the hierarchical relationship between the multiple third-node objects are identified; the attribute information of the multiple third-node objects is converted into description information of multiple target components that can be recognized by the target technology stack; the hierarchical relationship between the multiple third-node objects is converted into page layout information corresponding to the multiple target components; based on the page layout information and the description information of the multiple target components, the page is rendered using the multiple target components to obtain the front-end view of the target front-end code.

14. A cross-stack application processing device, characterized in that, Corresponding to the application development platform, the application development platform uses a first technology stack and connects to at least one second technology stack. The first technology stack is used to develop the backend code of the target application, and the backend code describes the backend logic of the target application. The second technology stack is used to develop the frontend code of the target application. The frontend view of the target application depends on the target component in the frontend component library of the second technology stack. The application development platform is decoupled from the frontend component library of the second technology stack. During the generation of the target application, the second technology stack is dynamically switched to obtain the frontend code corresponding to different second technology stacks. The target application includes at least one frontend code and the backend code. When the number of the at least one frontend code is greater than or equal to two, the at least one frontend code corresponds to at least two different second technology stacks or the same second technology stack. The target frontend code in the at least one frontend code describes the identifier, style, and layout information of the target component on which the frontend view of the target application depends. For any second technology stack, the device includes: an import module, a rendering module, and a generation module. The import module is used to import the description file of the target component. The description file has an intermediate syntax format that can be recognized by both the first technology stack and the second technology stack. The target component belongs to the front-end component library of the second technology stack. The presentation module is used to present a first node object corresponding to the target component on the development interface based on the description file of the target component. The first node object can reflect the attribute information of the target component and can be recognized by the first technology stack. The first node object corresponds to a second node object, which is the other node objects excluding the first node object in the third node objects required to generate the front-end code. The generation module is used to respond to the editing operation of the first node object, and generate an intermediate syntax tree as the front-end code based on the attribute information of the first node object after editing and the hierarchical relationship between the first node object and the second node object. The nodes and their attribute information on the intermediate syntax tree respectively represent the third node object and its attribute information.

15. A page rendering device for cross-stack applications, characterized in that, The cross-stack application's page rendering device is equipped with a target application. The target application is developed by an application development platform based on a first technology stack and at least one second technology stack. The application development platform uses the first technology stack and connects to at least one second technology stack. The first technology stack is used to develop the backend code of the target application, and the backend code describes the backend logic of the target application. The second technology stack is used to develop the frontend code of the target application. The frontend view of the target application depends on the target component in the frontend component library of the second technology stack. The application development platform is decoupled from the frontend component library of the second technology stack. During the generation of the target application, the second technology stack is dynamically switched to obtain the frontend code corresponding to different second technology stacks. For any second technology stack, the cross-stack application's page rendering device includes: a running module, a loading module, and a processing module. The running module is used to run the target application, which includes at least one front-end code and back-end code. When the number of the at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack. The target front-end code in the at least one front-end code describes the identifier, style, and layout information of the target component on which the front-end view of the target application depends for the target front-end code. The development process of any front-end code is implemented through the following steps: For any second technology stack, import the description file of the target component, the description file having an intermediate syntax format that can be recognized by both the first and second technology stacks; the target component belongs to the front-end component library of the second technology stack; based on the description file of the target component, present the first node object corresponding to the target component on the development interface, the first node object can reflect the attribute information of the target component and can be recognized by the first technology stack; the first node object corresponds to a second node object, the second node object being the other node objects excluding the first node object among the third node objects required to generate the front-end code; in response to the editing operation of the first node object, generate an intermediate syntax tree as the front-end code according to the attribute information of the edited first node object and the hierarchical relationship between the first node object and the second node object, the nodes and their attribute information on the intermediate syntax tree respectively represent the third node object and its attribute information.

16. A cross-stack application processing device, characterized in that, include: Memory and processor; The memory is used to store a computer program; the processor, coupled to the memory, is used to execute the computer program to implement the steps of the method according to any one of claims 1-10.

17. A page rendering device for cross-stack applications, characterized in that, The cross-stack application's page rendering device has a target application installed. The target application is developed based on a first technology stack and at least one second technology stack. The cross-stack application's page rendering device includes: a memory and a processor; the memory is used to store a computer program; the processor is coupled to the memory and is used to execute the computer program to implement the steps of the method according to any one of claims 11-13.

18. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it causes the processor to perform the steps of the method according to any one of claims 1-13.

Images