Application construction method and device, equipment and computer readable storage medium

Abstract

The application provides an application construction method and device, equipment and a computer readable storage medium. The method comprises: in response to a page design operation on a page in a current application, generating page description information of the page; wherein the page design operation comprises an editing operation on a component in a first component list area; in response to an application publishing operation on the current application, generating a virtual DOM tree of the page based on the page description information; generating a static resource file of the page based on the virtual DOM tree; wherein the static resource file comprises a main static resource file and at least one sub static resource file; and publishing the main static resource file and the at least one sub static resource file. Through the application, the flexibility and versatility of the user when constructing the application can be improved, and the page loading performance of the constructed application can be improved.

Description

Technical Field

[0001] This application relates to computer software information technology, and more particularly to an application construction method, apparatus, device, and computer-readable storage medium. Background Technology

[0002] A low-code platform is a platform that enables applications to be built with minimal or no code. Low-code platforms allow users with varying levels of development experience to create web pages and mobile applications through a graphical interface, using drag-and-drop components and model-driven logic. However, in this technology, users experience lower flexibility and versatility when building applications using low-code methods. Furthermore, applications built using low-code platforms typically exhibit poor performance during page loading, resulting in longer page loading times. Summary of the Invention

[0003] This application provides an application building method, apparatus, device, and computer-readable storage medium, which can improve the flexibility and versatility of application building and improve the page loading performance of the built application, thereby enhancing the user experience.

[0004] The technical solution of this application embodiment is implemented as follows:

[0005] This application provides an application building method, including:

[0006] In response to a page design operation performed on a page in the current application, page description information for the page is generated; wherein the page design operation includes editing operations on components in a first component list area;

[0007] In response to an application publishing operation performed on the current application, a virtual document object model (DOM) tree for the page is generated based on the page description information;

[0008] Based on the virtual DOM tree, static resource files for the page are generated; wherein, the static resource files include a main static resource file and at least one sub-static resource file;

[0009] Publish the main static resource file and the at least one sub-static resource file.

[0010] In some embodiments, the first component list area further includes a layout container, and the page design operation further includes an editing operation on the layout container. The step of generating page description information for the page in response to the page design operation performed on the page in the current application includes: adding description information of the layout container to the page description information in response to the editing operation on the layout container; and adding description information of the component to the description information of the layout container in response to the editing operation on the component.

[0011] In some embodiments, the page design operation further includes an attribute configuration operation. The step of generating page description information for the page in response to the page design operation performed on a page in the current application further includes: updating the description information of the component in the page description information according to the attributes configured in the attribute configuration operation in response to the attribute configuration operation.

[0012] In some embodiments, the page design operation further includes a model binding operation. The step of generating page description information for the page in response to the page design operation performed on the page in the current application further includes: in response to the model binding operation performed on the component, adding description information of the data binding relationship between the model corresponding to the model binding operation and the component to the description information of the component; and saving the data binding relationship.

[0013] In some embodiments, generating the virtual DOM tree of the page based on the page description information includes: determining the set of components contained in the page based on the page description information; globally registering each component in the component set; and generating the virtual DOM tree of the page using custom tags based on the page description information and the registered components.

[0014] In some embodiments, generating static resource files for the page based on the virtual DOM tree includes: for each component in the component set, generating a sub-static resource file corresponding to the component and dynamic loading code of the component based on the virtual DOM tree; and generating the main static resource file of the page based on the virtual DOM tree and the dynamic loading code of each component.

[0015] In some embodiments, the page description information is a description information in JSON Schema format.

[0016] In some embodiments, the component includes a base component and an integrated component, the integrated component being obtained by combining multiple base components. The method further includes: displaying a component building interface for the target integrated component in response to a component building operation for the target integrated component; the component building interface includes a second component list area, the second component list area including base components and integrated components; generating component description information for the target integrated component in response to a component design operation for the integrated component; wherein the component design operation includes editing operations on the base components and / or integrated components in the second component list area; and saving the component description information in response to a component saving operation for the target integrated component.

[0017] In some embodiments, the component description information is a description information in JSON Schema format.

[0018] In some embodiments, the method further includes: in response to a page loading operation on the current device, obtaining a main static resource file and at least one sub-static resource file of the page; dynamically loading a state tree and a virtual DOM tree of the page based on the main static resource file and at least one sub-static resource file; rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page; and displaying the rendered page on the current device.

[0019] In some embodiments, the state tree of the page includes the state tree of at least one model; the step of rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page includes: for each model, making a data request to the backend service corresponding to the model and obtaining the backend fields returned by the backend service; determining the value of each field in the model based on the state tree of each model and the backend fields corresponding to the model; obtaining the reference relationship between each component in the virtual DOM tree and the fields of each model; and rendering each component in the virtual DOM tree based on the value of each field in each model and the reference relationship to obtain the rendered page.

[0020] In some embodiments, the method further includes: for each field in each model, if a change is detected in the field, synchronizing the changed value of the field to each component in the virtual DOM tree that references the field, to obtain an updated virtual DOM tree; and refreshing the page based on the updated virtual DOM tree.

[0021] This application provides an application building apparatus, including:

[0022] The first generation module is used to generate page description information of the page in response to a page design operation performed on a page in the current application; wherein the page design operation includes editing operations on components in the first component list area;

[0023] The second generation module is used to generate a virtual DOM tree of the page based on the page description information in response to the application publishing operation performed on the current application.

[0024] The third generation module is used to generate static resource files for the page based on the virtual DOM tree; wherein the static resource files include a main static resource file and at least one sub-static resource file;

[0025] The publishing module is used to publish the main static resource file and at least one sub-static resource file.

[0026] In some embodiments, the first component list area further includes a layout container, the page design operation further includes an editing operation on the layout container, and the first generation module is further configured to: in response to the editing operation on the layout container, add description information of the layout container to the page description information; and in response to the editing operation on the component, add description information of the component to the description information of the layout container.

[0027] In some embodiments, the page design operation further includes an attribute configuration operation, and the first generation module is further configured to: in response to the attribute configuration operation performed on the component, update the description information of the component in the page description information according to the attributes configured in the attribute configuration operation.

[0028] In some embodiments, the page design operation further includes a model binding operation, and the first generation module is further configured to: in response to the model binding operation performed on the component, add descriptive information about the data binding relationship between the model corresponding to the model binding operation and the component to the component's description information; and save the data binding relationship.

[0029] In some embodiments, the second generation module is further configured to: determine the set of components contained in the page based on the page description information; globally register each component in the component set; and generate a virtual DOM tree of the page based on the page description information and the registered components, using custom tags.

[0030] In some embodiments, the third generation module is further configured to: for each component in the component set, generate a sub-static resource file corresponding to the component and the dynamic loading code of the component based on the virtual DOM tree; and generate the main static resource file of the page based on the virtual DOM tree and the dynamic loading code of each component.

[0031] In some embodiments, the page description information is a description information in JSON Schema format.

[0032] In some embodiments, the component includes a base component and an integrated component, the integrated component being obtained by combining multiple base components. The device further includes: a first display module, configured to: display a component building interface of the target integrated component in response to a component building operation for the target integrated component; the component building interface includes a second component list area, the second component list area including base components and integrated components; a fourth generation module, configured to: generate component description information of the target integrated component in response to a component design operation performed on the integrated component; wherein the component design operation includes editing operations on the base components and / or integrated components in the second component list area; and a saving module, configured to: save the component description information in response to a component saving operation performed on the target integrated component.

[0033] In some embodiments, the component description information is a description information in JSON Schema format.

[0034] In some embodiments, the apparatus further includes: an acquisition module, configured to: acquire a main static resource file and at least one sub-static resource file of the page in response to a page loading operation on the current device; a loading module, configured to: dynamically load a state tree and a virtual DOM tree of the page based on the main static resource file and at least one sub-static resource file; a rendering module, configured to: render each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page; and a sixth display module, configured to: display the rendered page on the current device.

[0035] In some embodiments, the state tree of the page includes the state tree of at least one model; the rendering module is further configured to: for each model, make a data request to the backend service corresponding to the model, and obtain the backend fields returned by the backend service; determine the value of each field in the model based on the state tree of each model and the backend fields corresponding to the model; obtain the reference relationship between each component in the virtual DOM tree and the fields of each model; and render each component in the virtual DOM tree based on the value of each field in each model and the reference relationship to obtain the rendered page.

[0036] In some embodiments, the apparatus further includes: an update module, configured to, for each field in each model, synchronize the changed value of the field to each component in the virtual DOM tree that references the field when a change is detected, to obtain an updated virtual DOM tree; and a refresh module, configured to refresh the page based on the updated virtual DOM tree.

[0037] This application provides an application building device, including: a memory for storing executable instructions; and a processor for implementing the method provided in this application when executing the executable instructions stored in the memory.

[0038] This application provides a computer-readable storage medium storing executable instructions for implementing the method provided in this application when executed by a processor.

[0039] In this embodiment, page design is achieved by editing components in the first component list area, generating page description information. Then, through application publishing operations for the current application, a virtual DOM tree is generated based on the page description information. Finally, based on the virtual DOM tree, the main static resource file and at least one child static resource file are generated and published. This approach offers several advantages. First, since the page description information clearly and accurately describes the designed page and its components, components can be easily applied to other pages or the entire page can be applied to other applications by copying the page description information, thus improving the flexibility and versatility of application building. Second, because the page's static resource files are published during page publishing, static resources can be directly loaded during page loading, reducing page configuration requests, improving page loading performance, and enhancing the user experience. Finally, since the published static resource files include a main static resource file and at least one child static resource file, dynamic page loading can be performed based on these files during page loading, further improving the page loading performance in the built application. Attached Figure Description

