Application page construction methods, apparatus, computer equipment, and readable storage media

Abstract

This application discloses an application page construction method, apparatus, computer device, and readable storage medium, relating to the Internet field. The application page in this application can be a display page within a medical service application. The server can read the page configuration file corresponding to the display page, and after parsing by a local rendering engine, generate the corresponding medical service application display page, improving page construction speed. Furthermore, it leverages the cross-platform capabilities of Flutter components to achieve efficient cross-platform page construction. The method includes: obtaining the construction information of the target page; generating a target component library based on the construction information, the target component library including multiple page components and their interaction information; combining the multiple page components in the target component library with template code to generate a page configuration file; and storing the page configuration file on a file server so that the server can retrieve the page configuration file from the file server and generate the target page.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Internet, in particular to an application page construction method and device, computer equipment and readable storage medium. BACKGROUND

[0002] With the continuous development of Internet technology and the continuous improvement of technology level, users no longer stick to using computers to enter application services, but hope that commonly used application services can run on multiple platforms, such as mobile phone platforms, tablet computer platforms, computer platforms, etc. Among them, the application service can be a medical service application program, which can support disease auxiliary diagnosis, health management, remote consultation and other functions.

[0003] In related technologies, the application service construction of the traditional development platform needs to go through the processes of software coding, compiling, publishing / deploying, testing, and online, and different platforms need to be developed, tested, and put online respectively. Taking application programs as an example, such as android native app, ios native app, apple desktop application, window desktop application, and web application program.

[0004] In the process of implementing the present application, the applicant found that the related technology at least has the following problems:

[0005] Different running platforms need different teams to develop and test, and the corresponding platform audit department also needs to audit the online application service, so that the cost of page construction is high, and sometimes the online cycle of functions cannot meet the rhythm of operation demand, thereby leading to a long online cycle. SUMMARY

[0006] Therefore, the present application provides an application page construction method and device, computer equipment and readable storage medium, which mainly aims to solve the problem that different running platforms need different teams to develop and test, and the corresponding platform audit department also needs to audit the online application service, so that the cost of page construction is high, and sometimes the online cycle of functions cannot meet the rhythm of operation demand, thereby leading to a long online cycle.

[0007] According to the first aspect of the present application, an application page construction method is provided, which is applied to a background system and includes:

[0008] Obtaining the construction information of a target page, generating a target component library according to the construction information, the target component library including a plurality of page components corresponding to the target page and interaction information of the plurality of page components;

[0009] Combining the plurality of page components in the target component library with template code to generate a page configuration file;

[0010] The page configuration file is stored on a file server so that the server can retrieve the page configuration file from the file server and generate the target page based on the page configuration file.

[0011] According to a second aspect of this application, an application page construction method is provided, which is applied to a server and includes:

[0012] In response to a user's instruction to enter a target page, an interface is called to send an information retrieval request to the file server, so that the file server determines the corresponding target file address based on the information retrieval request and sends the target file address to the server.

[0013] Based on the target file address, obtain the page configuration file generated by the backend system;

[0014] The page configuration file is rendered to obtain the target page.

[0015] According to a third aspect of this application, an application page building apparatus is provided, the apparatus being applied to a backend system, comprising:

[0016] The first generation module is used to obtain the construction information of the target page and generate a target component library based on the construction information. The target component library includes multiple page components corresponding to the target page and the interaction information of the multiple page components.

[0017] The second generation module is used to combine the multiple page components in the target component library with the template code to generate a page configuration file;

[0018] The storage module is used to store the page configuration file to a file server, so that the server can retrieve the page configuration file from the file server and generate the target page based on the page configuration file.

[0019] According to a fourth aspect of this application, an application page building apparatus is provided, the apparatus being applied to a back-end server, comprising:

[0020] The calling module is used to respond to the user triggering the entry point to enter the target page, call the interface to send an information retrieval request to the file server, so that the file server determines the corresponding target file address based on the information retrieval request, and sends the target file address to the server.

[0021] The acquisition module is used to obtain the page configuration file generated by the backend system based on the target file address;

[0022] The rendering module is used to render the page configuration file to obtain the target page.

[0023] According to a fifth aspect of this application, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of the method described in any of the first aspects above.

[0024] According to a sixth aspect of this application, a computer-readable storage medium is provided, on which a computer program is stored, wherein the computer program, when executed by a processor, implements the steps of the method described in any one of the first aspects above.

