Cross-platform front-end code adaptive generation method and system

Abstract

The invention provides a cross-platform front-end code self-adaptive generation method and system, and belongs to the field of computers.The method comprises the steps that S1, device information input by a user, required parameterized component information, design parameters and platform information are received, page layout, style and functions are determined, and an editable front-end preview interface is generated; adjusting required parameterized component information, design parameters, platform information, page layout and style according to the editable front-end preview interface, and generating a configuration file of a front-end page code; s2, front-end page codes suitable for various platforms are generated according to the configuration file; s3, the front-end page code is improved and edited in a customized mode, and the final front-end page code is generated to the user. According to the method, on the basis of meeting the personalized editing requirements of the user, the professional requirement, the workload and the time cost of developers in the front-end code generation process are reduced, and the flexibility degree, the intelligent degree and the automation degree of front-end code generation are improved.

Description

Technical Field

[0001] The present invention belongs to the field of computers, and in particular relates to a cross-platform front-end code adaptive generation method and system. Background Art

[0002] In the current multi-platform front-end development process, companies or developers usually need to double the workload and development costs if they want to develop and maintain multiple platforms, operating systems or browsers at the same time. Although there are existing compatibility solutions, they are generally used by browsers of various platforms through native front-end code. However, this usually leads to problems such as poor user experience and poor compatibility. With the popularity of different operating systems, different browsers and different devices, the compatibility of front-end pages on multiple platforms has become increasingly important. However, in order to ensure a good user experience on various platforms, developers need to carry out customized development and adjustments for each platform, which greatly increases the development, maintenance and operation costs of the product. Summary of the invention

[0003] In order to solve the above technical problems, the present invention provides a cross-platform front-end code adaptive generation method, comprising the following steps:

[0004] Step S1: receiving device information, required parameterized component information, design parameters and platform information input by a user; determining page layout, style and function according to the required parameterized component information, design parameters and platform information, and generating an editable front-end preview interface; adjusting the required parameterized component information, design parameters, platform information, page layout and style according to the editable front-end preview interface, and generating a configuration file for the front-end page code;

[0005] Step S2: Generate front-end page codes applicable to multiple platforms according to the configuration file;

[0006] Step S3: Customize, improve and edit the front-end page code to generate the final front-end page code for the user.

[0007] Beneficial effects:

[0008] The present invention provides a cross-platform front-end page code adaptive generation method, which generates corresponding basic page layout, style, component function and preview interface by user initialization input parameterized component information, design parameters and platform information. According to the editable front-end preview interface, the parameterized component information, design parameters, platform information, page layout and style are adjusted to generate a configuration file for the front-end code applicable to each platform. Developers can make customized modifications, business logic supplements and style layout adjustments on the front-end generation configuration files applicable to each platform, thereby making up for the shortcomings of poor user experience and inability to provide customized transformation on conventional cross-platform front-end code solutions. Usually, companies or developers need to increase the workload, learning cost and development cost by multiple times in order to develop and maintain the front-end codes of multiple platforms, operating systems or browsers at the same time. This method effectively solves the problems of large differences in engineering development modes of various platforms, different user experiences and difficult maintenance. The generated code is robust and standardized, which can effectively improve the user experience of developers. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] Figure 1 A schematic diagram of a cross-platform front-end code adaptive generation method of the present invention;

[0010] Figure 2 A cross-platform front-end code adaptively generates a basic information entry diagram for the present invention;

[0011] Figure 3 A cross-platform front-end code adaptively generates component parameterized information graphs of the present invention;

[0012] Figure 4 A cross-platform front-end code adaptive generation information configuration diagram of the present invention;

[0013] Figure 5 The present invention is a structural block diagram of a cross-platform front-end code adaptive generation system. DETAILED DESCRIPTION

[0014] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention. In addition, the technical features involved in the various embodiments of the present invention described below can be combined with each other as long as they do not conflict with each other.

[0015] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention. In addition, the technical features involved in the various embodiments of the present invention described below can be combined with each other as long as they do not conflict with each other.

[0016] Embodiment 1

[0017] like Figure 1 As shown, a cross-platform front-end code adaptive generation method provided by an embodiment of the present invention includes the following steps:

[0018] Step S1: receiving device information, required parameterized component information, design parameters and platform information input by a user; determining page layout, style and function according to the required parameterized component information, design parameters and platform information, and generating an editable front-end preview interface; adjusting the required parameterized component information, design parameters, platform information, page layout and style according to the editable front-end preview interface, and generating a configuration file for the front-end page code;

[0019] Step S2: Generate front-end page codes applicable to multiple platforms according to the configuration file;

[0020] In this step, after obtaining the front-end page code configuration file generated after the latest update, the front-end page code file suitable for each platform is generated by selecting the appropriate layout adaptation strategy, CSS and UI component dynamic adjustment, component and element adaptive rendering, performance optimization and caching strategy according to the different parameterized component information, design parameters and platform information in the configuration file.

[0021] Step S3: Customize, improve and edit the front-end page code, and generate the final front-end page code for the user.