[0040] Figure 1A This is a schematic diagram of the page construction interface of a low-code development platform in related technologies;

[0041] Figure 1B This is a schematic diagram of the implementation architecture for building application clients using a low-code development platform in related technologies;

[0042] Figure 1CThis is a schematic diagram illustrating the implementation process of building web pages using a low-code development platform in related technologies;

[0043] Figure 1D This is an optional architecture diagram of the application building system provided in this application embodiment;

[0044] Figure 2 This is an optional structural diagram of the application building device provided in the embodiments of this application;

[0045] Figure 3 This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0046] Figure 4A This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0047] Figure 4B This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0048] Figure 4C This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0049] Figure 5 This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0050] Figure 6 This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0051] Figure 7 This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0052] Figure 8 This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0053] Figure 9 This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0054] Figure 10 This is an optional flowchart illustrating the application construction method provided in this application embodiment;

[0055] Figure 11 This is a schematic diagram of a user interface for an application building platform provided in an embodiment of this application;

[0056] Figure 12 This is a schematic diagram of a user interface for a component building platform provided in an embodiment of this application;

[0057] Figure 13 This is a schematic diagram illustrating the implementation process of an application construction method provided in an embodiment of this application;

[0058] Figure 14 This is a schematic diagram of the implementation architecture of a low-code development platform client provided in an embodiment of this application;

[0059] Figure 15 This is a schematic diagram illustrating the implementation process of a page loading method provided in an embodiment of this application;

[0060] Figure 16A This is a schematic diagram illustrating the implementation process of a page publishing method provided in an embodiment of this application;

[0061] Figure 16B This is a schematic diagram illustrating the implementation process of a page publishing method provided in an embodiment of this application. Detailed Implementation

[0062] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limitations on this application. All other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0063] In the following description, references are made to “some embodiments,” which describe a subset of all possible embodiments. However, it is understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0064] If the application documents contain similar descriptions such as "first / second", the following explanation shall be added: In the following description, the terms "first / second / third" are used only to distinguish similar objects and do not represent a specific order of objects. It is understood that "first / second / third" may be interchanged in a specific order or sequence where permitted, so that the embodiments of this application described herein can be implemented in an order other than that illustrated or described herein.

[0065] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0066] Before providing a further detailed description of the embodiments of this application, the nouns and terms involved in the embodiments of this application will be explained, and the nouns and terms involved in the embodiments of this application shall be interpreted as follows.

[0067] 1) Low-code: refers to the ability to build applications with little or no code;

[0068] 2) Page building: Build web pages using drag-and-drop, click, or import methods;

[0069] 3) Components: The smallest units that make up a web page, such as input boxes, text, images, etc.

[0070] 4) Application: refers to web applications;

[0071] 5) Tenant: Application space applied for by users on the application platform. Multiple applications can be under one tenant;

[0072] 6) Component building platform: A platform for generating fragments and templates by dragging and dropping components and layouts;

[0073] 7) JSON Schema: A JSON data structure used to describe page or component information;

[0074] 8) Fragment: A collection of components for a specific business scenario. Essentially, it's a JSON description of multiple components using JavaScript Object Notation (JS), such as a combination of text, images, and input fields for Human Resources (HR).

[0075] 9) Template: A general collection of components, which is essentially a JSON description of multiple components, such as a general form or table, and can meet the needs of most business scenarios.

[0076] 10) Model: refers to a formalized expression of a real-world problem, objective thing, or law after abstraction.

[0077] To better understand the application building method provided in the embodiments of this application, the technical solutions for application building using a low-code approach in related technologies will be described below.

[0078] See Figure 1A , Figure 1AThis is a schematic diagram of the page building interface of a low-code development platform in related technologies. The page building interface includes a page list area 11, a page building area 12, and a component list area 13. The page list area 11 displays a list of pages included in the application or module. In the page building area 12, pages can be built by dragging and dropping. The component list area 13 displays the components used to build the page and switches to the display of component properties. When building a page, the components to be used can be dragged directly from the component list area 13 to the target area in the page building area 12.

[0079] See Figure 1B , Figure 1B This is a schematic diagram of the implementation architecture of an application client built on a low-code development platform in related technologies. The architecture of this client is mainly divided into four layers: User Interface (UI) layer 21: responsible for component lifecycle management, component communication, and page rendering; Business Logic layer 22: handles data validation and uses Nanoflow to process complex logic; Data layer 23: manages the data used by the front end, handles state based on the React Flux pattern, and pushes state changes to UI components; Data Communication 24: uses HyperText Transfer Protocol (HTTP) / HyperText Transfer Protocol over Secure Socket Layer (HTTPS) to exchange metadata and manage sessions with the runtime server.

[0080] See Figure 1C , Figure 1C This is a schematic diagram illustrating the implementation process of building web pages using a low-code development platform in related technologies, such as... Figure 1C As shown, building a web page using this low-code development platform mainly includes three sub-processes: component editing and publishing 31, web page layout 32, and application building and publishing 33.

[0081] The process of writing and releasing components includes the following steps:

[0082] Step S31a: The user writes the component;

[0083] In step S31b, the low-code development platform determines whether the component has been released to the market; if yes, proceed to step S31c; if no, proceed to step S31d.

[0084] In step S31c, the low-code development platform publishes the component to the component marketplace, proceeding to step S31e;

[0085] In step S31d, the low-code development platform stores the component locally;

[0086] In step S31e, the low-code development platform loads components for the application, and then proceeds to step S32a.

[0087] The process of web page layout includes the following steps:

[0088] S32a, the user drags and drops the layout of the page;

[0089] S32b, a drag-and-drop component for the user;

[0090] S32c allows users to configure component properties.

[0091] The application building and deployment process includes the following steps:

[0092] S33a, user saves configuration and page;

[0093] S33b, a low-code development platform, packages components and configurations locally into static HyperText Markup Language (HTML) and JS files;

[0094] S33c, users deploy static resources.

[0095] The low-code application building solutions mentioned above have the following main drawbacks:

[0096] 1) The basic elements of page construction are basic components, which can only be written by people with certain software development experience. People with insufficient software development experience cannot write basic components, and different business needs to write specific components separately to complete page construction.

[0097] 2) The frameworks on which the components are written (such as the Dojo framework used in Mendix software) are outdated and cannot use the latest browser features;

[0098] 3) The basic unit for platform reuse is the component / layout. If different businesses have the same set of components, they need to be generated separately by dragging and dropping.

[0099] 4) The page is constructed by basic components (0 / n) + layout container. n can be any positive integer. The layout container includes commonly used Tab containers, vertical layout containers, etc., but can only be vertical or horizontal and does not support fixed layout or arbitrary layout.

[0100] 5) Component property configurations cannot be modified or extended using custom code in the property panel;

[0101] 6) The application is packaged by bundling the JS of all components into one JS file, resulting in a large JS file and a long page loading time;

[0102] 7) The application is packaged as static resource files such as HTML, JS, and Cascading Style Sheets (CSS). During deployment, users need to deploy the application to the corresponding server / cloud server, and each application needs to apply for deployment resources separately. The platform cannot automatically deploy dynamically.

[0103] This application provides an application building method, apparatus, device, and computer-readable storage medium, which can improve the flexibility and versatility of application building and enhance the page loading performance of the built application, thereby improving the user experience. The following describes exemplary applications of the application building device provided in this application. This application building device can be implemented as various types of user terminals such as laptops, tablets, desktop computers, set-top boxes, and mobile devices (e.g., mobile phones, portable music players, personal digital assistants, dedicated messaging devices, portable gaming devices), or as a server. The following describes exemplary applications when the application building device is implemented as a terminal.

[0104] See Figure 1D , Figure 1D This is an optional architecture diagram of the application building system 100 provided in the embodiments of this application. In order to implement an application building platform, the terminal (terminal 400-1 and terminal 400-2 are shown as examples) connects to the static resource server 200 through the network 300. The network 300 can be a wide area network or a local area network, or a combination of the two.

[0105] The terminal is used to: display the page building interface of the current application in a graphical interface (graphical interfaces 410-1 and 410-2 are shown as examples); generate page description information of the page in response to a page design operation performed on a page in the current application; wherein the page design operation includes editing operations on components in a first component list area; generate a virtual DOM tree of the page based on the page description information in response to an application publishing operation performed on the current application; generate static resource files of the page based on the virtual DOM tree; wherein the static resource files include a main static resource file and at least one sub-static resource file; and publish the main static resource file and the at least one sub-static resource file. The terminal can publish the designed static resource files of the page to a static resource server 200. The static resource server 200 can be used to: receive and store the static resource files of the page published by the terminal.

[0106] In some embodiments, when the application building device is implemented as a server, it can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content distribution networks (CDNs), and big data and artificial intelligence platforms. The terminal can be a smartphone, tablet, laptop, desktop computer, smart speaker, smartwatch, etc., but is not limited to these. The terminal and server can be directly or indirectly connected via wired or wireless communication, which is not limited in this embodiment of the invention.