[0025] Using the above technical solution, this application provides an application page construction method, apparatus, computer device, and readable storage medium. First, the backend system obtains the construction information of the target page designed by relevant personnel. Based on the construction information, a target file library is generated, which includes multiple page components that the target page should have, as well as the interaction information between these page components. Then, the backend system combines the multiple page components in the target component library with template code to generate a page configuration file for the target page, and stores the page configuration file on a file server. Next, in response to the user triggering the entry point to the target page, the server calls an interface to send an information retrieval request to the file server, retrieving the page configuration file stored by the backend system from the file server. Based on the component information in the page configuration file, a first component tree is drawn from top to bottom. Further, the first component tree is converted into a second component tree with cross-platform characteristics, where each tree node in the second component tree corresponds to a Flutter component with cross-platform features. Finally, the corresponding data and interface capabilities are matched to the second component tree to obtain the target page for display. After entering the target page, the server reads the corresponding page configuration file, which is then parsed by the local rendering engine to generate the target page. This improves the speed of target page construction and leverages the cross-platform and high-performance characteristics of Flutter components to enhance the efficiency of multi-platform page construction.

[0026] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0027] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the scope of this application. Furthermore, the same reference numerals denote the same parts throughout the drawings. In the drawings:

[0028] FIG. 1A This illustration shows a flowchart of an application page construction method provided in an embodiment of this application;

[0029] FIG. 1B This illustration shows a flowchart of an application page construction method provided in an embodiment of this application;

[0030] FIG. 1C This illustration shows a flowchart of an application page construction method provided in an embodiment of this application;

[0031] FIG. 2A This illustration shows a flowchart of an application page construction method provided in an embodiment of this application;

[0032] FIG. 2B This illustration shows a flowchart of an application page construction method provided in an embodiment of this application;

[0033] FIG. 2C This illustration shows a flowchart of an application page construction method provided in an embodiment of this application;

[0034] FIG. 3A This illustration shows a structural schematic diagram of an application page building apparatus provided in an embodiment of this application;

[0035] FIG. 3B This illustration shows a structural schematic diagram of an application page building apparatus provided in an embodiment of this application;

[0036] FIG. 4 A schematic diagram of the device structure of a computer device provided in an embodiment of this application is shown. Detailed Implementation

[0037] Exemplary embodiments of the present application will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present application are shown in the drawings, it should be understood that the present application may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this application will be thorough and complete, and will fully convey the scope of the present application to those skilled in the art.

[0038] This application provides an application page construction method, such as... FIG. 1A As shown, this method is applied to a backend system and includes:

[0039] 101. Obtain the setup information of the target page, and generate the target component library based on the setup information. The target component library includes multiple page components corresponding to the target page, as well as the interaction information of the multiple page components.

[0040] This application provides a method for rapidly building cross-platform pages based on Flutter, including a backend system and a server-side, such as... FIG. 1BAs shown, relevant designers can generate pages by dragging and dropping components, using templates, or generating PSD files through the backend terminal provided by the system, thus completing the corresponding page construction. In actual operation, the target page can be an application interface for medical services, supporting functions such as disease-assisted diagnosis, health management, and remote consultation. This application does not specifically limit the functions of the target page. Next, the completed page is combined with the template code to complete data binding, obtaining the page configuration file for the target page. The page configuration file is then uploaded to a file server for storage. The file server stores the page configuration file in its database according to the file storage path provided by the relevant personnel. Further, when a user accesses the application service through a service terminal, the service terminal sends a file retrieval request to the file server to obtain the page configuration file. After CDN acceleration, the file is parsed by the rendering engine to display the corresponding target page. The target page can be an application page, a website page, etc. This application does not specifically limit the application scenario of the target page. In actual application, relevant designers will design the placement of various components on the target page. For example, a prompt information display box may be set at the top of the target page, and a carousel frame may be set below the prompt information display box, etc. Furthermore, staff can confirm the design draft after completion. Specifically, the backend system can set a confirmation button on the display page of the backend terminal. After completing the design, staff can confirm the design draft of the target page by clicking the confirmation button. Responding to the staff's confirmation command, the backend system obtains the design content of the target page, i.e., the target page's construction information. Next, the backend system generates a target component library based on the construction information. In actual application, the order of components in the construction information may be consistent with the order in which the designer placed them. Different components correspond to different interactive functions. When the backend system searches for the corresponding target component in the construction information according to the interaction logic, it requires a significant amount of query time. Therefore, to facilitate the construction of multiple page components, the backend system can first identify the construction information, organize it according to the interaction logic, and generate a target component library. In essence, this means sorting the multiple page components and corresponding interactive functions stored in the construction information using a preset data format. This allows the backend system to read the corresponding page components in the target component library in sequence according to the interaction logic, combine them with the corresponding template code, and generate the target page's configuration file, improving the efficiency of target page construction.