[0022] In one embodiment, the above step S1: receiving and determining the page layout, style and function according to the parameterized component information, design parameters and platform information input by the user. Generating an editable front-end preview interface; adjusting the parameterized component information, design parameters, platform information, page layout and style according to the editable front-end preview interface to generate a configuration file of the front-end code, specifically includes:

[0023] The present invention can first collect the user's initialization parameter information including but not limited to device information, required parameterized component information, design parameters and platform information on the input interface of the application, so as to determine the page layout, style and function, so as to generate a preliminary editable preview interface; wherein, determining the page layout, style and function specifically includes:

[0024] Step S11: Analyze platform information, including: operating system, browser type, screen size;

[0025] Step S12: Determine the page layout, style and function using multi-platform compatibility design technology based on design parameters and platform information.

[0026] like Figure 2 As shown, first, the code generation software is used to receive basic information input by the user, including: code generation template name, basic device information such as Huawei Mate XT, screen resolution, screen size, platform information such as Huawei Hongmeng, and the path after code generation;

[0027] like Figure 3 As shown, the code generation software is used to receive the component parameterization information input by the user, such as the type of control: input box, calendar control, radio button, rich text editor, etc., the data type accepted by the control: String, DateTime, Integer, etc., whether it is editable, whether it is a required item. Design parameters such as whether it is a single-line display, whether it is a new line, whether the field verification is in the format of telephone, email, website, etc., whether uniqueness verification and alignment are required, etc. In addition, in this editable preview interface, users can drag and drop existing components and layouts, add, delete, modify, and copy existing components. Parameterized components are commonly used components written natively, such as buttons, forms, tree tables, lists, etc. By selecting the above components, you can customize the properties to meet business needs.

[0028] like Figure 4 As shown, according to the basic device information, component parameterization information, and design parameters configured by the user, check the front-end code files of the platform to be adapted, such as Hongmeng, IOS, Android, Windows, and Web browser PC.

[0029] The above operations will update the configuration files used to generate adaptive front-end page codes for each platform.

[0030] In one embodiment, the above step S2: generating front-end page codes applicable to multiple platforms according to the configuration file specifically includes:

[0031] Step S21: Device identification and parameter acquisition: Identify the type, resolution, and screen size of the current access device based on device information, design parameters, and platform information, including:

[0032] Step S211: selecting a suitable layout adaptation strategy according to the acquired device parameters; the layout adaptation strategy may include but is not limited to: responsive design, elastic layout, flow layout, etc.; each layout adaptation strategy is optimized for different device characteristics and display requirements;

[0033] Step S212: dynamically adjust and generate corresponding CSS style sheets according to the selected layout adaptation strategy. These style sheets can be generated using media queries, CSS variables or JavaScript to ensure good display effects on different devices.

[0034] The cross-platform front-end code adaptive generation method provided by the embodiment of the present invention can effectively improve the layout and style effects generated according to different devices, platforms, operating systems and browsers, improve the accuracy of adaptive code generation, and achieve multi-compatibility in cross-platform UI and style effects.

[0035] Step S22: parse the page layout and style to obtain the corresponding parameterized components and generate the initial front-end page code. The parameterized components are rich UI components and tools built using a unified UI framework, including buttons, forms, tree tables, and lists, so that developers can quickly build basic business requirements and functions, including:

[0036] Step S221: for the identified UI components and page elements, an adaptive rendering method is used to dynamically generate and adjust the position, size, display status and other attributes of the elements according to device parameters through flexible DOM operations and JavaScript logic;

[0037] Step S222: According to the parameters configured by the end user for the parameterized component, including: component size, color, binding event, and operation of the preceding event, the component codes corresponding to the respective parameterized components are finally determined.

[0038] The cross-platform front-end code adaptive generation method provided by the embodiment of the present invention can effectively identify the customized configuration of parameterized components through the front-end configuration file, and improve the standardization and consistency of the generated component code through a unified UI framework.

[0039] Step S23: Based on the parameterized components, the performance optimization and cache strategies of the initial front-end page code are performed according to different platforms to obtain the optimized front-end page code, which specifically includes:

[0040] Taking into account performance and user experience, the generated front-end page code is optimized, including but not limited to resource loading strategies, cache management, and asynchronous loading technology, to ensure fast loading and response under various network conditions and device environments.

[0041] Step S24: Generate corresponding front-end page codes adapted to multiple platforms based on the optimized front-end codes, specifically including:

[0042] Step S241: Integrate the HTML and CSS codes related to the layout generated by the layout adaptation strategy, the HTML, CSS and JS codes generated by the unified UI framework, parameterized components and their binding events, and optimize the front-end page code performance and the JS code of the strategy.

[0043] Step S242: Combine layout code, parameterized component code, performance optimization and strategy code, and finally generate a front-end page code that is editable by developers and is compatible with multiple platforms.

[0044] Specifically, the layout of the page is determined by initializing the device, design parameters and platform information, and the appropriate layout adaptation strategy is selected, including but not limited to responsive design, elastic layout, and streaming layout. Each strategy is optimized for different device characteristics and display requirements. And component code is generated through a unified UI framework and parameterized configuration of components. Finally, according to different platforms, performance optimization and caching strategies are combined to generate HTML, CSS, and JS front-end codes suitable for multiple platforms that can be edited and used by developers.