[0107] See Figure 2 , Figure 2 This is a schematic diagram of the structure of the application building device 400 provided in the embodiments of this application. Figure 2 The application building device 400 shown includes at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430. The various components in the application building device 400 are coupled together via a bus system 440. It is understood that the bus system 440 is used to implement communication between these components. In addition to a data bus, the bus system 440 also includes a power bus, a control bus, and a status signal bus. However, for clarity, ... Figure 2 The general labeled all buses as Bus System 440.

[0108] Processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0109] User interface 430 includes one or more output devices 431 that enable the presentation of media content, including one or more speakers and / or one or more visual displays. User interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0110] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state storage, hard disk drives, optical disk drives, etc. The memory 450 may optionally include one or more storage devices physically located away from the processor 410.

[0111] The memory 450 may include volatile memory or non-volatile memory, or both. The non-volatile memory may be read-only memory (ROM), and the volatile memory may be random access memory (RAM). The memory 450 described in this application embodiment is intended to include any suitable type of memory.

[0112] In some embodiments, memory 450 is capable of storing data to support various operations, examples of which include programs, modules, and data structures or subsets or supersets thereof, as illustrated below.

[0113] Operating system 451 includes system programs for handling various basic system services and performing hardware-related tasks, such as the framework layer, core library layer, driver layer, etc., for implementing various basic business functions and handling hardware-based tasks;

[0114] The network communication module 452 is used to reach other computing devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 including: Bluetooth, WiFi, and Universal Serial Bus (USB), etc.

[0115] Presentation module 453 is configured to enable the presentation of information (e.g., a user interface for operating peripheral devices and displaying content and information) via one or more output devices 431 associated with user interface 430 (e.g., a display screen, a speaker, etc.).

[0116] The input processing module 454 is used to detect and translate one or more user inputs or interactions from one or more input devices 432.

[0117] In some embodiments, the apparatus provided in this application can be implemented in software. Figure 2 An application building apparatus 455 stored in memory 450 is shown. It can be software in the form of programs and plug-ins, including the following software modules: a first generation module 4551, a second generation module 4552, a third generation module 4553, and a release module 4554. These modules are logical and can therefore be arbitrarily combined or further split according to the functions implemented.

[0118] The functions of each module will be explained below.

[0119] In other embodiments, the apparatus provided in this application can be implemented in hardware. As an example, the apparatus provided in this application can be a processor in the form of a hardware decoding processor, which is programmed to execute the application building method provided in this application. For example, the processor in the form of a hardware decoding processor can be one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), or other electronic components.

[0120] The application construction method provided in this application embodiment will be described below with reference to exemplary applications and implementations of the terminal or server provided in the embodiments of this application.

[0121] See Figure 3 , Figure 3 This is an optional flowchart illustrating the application construction method provided in this application embodiment. The following will be combined with... Figure 3 The steps shown are explained below. The entity performing these steps can be the terminal or server mentioned above.

[0122] In step S101, in response to a page design operation performed on a page in the current application, page description information of the page is generated; wherein the page design operation includes editing operations on components in the first component list area.

[0123] Here, the current application can include at least one page, and page design operations can be performed on any page within the current application. A page in the current application can be a newly created blank page or an already designed, non-blank page.

[0124] The first component list area can be located anywhere suitable within the current interactive interface. The first component list can include at least one component, which is a sub-unit that constitutes the web page. In implementation, components can be basic components generated by IT personnel through code, such as input boxes, text, and images, or integrated components obtained by combining multiple basic components, such as fragments and templates. In some embodiments, the first component list may include, but is not limited to, at least one basic component and at least one integrated component.

[0125] Page design operations refer to the actions performed by the user during the page design process, which may include one or more editing operations on basic components and / or integrated components. Editing operations on basic components and / or integrated components involve actions such as dragging, clicking, touching, or importing the components themselves, and do not involve code-level operations. In some embodiments, the editing operations may include at least one of the following: dragging, clicking, touching, or importing. In some embodiments, page design operations may also include one or more of the following: layout operations, attribute configuration operations, and model binding operations on basic components and / or integrated components.

[0126] The page designed through page design operations is described at the underlying level using page description information in a specific way. This page description information can be generated during the page design process based on the user's page design operations. The page description information can describe one or more of the following: components included in the currently designed page, component layout relationships, component nesting relationships, component attribute information, data binding information, etc. In implementation, the page description information can be a description of the page using JSON Schema, XML, or other suitable methods; there are no limitations on this. In some embodiments, the page description information is a description using JSON Schema. Since the JSON Schema file itself is in JSON format, and JSON is widely used, it is easy to copy the basic components, fragments, templates, or the entire page from the JSON Schema and apply them to any application that supports JSON. This allows the designed page to have better flexibility, convenience, and high portability.

[0127] In step S102, in response to the application publishing operation performed for the current application, a virtual DOM tree of the page is generated based on the page description information.

[0128] Here, "current application" refers to the application to which the currently designed page belongs. Application publishing operations can include, but are not limited to, any suitable operation such as button clicks, keyboard shortcuts, touch operations, and gestures. For example, users can publish the current application by clicking the "Publish Application" button on the page building interface. When publishing an application, all pages in the application can be published, or only the currently designed page can be published.

[0129] The virtual DOM tree is a JavaScript object used to describe the HTML fragments corresponding to a page. Page description information can include the attribute information of each component, the layout information of each component, and the nesting structure between components. By parsing the page description information, the corresponding HTML fragments can be determined, and then a JavaScript object describing those HTML fragments can be generated, which is the page's virtual DOM tree.

[0130] In step S103, static resource files for the page are generated based on the virtual DOM tree; wherein the static resource files include a main static resource file and at least one sub-static resource file.

[0131] Here, by parsing the JS object corresponding to the virtual DOM tree, static resources such as HTML and CSS in the page can be obtained. By packaging the obtained static resources and the virtual DOM tree, the static resource files of the page can be generated.

[0132] Static resource files can include, but are not limited to, one or more of the following: the page's virtual DOM tree, HTML files, and CSS files. The main static resource file is the initial static resource file required when the page loads, including but not limited to the page's main JS file and main HTML file. The main static resource file may only include the basic static resources required for page loading, excluding static resources corresponding to various components on the page. Child static resource files are files corresponding to static resources that can be dynamically loaded during page runtime, including but not limited to JS files and HTML files corresponding to various components on the page. In implementation, the basic static resources required for page loading can be determined based on the page's virtual DOM tree, and these basic static resources can be packaged into a main static resource file, while other static resources can be packaged into at least one child static resource file. The main static resource file may include code for dynamically loading child static resource files. When the page loads, only the main static resource file can be loaded; during subsequent page runtime, the code in the main static resource file can be used to dynamically load child static resource files as needed.

[0133] In step S104, the main static resource file and the at least one sub-static resource file are published.

[0134] Here, the static resource files of the published page design can include, but are not limited to, publishing the page's static resource files to one or more of the following: local service, static resource server, CDN, etc. During page loading, the page can be rendered based on the page's virtual DOM tree, HTML files, CSS files, etc., found in the static resource files, resulting in the rendered page, which can then be displayed in the browser.

[0135] In some embodiments, the main static resource file and the at least one sub-static resource file may be published to the static resource server of the current application.

[0136] In some embodiments, the method may further include: in response to a page save operation performed on the page, saving the page description information of the page. Here, the page description information may be saved locally or on a cloud server; there is no limitation on this. In some implementations, a current version number may be set for the page, and when saving the page description information, the page description information and the current version number of the page may be stored in a corresponding manner.

[0137] In this embodiment, page design is achieved by editing components in the first component list area, generating page description information. Then, through application publishing operations for the current application, a virtual DOM tree is generated based on the page description information. Finally, based on the virtual DOM tree, the main static resource file and at least one child static resource file are generated and published. This approach offers several advantages. First, since the page description information clearly and accurately describes the designed page and its components, components can be easily applied to other pages or the entire page can be applied to other applications by copying the page description information, thus improving the flexibility and versatility of application building. Second, because the page's static resource files are published during page publishing, static resources can be directly loaded during page loading, reducing page configuration requests, improving page loading performance, and enhancing the user experience. Finally, since the published static resource files include a main static resource file and at least one child static resource file, dynamic page loading can be performed based on these files during page loading, further improving the page loading performance in the built application.

[0138] In some embodiments, see Figure 4A , Figure 4A This is an optional flowchart illustrating the application construction method provided in this application embodiment. Based on Figure 3 The first component list area also includes a layout container, and the page design operation also includes editing operations on the layout container. Figure 3 The step S101 shown can be implemented through steps S401 to S402. The following will explain each step in conjunction with the steps. The execution subject of the following steps can be the terminal or server mentioned above.

[0139] In step S401, in response to the editing operation on the layout container, the description information of the layout container is added to the page description information.

[0140] Here, the layout container can be one or more of the following, including but not limited to Tab layout, Grid layout, Absolute layout, and Fixed layout. Editing operations on the layout container can include dragging, clicking, touching, and importing the container itself, but do not involve operations on the layout container's code layer. The description information of the layout container can adopt the same format as the page description information.

[0141] In step S402, in response to the editing operation on the component, the description information of the component is added to the description information of the layout container.

[0142] Here, those skilled in the art can select appropriate components from the first component list for editing based on the actual situation. The component description information can adopt the same format as the page description information.

[0143] In this embodiment, users can edit the layout container in the first component list area and use a suitable layout container to lay out the components, thereby further improving the flexibility and versatility of application building.