[0041] 102. Combine multiple page components from the target component library with the template code to generate a page configuration file.

[0042] It should be noted that different page components correspond to different interactive functions, and therefore require different template codes. For example, a single display image should be bound to image display code, while multiple display images displayed sequentially at certain intervals in the same position should be bound to carousel code. Therefore, this application provides a template engine, which combines each page component with its corresponding template code to generate a page configuration file.

[0043] The method provided in this application first involves a backend system acquiring the setup information of a target page designed by relevant personnel. Based on this setup information, a target file library is generated. This target file library includes multiple page components that the target page should possess, as well as interaction information between these page components. Subsequently, the backend system combines the multiple page components from the target component library with template code to generate a page configuration file for the target page.

[0044] 103. Store the page configuration file on the file server so that the server can retrieve the page configuration file from the file server and generate the target page based on the page configuration file.

[0045] Furthermore, when storing page configuration files, relevant personnel can preset the file path. The backend system sends the preset file path and page configuration file to the file server, so that the file server stores the page configuration file according to the preset file path. When the server sends a request instruction to the file server, it retrieves the generated page configuration file from the file server and builds the target page according to the page configuration file.

[0046] After storing the page configuration file on a file server, the server responds to a user's command to enter the target page by calling an API to send an information retrieval request to the file server, retrieving the page configuration file stored in the backend system. Based on the component information in the page configuration file, a first component tree is drawn from top to bottom. Further, the first component tree is transformed into a second component tree with cross-platform capabilities, where each node in the second component tree corresponds to a cross-platform Flutter component. Finally, the second component tree is matched with corresponding data and API capabilities to obtain the target page for display. When the server enters the target page, it reads the corresponding page configuration file, which is then parsed by the local rendering engine to generate the corresponding target page. This improves the target page construction speed and leverages the cross-platform and high-performance characteristics of Flutter components to enhance the efficiency of multi-platform page construction.

[0047] This application provides an application page construction method, such as... FIG. 1C As shown, this method is applied to the server side and includes:

[0048] 104. In response to the user triggering the entry point to the target page, call the interface to send an information retrieval request to the file server, so that the file server can determine the corresponding target file address based on the information retrieval request and send the target file address to the server.

[0049] When a user triggers an action to enter the target page, such as by clicking an entry link or image, the server calls an interface, such as an API, to send an information retrieval request to the file server. Specifically, the retrieval request sent by the server may carry a page identifier for the target page, such as a numeric or alphanumeric code. This application does not impose specific limitations on the form and content of the page identifier. This allows the file server to query the file based on the page identifier carried in the information retrieval request, determine the file address corresponding to the page identifier (i.e., the target file address), and return the target file address to the server.

[0050] 105. Obtain the page configuration file generated by the backend system based on the target file address.

[0051] In actual operation, when the backend system stores the page configuration file on the file server, it can specify the file storage path. The file server then stores the target file in the corresponding storage space based on the specified file storage path. Therefore, after the server determines the target file address, it can retrieve the page configuration file stored by the backend system based on the target file address.

[0052] 106. Render the page configuration file to obtain the target page.

[0053] Finally, the server uses its rendering engine to parse the predefined page components, nodes, and data structures, then converts the parsed components into corresponding Flutter components. Finally, it matches the corresponding data and API capabilities to complete the construction of the target page and displays it.

[0054] The method provided in this application embodiment first involves the backend system obtaining the construction information of the target page designed by relevant personnel. Based on the construction information, a target file library is generated, which includes multiple page components that the target page should have, as well as the interaction information between these page components. Subsequently, the backend system combines the multiple page components in the target component library with template code to generate a page configuration file for the target page, and stores the page configuration file on a file server. Next, in response to a user triggering an entry point to the target page, the server calls an interface to send an information retrieval request to the file server, retrieving the page configuration file stored by the backend system from the file server. Based on the component information in the page configuration file, a first component tree is drawn from top to bottom. Further, the first component tree is converted into a second component tree with cross-platform characteristics, where each tree node in the second component tree corresponds to a Flutter component with cross-platform features. Finally, the second component tree is matched with corresponding data and interface capabilities to obtain the target page for display. After the server enters the target page, it reads the corresponding page configuration file, which is then parsed by the local rendering engine to generate the target page. This improves the target page building speed and leverages the cross-platform and high-performance characteristics of Flutter components to enhance the efficiency of multi-platform page building.

