CN115373673A - Application page construction method and device, computer equipment and readable storage medium - Google Patents

Application page construction method and device, computer equipment and readable storage medium Download PDF

Info

Publication number
CN115373673A
CN115373673A CN202211114619.6A CN202211114619A CN115373673A CN 115373673 A CN115373673 A CN 115373673A CN 202211114619 A CN202211114619 A CN 202211114619A CN 115373673 A CN115373673 A CN 115373673A
Authority
CN
China
Prior art keywords
page
target
component
file
components
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211114619.6A
Other languages
Chinese (zh)
Inventor
史东地
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Kangjian Information Technology Shenzhen Co Ltd
Original Assignee
Kangjian Information Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Kangjian Information Technology Shenzhen Co Ltd filed Critical Kangjian Information Technology Shenzhen Co Ltd
Priority to CN202211114619.6A priority Critical patent/CN115373673A/en
Publication of CN115373673A publication Critical patent/CN115373673A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management

Abstract

The application discloses an application page construction method, an application page construction device, computer equipment and a readable storage medium, and relates to the field of internet. The method comprises the following steps: acquiring construction information of a target page, and generating a target component library according to the construction information, wherein the target component library comprises a plurality of page components and interaction information of the plurality of page components; combining a plurality of page components in a target component library with template codes to generate a page configuration file; and storing the page configuration file to a file server so that the server side can acquire the page configuration file in the file server to generate a target page.

Description