[0144] In some embodiments, see Figure 4B , Figure 4B This is an optional flowchart illustrating the application construction method provided in this application embodiment. Based on Figure 4A The page design operation also includes attribute configuration operation. Step S411 can also be executed in step S101. The following will describe each step in conjunction with the previous steps. The execution subject of the following steps can be the terminal or server mentioned above.

[0145] In step S411, in response to the attribute configuration operation performed on the component, the description information of the component is updated in the page description information according to the attributes configured in the attribute configuration operation.

[0146] Here, the attribute configuration operations performed on components can include, but are not limited to, configuring one or more attributes such as the component's name, type, display size, and color. In implementation, the attribute configuration panel can be opened for the component requiring attribute configuration by clicking or long-pressing the touch button. Attributes can be configured by clicking, selecting, or entering information within the attribute configuration panel. The attribute configuration panel can be displayed in any suitable way; there are no limitations here. For example, the attribute configuration panel can be a tab parallel to the first component list area, hidden when no attribute configuration is being performed and displayed when an attribute configuration operation is being performed; the attribute configuration panel can also be a pop-up window where users can configure component attributes.

[0147] In this embodiment of the application, users can configure appropriate attributes for the corresponding components through attribute configuration operations, thereby further improving the flexibility and versatility of users when building applications.

[0148] In some embodiments, see Figure 4C , Figure 4C This is an optional flowchart illustrating the application construction method provided in this application embodiment. Based on Figure 4A The page design operation also includes model binding operation. Step S421 to S422 can also be executed in step S101. The following will explain each step in conjunction with the previous steps. The execution subject of the following steps can be the terminal or server mentioned above.

[0149] In step S421, in response to the model binding operation performed on the component, descriptive information about the data binding relationship between the model corresponding to the model binding operation and the component is added to the component's description information.

[0150] Here, at least one model can be created for the front-end application, and each model can include at least one field. Users can bind data in components to fields in models by performing model binding operations, and add descriptive information about the corresponding data binding relationship to the component's description information. The data in components and fields in models can be bound one-to-one, or multiple components can bind data to the same field in the model; there are no restrictions here.

[0151] In some embodiments, the model may include one or more of dynamic models, static models, and custom code models. A dynamic model may be one that dynamically requests field values ​​from a backend service. A static model may be one where field values ​​remain fixed. A custom code model may be one where field values ​​are determined based on mathematical operations or JavaScript code. During implementation, users can choose the appropriate model for model binding operations according to their actual needs; this is not limited to any particular model.

[0152] In step S422, the data binding relationship between the model corresponding to the model binding operation and the basic component is saved.

[0153] Here, data binding relationships can be stored locally, or in a cloud database or server. The storage method for data binding relationships can include, but is not limited to, one or more of the following: data records, key-value pairs, and configuration files. In some embodiments, the data binding relationships between data in the underlying components and fields in the model can be stored in the database in JSON format.

[0154] In this embodiment of the application, users can bind appropriate data to the corresponding components through model binding operations, thereby supporting the design of pages that display richer data, and further improving the flexibility and versatility of users when building applications.

[0155] In some embodiments, see Figure 5 , Figure 5 This is an optional flowchart illustrating the application construction method provided in this application embodiment. Based on Figure 3 In step S102, the virtual DOM tree of the page is generated based on the page description information, which can be achieved through steps S501 to S503. The following will describe each step in detail; the executing entity for the following steps can be the terminal or server mentioned above.

[0156] In step S501, the set of components contained in the page is determined based on the page description information.

[0157] Here, the component set includes all components used on the page, and the page description information describes the components contained on the page. By parsing the page description information, the component description information of the components contained on the page can be obtained. Based on the component description information, the component itself can be identified. Therefore, based on the page description information, all components contained on the page can be determined.

[0158] In some embodiments, the component set can be a set of basic components, which includes all basic components used in the page. The page description information describes the basic components and / or integrated components contained in the page. By parsing the page description information, the component description information of the basic components and / or integrated components contained in the page can be obtained. Since an integrated component is composed of multiple basic components, the basic components contained in the integrated component can be parsed based on the component description information of the integrated component. Therefore, based on the page description information, all basic components contained in the page can be determined. In implementation, the set of basic components contained in the page can be determined by performing a union operation on the basic components directly used in the page design operation and the basic components indirectly contained in the integrated components used in the page design.

[0159] In step S502, each component in the component set is globally registered.

[0160] Here, each component in the basic component collection can be registered globally, facilitating component rendering during the page loading process at application runtime.

[0161] In step S503, based on the page description information and the registered components, a virtual DOM tree for the page is generated using custom tags.

[0162] Here, based on the page description information and the registered components, the corresponding HTML fragment of the page can be determined, and then a JS object describing the HTML fragment can be generated, which is the virtual DOM tree of the page.

[0163] Browsers can use custom tags for page rendering. Components can be used as the smallest rendering unit. During the generation of the page's virtual DOM tree, a custom tag can be generated for each component, serving as a node in the virtual DOM tree. In implementation, those skilled in the art can define appropriate custom tags for each component according to the actual situation; this is not a limitation.

[0164] In this embodiment, since the browser can use custom tags for page rendering, generating the virtual DOM tree of the page using custom tags does not require a specific front-end framework, thereby further improving the flexibility and versatility of application building. Furthermore, the component collection can also be a collection of basic components. Because the basic components in the collection are deduplicated, if the same basic component appears multiple times on the page, it only needs to be registered globally once, thereby reducing page loading time and improving page loading performance.

[0165] In some embodiments, see Figure 6 , Figure 6 This is an optional flowchart illustrating the application construction method provided in this application embodiment. Based on Figure 5 Step S103 can be implemented through steps S601 to S602. The following will explain each step in detail. The execution subject of the following steps can be the terminal or server mentioned above.

[0166] In step S601, for each component in the component set, based on the virtual DOM tree, a sub-static resource file corresponding to the component and the dynamic loading code of the component are generated.

[0167] Here, the virtual DOM tree is a JavaScript object used to describe the HTML fragments corresponding to the page. Based on the virtual DOM tree, the HTML fragment corresponding to each component on the page can be determined. By packaging the component's HTML fragments into corresponding HTML or JavaScript files, the corresponding sub-static resource files for that component can be obtained. Based on the determined sub-static resource files, the dynamic loading code for the corresponding component can be generated. During implementation, the corresponding dynamic loading code can be generated according to the actual dynamic loading method used. For example, when using the `import` statement to dynamically import a component, corresponding `import` code can be generated as the component's dynamic loading code; when using the `require` statement to dynamically import a component, corresponding `require` code can be generated as the component's dynamic loading code.

[0168] In step S602, the main static resource file of the page is generated based on the virtual DOM tree and the dynamic loading code of each component.

[0169] Here, based on the page's virtual DOM tree, the basic static resources required for page loading can be determined. These basic static resources are then packaged into HTML or JS files, and the dynamic loading code for each component is added to the appropriate location in the JS file to obtain the main static resource file.

[0170] In this embodiment, based on a virtual DOM tree, sub-static resource files corresponding to components and dynamic loading code for the components are generated. Based on the virtual DOM tree and the dynamic loading code for each component, the main static resource file of the page is generated. This allows each component in the page to be packaged separately from the main static resource file. During page loading, the required components can be dynamically loaded as needed, thereby further improving the page loading performance in the built application.

[0171] In some embodiments, see Figure 7 , Figure 7 This is an optional flowchart illustrating the application construction method provided in this application embodiment, based on... Figure 3 The components include basic components and integrated components. The integrated components are obtained by combining multiple basic components. The method can also perform the following steps S701 to S703, which will be explained in conjunction with each step below. The execution subject of the following steps can be the terminal or server mentioned above.

[0172] In step S701, in response to a component building operation for the target integrated component, a component building interface for the target integrated component is displayed; the component building interface includes a second component list area, which includes basic components and integrated components.

[0173] Here, component building operations can include at least one of adding integrated components, modifying integrated components, etc. The target integrated component is the integrated component that needs to be designed corresponding to the component building operation; it can be an integrated component added or modified by the component building operation. In implementation, the target integrated component can be a business-related fragment or a business-independent general template, etc.

[0174] The component building interface can be an interface that supports users in designing integrated components. The second component list area can be located anywhere suitable within the component building interface; there are no limitations on this. The second component list area can display some or all of the pages currently available for integrated component design, and may include, but is not limited to, at least one basic component and at least one integrated component. In some embodiments, the second component list area may also include at least one layout container.

[0175] In step S702, in response to the component design operation performed on the integrated component, component description information of the target integrated component is generated; wherein, the component design operation includes editing operations on the basic components and / or integrated components in the second component list area.

[0176] Editing operations on basic components can include dragging, clicking, touching, and importing the basic components themselves, but do not involve operations on the code layer of the basic components. Editing operations on integrated components can also include dragging, clicking, touching, and importing the integrated components themselves, but do not involve operations on the code layer of the integrated components.

[0177] Component design operations describe components at the underlying level using specific methods. For basic components or layout containers, the component description information can be directly written by IT personnel; for integrated components, the component description information can be generated during the component design process based on the user's component design operations. Component description information can describe one or more of the following: basic components, integrated components, layout containers, component nesting relationships, component attribute information, data binding information, etc., included in the currently designed component.

[0178] In step S703, in response to the component saving operation performed on the target integrated component, the component description information is saved.