[0055] This application provides an application page construction method, such as... FIG. 2A As shown, the method includes:

[0056] 201. In response to the user's design confirmation instruction for the target page, in the main design area, determine the first page component, identify the interactive functions stored in the first page component, and determine the second page component indicated by the interactive functions.

[0057] With the continuous development of internet technology and the advancement of science and technology, users are no longer limited to using only computers to access application services. Instead, they expect commonly used applications to run on multiple platforms, such as mobile phones, tablets, and computers. Currently, building application services on traditional development platforms requires a process of software coding, compilation, release / deployment, testing, and launch. Different platforms require separate development, testing, and launch. For example, applications include native Android apps, native iOS apps, Apple desktop applications, Windows desktop applications, and web applications. However, the applicant recognizes that different operating platforms require different teams for development and testing. Furthermore, the review departments of the respective platforms need to review the launched application services, resulting in high page construction costs and launch cycles that sometimes struggle to meet operational needs, leading to longer launch times.

[0058] Therefore, this application provides an application page construction method, apparatus, computer device, and readable storage medium. First, the backend system obtains the construction information of the target page designed by relevant personnel. Based on the construction information, a target file library is generated, which includes multiple page components that the target page should have, as well as the interaction information between these page components. Then, the backend system combines the multiple page components in the target component library with template code to generate a page configuration file for the target page, and stores the page configuration file on a file server. Next, in response to the user triggering the entry point to the target page, the server calls an interface to send an information retrieval request to the file server, retrieving the page configuration file stored by the backend system from the file server. Based on the component information in the page configuration file, a first component tree is drawn from top to bottom. Further, the first component tree is converted into a second component tree with cross-platform characteristics, where each tree node in the second component tree corresponds to a Flutter component with cross-platform features. Finally, the second component tree is matched with corresponding data and interface capabilities to obtain the target page for display. After entering the target page, the server reads the corresponding page configuration file, which is then parsed by the local rendering engine to generate the target page. This improves the speed of target page construction and leverages the cross-platform and high-performance characteristics of Flutter components to enhance the efficiency of multi-platform page construction.

[0059] In addition, this application also includes a file server for storing and sending relevant data information. In practical applications, designers can design target pages in the main design area of ​​the backend system. Specifically, this can be done by continuously dragging and dropping page components to the main design area, arranging various components within the target page, selecting a preset page template and dragging it to the main design area, or by recognizing PSD (Photos and Description) files. This application does not specifically limit the method of page design and construction. The page components built by the designers have corresponding interactive functions. Taking a carousel on the application page as an example, images one and two are carousel images. After image one is displayed for a preset time, it switches to image two. The designer will drag out two image frames, set image one and image two respectively, connect image one and image two, and set the switching condition to meet the preset time, thus completing the carousel design. In reality, interactive functions can include audio and video playback, page scrolling, in-page animation, form collection, carousel display, list display, etc. Furthermore, staff can confirm the design draft after completion. Specifically, the backend system can set a confirmation button on the display page of the backend terminal. After completing the design, staff can confirm the design draft of the target page by clicking the confirmation button. In response to the staff's confirmation command, the backend system obtains the design content of the target page, that is, the construction information of the target page. Specifically, in response to the design confirmation command of the target page, the backend system traverses the page components from top to bottom in the main design area, identifies the page components as the first page components, and determines the second page components that have an interactive relationship with the first page components. Considering that a page component may include multiple interactive functions, such as clicking a carousel to enter a page animation, the second page components in this application can be one or more.

[0060] By following the steps above, operators do not need to master complex programming skills; they can easily build beautiful pages by simply dragging and dropping, thus improving the efficiency of target page construction.

[0061] 202. Based on the first page components and interactive functions, as well as the second page components indicated by the interactive functions, generate page building information, and generate the target component library according to the building information.

[0062] In this embodiment, the backend system generates interactive information corresponding to the first page component based on the first page component, the interactive function, and the second page component indicated by the interactive function. It then traverses all the first page components existing in the main design area to obtain the interactive information corresponding to all the first page components. Finally, it aggregates the interactive information corresponding to all the first page components to obtain page building information.