Application page construction method and device, computer equipment and readable storage medium
Technical Field
The present application relates to the field of internet technologies, and in particular, to a method and an apparatus for constructing an application page, a computer device, and a readable storage medium.
Background
With the continuous development of internet technology and the continuous improvement of technology level, users are no longer restricted to using computers to access application services, but more hope that common application services can be run on multiple platforms, such as mobile phone platforms, tablet computer platforms, etc., where the application services may be medical service application programs and can support functions of disease auxiliary diagnosis, health management, remote consultation, etc.
In the related art, the application service building of the traditional development platform needs to be subjected to processes of software coding, compiling, publishing/deploying, testing and online, and different platforms need to be respectively developed, tested and online, taking application programs as examples, such as android native app, ios native app, apple desktop application, window desktop application, web application programs and the like.
In carrying out the present application, the applicant has found that the related art has at least the following problems:
different operation platforms all need different teams to develop, test, develop and test respectively, and the auditing department of corresponding platform still needs to audit the application service of going on-line to the cost that makes the page structure is high, and the function is gone on the line the cycle and is hardly satisfied the demand rhythm of operation sometimes, and then leads to the period of going on the line longer.
Disclosure of Invention
In view of this, the application provides an application page construction method, an application page construction device, a computer device and a readable storage medium, and mainly aims to solve the problems that different operation platforms all need different teams to respectively develop, test, develop and test, and a auditing department of a corresponding platform needs to audit an online application service, so that the cost of page construction is high, and the online period of functions sometimes hardly meets the requirement rhythm of operation, thereby resulting in a long online period.
According to a first aspect of the present application, there is provided an application page construction method, which is applied to a background system, and includes:
acquiring construction information of a target page, and generating a target component library according to the construction information, wherein the target component library comprises a plurality of page components corresponding to the target page and interaction information of the plurality of page components;
combining the plurality of page components in the target component library with template codes to generate a page configuration file;
and storing the page configuration file to a file server so that a server side can acquire the page configuration file in the file server, and generating a target page based on the page configuration file.
According to a second aspect of the present application, there is provided an application page construction method, which is applied to a server and includes:
responding to an instruction of a user for entering 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 sending the target file address to the server;
acquiring a page configuration file generated by a background system according to the target file address;
and rendering the page configuration file to obtain the target page.
According to a third aspect of the present application, there is provided an application page constructing apparatus, which is applied to a background system, and includes:
the first generation module is used for acquiring construction information of a target page and generating a target component library according to the construction information, wherein the target component library comprises a plurality of page components corresponding to the target page and interaction information of the plurality of page components;
the second generation module is used for combining the plurality of page components in the target component library with the template codes to generate a page configuration file;
and the storage module is used for storing the page configuration file to a file server so that a server side can obtain the page configuration file in the file server and generate a target page based on the page configuration file.
According to a fourth aspect of the present application, there is provided an application page constructing apparatus, which is applied to a backend server, including:
the calling module is used for responding to an entrance triggered by a user 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 sending the target file address to the server;
the acquisition module is used for acquiring a page configuration file generated by a background system according to the target file address;
and the rendering module is used for rendering the page configuration file to obtain the target page.
According to a fifth aspect of the present application, there is provided a computer device comprising a memory storing a computer program and a processor implementing the steps of the method of any of the first aspects when the computer program is executed.
According to a sixth aspect of the present application, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the method of any one of the first to third aspects.
According to the technical scheme, the application page construction method, the application page construction device, the computer equipment and the readable storage medium are provided. And then, the background system combines a plurality of page components in the target component library with the template codes to generate a page configuration file of the target page, and stores the page configuration file to the file server. And then, the server responds to the user to trigger an entrance of the target page, calls an interface to send an information acquisition request to the file server, and acquires the page configuration file stored in the background system from the file server. And drawing the first component tree from top to bottom according to the component information in the page configuration file. Further, the first component tree is converted into a second component tree with cross-platform characteristics, wherein each tree node in the second component tree corresponds to a Flutter component with cross-platform characteristics. And finally, matching corresponding data and interface capacity for the second component tree to obtain a target page for displaying. The server reads the corresponding page configuration file after entering the target page, and the corresponding target page can be generated after being analyzed by the local rendering engine, so that the construction speed of the target page is improved, and the efficiency of constructing the multi-platform page is improved by utilizing the characteristics of cross-platform and good performance of the Flutter component.
The above description is only an overview of the technical solutions of the present application, and the present application may be implemented in accordance with the content of the description so as to make the technical means of the present application more clearly understood, and the detailed description of the present application will be given below in order to make the above and other objects, features, and advantages of the present application more clearly understood.
Drawings
Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the application. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:
fig. 1A shows a flowchart of an application page construction method provided in an embodiment of the present application;
fig. 1B shows a flowchart of an application page construction method provided in an embodiment of the present application;
fig. 1C shows a flowchart of an application page construction method provided in the embodiment of the present application;
fig. 2A shows a flowchart of an application page building method provided in an embodiment of the present application;
fig. 2B shows a flowchart of an application page construction method provided in the embodiment of the present application;
fig. 2C shows a schematic flowchart of a method for constructing an application page according to an embodiment of the present application;
fig. 3A illustrates a schematic structural diagram of an application page building apparatus according to an embodiment of the present application;
fig. 3B illustrates a schematic structural diagram of an application page building apparatus according to an embodiment of the present application;
fig. 4 shows a schematic device structure diagram of a computer apparatus according to an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present application will be described in more detail below 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 embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
An embodiment of the present application provides an application page construction method, as shown in fig. 1A, the method is applied to a background system, and includes:
101. acquiring the construction information of the target page, and generating a target component library according to the construction information, wherein the target component library comprises a plurality of page components corresponding to the target page and interaction information of the plurality of page components.
The application provides a method for quickly constructing a page across platforms based on Flutter, which comprises a background system and a server, as shown in FIG. 1B, relevant designers can generate a page or a template generation page or a PSD generation page through component dragging at a background terminal provided by the background system, and corresponding page construction is completed. In the actual operation process, the target page can be an application interface of medical service, functions of disease auxiliary diagnosis, health management, remote consultation and the like are supported, and the functions of the target page are not specifically limited. And then combining the built page with the template code, finishing data binding to obtain a page configuration file of the target page, uploading the page configuration file to a file server for storage, and storing the page configuration file into a database by the file server according to a file storage path provided by related workers. Further, a user enters application service through the service terminal, the service terminal sends a file acquisition request to the file server to acquire a page configuration file, and the page configuration file is accelerated by the CDN and then analyzed by the rendering engine to display a corresponding target page. The target page may be an application page, a website page, or the like, and the application scenario of the target page is not specifically limited in the present application. In the actual application process, relevant designers can design the placement of various components in the target page. For example, a prompt information display frame is set at the top of the target page, and a frame of the carousel is set below the prompt information display frame. Further, the staff can confirm the design draft after the design is completed, specifically, the background system can set a confirmation key on the display page of the background terminal, and the staff confirms the design draft of the target page by clicking the confirmation key after the design is completed. And the background system responds to the confirmation instruction of the staff, and acquires the design content of the staff on the target page, namely the construction information of the target page. Next, the background system generates a target component library according to the construction information, in the practical application process, the component sequence in the construction information may be consistent with the placement sequence of the designer, different components have different interaction functions correspondingly, and when the background system searches for the corresponding target component in the construction information according to the interaction logic to construct, a large amount of query time is needed. Therefore, in order to facilitate the construction of a plurality of page assemblies, the background system can firstly identify the construction information, arrange the construction information according to the interactive logic and generate a target assembly library. Actually, the multiple page components stored in the construction information and the corresponding interaction functions are sequenced through a preset data format, so that the background system can conveniently read the corresponding page components in the target component library according to the interaction logic in sequence, and combine the corresponding page components with the corresponding template codes to generate a page configuration file of the target page, and the target page construction efficiency is improved.
102. And combining a plurality of page components in the target component library with the template codes to generate a page configuration file.
It should be noted that different page components correspond to different interaction functions, and thus correspond to different template codes. For example, a single display diagram should bind the picture display codes, and a plurality of display diagrams sequentially display the carousel display codes at the same position at certain time intervals. The present application thus provides a template engine by which each of a plurality of page components is combined with a corresponding template code to generate a page profile.
According to the method provided by the embodiment of the application, the background system acquires the construction information of the target page designed by related workers, and the target document library is generated according to the construction information, wherein the target document library comprises a plurality of page components which the target page should have and interaction information among the plurality of page components. And then, combining a plurality of page components in the target component library with the template codes by the background system to generate a page configuration file of the target page.
103. And storing the page configuration file to a file server so that the server side can acquire the page configuration file in the file server and generate a target page based on the page configuration file.
Further, when the page configuration file is stored, related workers can preset a file path, and the background system sends the preset file path and the page configuration file to the file server, so that the file server stores the page configuration file according to the preset file path, and when the server sends a request instruction to the file server, the generated page configuration file is obtained from the file server, and a target page is built according to the page configuration file.
After the page configuration file is stored in the file server, the server responds to an instruction of a user for entering a target page, calls an interface to send an information acquisition request to the file server, and acquires the page configuration file stored in the background system from the file server. And drawing the first component tree from top to bottom according to the component information in the page configuration file. Further, the first component tree is converted into a second component tree with cross-platform characteristics, wherein each tree node in the second component tree corresponds to a Flutter component with cross-platform characteristics. And finally, matching corresponding data and interface capacity for the second component tree to obtain a target page for displaying. The server side reads the corresponding page configuration file after entering the target page, and the corresponding target page can be generated after being analyzed by the local rendering engine, so that the target page construction speed is improved, and the multi-platform page construction efficiency is improved by utilizing the characteristics of cross-platform and good performance of the Flutter component.
An embodiment of the present application provides a method for constructing an application page, as shown in fig. 1C, where the method is applied to a server, and includes:
104. and responding to an entrance of a user triggering entering target page, calling an interface to send an information acquisition request to the file server, so that the file server determines a corresponding target file address based on the information acquisition request, and sending the target file address to the server.
When a user triggers an operation of entering a target page entrance, such as by clicking a trigger entrance link, clicking a trigger entrance picture, and the like, a server calls an interface, such as an api interface, and sends an information acquisition request to a file server. Specifically, the acquisition request sent by the server may carry a page identifier of the target page, such as a numeric code, an alphabetic code, and the like. And the file server inquires according to the page identifier carried in the information acquisition request, determines the file address corresponding to the page identifier, namely the target file address, and returns the target file address to the server.
105. And acquiring a page configuration file generated by the background system according to the target file address.
In the actual operation process, the background system can specify a file storage path when storing the page configuration file to the file server, and the file server stores the target file in the corresponding storage space according to the specified file storage path. Therefore, after the server determines the target file address, the server can obtain the page configuration file stored in the background system according to the target file address.
106. And rendering the page configuration file to obtain a target page.
And finally, the server analyzes the page components, the nodes and the data structure defined in advance through a rendering engine, and then converts the analyzed components into corresponding Flutter components. And finally, matching the corresponding data and the interface capacity to complete the construction of the target page and display the target page.
According to the method provided by the embodiment of the application, firstly, the construction information of the target page designed by related workers is obtained by a background system, and a target file library is generated according to the construction information, wherein the target file library comprises a plurality of page components which the target page should have and interaction information among the page components. And then, the background system combines a plurality of page components in the target component library with the template codes to generate a page configuration file of the target page, and stores the page configuration file to the file server. And then, the server responds to the user to trigger an entrance of the target page, calls an interface to send an information acquisition request to the file server, and acquires the page configuration file stored in the background system from the file server. And drawing the first component tree from top to bottom according to the component information in the page configuration file. Further, the first component tree is converted into a second component tree with cross-platform characteristics, wherein each tree node in the second component tree corresponds to a Flutter component with cross-platform characteristics. And finally, matching corresponding data and interface capacity for the second component tree to obtain a target page for displaying. The server side reads the corresponding page configuration file after entering the target page, the corresponding target page can be generated after being analyzed by the local rendering engine, the target page construction speed is improved, and the multi-platform page construction efficiency is improved by utilizing the characteristics of cross-platform and good performance of the Flutter component.
An embodiment of the present application provides an application page construction method, as shown in fig. 2A, the method includes:
201. in response to a design confirmation instruction of a user trigger target page, in the main design area, a first page component is determined, an interactive function stored in the first page component is identified, and a second page component indicated by the interactive function is determined.
With the continuous development of internet technology and the continuous improvement of technology level, users are no longer restricted to using computers to access application services, but more hope that common application services can be run on multiple platforms, such as mobile phone platforms, tablet computer platforms, and the like. At present, the application service building of a traditional development platform needs to go through the processes of software coding, compiling, publishing/deploying, testing and online, and different platforms need to respectively develop the testing online, taking application programs as examples, such as android native app, ios native app, apple desktop application, window desktop application, web application and the like. However, the applicant recognizes that different operation platforms all need different teams to respectively develop, test, develop and test, and a auditing department of the corresponding platform also needs to audit the online application service, so that the cost of page construction is high, and the online period of functions sometimes hardly meets the rhythm of operation requirements, thereby resulting in a longer online period.
Therefore, according to the application page construction method, the application page construction device, the computer equipment and the readable storage medium, the background system firstly obtains construction information of a target page designed by related workers, and a target document library is generated according to the construction information, wherein the target document library comprises a plurality of page components which the target page should have and interaction information among the plurality of page components. And then, the background system combines a plurality of page components in the target component library with the template codes to generate a page configuration file of the target page, and stores the page configuration file to the file server. And then, the server responds to the user to trigger an entrance of the target page, calls an interface to send an information acquisition request to the file server, and acquires the page configuration file stored in the background system from the file server. And drawing the first component tree from top to bottom according to the component information in the page configuration file. Further, the first component tree is converted into a second component tree with cross-platform characteristics, wherein each tree node in the second component tree corresponds to a Flutter component with cross-platform characteristics. And finally, matching corresponding data and interface capacity for the second component tree to obtain a target page for displaying. The server reads the corresponding page configuration file after entering the target page, and the corresponding target page can be generated after being analyzed by the local rendering engine, so that the construction speed of the target page is improved, and the efficiency of constructing the multi-platform page is improved by utilizing the characteristics of cross-platform and good performance of the Flutter component.
In addition, the file server is used for storing and sending related data information. In the practical application process, related designers can design a target page in a main design area of a background system, specifically, the design can be carried out by continuously dragging page components to the main design area, putting of various components in the target page is built in the main design area, or by clicking a preset page template, one key is dragged to the main design area to build, or page building is carried out by identifying a PSD (photo and Description, picture file format) file, and the mode of building the page design is not specifically limited. The page assembly built by the designer has a corresponding interaction function. Taking a carousel picture in an application page as an example, the first picture and the second picture are carousel pictures, and when the first picture is displayed for a preset time, the first picture is switched into the second picture for display. The designer can drag out two picture frames, set the first picture and the second picture respectively, connect the first picture and the second picture, set the switching condition to meet the preset duration, and complete the design of the carousel picture. In practice, the interactive function may be audio-video playing, page sliding, in-page animation, form collection, carousel graphics, list presentation, and so on. Further, the worker can confirm the design draft after the design is completed, specifically, the background system can set a confirmation key on the display page of the background terminal, and the worker can confirm the design draft of the target page by clicking the confirmation key after the design is completed. And the background system responds to the confirmation instruction of the staff, and acquires the design content of the staff on the target page, namely the construction information of the target page. Specifically, the background system responds to a design confirmation instruction of a target page, page components are traversed from top to bottom in the main design area, the identified page components are used as first page components, and second page components which have an interaction relation with the first page components are determined. Considering that one page component may include multiple interactive functions at the same time, for example, clicking a certain carousel graph may enter a page animation, etc., the second page component in the present application may be one or multiple.
Through the steps, operators can build a delicate page through simple dragging without mastering a complex programming technology, and the target page building efficiency is improved.
202. Generating page construction information based on the first page assembly, the interaction function and the second page assembly indicated by the interaction function, and generating a target assembly library according to the construction information.
In the embodiment of the application, the background system generates the interactive information corresponding to the first page component according to the first page component, the interactive function and the second page component indicated by the interactive function, traverses all the first page components existing in the main design area to obtain the interactive information corresponding to all the first page components, and aggregates the interactive information corresponding to all the first page components to obtain the page construction information.
Specifically, the background system generates interactive information corresponding to the first page component according to the first page component, the interactive function and the second page component indicated by the interactive function. And storing the interaction information in a data format of the component identification of the first page component, the interaction function and the corresponding component identification of the second page component. For example, component 1, in-page animation, component 2; component 1, list presentation, component 3, and so on. Traversing all the first page assemblies in the main design area to obtain the interactive information corresponding to all the first page assemblies, and then aggregating all the page interactive information to obtain page construction information.
Furthermore, a target component library is generated according to page construction information, in the practical application process, the component sequence in the construction information may be consistent with the placement sequence of designers, different components have different interaction functions correspondingly, and when a background system searches for a corresponding target component in the construction information according to interaction logic to construct, a large amount of query time is needed. Therefore, in order to facilitate the construction of a plurality of page assemblies, the background system can firstly identify construction information and classify the page assemblies with interactive relations into a group, so that a target assembly library can be obtained. Actually, the multiple page assemblies stored in the building information and the interaction information of the multiple page assemblies are sorted in a preset data structure according to a certain sequence. For example, identifying that build information is available component 1, in-page animation, component 2; component 1, list presentation, component 3; the component 3, the page sliding and the component 4, wherein the component 1, the component 2 and the component 3 have an interactive relation, so the component 1, the component 2 and the component 3 are classified into a first group, the component 4 and the component 3 have an interactive relation, and the component 4 and the component 3 are classified into a subgroup of the first group. In fact, the system may preset the data structure as a tree structure, and store all the page components in the form of a tree diagram according to the interaction logic to obtain the target component library. And then the background system can directly read the corresponding components and the corresponding template codes in sequence in the target component library for combination to generate a page configuration file of the target page, so that the target page construction efficiency is improved.
203. Combining a plurality of page components in the target component library with the template codes to generate a page configuration file, storing the page configuration file to a file server so that a server side can obtain the page configuration file in the file server, and generating a target page based on the page configuration file.
In the embodiment of the application, different page components correspond to different interactive functions, so that different template codes correspond to different page components. For example, a single display diagram should bind the picture display codes, and a plurality of display diagrams sequentially display the carousel display codes at the same position at certain time intervals. Therefore, the application provides the template engine, the sub-template code corresponding to each page component is determined through the template engine, and the page component is combined with the corresponding sub-template code. And then each page component in the multiple page components is combined with the corresponding template code to generate a page configuration file. And finally, when the background system stores the page configuration file to the file server, the related staff can designate a file storage path, and the file server stores the target file in the corresponding storage space according to the designated file storage path, so that the server sends a request instruction to the file server, acquires the generated page configuration file from the file server, and builds the target page according to the page configuration file.
204. And responding to an instruction of entering a target page initiated by a user, calling an interface to send an information acquisition request to the file server, so that the file server determines a corresponding target file address based on the information acquisition request, and sending the target file address to the server side.
The service end provides functions of operation position configuration, page management, template management, data processing, front-end service request and the like. And after the user enters the Flutterer application, acquiring the configuration of the target page and the corresponding configuration file URL from the server through the api interface, and when the user clicks to enter the target page, acquiring page configuration information according to the URL of the target page by the rendering engine and rendering the page.
In the embodiment of the application, when the server detects that the user triggers the operation of entering the target page entry, for example, the entry link, the entry picture, and the like are triggered by clicking the operation. And the server calls an interface, such as an api interface, and sends an information acquisition request to the file server. And the file server determines a corresponding target file address according to the information carried in the information acquisition request and returns the target file address to the server. Specifically, the acquisition request sent by the server may carry a page identifier of the target page, such as a numeric code, an alphabetic code, and the like. The file server inquires through the page identifier, determines a file address corresponding to the page identifier, namely a target file address, and returns the target file address to the server.
205. And acquiring a page configuration file generated by the background system according to the target file address, and drawing a first component tree from top to bottom according to the indicated component information in the page configuration file.
In the actual operation process, the background system can specify a file storage path when storing the page configuration file to the file server, and the file server stores the target file in the corresponding storage space according to the specified file storage path. Therefore, after the server determines the target file address, the server can obtain the page configuration file stored in the background system according to the target file address.
Further, the page configuration file is rendered through a rendering engine, and a target page is generated. It should be noted that the rendering engine is a file parsing and rendering tool written by Flutter, the core capability is parsing according to defined page components, nodes and data structures, then the parsed components are converted into corresponding Flutter components, and finally corresponding data and interface capabilities are matched to display the page. The component information is information in the target component library, and includes a plurality of page components and interaction information corresponding to the plurality of page components. Further, the rendering engine recursively draws the child nodes from top to bottom according to the position information of the page components to obtain a first component tree, wherein each tree node corresponds to one page component. Taking the page of the application program as an example, as shown in fig. 2B, the application page includes a header, a dialog box, a picture, a notification box, and a sharing box. The first component tree is drawn from top to bottom in accordance with the positional relationship indicated in the component information.
206. And converting the first component tree into a second component tree, and matching corresponding data and interface capacity for the second component tree to obtain a target page.
Specifically, a plurality of page components, nodes and data structures in the first component tree are analyzed to obtain an analysis result, and the plurality of page components are converted into a plurality of target components in the analysis result, wherein the target components are Flutter components. Returning the converted analysis result according to a preset data format to obtain a second component tree, wherein nodes in the second component tree comprise component elements corresponding to the target component, and the component elements at least comprise: component type, spacing, size, content, etc. Still taking the page of the application as an example, as shown in fig. 2C, the whole target page container includes a stack-header, a row-dialog box, a column-picture, a row-notification box, and a row-sharing box, where the header includes an icon-cross and a text-title, the dialog box includes an image-avatar and a text-dialog content, and the sharing box includes an icon-WeChat icon and an icon-QQ icon. And finally, after the Flutter client side takes the tree data, recursively adding and drawing the components according to the tree component data to obtain a target page.
Since the Flutter has the cross-platform capability of crossing multiple ends of PC, linux, android, iOS and Web, and has the capability of multi-platform consistency and performance comparable to the native capability based on the self-drawing characteristic, an application page capable of cross-platform operation is built.
According to the method provided by the embodiment of the application, the background system acquires the construction information of the target page designed by related workers, and the target document library is generated according to the construction information, wherein the target document library comprises a plurality of page components which the target page should have and interaction information among the plurality of page components. And then, the background system combines a plurality of page components in the target component library with the template codes to generate a page configuration file of the target page, and stores the page configuration file to the file server. And then, the server responds to the user to trigger an entrance for entering the target page, calls an interface to send an information acquisition request to the file server, and acquires the page configuration file stored in the background system from the file server. And drawing the first component tree from top to bottom according to the component information in the page configuration file. Further, the first component tree is converted into a second component tree with cross-platform characteristics, wherein each tree node in the second component tree corresponds to a Flutter component with cross-platform characteristics. And finally, matching corresponding data and interface capacity for the second component tree to obtain a target page for displaying. The server side reads the corresponding page configuration file after entering the target page, the corresponding target page can be generated after being analyzed by the local rendering engine, the target page construction speed is improved, and the multi-platform page construction efficiency is improved by utilizing the characteristics of cross-platform and good performance of the Flutter component.
Further, as a specific implementation of the method shown in fig. 1A, an embodiment of the present application provides an application page building apparatus, as shown in fig. 3A, the apparatus includes: a first generation module 301, a second generation module 302 and a storage module 303.
The first generating module 301 is configured to obtain construction information of a target page, and generate a target component library according to the construction information, where the target component library includes a plurality of page components corresponding to the target page and interaction information of the plurality of page components;
the second generating module 302 is configured to combine the plurality of page components in the target component library with the template code to generate a page configuration file;
the storage module 303 is configured to store the page configuration file in 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.
In a specific application scenario, the first generating module 301 is configured to determine, in response to a design confirmation instruction that a user triggers the target page, a first page component in a main design area, where the first page component is a page component existing in the main design area; identifying an interactive function stored in the first page component, and determining a second page component indicated by the interactive function, wherein the interactive function comprises: one or more of audio and video playing, page sliding, in-page animation, form collection, carousel pictures and list display; generating interactive information corresponding to the first page component according to the first page component, the interactive function and a second page component indicated by the interactive function; traversing all first page assemblies in the main design area to obtain interactive information corresponding to all the first page assemblies, and aggregating the interactive information corresponding to all the first page assemblies to obtain page construction information.
In a specific application scenario, the second generating module 302 is configured to determine, for each page component in the multiple page components, a sub-template code corresponding to the page component, and combine the page component with the sub-template code; and respectively combining each page assembly in the plurality of page assemblies with the corresponding sub-template code to generate the page configuration file.
Further, as a specific implementation of the method shown in fig. 1C, an embodiment of the present application provides an application page constructing apparatus, as shown in fig. 3B, the apparatus includes: a calling module 304, an obtaining module 305, and a rendering module 306.
The calling module 304 is configured to respond to an entry triggered by a user 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;
the obtaining module 305 is configured to obtain a page configuration file generated by a background system according to the target file address;
the rendering module 306 is configured to render the page configuration file to obtain the target page.
In a specific application scenario, the rendering module 306 is configured to draw, from top to bottom, a first component tree according to component information indicated in the page configuration file, where the component information includes a plurality of page components and interaction information corresponding to the plurality of page components, and each tree node in the first component tree corresponds to one page component; and converting the first component tree into a second component tree, matching corresponding data and interface capacity for the second component tree to obtain the target page, wherein each tree node in the second component tree corresponds to one Flutter component.
In a specific application scenario, the rendering module 306 is configured to parse a plurality of page components, nodes, and data structures in the first component tree to obtain a parsing result, and convert the plurality of page components into the plurality of target components in the parsing result, where the target components are the Flutter components;
returning the converted analysis result according to a preset data format to obtain the second component tree, wherein nodes in the second component tree comprise component elements corresponding to the target component, and the component elements at least comprise: component type, spacing, size, content.
The page is dynamically issued and configured through the server side, the front end does not need to issue the version, and the page is dynamically rendered through the rendering engine. Dynamic data sources can also be configured to bind data to corresponding components through interfaces or other data sources to obtain stronger component behaviors and interaction control capability.
According to the device provided by the embodiment of the application, the background system acquires the construction information of the target page designed by related workers, and the target document library is generated according to the construction information, wherein the target document library comprises a plurality of page components which the target page should have and interaction information among the plurality of page components. And then, the background system combines a plurality of page components in the target component library with the template codes to generate a page configuration file of the target page, and stores the page configuration file to the file server. And then, the server responds to the user to trigger an entrance of the target page, calls an interface to send an information acquisition request to the file server, and acquires the page configuration file stored in the background system from the file server. And drawing the first component tree from top to bottom according to the component information in the page configuration file. Further, the first component tree is converted into a second component tree with cross-platform characteristics, wherein each tree node in the second component tree corresponds to a Flutter component with cross-platform characteristics. And finally, matching corresponding data and interface capacity for the second component tree to obtain a target page for displaying. The server side reads the corresponding page configuration file after entering the target page, the corresponding target page can be generated after being analyzed by the local rendering engine, the target page construction speed is improved, and the multi-platform page construction efficiency is improved by utilizing the characteristics of cross-platform and good performance of the Flutter component.
It should be noted that other corresponding descriptions of the functional units related to the application page constructing apparatus provided in the embodiment of the present application may refer to the corresponding descriptions in fig. 1A to 1C and fig. 2A to 2C, and are not repeated herein.
In an exemplary embodiment, referring to fig. 4, there is further provided a device including a communication bus, a processor, a memory, and a communication interface, and further including an input/output interface and a display device, wherein the functional units may communicate with each other through the bus. The memory stores computer programs, and the processor is used for executing the programs stored in the memory and executing the application page construction method in the embodiment.
A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the application page construction method.
Through the description of the above embodiments, those skilled in the art can clearly understand that the present application can be implemented by hardware, and can also be implemented by software plus a necessary general hardware platform. Based on such understanding, the technical solution of the present application may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (which may be a CD-ROM, a usb disk, a removable hard disk, or the like), and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, or the like) to execute the method described in the implementation scenarios of the present application.
Those skilled in the art will appreciate that the figures are merely schematic representations of one preferred implementation scenario and that the blocks or flow diagrams in the figures are not necessarily required to practice the present application.
Those skilled in the art will appreciate that the modules in the devices in the implementation scenario may be distributed in the devices in the implementation scenario according to the description of the implementation scenario, or may be located in one or more devices different from the present implementation scenario with corresponding changes. The modules of the implementation scenario may be combined into one module, or may be further split into a plurality of sub-modules.
The above application serial numbers are for description purposes only and do not represent the superiority or inferiority of the implementation scenarios.
The above disclosure is only a few specific implementation scenarios of the present application, but the present application is not limited thereto, and any variations that can be made by those skilled in the art are intended to fall within the scope of the present application.