[0179] Here, the component description information of the target integrated component can be stored locally or in a database, so that other applications or pages can obtain the target integrated component based on the component description information and build components or pages based on the target integrated component.

[0180] In implementation, the component description information can be in JSON Schema format, XML format, or other suitable format; there are no restrictions here.

[0181] In some embodiments, the method further includes: publishing the component description information in response to a component publishing operation performed on the target integrated component. Here, the component description information of the target integrated component can be published to a component marketplace or similar platform, so that other users can obtain the component description information of the target integrated component from the component marketplace for component building or page building.

[0182] In this embodiment, integrated component design is achieved through editing operations on basic components and / or integrated components in the second component list area, and the component description information of the designed target integrated component is saved through a component save operation. Since the editing operations on basic and integrated components during component design are based on the basic and integrated components themselves, rather than code-level operations, users with different development experience can build integrated components using a low-code approach based on basic and integrated components. Furthermore, the component description information of the designed target integrated component can be saved locally or published to a component marketplace, allowing the current user or other users to obtain the component description information from their local machine or the component marketplace for component or page construction. This further enhances the versatility of integrated components, thereby improving the efficiency of users when building applications or components.

[0183] In some embodiments, see Figure 8 , Figure 8 This is an optional flowchart illustrating the application construction method provided in this application embodiment, based on... Figure 3 The method can also execute the following steps S801 to S804, which will be explained in detail below. The execution subject of the following steps can be the terminal or server mentioned above.

[0184] In step S801, in response to a page loading operation on the current device for the page, the main static resource file and at least one sub-static resource file of the page are obtained.

[0185] Here, page loading can be performed in a browser running on the current device or in a web application client running on the current device; there is no limitation. Since the main static resource file and at least one child static resource file of the page are published when the application is released, these files can be obtained from a CDN or static resource server. Each page's main static resource file and at least one child static resource file can be identified by specific identifiers, such as the page name and version number, or a unique identifier for the page.

[0186] In step S802, the state tree and virtual DOM tree of the page are dynamically loaded based on the main static resource file and at least one sub-static resource file.

[0187] Here, the page's state tree can include the state tree of each model on the page, and each model's state tree can include all the fields of that model. The main static resource file can include the page's initial virtual DOM tree and the state tree of each model related to the initial DOM tree. By reading the main static resource file, the page's initial virtual DOM tree and the state tree of each model related to the initial DOM tree can be obtained and loaded. By reading at least one sub-static resource file, the virtual DOM tree containing at least one component on the page and the corresponding model's state tree can be dynamically loaded, thereby dynamically determining the page's state tree.

[0188] In step S803, based on the state tree of the page, each component in the virtual DOM tree is rendered to obtain the rendered page.

[0189] Here, the page's state tree includes all fields in each model on the page. Based on the page's state tree, the values ​​of each field in each model can be obtained. Based on the data binding relationship between specific models and components, the data bound to each component in the virtual DOM tree can be determined, and thus the rendered page can be obtained. The rendered page includes the data that each component needs to display.

[0190] In step S804, the rendered page is displayed on the current device.

[0191] In this embodiment, during page loading, the main static resource file and at least one child static resource file can be directly obtained. This reduces page configuration requests to backend services, thereby improving page loading performance and enhancing the user experience. Furthermore, the main static resource file and at least one child static resource file enable dynamic page loading, further improving performance. Additionally, rendering the page based on a virtual DOM tree effectively avoids frequent updates during page loading, further enhancing performance.

[0192] In some embodiments, see Figure 9 , Figure 9 This is an optional flowchart illustrating the application construction method provided in this application embodiment, based on... Figure 8 The state tree of the page includes the state tree of at least one model. Step S803 can be executed through steps S901 to S904. The following will describe each step in conjunction with the previous steps. The execution subject of the following steps can be the terminal or server mentioned above.

[0193] In step S901, for each model, a data request is made to the backend service corresponding to the model to obtain the backend fields returned by the backend service.

[0194] Here, each model can correspond to a backend service. These backend services can belong to the same backend application or to different backend applications. During implementation, the mapping between models and backend services can be maintained through model management.

[0195] In step S902, the values ​​of each field in the model are determined based on the state tree of each model and the backend fields corresponding to the model.

[0196] Here, the mapping between the model and the backend service can include the mapping between backend fields of the backend service and fields of the model. The model's state tree includes all fields in the model. Based on the backend fields corresponding to the model and the mapping between the backend fields of the backend service and the fields of the model, the values ​​of each field in the model can be determined.

[0197] In step S903, the reference relationships between each component and each model's fields in the virtual DOM tree are obtained.

[0198] Here, the reference relationships between each component and the fields of each model can be determined and saved during page construction through model binding operations. This can be stored locally, on a cloud server, or in a database. Therefore, the reference relationships between each component and the fields of each model in the virtual DOM tree can be read from the local machine, cloud server, or database.

[0199] In step S904, based on the values ​​of each field in each model and the reference relationship, each component in the virtual DOM tree is rendered to obtain the rendered page.

[0200] Here, based on the values ​​of each field in each model and the reference relationships between each component in the virtual DOM tree and the fields of each model, the current value of the data corresponding to each component in the virtual DOM tree can be determined. This allows the rendering of the information that each component in the virtual DOM tree currently needs to display.

[0201] In this embodiment, by requesting data from the backend service corresponding to the model, the values ​​of each field in the model are determined. Based on the reference relationships between each component in the virtual DOM tree and the fields of each model, the current values ​​of the data corresponding to each component in the virtual DOM tree are determined. In this way, the information that each component in the virtual DOM tree needs to display can be rendered quickly, resulting in the rendered page.

[0202] In some embodiments, see Figure 10 , Figure 10 This is an optional flowchart illustrating the application construction method provided in this application embodiment. Based on Figure 9 The method can also perform the following steps S1001 to S1002, which will be explained in detail below. The execution subject of the following steps can be the terminal or server mentioned above.

[0203] In step S1001, for each field in each model, if the field is detected to have been changed, the value of the changed field is synchronized to each component in the virtual DOM tree that references the field, so as to obtain the updated virtual DOM tree;

[0204] Here, one can determine whether each field in the model has been modified by monitoring whether API calls related to field changes are made, or one can directly monitor whether each field in the global data has changed to determine if any field has been modified. In implementation, those skilled in the art can use appropriate methods to detect whether a field has been modified based on the actual situation; there are no limitations here.

[0205] The changed field value can be synchronized to every component in the virtual DOM tree that references the field through global data communication, resulting in an updated virtual DOM tree.

[0206] In step S1002, the page is refreshed based on the updated virtual DOM tree.

[0207] In this embodiment, when a change to the field is detected, the modified value of the field is synchronized to every component in the virtual DOM tree that references the field, resulting in an updated virtual DOM tree. Based on this updated virtual DOM tree, the page is refreshed. This ensures the consistency of global data. Furthermore, since page refreshes using a virtual DOM tree allow for comparison of the page before and after the refresh, only the changed components are re-rendered. This effectively improves overall page performance, thereby enhancing the user experience.

[0208] The following will describe an exemplary application of the embodiments of this application in a real-world application scenario. The application building method provided by the embodiments of this application can be applied to scenarios such as application building and page building on low-code platforms.

[0209] This application provides a low-code platform that enables both professional and non-IT personnel to build web applications and web pages adapted to various business scenarios, including PCs, mobile devices, and large screens, using a visual interactive interface. The resulting web applications and web pages can achieve performance comparable to applications written in native JavaScript. The low-code platform provided in this application offers tenants, templates, fragments, models, etc., and uses JSON Schema to describe pages, thus solving at least one problem associated with low-code platforms in the aforementioned related technologies.

[0210] The low-code platform provided in this application embodiment includes an application building platform and a component building platform. The application building platform can be used to build applications, while the component building platform can be used to build collections of components such as fragments and templates. Users need to apply for a tenant on the application building platform and can build applications under the applied tenant. When building an application, users only need to create a page online within the application and click the application deployment button. The application building platform will automatically and dynamically deploy the current application based on the created page.

[0211] A page can be composed of: a basic component (0 / i) + a fragment (0 / j) + a template (0 / k) + a layout (1 / m), where i, j, and k can be any positive integers, and m can be any integer greater than 1. The low-code platform reuses basic components / templates / fragments / layouts as reusable units. Users with varying levels of development experience can utilize the component building platform and, based on actual business needs, generate corresponding JSONSchema files by dragging and dropping at least one or more of the basic components, templates, and layouts, thereby assembling fragments applicable to specific business needs. Users with varying levels of development experience can also utilize the component building platform to generate corresponding JSONSchema files by dragging and dropping at least one or more of the basic components, templates, and layouts, thereby assembling a general set of components as templates. When multiple businesses have similar application scenarios, templates can be used to construct corresponding pages.

[0212] During application building, the entire application / page is described using JSON Schema. When the application (or page) is deployed, the JSON Schema file is parsed to identify the basic components that need to be packaged into static resources, and the corresponding Virtual Document Object Model (DOM) is generated. During page loading, the browser's custom tag functionality can be used for page rendering.