[0063] Specifically, the backend system generates interactive information corresponding to the first-page components based on the first-page components and their interactive functions, as well as the second-page components indicated by the interactive functions. This interactive information is stored in a data format containing the component identifier of the first-page component, the interactive function, and the corresponding component identifier of the second-page component. For example, Component 1, in-page animation, Component 2; Component 1, list display, Component 3, etc. The system iterates through all first-page components in the main design area to obtain the interactive information corresponding to all first-page components, and then aggregates all page interactive information to obtain the page layout information.

[0064] Furthermore, based on the page setup information, a target component library is generated. In practical applications, the order of components in the setup information may match the order in which the designer placed them. Different components correspond to different interactive functions. When the backend system searches for the corresponding target component in the setup information according to the interaction logic, it requires a significant amount of query time. Therefore, to facilitate the setup of multiple page components, the backend system can first identify the setup information and group page components with interactive relationships together to obtain the target component library. In essence, this means sorting the multiple page components stored in the setup information, along with their interactive information, according to a pre-defined data structure. For example, identifying the setup information might yield Component 1, in-page animation, Component 2; Component 1, list display, Component 3; Component 3, page sliding, Component 4. Component 1 interacts with Component 2 and Component 3, so Component 1, Component 2, and Component 3 are grouped into the first group. Component 4 interacts with Component 3, so Component 4 and Component 3 are grouped into a subgroup of the first group. In practice, the system can be pre-configured as a tree structure, storing all page components according to their interaction logic in a tree diagram to obtain the target component library. This allows the backend system to directly read the corresponding components and template code from the target component library in sequence, combine them, and generate the page configuration file for the target page, thus improving the efficiency of target page construction.

[0065] 203. Combine multiple page components from the target component library with the template code to generate a page configuration file, and store the page configuration file on the file server so that the server can retrieve the page configuration file from the file server and generate the target page based on the page configuration file.

[0066] In this embodiment, different page components correspond to different interactive functions, and thus different template codes. For example, a single display image should be bound to image display code, and multiple display images displayed sequentially at a certain time interval in the same position should be bound to carousel code. Therefore, this application provides a template engine to determine the sub-template code corresponding to each page component and combine the page component with the corresponding sub-template code. Then, each page component in the multiple page components is combined with its corresponding template code to generate a page configuration file. Finally, when the backend system stores the page configuration file on the file server, relevant personnel can specify the file storage path. The file server stores the target file in the corresponding storage space according to the specified file storage path, so that the server sends a request instruction to the file server to retrieve the generated page configuration file from the file server and builds the target page based on the page configuration file.

[0067] 204. In response to a user's instruction to enter the target page, call the interface to send an information retrieval request to the file server, so that the file server can determine the corresponding target file address based on the information retrieval request and send the target file address to the server.

[0068] The server-side provides functions such as operation configuration, page management, template management, data processing, and front-end business requests. When a user enters the Flutter application, the server retrieves the configuration of the target page and the corresponding configuration file URL through the API interface. When the user clicks to enter the target page, the rendering engine obtains the page configuration information based on the target page URL and then renders the page.

[0069] In this embodiment, when the server detects that a user has triggered an operation to enter the target page, such as clicking an entry link or image, the server calls an interface, such as an API interface, to send an information retrieval request to the file server. This allows the file server to determine the corresponding target file address based on the information carried in the retrieval request and return the target file address to the server. Specifically, the retrieval request sent by the server may carry a page identifier of the target page, such as a numeric or alphanumeric code. This application does not specifically limit the form and content of the page identifier. The file server queries the page identifier to determine the file address corresponding to the page identifier, which is the target file address, and returns the target file address to the server.

[0070] 205. Based on the target file address, obtain the page configuration file generated by the backend system, and draw the first component tree from top to bottom according to the component information indicated in the page configuration file.

[0071] In actual operation, when the backend system stores the page configuration file on the file server, it can specify the file storage path. The file server then stores the target file in the corresponding storage space based on the specified file storage path. Therefore, after the server determines the target file address, it can retrieve the page configuration file stored by the backend system based on the target file address.

[0072] Furthermore, the rendering engine renders the page configuration file to generate the target page. It's important to note that the rendering engine is a file parsing and rendering tool written in Flutter. Its core capability is to parse predefined page components, nodes, and data structures, then convert the parsed components into corresponding Flutter components, and finally match the corresponding data and interface capabilities to display the page. The component information refers to the information in the target component library, including multiple page components and their corresponding interaction information. Further, the rendering engine recursively draws child nodes from top to bottom according to the position information of the page components, obtaining the first component tree, where each tree node corresponds to a page component. Taking an application page as an example... FIG. 2B As shown, the application page includes a header, dialog box, image, notification box, and share box. The first component tree is drawn from top to bottom according to the positional relationships indicated in the component information.