Claims (10)

1. An application page construction method is applied to a background system and comprises the following steps:
acquiring construction information of a target page, and generating a target component library according to the construction information, wherein the target component library comprises a plurality of page components corresponding to the target page and interaction information of the plurality of page components;
combining the plurality of page components in the target component library with template codes to generate a page configuration file;
and storing the page configuration file to a file server so that the server generates a target page in the file server based on the page configuration file.
2. The method according to claim 1, wherein the obtaining of the construction information of the target page comprises:
responding to a design confirmation instruction of triggering the target page by a user, and determining a first page component in a main design area, wherein the first page component is a page component existing in the main design area;
identifying an interactive function stored in the first page component, and determining a second page component indicated by the interactive function, wherein the interactive function comprises: one or more of audio and video playing, page sliding, in-page animation, form collection, carousel pictures and list display;
generating interactive information corresponding to the first page component according to the first page component, the interactive function and a second page component indicated by the interactive function;
traversing all first page assemblies in the main design area to obtain interactive information corresponding to all the first page assemblies, and aggregating the interactive information corresponding to all the first page assemblies to obtain page construction information.
3. The method of claim 1, wherein combining the plurality of page components in the target component library with template code to generate a page profile comprises:
for each page assembly in the multiple page assemblies, determining a sub-template code corresponding to the page assembly, and combining the page assembly with the sub-template code;
and respectively combining each page assembly in the plurality of page assemblies with the corresponding sub-template code to generate the page configuration file.
4. An application page construction method is applied to a server and comprises the following steps:
responding to an instruction of a user for entering 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 sending the target file address to the server;
acquiring a page configuration file generated by a background system according to the target file address;
and rendering the page configuration file to obtain the target page.
5. The method of claim 4, wherein the rendering the page configuration file to obtain the target page comprises:
drawing a first component tree from top to bottom according to indicated component information in the page configuration file, wherein the component information comprises a plurality of page components and interaction information corresponding to the page components, and each tree node in the first component tree corresponds to one page component;
and converting the first component tree into a second component tree, matching corresponding data and interface capacity for the second component tree to obtain the target page, wherein each tree node in the second component tree corresponds to one Flutter component.
6. The method of claim 5, wherein converting the first component tree into a second component tree comprises:
analyzing a plurality of page components, nodes and data structures in the first component tree to obtain an analysis result, and converting the plurality of page components into a plurality of target components in the analysis result, wherein the target components are the Flutter components;
returning the converted analysis result according to a preset data format to obtain the second component tree, wherein nodes in the second component tree comprise component elements of corresponding target components, and the component elements at least comprise: component type, spacing, size, content.
7. An application page building device, which is applied to a background system, includes:
the first generation module is used for acquiring construction information of a target page and generating a target component library according to the construction information, wherein the target component library comprises a plurality of page components corresponding to the target page and interaction information of the page components;
the second generation module is used for combining the plurality of page components in the target component library with the template codes to generate a page configuration file;
and the storage module is used for storing the page configuration file to a file server so that a server side can obtain the page configuration file in the file server and generate a target page based on the page configuration file.
8. An application page constructing device, applied to a back server, comprising:
the calling module is used for responding to an instruction of a user for entering 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;
the acquisition module is used for acquiring a page configuration file generated by a background system according to the target file address;
and the rendering module is used for rendering the page configuration file to obtain the target page.
9. A computer device comprising a memory and a processor, the memory storing a computer program, wherein the processor when executing the computer program performs the steps of the method according to any of claims 1 to 6.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 6.
CN202211114619.6A 2022-09-14 2022-09-14 Application page construction method and device, computer equipment and readable storage medium Pending CN115373673A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211114619.6A CN115373673A (en) 2022-09-14 2022-09-14 Application page construction method and device, computer equipment and readable storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211114619.6A CN115373673A (en) 2022-09-14 2022-09-14 Application page construction method and device, computer equipment and readable storage medium