[0213] Figure 11 This is a schematic diagram of a user interface for an application building platform provided in an embodiment of this application, such as... Figure 11 As shown, the user interface of this application building platform is mainly divided into five areas: the page list area 1110, which displays all pages of the current application; clicking on each page allows editing, and clicking the page add button 1111 creates a new page for the current application; the navigation area 1120, where users can view tenant information, application information, and access help, search for components / applications, and manage models; clicking the shopping cart 1121 in the navigation area 1120 allows users to download templates and fragments from the component market; the first toolbar area 1130, where users can save, undo, and restore the current page, as well as publish the application; the first component list area 1140, where users can view all the basic components, layout containers, templates, and fragments available for the current application; and the page design and layout area 1150, where users can combine the basic components, layouts, templates, or fragments in the first component list area 1140 to create a page; double-clicking the corresponding basic component / layout / template / fragment allows for attribute configuration.

[0214] Figure 12A schematic diagram of a user interface for a component building platform provided in this application embodiment, as shown below. Figure 12 As shown, the user interface of this component building platform is mainly divided into five areas: the second component list area 1210, which displays all currently available basic components, layout containers, and template pages; the navigation area 1220, where users can view their current applications, fragments, templates, etc., as well as search for components / applications, manage models, and click the shopping cart 1221 in the navigation area 1220 to download templates and fragments from the component market; the second toolbar area 1230, where users can save, undo, and restore the current fragment or template, and publish fragments or templates; the component design and layout area 1240, where users can combine the basic components, layouts, and templates in the second component list area 1230 to create a fragment or template, and double-click the corresponding basic component / layout / template to configure its properties; and the property panel area 1250, which displays the properties of the basic components / layouts / templates selected by the user in the component design and layout area 1240, allowing users to configure the properties of the basic components / layouts / templates displayed in this area. Here, in implementation, the component design and layout area in the user interface of the component building platform and the page design and layout area in the user interface of the application building platform can be implemented using the same set of interfaces at the underlying level, or they can be implemented using different interfaces.

[0215] Based on the low-code platform provided in the above embodiments of this application, this application also provides an application building method, see [link to relevant documentation]. Figure 13 , Figure 13 This is a schematic diagram illustrating the implementation flow of the application construction method provided in this application embodiment. For example... Figure 13 As shown, this method mainly includes four sub-processes: generation of artifacts such as components / templates / fragments 1310, creation of tenant and application information 1320, web page configuration 1330, and page generation and publishing 1340. Each sub-process is described below.

[0216] 1) Generation of artifacts such as components / templates / fragments

[0217] The component building platform allows you to build basic components, templates, and fragments. When building basic components / templates / fragments, a corresponding JSON Schema description file will be generated to describe the information of the entire basic component / template / fragment built by the user.

[0218] See Figure 13 The generation of artifacts such as components / templates / fragments may include the following steps:

[0219] Step S1311: IT personnel write and publish basic components; here, basic components can be published to the component / fragment / template marketplace;

[0220] Step S1312: Non-IT personnel / IT personnel use the component building platform to build and publish fragments / templates; Here, non-IT personnel / IT personnel can use the component building platform to combine components / templates obtained from the component / fragment / template marketplace to build and generate fragments / templates, and the generated fragments / templates can be published to the component / fragment / template marketplace.

[0221] 2) Tenant and application information creation

[0222] The purpose of creating tenants is to isolate different enterprise / personal information and application configurations. Users only need to configure information such as databases, clusters, and domain names for applications at the tenant level.

[0223] See Figure 13 The creation of tenant and application information may include the following steps:

[0224] Step S1321: The user creates a tenant;

[0225] Step S1322: The user creates an application within the tenant.

[0226] 3) Web page configuration

[0227] Web page configuration is the core of building a web page. It primarily involves configuring and building the page within the application build platform through drag-and-drop operations on components, templates, and fragments. After configuration, a JSON Schema description is generated, recording which basic components, templates, fragments, and layouts the page uses, their respective styles, and the navigation logic between pages.

[0228] See Figure 13 Web page configuration may include the following steps:

[0229] Step S1331: The user creates a page for the application;

[0230] Step S1332: The user drags and drops the layout of the page;

[0231] Step S1333: The user drags and drops components / fragments / templates onto the page;

[0232] Step S1334: The user configures the attributes of components / fragments / templates on the page;

[0233] Step S1335: The user performs model binding on the components / fragments / templates on the page;

[0234] In step S1336, the application building platform detects whether the user has performed a page saving or application publishing operation; if the user has performed a page saving operation, proceed to step S1337; if the user has performed an application publishing operation, proceed to step S1341.

[0235] Step S1337: The application build platform generates and saves the JSON Schema file and page version information of the page.

[0236] 4) Page generation and publishing

[0237] The page generation and publishing process is the core of matching the performance of low-code built pages with native frameworks. The traditional approach is to write JS or use frameworks such as React, Vue, and Angular to write front-end pages; here, basic components are used as the smallest rendering unit, and front-end pages are generated through a virtual DOM.

[0238] See Figure 13 Page generation and publishing may include the following steps:

[0239] Step S1341: The application building platform uses the page's JSON Schema file to generate a virtual DOM tree for the page;

[0240] Step S1342: The application building platform uses the virtual DOM tree to generate corresponding static resource files such as HTML / JS.

[0241] Step S1343: The application building platform publishes the generated static resource files, carrying page version information, to the CDN;

[0242] Step S1344: The application build platform generates and saves the JSON Schema file and page version information of the page.

[0243] The page generation and publishing method provided in this application has the following beneficial effects:

[0244] a) Using JSON Schema to describe a page has the advantages of better flexibility, convenience and high portability. In addition, the JSON Schema file itself is information in JSON format, and the basic components, fragments, templates or pages corresponding to the JSON Schema can be applied to any application that supports JSON by copying the JSON.

[0245] b) Instead of downloading and parsing the JSON Schema file and basic components at runtime, the JSON Schema file and underlying components are converted into actual JavaScript files. Since the page is converted into full HTML / JS / CSS elements and deployed to a static resource server / CDN after deployment, the page performance is the same as a front-end page written in a native JavaScript framework.

[0246] The low-code platform provided in the above embodiments of this application, when implemented, mainly includes the following core technical points:

[0247] 1) Allow users with different levels of development experience to build applications on this low-code platform in a low-code manner: IT personnel are mainly responsible for maintaining basic components, non-IT personnel can use the component builder to build fragments / templates, and both non-IT and IT personnel can use the application building platform to build pages.

[0248] Here, the low-code platform provided in this application embodiment adopts, on the client side, as follows: Figure 14 The technical architecture shown enables low-code page construction and is adaptable to page layout scenarios on PCs, mobile devices, and large screens. For example... Figure 14 As shown, the client's technical architecture includes a rendering layer 1410, an infrastructure layer 1420, a data layer 1430, an artifact layer 1440, a page layer 1450, and an application layer 1460. Page design primarily involves the rendering layer 1410, the infrastructure layer 1420, the data layer 1430, and the artifact layer 1440, among which:

[0249] Rendering layer 1410: During page design, the JSON Schema information of the page / template / fragment can be parsed and rendered, so that the user-built page or fragment / template can be displayed in the page design and layout area and the component design and layout area;

[0250] Infrastructure layer 1420: It can provide different page layout engines, which can be encapsulated into responsive components by IT personnel in combination with a unified application programming interface (API). Based on this unified API, it can automatically meet the different layout requirements of large screen, mobile and PC scenarios.

[0251] Data Layer 1430: It supports users in using application building platforms and component building platforms in the infrastructure layer to perform data binding and custom code logic binding when dragging and dropping basic components / fragments / templates; data binding can be a mapping between front-end and back-end data, and user-configured data mapping relationships can be stored in the database;

[0252] Product Layer 1440: For component building platforms, fragments / templates can be generated after data binding and attribute configuration; for application building platforms, the final product of application building will be a page; in the product layer, the description of fragments / templates / the entire page can use JSON Schema. For example, an input box component can be described using the following JSON Schema information:

[0253] {

[0254] "name": "Input box",

[0255] "component":"vu-pc-input",

[0256] "type":"widget",

[0257] "version": "1.0.0",

[0258] “elements”:[],

[0259] “binding”:{

[0260] "type":"model",

[0261] "value":"$model?.namespace1.userInfo.name"

[0262] },

[0263] “events”:{

[0264] "type":"go_page",

[0265] "value":" / admin / index"

[0266] },

[0267] “props”:{

[0268] "component":"vu-pc-input",

[0269] “value”:“”,

[0270] "placeholder": "Please enter",

[0271] "type": "text",

[0272] "size":"default",

[0273] "disabled": false,

[0274] "clearable":true,

[0275] "maxlength":20,

[0276] "search":false

[0277] },

[0278] "uuid": "******"

[0279] }

[0280] Here, `name` is the name of the component; `component` is the component to be rendered by the virtual DOM; `type` is the component type, which can be a layout layer, a basic component, etc.; `version` is the version number; `elements` is an array of nested child components, such as nested components within a layout component; `binding` is the bound data, including `type` and `value` attributes, where `type` is the data type to be bound, which can be a model, static data, etc., and `value` is the value of the bound data. If the bound data type is static data, the corresponding value is a fixed value; if the bound data type is a model, the corresponding value can be common mathematical operations or JS code, which can automatically generate the corresponding data based on the mathematical operations or JS code when the page loads; `events` are the bound logical events, including `type` and `value` attributes, where `type` is the event type, which can support common page events, such as page jumps, click events, swipe events, etc., and `value` can be the target value of the event, such as the target page for page jumps, the page to jump to for click events, or the JS code to be executed; `props` are the configuration of the property panel exposed by the basic component; and `uuid` is the unique identifier of the component.