[0073] 206. Convert the first component tree into the second component tree, match the corresponding data and interface capabilities to the second component tree, and obtain the target page.

[0074] Specifically, the first component tree parses multiple page components, nodes, and data structures to obtain parsing results. Within these results, the multiple page components are converted into multiple target components, where the target components are Flutter components. The converted parsing results are returned according to a preset data format, resulting in a second component tree. The nodes in the second component tree contain component elements corresponding to the target components. These component elements include at least: component type, spacing, size, and content. Again, using an application page as an example, such as... FIG. 2C As shown, the entire target page container includes a stack (header), rows (dialog boxes), columns (images), rows (notification boxes), and rows (share boxes). The header includes an icon (an "X") and text (title); the dialog box includes an image (avatar) and text (conversation content); and the share box includes icons for WeChat and QQ. Finally, after obtaining the tree-structured data, the Flutter client recursively adds and draws components based on the tree component data to obtain the target page.

[0075] Because Flutter has cross-platform capabilities across PC, Linux, Android, iOS, and Web, and based on its self-drawing feature, it has the ability to maintain consistency across multiple platforms and perform as well as native applications, thus enabling the creation of application pages that can run across platforms.

[0076] The method provided in this application embodiment first involves the backend system obtaining the construction information of the target page designed by relevant personnel. Based on the construction information, a target file library is generated, which includes multiple page components that the target page should have, as well as the interaction information between these page components. Subsequently, the backend system combines the multiple page components in the target component library with template code to generate a page configuration file for the target page, and stores the page configuration file on a file server. Next, in response to a user triggering an entry point to the target page, the server calls an interface to send an information retrieval request to the file server, retrieving the page configuration file stored by the backend system from the file server. Based on the component information in the page configuration file, a first component tree is drawn from top to bottom. Further, the first component tree is converted into a second component tree with cross-platform characteristics, where each tree node in the second component tree corresponds to a Flutter component with cross-platform features. Finally, the second component tree is matched with corresponding data and interface capabilities to obtain the target page for display. After entering the target page, the server reads the corresponding page configuration file, which is then parsed by the local rendering engine to generate the target page. This improves the speed of target page construction and leverages the cross-platform and high-performance characteristics of Flutter components to enhance the efficiency of multi-platform page construction.

[0077] Furthermore, as FIG. 1A To specifically implement the method, this application provides an application page building apparatus, such as... FIG. 3A As shown, the device includes: a first generation module 301, a second generation module 302, and a storage module 303.

[0078] The first generation module 301 is used to obtain the construction information of the target page and generate a target component library based on the construction information. The target component library includes multiple page components corresponding to the target page and the interaction information of the multiple page components.

[0079] The second generation module 302 is used to combine the multiple page components in the target component library with the template code to generate a page configuration file;

[0080] The storage module 303 is used to store the page configuration file to a file server, so that the server can obtain the page configuration file from the file server and generate the target page based on the page configuration file.

[0081] In a specific application scenario, the first generation module 301 is used to respond to a user's design confirmation instruction for the target page, and in the main design area, determine a first page component, which is a page component existing in the main design area; identify the interactive functions stored in the first page component, and determine the second page component indicated by the interactive function, wherein the interactive function includes one or more of the following: audio / video playback, page sliding, in-page animation, form collection, carousel, and list display; generate interactive information corresponding to the first page component based on the first page component, the interactive function, and the second page component indicated by the interactive function; traverse all the first page components existing in the main design area to obtain the interactive information corresponding to all the first page components, and aggregate the interactive information corresponding to all the first page components to obtain the page construction information.

[0082] In a specific application scenario, the second generation module 302 is used to determine the sub-template code corresponding to each of the plurality of page components, combine the page component with the sub-template code, and combine each of the plurality of page components with the corresponding sub-template code to generate the page configuration file.

[0083] Furthermore, as FIG. 1C To specifically implement the method, this application provides an application page building apparatus, such as... FIG. 3B As shown, the device includes: a calling module 304, an acquisition module 305, and a rendering module 306.

[0084] The calling module 304 is used to respond to the user triggering the entry point to enter the target page, call the interface to send an information retrieval request to the file server, so that the file server determines the corresponding target file address based on the information retrieval request and sends the target file address to the server.

[0085] The acquisition module 305 is used to acquire the page configuration file generated by the backend system based on the target file address;

[0086] The rendering module 306 is used to render the page configuration file to obtain the target page.

[0087] In a specific application scenario, the rendering module 306 is used to draw a first component tree from top to bottom according to the component information indicated in the page configuration file. The component information includes multiple page components and the interaction information corresponding to the multiple page components. Each tree node in the first component tree corresponds to a page component. The first component tree is converted into a second component tree, and corresponding data and interface capabilities are matched for the second component tree to obtain the target page. Each tree node in the second component tree corresponds to a Flutter component.

[0088] In a specific application scenario, the rendering module 306 is used to parse multiple page components, nodes and data structures in the first component tree to obtain parsing results, and to convert the multiple page components into multiple target components in the parsing results, wherein the target components are the Flutter components;

[0089] The converted parsing results are returned according to a preset data format to obtain the second component tree. The nodes in the second component tree contain the component elements of the corresponding target component. The component elements include at least: component type, spacing, size, and content.

[0090] The page configuration is dynamically distributed from the server, eliminating the need for front-end releases. The page is dynamically rendered by the rendering engine. Dynamic data sources can also be configured, allowing data to be bound to relevant components via APIs or other data sources to achieve more powerful component behavior and interaction control capabilities.

[0091] The apparatus provided in this application embodiment first obtains the construction information of the target page designed by relevant personnel from the backend system. Based on the construction information, a target file library is generated, which includes multiple page components that the target page should have, as well as the interaction information between the multiple page components. Subsequently, the backend system combines the multiple page components in the target component library with template code to generate a page configuration file for the target page, and stores the page configuration file on a file server. Next, in response to the user triggering the entry point to the target page, the server calls an interface to send an information retrieval request to the file server to retrieve the page configuration file stored by the backend system from the file server. Based on the component information in the page configuration file, a first component tree is drawn from top to bottom. Further, the first component tree is converted into a second component tree with cross-platform characteristics, where each tree node in the second component tree corresponds to a Flutter component with cross-platform characteristics. Finally, the corresponding data and interface capabilities are matched to the second component tree to obtain the target page for display. After entering the target page, the server reads the corresponding page configuration file, which is then parsed by the local rendering engine to generate the target page. This improves the speed of target page construction and leverages the cross-platform and high-performance characteristics of Flutter components to enhance the efficiency of multi-platform page construction.

[0092] It should be noted that other corresponding descriptions of the functional units involved in the application page building apparatus provided in this application embodiment can be found by referring to... FIGS. 1A-1C and FIGS. 2A-2C The corresponding descriptions in [the document] will not be repeated here.

[0093] In an exemplary embodiment, see FIG. 4 Furthermore, a device is provided, comprising a communication bus, a processor, a memory, and a communication interface. It may also include an input / output interface and a display device, wherein the various functional units can communicate with each other via the bus. The memory stores a computer program, and the processor executes the program stored in the memory, performing the application page construction method described in the above embodiments.

[0094] A computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the application page construction method described above.

[0095] Through the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented in hardware or by using software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solution of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) and includes several instructions to cause a computer device (such as a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0096] Those skilled in the art will understand that the accompanying drawings are merely schematic diagrams of a preferred embodiment, and the modules or processes shown in the drawings are not necessarily essential for implementing this application.

[0097] Those skilled in the art will understand that the modules in the apparatus of the implementation scenario can be distributed within the apparatus of the implementation scenario as described, or they can be located in one or more apparatuses different from this implementation scenario, with corresponding changes. The modules of the above-described implementation scenario can be combined into one module, or they can be further divided into multiple sub-modules.

[0098] The serial numbers in this application are for descriptive purposes only and do not represent the superiority or inferiority of the implementation scenario.

[0099] The above disclosures are only a few specific implementation scenarios of this application. However, this application is not limited to these. Any variations that can be conceived by those skilled in the art should fall within the protection scope of this application.

Claims

1. An application page construction method, characterized by, The method is applied to a background system, and comprises: obtaining construction information of a target page, generating a target component library based on interaction logic between a plurality of page components according to the construction information, the target component library comprising a plurality of page components corresponding to the target page stored in a tree structure and interaction information of the plurality of page components; wherein the tree structure is used to represent interaction relationships and organization sequences between page components; combining the plurality of page components in the target component library with template code to generate a page configuration file; storing the page configuration file to a file server, so that a server generates a target page based on the page configuration file in the file server; the obtaining of the construction information of the target page comprises: in response to a user triggering a design confirmation instruction of the target page, determining a first page component in a main design area, the first page component being a page component existing in the main design area; identifying an interaction function stored in the first page component, and determining a second page component indicated by the interaction function, the interaction function comprising one or more of audio and video playing, page sliding, in-page animation, form collection, carousel, and list display; generating interaction information corresponding to the first page component according to the first page component and the interaction function and the second page component indicated by the interaction function; traversing all first page components existing in the main design area to obtain interaction information corresponding to all the first page components, and aggregating the interaction information corresponding to all the first page components to obtain the construction information.

