Multi-terminal low-code front-end page rapid development method
Through the low-code front-end page rapid development method, the problem of front-end page development and adaptation on multi-terminal platforms is solved, rapid development and multi-terminal adaptation are achieved, cost and time are reduced, efficiency is improved, and complex interfaces and personalities are supported. needs.
Patent Information
- Application Number
- CN202411512413.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-28
- Publication Date
- 2025-01-24
AI Technical Summary
The prior art is difficult to quickly develop and adapt front-end pages on multi-terminal platforms, resulting in high development costs, low efficiency, and inability to meet the needs of complex interfaces and specific terminals.
By defining page adaptation platforms, selecting page framework expression forms, automatic acquisition and defining interface elements, automatic generating page expression forms, adjusting code and tool page, debugging and publishing, the rapid development and multi -terminal adaptation of low code front page.
The rapid development and adaptation of the front -end pages on multi -terminal platforms, reducing development costs and time, improving efficiency, and supporting the realization of complex interface and personalized needs.
Smart Images
Figure CN119356661A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of front-end development technology, and in particular to a method for rapid development of multi-terminal low-code front-end pages. Background Art
[0002] In the process of enterprise application development, due to the different application scenarios of different positions, a system application often needs to develop programs that meet the needs of multiple terminals such as desktop computers, tablets and mobile phones. To develop the mobile terminal, either directly develop it, which is a lot of work, or use PC-compatible HTML5. The complex format is not well adapted and the program interface performance is limited.
[0003] Most of the existing software development that is adapted to multiple terminals is done by developing a separate set of interfaces for each different terminal, such as desktops, tablets, mobile terminals, and smart terminals, to meet the display requirements and technical adaptation of different terminals. Most terminal pages are actually the same, but they require different technical platforms, such as HarmonyOS, Android, and iOS technical development languages and tools for mobile terminals. The workload is repetitive and different tool environments need to be mastered for different platforms.
[0004] One technical route is to adopt the HTM5 language and the universal template platform, using a set of language to meet the needs of multiple terminals, but there are problems such as interface size mismatch and the inability to display complex interfaces; only fixed-format pages can be used, and some complex application scenarios cannot be expressed, and rich interface expression capabilities cannot be displayed, which cannot meet the actual needs of customers, sacrificing the convenience of interactive operations, multi-element display capabilities and aesthetic expression; in addition, some specific mobile applications and smart terminals cannot be met, such as DingTalk, Enterprise WeChat, and car terminals, which still need to be redeveloped and the existing interface design cannot be reused. Summary of the invention
[0005] The purpose of the present invention is to provide a method for rapid development of multi-terminal low-code front-end pages to solve the problems raised in the above-mentioned background technology.
[0006] In order to solve the above technical problems, the purpose of the present invention is to provide a method for rapid development of multi-terminal low-code front-end pages, comprising the following steps: S1. Define the page adaptation platform: clarify the page adaptation requirements of different devices and operating systems; S2. Select the page frame form: select the appropriate page frame form according to project requirements and design style; S3. Automatically obtain and define interface elements: sort out the elements in the interface and automatically lay them out according to element types; S4. Define the page presentation format that needs to be automatically generated on the platform: select different templates based on the elements in the interface; S5. Adjust the code and tool pages as needed: adjust the code and tool pages according to the actual situation to optimize the page functions and performance; S6. Debug and release execution: Debug the page thoroughly to ensure there are no errors before releasing it for execution.
[0007] As a further improvement of the present technical solution, the adaptation platforms in S1 include mobile terminals, desktops and tablets, and the mobile terminals include Android, iOS and HarmonyOS.
[0008] As a further improvement of the present technical solution, in S2, the corresponding page presentation form is selected according to the predefined template, and the page templates are divided according to the interactive presentation form of the page. The page templates include single table, list, master-slave, tree, multiple tabs, large screen, approval opinions, process, home page, query and file processing.
[0009] As a further improvement of the technical solution, new templates can be added in S2, and the new templates are generated by freely combining predetermined templates and code writing. All page templates can be locally adjusted at the code and pixel level.
[0010] As a further improvement of the present technical solution, the S3 automatically obtains the elements required by the existing interface, database objects and tool definition pages, including fields, buttons, pictures and titles, which are divided into four categories according to the element type: single table, multiple columns, tree structure and others. Algorithms for automatic layout of corresponding data fields in the interface are provided respectively, and are automatically allocated in proportion according to the desktop that needs to be adapted.
[0011] As a further improvement of the present technical solution, S4 presets a template for generating codes according to the page elements sorted out in S3, and generates page codes according to configuration requirements and platform technical requirements.
[0012] As a further improvement of the technical solution, when a new supported operating platform is added in S4, a generation script of the corresponding platform language code is added for expansion.
[0013] As a further improvement of the present technical solution, in S5, based on the actual application scenario, the sub-elements of the page are replaced by tools and codes, and the sub-elements include visual elements, interactive elements and structural elements.
[0014] As a further improvement of the present technical solution, in S5, the visual elements include fields, buttons, pictures and titles, the interactive elements include links, form elements, animations and special effects, and the structural elements include containers and layout elements.
[0015] As a further improvement of the technical solution, after debugging in S6, the configuration definition file is packaged and the page code is released.
[0016] Compared with the prior art, the beneficial effects of the present invention are as follows: in the multi-terminal low-code front-end page rapid development method, by separating the front-end data and display style, and then dividing the display style into a framework structure, and then developing general templates and definition tools for configuration according to different page presentation requirements, finally, according to the predefined data and templates, the corresponding front-end interface is automatically generated. In case of particularly complex structures, the templates can be customized and the structure library can be improved. It also supports local low-code fine-tuning to meet personalized needs. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] Figure 1 The figure is a flow chart of the method of the present invention. DETAILED DESCRIPTION
[0018] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.
[0019] like Figure 1 As shown, this embodiment provides a multi-terminal low-code front-end page rapid development method, including the following steps: S1. Define the page adaptation platform: clarify the page adaptation requirements of different devices and operating systems; S2. Select the page frame form: select the appropriate page frame form according to project requirements and design style; S3. Automatically obtain and define interface elements: sort out the elements in the interface and automatically lay them out according to element types; S4. Define the page presentation format that needs to be automatically generated on the platform: select different templates based on the elements in the interface; S5. Adjust the code and tool pages as needed: adjust the code and tool pages according to the actual situation to optimize the page functions and performance; S6. Debug and release execution: Debug the page thoroughly to ensure there are no errors before releasing it for execution.
[0020] Analyze the front-end page and split it into interface data and interface style. The interface data will not change, but the page style will change according to different display requirements and will be adjusted according to the terminal platform where it needs to be displayed. Therefore, a corresponding style parsing method can be established to dynamically generate the page to be displayed based on the page data and the style to be displayed.
[0021] First, divide the pages to be developed into page elements (fields) and page styles to adapt to the terminal type; then, according to the common page field expressions, divide them into single objects, master-slave objects, and other three categories of field modes; then, according to the common interface expression structure, summarize the interface style framework to form single pages, composite pages, queries, special processing and other types, and define related generation page templates; secondly, define the terminal content that needs to be adapted, such as desktop, mobile, tablet, etc., and expand as needed; finally, design definition tools and parsing tools, according to the defined content, according to the fields to be displayed and the generation of specific page displays, including local adjustment code maintenance, automatically generate related pages, so that most common pages can be generated as needed. If you encounter a unique new style, you can summarize and abstract a new template, and individual local adjustments can be replaced by local code embedding. Through this method, you can solve the initial different terminals, different pages are automatically generated, and solve the rapid generation of low-cost complex pages.
[0022] In this embodiment, the adaptation platforms in S1 include mobile terminals, desktops and tablets, and the mobile terminals include Android, iOS and HarmonyOS. It is necessary to understand the screen size, resolution, pixel density and other characteristics of different platforms in order to determine the best display method of the page on each platform. At the same time, consider the compatibility issues of different browsers to ensure that the page can be displayed and interacted normally on mainstream browsers. Further consideration can be given to adapting to DingTalk or WeChat for Enterprise. Subsequently, based on different platforms, page codes for adaptation to related operations can be generated. It can also be further expanded to add new platform support as needed.
[0023] In this embodiment, S2 selects the corresponding page presentation form according to the predefined template, and divides the page template according to the interactive presentation form of the page. The page templates include single table, list, master-slave, tree, multiple tabs, large screen, approval opinion, process, home page, query and file processing. The single table page template presents data in a concise and intuitive single table form, which is suitable for situations where the data volume is relatively small and the structure is relatively simple. Users can easily browse and edit the data content in the single table, and quickly locate the required information through a clear row and column layout; the list page template displays the data in the form of entries, and each piece of data usually contains a summary of key information. Users can quickly scan the list to find a specific entry. With filtering, sorting and other functions, it is possible to manage large amounts of data more efficiently; the master-detail page template consists of a master table and a detail table. The master table displays the main information, and the detail table is associated with and displays detailed content related to the master table. This template is suitable for data with hierarchical relationships. Users can quickly switch to view different detail table data through the master table to achieve a clear presentation of complex data relationships; the tree page template displays the hierarchical relationship of data in a tree structure. Users can expand or collapse nodes and gradually gain a deeper understanding of the detailed structure of the data. It is suitable for information display with hierarchical classification, such as organizational structures, file directories, etc.; the multi-tab page template allows users to switch to different content pages through multiple tabs in the same window. Each tab can Display different types of data or functional modules to facilitate users to quickly switch between different tasks and improve operational efficiency; the large-screen page template is designed for large-screen display, with eye-catching visualization effects and dynamic data updates. It is suitable for monitoring centers, data display halls and other scenarios, and can intuitively present key indicators and trends; the approval opinion page template is used to display opinions and feedback in the approval process, clearly listing the opinion content, approvers and approval time of each approval link, so that users can understand the approval progress and results, and also provide a reference for approval decisions; the process page template displays each link and status of the business process in the form of a flowchart, and users can intuitively understand the direction of the process and the current at each stage, making it easy to track and manage the execution of business processes; as the entry page of the system, the home page template integrates quick entry to key information, important notifications, common function modules, etc., and provides users with a one-stop navigation service with a concise and clear layout, allowing users to quickly enter the required functional area; the query page template provides powerful query functions, and users can quickly retrieve the required data by entering various query conditions. The query results are displayed in a list or other suitable form, which is convenient for users to further view and process; the file processing page template is used for file upload, download, edit, view and other operations, providing convenient file management functions to ensure that users can efficiently process various types of files.
[0024] Furthermore, S2 can also add new templates, which are generated by freely combining pre-set templates and writing codes. Developers can use programming languages to customize development according to specific design requirements and functional requirements to achieve unique page interaction effects and functions. New templates are added to the module library for selection. All page templates can be adjusted locally at the code and pixel level. For example, the color, size, and position of a button can be adjusted, or the column width, row height, and font of a specific table can be modified. In this way, users can highly customize the page to fully meet their own aesthetic and functional needs.
[0025] In this embodiment, S3 automatically obtains the elements required by the existing interface, database objects and tool definition pages, and the elements include fields, buttons, pictures and titles. They are divided into four categories according to the element type: single table, multiple columns, tree structure and others. An algorithm for automatic layout of corresponding data fields in the interface is provided respectively, and they are automatically distributed in proportion according to the desktop that needs to be adapted; for single-table type elements, the algorithm will reasonably arrange the display position and width of the fields according to the structure and data volume of the table to ensure that the data can be presented clearly and completely; for multi-column type elements, the algorithm will consider the proportional relationship and alignment between columns to make the page layout more beautiful and coordinated; for tree structure type elements, the algorithm will automatically adjust the node expansion method and layout according to the tree level and the number of nodes to facilitate user browsing and operation; and for other types of elements, the system will also use appropriate layout algorithms for processing according to their specific attributes and functions.
[0026] Specifically, S4 needs to adapt the templates based on the page elements sorted out in S3, preset the templates for generating code, and generate page code according to the configuration requirements and platform technical requirements. The configuration requirements may include parameters such as the function settings, data sources, and permission management of the page. The platform technical requirements involve the technical specifications of the development platform, programming language, database, etc. used. In the process of generating code, these requirements need to be strictly followed to ensure that the generated page code can run correctly on the target platform and meet the various needs of users.
[0027] Specifically, when a new supported operating platform is added in S4, a generation script of the corresponding platform language code is added for expansion.
[0028] In addition, S5 uses tools and codes to replace sub-elements of the page based on actual application scenarios. Sub-elements include visual elements, interactive elements, and structural elements. For example, it can be large-scale, such as replacing sub-elements and directly introducing handwritten code from the page, or small-scale, such as fine-tuning and redefining the size and color of a field, leaving enough room for personalization.
[0029] It is worth noting that in S5, visual elements include fields, buttons, pictures and titles. Fields include input fields and display fields. Input fields include text input boxes, drop-down menus, radio buttons, check boxes, etc., which are used to receive data input by users. Display fields include text, numbers, dates, etc., which are used to display specific information content. Buttons include operation buttons and navigation buttons. Operation buttons include submit buttons, cancel buttons, confirm buttons, etc., which are used to trigger specific operations or functions. Navigation buttons include back buttons, forward buttons, menu buttons, etc., which are used to navigate between pages. Pictures include decorative pictures and functional pictures. Decorative pictures are used to beautify pages and enhance visual effects. Functional pictures include product pictures, icons, etc., which are used to convey specific information. The page title is used to summarize the theme or content of the page, and the subtitle is used to further subdivide the content of the page or provide more information; the interactive elements include links, form elements, animations and special effects. Links include internal links and external links. Internal links are used to navigate within the page and connect to different parts or functions. External links are used to jump to other websites or resources. Form elements include labels, prompts, error prompts, etc., which are used to guide users to fill in the form correctly and provide feedback. Animations and special effects are used to enhance the interactivity and attractiveness of the page, such as mouse hover effects, transition animations, loading animations, etc.; structural elements include containers and layout elements. Containers are used to organize and layout elements of the page, such as div tags, tables, lists, etc. Containers can also contain other sub-elements to form a hierarchical structure. Layout elements are used to control elements of the page layout, such as grid systems, floating layouts, elastic layouts, etc. Layout elements determine the position and size of each sub-element on the page.
[0030] It is worth noting that comprehensive testing is required during debugging, including functional testing, compatibility testing, performance testing, etc., to ensure that the page can run normally in various environments. The page will then be deployed to the corresponding server or platform so that it can be accessed by users. During the publishing process, attention must be paid to security issues to ensure that the page data and user information are properly protected. After debugging in S6, package the configuration definition file and publish the page code to meet the corresponding operating platform and usage needs.
[0031] The above shows and describes the basic principles, main features and advantages of the present invention. Those skilled in the art should understand that the present invention is not limited by the above embodiments. The above embodiments and descriptions are only preferred examples of the present invention and are not intended to limit the present invention. Without departing from the spirit and scope of the present invention, the present invention may have various changes and improvements, which fall within the scope of the present invention. The scope of protection of the present invention is defined by the attached claims and their equivalents.
Claims
1. A multi-terminal low-code front-end page rapid development method, characterized in that: The steps include: S1. Define the page adaptation platform: clarify the page adaptation requirements of different devices and operating systems; S2. Select the page frame form: select the appropriate page frame form according to project requirements and design style; S3. Automatically obtain and define interface elements: sort out the elements in the interface and automatically lay them out according to element types; S4. Define the page presentation format that needs to be automatically generated on the platform: select different templates based on the elements in the interface; S5. Adjust the code and tool pages as needed: adjust the code and tool pages according to the actual situation to optimize the page functions and performance; S6. Debug and release execution: Debug the page thoroughly to ensure there are no errors before releasing it for execution.
2. The multi-terminal low-code front-end page rapid development method according to claim 1 is characterized by: The compatible platforms in the S1 include mobile terminals, desktops and tablets, and the mobile terminals include Android, iOS and HarmonyOS.
3. The multi-terminal low-code front-end page rapid development method according to claim 1 is characterized by: In S2, the corresponding page presentation form is selected according to the predefined template, and the page templates are divided according to the interactive presentation form of the page. The page templates include single table, list, master-slave, tree, multiple tabs, large screen, approval opinions, process, home page, query and file processing.
4. The multi-terminal low-code front-end page rapid development method according to claim 3 is characterized by: In the S2, new templates can also be added, and the new templates are generated by freely combining predetermined templates and code writing. All page templates can be locally adjusted at the code and pixel level.
5. The multi-terminal low-code front-end page rapid development method according to claim 1 is characterized by: The S3 automatically obtains the elements required by the existing interface, database objects and tool definition pages, including fields, buttons, pictures and titles, and is divided into four categories according to the element type: single table, multiple columns, tree structure and others. It provides algorithms for automatic layout of corresponding data fields in the interface, and automatically distributes them in proportion according to the desktop that needs to be adapted.
6. The multi-terminal low-code front-end page rapid development method according to claim 5 is characterized by: The S4 presets a template for generating codes according to the page elements sorted out in the S3, and generates page codes according to configuration requirements and platform technical requirements.
7. The multi-terminal low-code front-end page rapid development method according to claim 6 is characterized by: When a new supported operating platform is added in S4, a generation script of the corresponding platform language code is added for expansion.
8. The multi-terminal low-code front-end page rapid development method according to claim 1 is characterized by: In S5, based on the actual application scenario, the sub-elements of the page are replaced by using tools and codes, and the sub-elements include visual elements, interactive elements and structural elements.
9. The multi-terminal low-code front-end page rapid development method according to claim 8 is characterized by: In S5, visual elements include fields, buttons, pictures and titles, interactive elements include links, form elements, animations and special effects, and structural elements include containers and layout elements.
10. The multi-terminal low-code front-end page rapid development method according to claim 1 is characterized by: After debugging in S6, the configuration definition file is packaged and the page code is released.