[0281] When users build pages on this low-code platform by dragging and dropping, the application building platform automatically generates a JSON Schema description of the page to describe the entire page. Based on this JSON Schema description, the corresponding page can be rendered by the JSON Schema rendering engine of the rendering layer.

[0282] 2) Implement communication between components and between components and backend services;

[0283] Here, the low-code platform provided in this application embodiment can rely on a one-to-one mapping between the front-end model and the back-end model to conduct data communication between components and back-end services. The communication between components can be carried out in a way similar to Vuex mutation, distributing and managing global data at the top level to achieve global data communication, so that the global data of each component can remain consistent.

[0284] See Figure 15 , Figure 15 This is a schematic diagram illustrating the implementation flow of a page loading method provided in this application embodiment. The page is constructed using the application construction method provided in this application embodiment. This method is executed by the application to which the page belongs and includes the following steps:

[0285] Step S1501: Start loading the page in the browser;

[0286] Step S1502: Generate the state tree of the page based on the static resource files;

[0287] Step S1503: Request backend service;

[0288] Step S1504: Bind the backend fields to the frontend model and fields; here, the binding can be based on the binding relationship between the backend fields and the frontend model and fields maintained during page construction.

[0289] Step S1505: Determine if any component / custom code has changed the model data; if yes, proceed to step S1506; if no, proceed to step S1507. Here, you can determine if any component or custom code has changed the model data by listening to whether a specified API is called or by monitoring whether the global data has changed at the top level.

[0290] Step S1506: Display the page in the browser;

[0291] Step S1507: Modify the model using a method similar to Vuex mutation;

[0292] Step S1508: Perform a global update of the model data;

[0293] Step S1509: Refresh the page in the browser. Here, by comparing the virtual DOM before and after the update, the basic components that need to be updated can be determined. When refreshing the page, only the basic components that need to be updated are refreshed, which can reduce the resource consumption caused by page updates and improve page performance.

[0294] 3) Enable your application to have performance comparable to applications written in native JavaScript.

[0295] Here, the low-code platform provided in this application embodiment uses JSONSchema to generate static resource files when the application or page is published, thereby reducing page configuration requests and improving performance.

[0296] Figure 16A This is a schematic diagram illustrating the implementation flow of a page publishing method provided in an embodiment of this application. This method is executed by an application building platform, such as... Figure 16A As shown, the entire page publishing process includes the following steps:

[0297] Step S1611, parse the JSON Schema file; this step can parse the JSON Schema file and perform a depth-first traversal of the component tree to find the minimum set of basic components used; here, the minimum set of basic components is the set of all basic components included in all templates, fragments and basic components on this page after deduplication;

[0298] Step S1612, component registration; This step allows for global registration of the minimum set of basic components obtained from parsing JSON, making it convenient for use during rendering;

[0299] Step S1613, Resource Generation. Here, the data structure described in the entire JSON Schema file can be used to generate the corresponding custom tag DOM tree for the page. Since browser-based custom tag rendering is required, the application needs to run in a browser that supports custom tags, such as Firefox version 63 or higher, Chrome version 67 or higher, Edge version 79 or higher, Opera version 64 or higher, etc. Furthermore, to ensure compatibility with browsers that do not support custom tags, specific patches can be used at the rendering engine level to support custom tag rendering. For example, specific patches can be implemented using the open-source project https: / / github.com / webcomponents / polyfills / tree / master / packages / webcomponentsjs. This open-source project's patch supports browsers including, but not limited to, all versions of Edge, IE version 11 or higher, the latest version of Chrome, and Safari versions 9 to the latest version, etc.

[0300] Figure 16B This is a schematic diagram illustrating the implementation flow of a page publishing method provided in an embodiment of this application. This method is executed by an application building platform, such as... Figure 16B As shown, the method includes the following steps:

[0301] Step S1621: Parse the JSON Schema file;

[0302] Step S1622: Depth-first traversal of the component tree;

[0303] Step S1623: Determine if the component tree has been traversed completely; if yes, proceed to step S1628; otherwise, proceed to step S1624.

[0304] Step S1624: Determine whether the current version of the component has already been registered; if yes, proceed to step S1626; if no, proceed to step S1625.

[0305] Step S1625: Globally register the component with the version number;

[0306] Step S1626, generate the tag as <self-conponent is=""组件”">The DOM;

[0307] Step S1627: Bind properties / events / models to the component;

[0308] Step S1628: Generate the entire DOM tree;

[0309] Step S1629: Generate code for dynamically loading components;

[0310] Step S16210: Package the DOM, HTML files and code logic that need to be rendered.

[0311] This method can be used to generate static resource files corresponding to the page.

[0312] In some embodiments, step S1629 can also be replaced by packaging the dependent JS files into the current project, so that resources do not need to be dynamically loaded when loading the page.

[0313] In some embodiments, the underlying rendering engine can also support general frameworks such as Vue / React / Angular, and when rendering the page, the dynamic functions of the corresponding general frameworks can be used to render custom components.

[0314] In some embodiments, the backend service can be directly requested when the page loads to obtain the page configuration information, and the page can be rendered using the configuration information.

[0315] The low-code platform provided in this application has the following beneficial effects:

[0316] 1) Both IT and non-IT personnel can use this low-code platform to write low-code and build their own websites;

[0317] 2) Anyone can encapsulate business-related fragments and business-independent general components (i.e., templates) based on the basic components, thereby achieving both personalization and generalization of component construction;

[0318] 3) Utilize new browser features to customize tags, making page construction independent of the front-end framework; IT personnel can write components by simply following certain specifications, or choose a front-end framework according to their own preferences;

[0319] 4) This low-code platform does not heavily rely on a specific backend system. It can be plugged into existing web pages in a plug-in manner, supports partial replacement of pages in web applications in related technologies, and can coexist with pages in related technologies, thereby enabling the gradual migration of pages.

[0320] 5) Pages built on this platform can load static resources directly without requesting page configuration information during the loading process, so the page loading performance is comparable to pages written directly by native frameworks;

[0321] 6) The front-end page can combine data-driven and event bus approaches for data communication between the page and components, which can well support the construction of complex pages.

[0322] The following description continues to illustrate the exemplary structure of the application building apparatus 455 provided in the embodiments of this application as a software module. In some embodiments, such as Figure 2 As shown, the software modules stored in the application building apparatus 455 of the memory 450 may include:

[0323] The first generation module 4551 is used to generate page description information of the page in response to a page design operation performed on a page in the current application; wherein the page design operation includes editing operations on components in the first component list area.

[0324] The second generation module 4552 is used to generate a virtual DOM tree of the page based on the page description information in response to the application publishing operation performed for the current application.

[0325] The third generation module 4553 is used to generate static resource files for the page based on the virtual DOM tree; wherein the static resource files include a main static resource file and at least one sub-static resource file;

[0326] The publishing module 4554 is used to publish the main static resource file and at least one sub-static resource file.

[0327] In some embodiments, the first component list area further includes a layout container, the page design operation further includes an editing operation on the layout container, and the first generation module is further configured to: in response to the editing operation on the layout container, add description information of the layout container to the page description information; and in response to the editing operation on the component, add description information of the basic component to the description information of the layout container.

[0328] In some embodiments, the page design operation further includes an attribute configuration operation, and the first generation module is further configured to: in response to the attribute configuration operation performed on the component, update the description information of the component in the page description information according to the attributes configured in the attribute configuration operation.

[0329] In some embodiments, the page design operation further includes a model binding operation, and the first generation module is further configured to: in response to the model binding operation performed on the component, add descriptive information about the data binding relationship between the model corresponding to the model binding operation and the component to the component's description information; and save the data binding relationship.

[0330] In some embodiments, the second generation module is further configured to: determine the set of components contained in the page based on the page description information; globally register each component in the component set; and generate a virtual DOM tree of the page based on the page description information and the registered components, using custom tags.

[0331] In some embodiments, the third generation module is further configured to: for each component in the component set, generate a sub-static resource file corresponding to the component and the dynamic loading code of the component based on the virtual DOM tree; and generate the main static resource file of the page based on the virtual DOM tree and the dynamic loading code of each component.

[0332] In some embodiments, the page description information is a description information in JSON Schema format.

[0333] In some embodiments, the component includes a base component and an integrated component, the integrated component being obtained by combining multiple base components. The device further includes: a first display module, configured to: display a component building interface of the target integrated component in response to a component building operation for the target integrated component; the component building interface includes a second component list area, the second component list area including base components and integrated components; a fourth generation module, configured to: generate component description information of the target integrated component in response to a component design operation performed on the integrated component; wherein the component design operation includes editing operations on the base components and / or integrated components in the second component list area; and a saving module, configured to: save the component description information in response to a component saving operation performed on the target integrated component.

[0334] In some embodiments, the component description information is a description information in JSON Schema format.

[0335] In some embodiments, the apparatus further includes: an acquisition module, configured to: acquire a main static resource file and at least one sub-static resource file of the page in response to a page loading operation on the current device; a loading module, configured to: dynamically load a state tree and a virtual DOM tree of the page based on the main static resource file and at least one sub-static resource file; a rendering module, configured to: render each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page; and a sixth display module, configured to: display the rendered page on the current device.