2. The method of claim 1, wherein, the combining of the plurality of page components in the target component library with template code to generate a page configuration file comprises: for each page component in the plurality of page components, determining sub-template code corresponding to the page component, and combining the page component with the sub-template code; combining each of the plurality of page components with corresponding sub-template code respectively to generate the page configuration file.

3. A method for constructing an application page, characterized by, The method is applied to a server, and comprises: in response to a user initiating an instruction to enter a target page, calling an interface to send an information acquisition request to a file server, so that the file server determines a corresponding target file address based on the information acquisition request and sends the target file address to the server; obtaining a page configuration file generated by a background system according to the target file address; the page configuration file is generated based on any one of claims 1-2; rendering the page configuration file to obtain the target page; the rendering of the page configuration file to obtain the target page comprises: drawing a first component tree from top to bottom according to component information indicated in the page configuration file, the component information comprising a plurality of page components and interaction information corresponding to the plurality of page components, each tree node in the first component tree corresponding to a page component; The first component tree is converted into a second component tree, corresponding data and interface capabilities are matched for the second component tree, and the target page is obtained, each tree node in the second component tree corresponding to a Flutter component.

4. The method of claim 3, wherein, The first component tree is converted into a second component tree, including: The first component tree is parsed to obtain a parsing result, and the plurality of page components are converted into a plurality of target components in the parsing result, the target components being the Flutter components; The converted parsing result is returned in a preset data format to obtain the second component tree, the nodes in the second component tree including component elements of corresponding target components, the component elements including at least component types, spacings, sizes, and contents.

5. An application page construction apparatus characterized by comprising: The device is applied to a background system and includes: A first generation module configured to obtain construction information of a target page, generate a target component library based on interaction logic among a plurality of page components according to the construction information, and include a plurality of page components corresponding to the target page and interaction information of the plurality of page components in the target component library in a tree structure; the tree structure is used to represent interaction relationships and organization orders among the page components; A second generation module configured to combine the plurality of page components in the target component library with template code to generate a page configuration file; A storage module configured to store the page configuration file to a file server, so that a server obtains the page configuration file in the file server, and generates a target page based on the page configuration file; The first generation module is specifically configured to, in response to a user triggering a design confirmation instruction of the target page, determine a first page component in a main design area, the first page component being a page component existing in the main design area; identify an interaction function stored in the first page component, determine a second page component indicated by the interaction function, and the interaction function including one or more of audio and video playing, page sliding, in-page animation, form collection, carousel, and list display; generate interaction information corresponding to the first page component according to the first page component and the interaction function and the second page component indicated by the interaction function; traverse all first page components existing in the main design area to obtain interaction information corresponding to all the first page components, and aggregate the interaction information corresponding to all the first page components to obtain the construction information.

6. An application page construction apparatus characterized by comprising: The device is applied to a background server and includes: A calling module configured to, in response to a user initiating an instruction to enter a target page, call an interface to send an information acquisition request to a file server, so that the file server determines a corresponding target file address based on the information acquisition request and sends the target file address to the server; An acquisition module configured to obtain a page configuration file generated by a background system according to the target file address; the page configuration file is generated based on claim 5. A rendering module is configured to render the page configuration file to obtain the target page. The rendering module is specifically configured to draw a first component tree from top to bottom according to component information indicated in the page configuration file, the component information including a plurality of page components and interaction information corresponding to the plurality of page components, and each tree node in the first component tree corresponding to a page component. The first component tree is converted into a second component tree, corresponding data and interface capabilities are matched for the second component tree, and the target page is obtained, each tree node in the second component tree corresponding to a Flutter component. 7.A computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the computer device is configured to perform the method according to any one of claims 1-6 when the computer program is executed by the processor. The processor executes the computer program to implement the steps of the method in any one of claims 1 to 4.

8. A computer-readable storage medium having stored thereon a computer program, characterized in that, The computer program is executed by the processor to implement the steps of the method in any one of claims 1 to 4.

Images