[0045] In one embodiment, the above step S3: customizing, improving and editing the front-end page code to generate the final front-end page code for the user specifically includes:

[0046] Users or developers can edit the generated front-end page code that is compatible with multiple platforms in the IDE integrated development environment to make customized modifications to the style, layout, and business logic; ultimately, the customized front-end page code can be put into production or development use.

[0047] Embodiment 2

[0048] like Figure 5 As shown, a cross-platform front-end code adaptive generation system provided by an embodiment of the present invention includes the following modules:

[0049] The front-end page code configuration file generation module 41 receives device information, required parameterized component information, design parameters and platform information input by the user; determines the page layout, style and function according to the required parameterized component information, design parameters and platform information, and generates an editable front-end preview interface; adjusts the required parameterized component information, design parameters, platform information, page layout and style according to the editable front-end preview interface, and generates a configuration file of the front-end page code;

[0050] Front-end page code generation module 42: generates front-end page codes applicable to multiple platforms according to the configuration file;

[0051] Front-end page code customization module 43: Customized improvement and editing of the front-end page code, generating the final front-end page code for the user.

[0052] Embodiment 3

[0053] An embodiment of the present invention provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, for implementing a cross-platform front-end code adaptive generation method, wherein the processor implements a cross-platform front-end code adaptive generation method of the present invention when executing the computer program.

[0054] Embodiment 4

[0055] An embodiment of the present invention also provides a computer-readable storage medium capable of implementing all the steps in the cross-platform front-end code adaptive generation method in the above-mentioned embodiment. A computer program is stored on the computer-readable storage medium. When the computer program is executed by a processor, it implements all the steps of the cross-platform front-end code adaptive generation method in the above-mentioned embodiment whose execution subject is a server or a client.

[0056] It should be understood by those skilled in the art that the embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes. The present invention is described with reference to the flowcharts and / or block diagrams of the methods, devices (devices), and computer program products according to the embodiments of the present invention. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, may be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the functions in the process. Figure 1 A process or multiple processes and / or boxes Figure 1 These computer program instructions can also be stored in a computer-readable memory that can guide a computer or other programmable data processing device to work in a specific way, so that the instructions stored in the computer-readable memory produce a product including an instruction device, which implements the functions specified in the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0057] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0058] The above description is only an implementation mode of the present invention, and does not limit the scope of the present invention. Any equivalent structure or equivalent process transformation made by using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the protection scope of the present invention.

Claims

1. A cross-platform front-end code adaptive generation method, characterized in that: The following steps are involved: Step S1: receiving device information, required parameterized component information, design parameters and platform information input by a user; determining the page layout, style and function according to the required parameterized component information, design parameters and platform information, and generating an editable front-end preview interface; Adjust the required parameterized component information, design parameters, platform information, page layout and style according to the editable front-end preview interface, and generate a configuration file for the front-end page code; Step S2: Generate front-end page codes applicable to multiple platforms according to the configuration file; Step S3: Customize, improve and edit the front-end page code to generate the final front-end page code for the user.

2. The cross-platform front-end code adaptive generation method according to claim 1, characterized in that: The step S1 of determining the page layout, style and function specifically includes: Step S11: Analyze platform information, including: operating system, browser type, screen size; Step S12: Determine the page layout, style and function using multi-platform compatibility design technology based on the design parameters and the platform information.

3. The cross-platform front-end code adaptive generation method according to claim 2, characterized in that: The step S2: generating front-end page codes applicable to multiple platforms according to the configuration file, specifically includes: Step S21: Device identification and parameter acquisition: Identify the type, resolution, and screen size of the current access device based on the device information, design parameters, and platform information; Step S22: parsing the page layout and style to obtain corresponding parameterized components and generating initial front-end page code, wherein the parameterized components are rich UI components and tools built using a unified UI framework, including buttons, forms, tree tables, and lists; Step S23: Based on the parameterized component, the performance optimization and cache strategy of the initial front-end page code are performed according to different platforms to obtain the optimized front-end page code; Step S24: Generate corresponding front-end page codes adapted to multiple platforms based on the optimized front-end codes.

4. A cross-platform front-end code adaptive generation system, characterized in that: Includes the following modules: Front-end page code configuration file generation module: receiving device information, required parameterized component information, design parameters and platform information input by the user; determining the page layout, style and function according to the required parameterized component information, design parameters and platform information, and generating an editable front-end preview interface; Adjust the required parameterized component information, design parameters, platform information, page layout and style according to the editable front-end preview interface, and generate a configuration file for the front-end page code; Front-end page code generation module: generates front-end page codes applicable to multiple platforms according to the configuration file; Front-end page code customization module: customizes, improves and edits the front-end page code, and generates the final front-end page code for the user.

5. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the cross-platform front-end code adaptive generation method described in any one of claims 1 to 3 is implemented.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the cross-platform front-end code adaptive generation method described in any one of claims 1 to 3 is implemented.

Images