[0336] In some embodiments, the state tree of the page includes the state tree of at least one model; the rendering module is further configured to: for each model, make a data request to the backend service corresponding to the model, and obtain the backend fields returned by the backend service; determine the value of each field in the model based on the state tree of each model and the backend fields corresponding to the model; obtain the reference relationship between each basic component in the virtual DOM tree and the fields of each model; and render each basic component in the virtual DOM tree based on the value of each field in each model and the reference relationship to obtain the rendered page.

[0337] In some embodiments, the apparatus further includes: an update module, configured to, for each field in each model, synchronize the changed value of the field to each component in the virtual DOM tree that references the field when a change is detected, to obtain an updated virtual DOM tree; and a refresh module, configured to refresh the page based on the updated virtual DOM tree.

[0338] This application provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the application construction method described in this application embodiment.

[0339] This application provides a computer-readable storage medium storing executable instructions. When these executable instructions are executed by a processor, they cause the processor to execute the application building method provided in this application, for example... Figure 3 The method shown.

[0340] In some embodiments, the computer-readable storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or it may be a variety of devices including one or any combination of the above-mentioned memories.

[0341] In some embodiments, executable instructions may take the form of a program, software, software module, script, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a standalone program or as a module, component, subroutine, or other unit suitable for use in a computing environment.

[0342] As an example, executable instructions may, but do not necessarily, correspond to files in a file system. They may be stored as part of a file that holds other programs or data, for example, in one or more scripts in a Hyper Text Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple collaborating files (e.g., a file that stores one or more modules, subroutines, or code sections).

[0343] As an example, executable instructions can be deployed to execute on a single computing device, or on multiple computing devices located in one location, or on multiple computing devices distributed across multiple locations and interconnected via a communication network.

[0344] In summary, the embodiments of this application can improve the flexibility and versatility of application building for users, enabling users with different levels of development experience to build applications in a low-code manner, and can improve the page loading performance of the built application, thereby enhancing the user experience.

[0345] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, and improvements made within the spirit and scope of this application are included within the scope of protection of this application.

Claims

1. An application construction method, characterized in that, include: In response to a page design operation performed on a page in the current application, page description information for the page is generated; wherein the page design operation includes editing operations on components in a first component list area; In response to an application publishing operation for the current application, based on the page description information, a set of components contained in the page is determined, and each component in the set is globally registered; wherein, if the same basic component appears multiple times in the page, the global registration is performed only once; Based on the page description information and the registered components, a virtual DOM tree for the page is generated using custom tags. A union operation is performed on the basic components directly used in the page design operation and the basic components indirectly contained in the integrated components used in the page design to determine the set of basic components in the component set. For each basic component in the set of basic components, based on the virtual DOM tree, a sub-static resource file corresponding to the basic component and the dynamic loading code of the basic component are generated; based on the virtual DOM tree and the dynamic loading code of each basic component, the main static resource file of the page is generated. Publish the main static resource file and at least one of the child static resource files.

2. The method according to claim 1, characterized in that, The first component list area also includes a layout container, and the page design operation further includes editing the layout container. The step of generating page description information for the page in response to the page design operation performed on a page in the current application includes: In response to the editing operation on the layout container, the description information of the layout container is added to the page description information; In response to an editing operation on a component, the component's description information is added to the description information of the layout container.

3. The method according to claim 2, characterized in that, The page design operation also includes attribute configuration operations. The step of generating page description information for a page in the current application in response to the page design operation further includes: In response to the attribute configuration operation performed on the component, the description information of the component is updated in the page description information according to the attributes configured in the attribute configuration operation.

4. The method according to claim 2, characterized in that, The page design operation also includes a model binding operation. The step of generating page description information for a page in response to the page design operation performed on a page in the current application further includes: In response to a model binding operation performed on a component, descriptive information about the data binding relationship between the model corresponding to the model binding operation and the component is added to the component's description information; Save the data binding relationship.

5. The method according to any one of claims 1 to 4, characterized in that, The page description information is in JSON Schema format.

6. The method according to any one of claims 1 to 4, characterized in that, The components include basic components and integrated components, wherein the integrated components are obtained by combining multiple basic components, and the method further includes: In response to a component building operation for a target integrated component, a component building interface for the target integrated component is displayed; the component building interface includes a second component list area, which includes basic components and integrated components; In response to a component design operation performed on the integrated component, component description information of the target integrated component is generated; wherein, the component design operation includes editing operations on the base components and / or integrated components in the second component list area; In response to a component save operation performed on the target integrated component, the component description information is saved.

7. The method according to claim 6, characterized in that, The component description information is in JSON Schema format.

8. The method according to any one of claims 1 to 4, characterized in that, The method further includes: In response to a page loading operation on the current device for the page, the main static resource file and at least one sub-static resource file of the page are obtained; Based on the main static resource file and at least one sub-static resource file, dynamically load the page's state tree and virtual DOM tree; Based on the state tree of the page, each component in the virtual DOM tree is rendered to obtain the rendered page; The rendered page is displayed on the current device.

9. The method according to claim 8, characterized in that, The state tree of the page includes the state tree of at least one model; The process of rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page includes: For each of the aforementioned models, a data request is made to the backend service corresponding to the model to obtain the backend fields returned by the backend service; Based on the state tree of each model and the backend fields corresponding to the model, determine the values ​​of each field in the model; Retrieve the reference relationships between each component and each model's fields in the virtual DOM tree; Based on the values ​​of each field in each model and the reference relationships, each component in the virtual DOM tree is rendered to obtain the rendered page.

10. The method according to claim 9, characterized in that, The method further includes: For each field in each model, if a change to the field is detected, the changed value of the field is synchronized to each component in the virtual DOM tree that references the field, resulting in an updated virtual DOM tree; The page is refreshed based on the updated virtual DOM tree.

11. An application construction apparatus, characterized in that, include: The first generation module is used to generate page description information of the page in response to a page design operation performed on a page in the current application; wherein the page design operation includes editing operations on components in the first component list area; The second generation module is used to respond to the application publishing operation for the current application, determine the set of components contained in the page based on the page description information, and perform global registration for each component in the component set; wherein, if the same basic component appears multiple times in the page, the global registration is performed only once; based on the page description information and the registered components, a virtual DOM tree of the page is generated using custom tags; and a union operation is performed on the basic components directly used in the page design operation and the basic components indirectly contained in the integrated components used in the page design to determine the set of basic components in the component set; The third generation module is used to generate, for each basic component in the basic component set, a corresponding sub-static resource file and dynamic loading code of the basic component based on the virtual DOM tree; and to generate the main static resource file of the page based on the virtual DOM tree and the dynamic loading code of each basic component. The publishing module is used to publish the main static resource file and at least one of the sub-static resource files.

12. The apparatus according to claim 11, characterized in that, The first component list area also includes a layout container, and the first generation module is further configured to: In response to the editing operation on the layout container, the description information of the layout container is added to the page description information; In response to an editing operation on a component, the component's description information is added to the description information of the layout container.

13. The apparatus according to claim 12, characterized in that, The first generation module is also used for: In response to the attribute configuration operation performed on the component, the description information of the component is updated in the page description information according to the attributes configured in the attribute configuration operation.

14. The apparatus according to claim 12, characterized in that, The first generation module is also used for: In response to a model binding operation performed on a component, descriptive information about the data binding relationship between the model corresponding to the model binding operation and the component is added to the component's description information; Save the data binding relationship.

15. The apparatus according to claim 11, characterized in that, The components include basic components and integrated components, wherein the integrated components are obtained by combining multiple basic components, and the device further includes: A first display module is configured to display a component building interface for a target integrated component in response to a component building operation for that target integrated component; the component building interface includes a second component list area, which includes basic components and integrated components; The fourth generation module is used to generate component description information of the target integrated component in response to the component design operation performed on the integrated component; wherein the component design operation includes editing operations on the basic components and / or integrated components in the second component list area; A save module is used to save the component description information in response to a component save operation performed on the target integrated component.

16. The apparatus according to claim 11, characterized in that, Also includes: The acquisition module is configured to, in response to a page loading operation on the current device for the page, acquire the main static resource file and at least one sub-static resource file of the page; A loading module is used to dynamically load the state tree and virtual DOM tree of the page based on the main static resource file and at least one sub-static resource file; The rendering module is used to render each component in the virtual DOM tree based on the state tree of the page, so as to obtain the rendered page; The sixth display module is used to display the rendered page on the current device.

17. The apparatus according to claim 16, characterized in that, The state tree of the page includes the state tree of at least one model; based on the state tree of the page, each component in the virtual DOM tree is rendered to obtain the rendered page, and the rendering module is further configured to: For each of the aforementioned models, a data request is made to the backend service corresponding to the model to obtain the backend fields returned by the backend service; Based on the state tree of each model and the backend fields corresponding to the model, determine the values ​​of each field in the model; Retrieve the reference relationships between each component and each model's fields in the virtual DOM tree; Based on the values ​​of each field in each model and the reference relationships, each component in the virtual DOM tree is rendered to obtain the rendered page.

18. The apparatus according to claim 17, characterized in that, Also includes: The update module is used to synchronize the value of each field in each model to each component in the virtual DOM tree that references the field when a change is detected, so as to obtain the updated virtual DOM tree. The refresh module is used to refresh the page based on the updated virtual DOM tree.

19. An application building device, characterized in that, include: Memory, used to store executable instructions; A processor, when executing executable instructions stored in the memory, implements the method according to any one of claims 1 to 10.

20. A computer-readable storage medium, characterized in that, It stores executable instructions for implementing the method of any one of claims 1 to 10 when executed by a processor.

Images