Publications (1)

Publication Number Publication Date
CN115373673A true CN115373673A (en) 2022-11-22

Family

ID=84071458

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211114619.6A Pending CN115373673A (en) 2022-09-14 2022-09-14 Application page construction method and device, computer equipment and readable storage medium

Country Status (1)

Country Link
CN (1) CN115373673A (en)

Similar Documents

Publication Publication Date Title
CN108304201B (en) Object updating method, device and equipment
CN111428177A (en) Method and system for WEB content generation
CN110543297B (en) Method and apparatus for generating source code
CN112100550A (en) Page construction method and device
CN109815119B (en) APP link channel testing method and device
CN110825618A (en) Method and related device for generating test case
CN107276842B (en) Interface test method and device and electronic equipment
CN111818123A (en) Network front-end remote playback method, device, equipment and storage medium
CN113505082B (en) Application program testing method and device
CN110263070A (en) Event report method and device
CN105868225A (en) Data query method, client, server and system
CN113703785A (en) Component-based platform deployment method, device, equipment and storage medium
CN110955409B (en) Method and device for creating resources on cloud platform
CN114594927A (en) Low code development method, device, system, server and storage medium
WO2022228156A1 (en) Policy orchestration processing method, apparatus, device and system and storage medium
CN113778897B (en) Automatic test method, device and equipment for interface and storage medium
CN113962597A (en) Data analysis method and device, electronic equipment and storage medium
WO2021129812A1 (en) Method and system for running artificial intelligence application, and device
CN113836014A (en) Interface testing method and device, electronic equipment and storage medium
CN112667517A (en) Method, device, equipment and storage medium for acquiring automatic test script
CN113448569A (en) Site page processing system, method, equipment and storage medium
CN113448845A (en) UI automation test method and system
CN115373673A (en) Application page construction method and device, computer equipment and readable storage medium
CN112114805B (en) Page generation method, device and equipment
CN113961279A (en) Page rendering method, device, server and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination