CN113110829B - Multi-UI component library data processing method and device - Google Patents
Multi-UI component library data processing method and device Download PDFInfo
- Publication number
- CN113110829B CN113110829B CN202110417389.XA CN202110417389A CN113110829B CN 113110829 B CN113110829 B CN 113110829B CN 202110417389 A CN202110417389 A CN 202110417389A CN 113110829 B CN113110829 B CN 113110829B
- Authority
- CN
- China
- Prior art keywords
- component library
- component
- target
- configuration file
- page
- 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.)
- Active
Links
- 238000003672 processing method Methods 0.000 title claims description 28
- 238000013519 translation Methods 0.000 claims abstract description 33
- 238000012545 processing Methods 0.000 claims abstract description 27
- 238000000034 method Methods 0.000 claims abstract description 18
- 238000004590 computer program Methods 0.000 claims description 15
- 238000006243 chemical reaction Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 7
- 238000012790 confirmation Methods 0.000 claims description 6
- 230000010354 integration Effects 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 12
- 238000004891 communication Methods 0.000 description 16
- 230000006870 function Effects 0.000 description 13
- 238000010586 diagram Methods 0.000 description 10
- 230000000694 effects Effects 0.000 description 7
- 239000000872 buffer Substances 0.000 description 4
- 238000013461 design Methods 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 2
- 230000001413 cellular effect Effects 0.000 description 1
- 125000004122 cyclic group Chemical group 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 239000011521 glass Substances 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
- G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
-
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Stored Programmes (AREA)
Abstract
The embodiment of the application provides a method and a device for processing data of a multi-UI component library, which can also be used in the financial field, and the method comprises the following steps: receiving a page editing instruction based on an initial UI component library by a user, and generating a corresponding page configuration file; according to the page configuration file and a set UI component library translation model, UI component library codes corresponding to the target UI component library are obtained; the UI component library code translation method and the UI component library code translation device can obtain various UI component library codes through one-time development of the UI component library, and a large amount of manpower is saved when similar pages are developed in projects of the multi-component library.
Description
Technical Field
The application relates to the field of web page front ends and also can be used in the financial field, in particular to a multi-UI component library data processing method and device.
Background
In large applications, there are often situations where different subsystems use different UI component libraries for historical reasons, where the different UI component libraries are inconsistent in visual style by default.
In order to ensure consistent UI effects, in the prior art, a developer needs to use different UI components to restore design manuscripts in different subsystems, so that the situation that repeated development for multiple times is required to be developed for restoring the same design effect can be caused.
Disclosure of Invention
Aiming at the problems in the prior art, the application provides a multi-UI component library data processing method and device, which can obtain various UI component library codes through one-time development of the UI component library and translate, and save a great deal of manpower when developing similar pages in the projects of the multi-component library.
In order to solve at least one of the above problems, the present application provides the following technical solutions:
in a first aspect, the present application provides a multi-UI component library data processing method, including:
receiving a page editing instruction based on an initial UI component library by a user, and generating a corresponding page configuration file;
and obtaining UI component library codes corresponding to the target UI component library according to the page configuration file and the set UI component library translation model.
Further, the obtaining the UI component library code corresponding to the target UI component library according to the page configuration file and the set UI component library translation model includes:
determining the component association relation between the page configuration file and the target UI component library according to the tag dictionary of the target UI component library;
determining the description attribute of each component in the target UI component library according to the component association relation and the component attribute conversion rule of the target UI component library;
and generating HTML texts of all the components according to the component association relation and the description attribute of each component, and integrating the HTML texts of all the components to obtain UI component library codes of the target UI component library.
Further, before the UI component library code corresponding to the target UI component library is obtained according to the page configuration file and the set UI component library translation model, the method further includes:
traversing the page configuration file according to the depth priority rule, and determining each layout component and sub-components of each layout component in the page configuration file.
Further, after the obtaining the UI component library code corresponding to the target UI component library, the method includes:
performing page rendering according to UI component library codes corresponding to the target UI component library to obtain corresponding preview pages and displaying the preview pages to the user;
and receiving a preview confirmation instruction of a user for the preview page, and exporting a UI component library code corresponding to the target UI component library for storage.
In a second aspect, the present application provides a multi-UI component library data processing device, including:
the page configuration module is used for receiving page editing instructions of a user based on the initial UI component library and generating corresponding page configuration files;
and the code translation module is used for obtaining UI component library codes corresponding to the target UI component library according to the page configuration file and a set UI component library translation model.
Further, the code translation module includes:
the tag identification unit is used for determining the component association relation between the page configuration file and the target UI component library according to the tag dictionary of the target UI component library;
the attribute generation unit is used for determining the description attribute of each component in the target UI component library according to the component association relation and the component attribute conversion rule of the target UI component library;
and the code integration unit is used for generating HTML texts of all the components according to the component association relation and the description attribute of each component, and integrating the HTML texts of all the components to obtain UI component library codes of the target UI component library.
Further, the method further comprises the following steps:
and the node traversing unit is used for traversing the page configuration file according to the depth priority rule and determining each layout component and sub-components of each layout component in the page configuration file.
Further, the method further comprises the following steps:
the page preview unit is used for performing page rendering according to the UI component library codes corresponding to the target UI component library to obtain corresponding preview pages and displaying the preview pages to the user;
and the code export unit is used for receiving a preview confirmation instruction of a user for the preview page, exporting a UI component library code corresponding to the target UI component library and storing the UI component library code.
In a third aspect, the present application provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, where the processor implements the steps of the multi-UI component library data processing method when the program is executed.
In a fourth aspect, the present application provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the multi-UI component library data processing method.
According to the technical scheme, the data processing method and the data processing device for the multi-UI component library are provided, through the page configuration file and the setting of the UI component library translation model, various different target UI component library codes can be obtained through one-time development and translation of the initial UI component library, and a large amount of manpower is saved when similar pages are developed in the projects of the multi-component library.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, and it is obvious that the drawings in the following description are some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flow chart of a method for processing data in a multi-UI component library according to an embodiment of the present application;
FIG. 2 is a second flow chart of a method for processing data in a multi-UI component library according to an embodiment of the present application;
FIG. 3 is a third flow chart of a method for processing data in a multi-UI component library according to an embodiment of the present application;
FIG. 4 is one of the block diagrams of a multi-UI component-library data processing apparatus in an embodiment of the present application;
FIG. 5 is a second block diagram of a multi-UI component-library data processing apparatus according to an embodiment of the present application;
fig. 6 is a schematic structural diagram of an electronic device in an embodiment of the present application.
Detailed Description
For the purposes of making the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present application.
In consideration of the problem that in the prior art, a developer needs to use different UI components to restore design manuscripts in different subsystems, so that repeated development needs to be developed for restoring the same design effect, the application provides a data processing method and device for multiple UI component libraries.
In order to translate multiple different UI component library codes through one development of the UI component library, and save a lot of manpower when developing similar pages in the projects of the multi-component library, the application provides an embodiment of a multi-UI component library data processing method, see fig. 1, where the multi-UI component library data processing method specifically includes the following contents:
step S101: and receiving page editing instructions of the user based on the initial UI component library, and generating a corresponding page configuration file.
Step S102: and obtaining UI component library codes corresponding to the target UI component library according to the page configuration file and the set UI component library translation model.
Optionally, the page layout is described in the form of a page configuration file, translation of multiple different target UI component libraries and parameterization description is achieved, editing and previewing for a user are achieved by using one UI component library as an initial UI component library, and after page editing is completed, the page configuration file is translated into native codes corresponding to multiple different target UI component libraries through setting a UI component library translation model.
Optionally, after receiving a page editing instruction based on the initial UI component library, the user changes the editing operation of the user on the page of the initial UI component library into editing of a page configuration file, that is, the page layout is embodied in the form of the page configuration file.
For example, the UI component library that the user needs to translate is ABC three, and the application may select one of the UI component libraries (for example, the a component library) as the initial UI component library for implementing editing preview, that is, the user uses the a component library to display when editing and previewing the page effect. After editing is completed, a configuration file describing the page is obtained, and then the configuration file is transferred into codes of corresponding different target UI component libraries (for example B, C) through setting a UI component library translation model.
Optionally, the setting UI component library translation model is configured to translate the configuration file of the description page into codes corresponding to different target UI component libraries.
As can be seen from the above description, the multi-UI component library data processing method provided by the embodiments of the present application can obtain multiple different target UI component library codes through one-time development of the initial UI component library by setting the UI component library translation model through the page configuration file, and save a lot of manpower when developing similar pages in the project of the multi-component library.
In order to accurately translate the page configuration file into different target UI component library codes, in an embodiment of the multi-UI component library data processing method of the present application, referring to fig. 2, the step S102 may further specifically include the following:
step S201: and determining the component association relation between the page configuration file and the target UI component library according to the tag dictionary of the target UI component library.
Optionally, there is an attribute called tag in the description information of each component in the page configuration file, which indicates the type of component currently described, for example, the tag of the button is button. For different target UI component libraries, the tag dictionary of each target UI component library is maintained in advance, for example, a tag in a configuration file is a component of a button, a corresponding component tag in an element-UI is named as an el-button, and an ant-design-vue is named as an a-button. And associating each component in the page configuration file with a corresponding component of the target UI component library, and designating a corresponding generation method for subsequent component attribute generation.
Step S202: and determining the description attribute of each component in the target UI component library according to the component association relation and the component attribute conversion rule of the target UI component library.
Optionally, after confirming the corresponding relation between the page configuration file and the components of the target UI component library through the above technical solution, different components respectively have their own attribute conversion methods, and attribute descriptions adapted to different component libraries are generated through these conversion methods. Also taking button as an example, the description attribute of the button size in the page configuration file is "size", the values can be three items of small, middle and large, after the button conversion of the element-ui component library, the attribute name is size, the values are converted into three items of mini, medium and null (default to null), and in the ant-design-vue, the values are converted into three items of attribute size, but the values are converted into small, default, large.
Step S203: and generating HTML texts of all the components according to the component association relation and the description attribute of each component, and integrating the HTML texts of all the components to obtain UI component library codes of the target UI component library.
Optionally, the present application may also generate a complete html text corresponding to the component by combining the component tag and the attribute, taking the button as an example, where the configuration file { "tag": "button", "size": "small", "label" } "and" cancel "}" are converted into the html text corresponding to the button component of the element-ui, where the html text is:
<el-button size＝"mini">cancel</el-button>
the html text converted into the corresponding button assembly in the ant-design-vue is as follows:
<a-button size＝"small">cancel</a-button>
if related data is needed in other components, for example, the form component must have initialized form data, the js generation module generates necessary data parts and refers the necessary data parts in html text.
Taking a Vue component as an example, the component file is formed by template, script and style, and the complete Vue component file is spliced by wrapping a plurality of fragments generated in the steps in corresponding labels (html part wraps a template label, js part wraps a script label, and style part defaults to be empty).
In order to fully determine all the components contained in the page configuration file, in an embodiment of the multi-UI component library data processing method of the present application, before the step S102, the following may be further specifically included:
traversing the page configuration file according to the depth priority rule, and determining each layout component and sub-components of each layout component in the page configuration file.
Optionally, after determining the page configuration file, the application may traverse the entire page configuration file in a depth-first traversal form, and because some components in the UI component library are layout components, such as forms and cards, and these components may include other UI components, when encountering a layout component, after generating the code of the layout component itself, the application may traverse its sub-components, and after traversing the entire configuration file in a cyclic manner, finally summarizing and combining the generated code segments.
In order to flexibly demonstrate the translation effect to the user, in an embodiment of the multi-UI component library data processing method of the present application, referring to fig. 3, after the step S102, the following may be further specifically included:
step S301: and performing page rendering according to the UI component library codes corresponding to the target UI component library to obtain corresponding preview pages and displaying the preview pages to the user.
Step S302: and receiving a preview confirmation instruction of a user for the preview page, and exporting a UI component library code corresponding to the target UI component library for storage.
Optionally, the application may perform page rendering according to the UI component library code corresponding to the target UI component library, display the translated code of the target UI component library, render the code as a preview page, and export a code file for use in the project after the user confirms the effect.
In order to translate multiple different UI component library codes through one development of the UI component library, and save a lot of manpower when developing similar pages in the projects of the multi-component library, the application provides an embodiment of a multi-UI component library data processing device for implementing all or part of the content of the multi-UI component library data processing method, see fig. 4, where the multi-UI component library data processing device specifically includes the following contents:
the page configuration module 10 is configured to receive a page editing instruction based on the initial UI component library from a user, and generate a corresponding page configuration file.
And the code translation module 20 is used for obtaining the UI component library code corresponding to the target UI component library according to the page configuration file and the set UI component library translation model.
As can be seen from the above description, the multi-UI component library data processing apparatus provided in the embodiments of the present application can obtain multiple different target UI component library codes through one-time development of the initial UI component library by setting the UI component library translation model through the page configuration file, and save a lot of manpower when developing similar pages in the project of the multi-component library.
In order to accurately translate the target UI component library codes according to the page configuration file, in an embodiment of the multi-UI component library data processing device of the present application, referring to fig. 5, the code translation module 20 includes:
and the tag identification unit 21 is used for determining the component association relation between the page configuration file and the target UI component library according to the tag dictionary of the target UI component library.
And the attribute generating unit 22 is used for determining the description attribute of each component in the target UI component library according to the component association relation and the component attribute conversion rule of the target UI component library.
And the code integration unit 23 is used for generating HTML texts of all the components according to the component association relation and the description attribute of all the components, and integrating the UI component library codes of the target UI component library according to the HTML texts of all the components.
In order to comprehensively determine all components contained in the page configuration file, in an embodiment of the multi-UI component library data processing device of the present application, the following is further specifically included:
and the node traversing unit is used for traversing the page configuration file according to the depth priority rule and determining each layout component and sub-components of each layout component in the page configuration file.
In order to flexibly show the translation effect to the user, in an embodiment of the multi-UI component library data processing device of the present application, the following is further specifically included:
the page preview unit is used for performing page rendering according to the UI component library codes corresponding to the target UI component library to obtain corresponding preview pages and displaying the preview pages to the user;
and the code export unit is used for receiving a preview confirmation instruction of a user for the preview page, exporting a UI component library code corresponding to the target UI component library and storing the UI component library code.
In order to obtain a plurality of different UI component library codes through one-time development of the UI component library and save a great deal of manpower when developing similar pages in the project of the multi-component library, the application provides an embodiment of an electronic device for realizing all or part of the contents in the multi-UI component library data processing method, wherein the electronic device specifically comprises the following contents:
a processor (processor), a memory (memory), a communication interface (Communications Interface), and a bus; the processor, the memory and the communication interface complete communication with each other through the bus; the communication interface is used for realizing information transmission between the multi-UI component library data processing device and related equipment such as a core service system, a user terminal, a related database and the like; the logic controller may be a desktop computer, a tablet computer, a mobile terminal, etc., and the embodiment is not limited thereto. In this embodiment, the logic controller may refer to an embodiment of the multi-UI component library data processing method in the embodiment and an embodiment of the multi-UI component library data processing apparatus, and the contents thereof are incorporated herein, and the repetition is omitted.
It is understood that the user terminal may include a smart phone, a tablet electronic device, a network set top box, a portable computer, a desktop computer, a Personal Digital Assistant (PDA), a vehicle-mounted device, a smart wearable device, etc. Wherein, intelligent wearing equipment can include intelligent glasses, intelligent wrist-watch, intelligent bracelet etc..
In practical application, part of the multi-UI component library data processing method may be executed on the electronic device side as described above, or all operations may be completed in the client device. Specifically, the selection may be made according to the processing capability of the client device, and restrictions of the use scenario of the user. The present application is not limited in this regard. If all operations are performed in the client device, the client device may further include a processor.
The client device may have a communication module (i.e. a communication unit) and may be connected to a remote server in a communication manner, so as to implement data transmission with the server. The server may include a server on the side of the task scheduling center, and in other implementations may include a server of an intermediate platform, such as a server of a third party server platform having a communication link with the task scheduling center server. The server may include a single computer device, a server cluster formed by a plurality of servers, or a server structure of a distributed device.
Fig. 6 is a schematic block diagram of a system configuration of an electronic device 9600 of an embodiment of the present application. As shown in fig. 6, the electronic device 9600 may include a central processor 9100 and a memory 9140; the memory 9140 is coupled to the central processor 9100. Notably, this fig. 6 is exemplary; other types of structures may also be used in addition to or in place of the structures to implement telecommunications functions or other functions.
In one embodiment, the multi-UI component library data processing method functionality may be integrated into the central processor 9100. The central processor 9100 may be configured to perform the following control:
step S101: and receiving page editing instructions of the user based on the initial UI component library, and generating a corresponding page configuration file.
Step S102: and obtaining UI component library codes corresponding to the target UI component library according to the page configuration file and the set UI component library translation model.
From the above description, it can be known that, by using the page configuration file and setting the UI component library translation model, the electronic device provided in the embodiment of the present application can translate to obtain multiple different target UI component library codes through one development of the initial UI component library, so that a great deal of manpower is saved when developing similar pages in the projects of the multi-component library.
In another embodiment, the multi-UI component library data processing device may be configured separately from the central processor 9100, for example, the multi-UI component library data processing device may be configured as a chip connected to the central processor 9100, and the multi-UI component library data processing method functions are implemented by control of the central processor.
As shown in fig. 6, the electronic device 9600 may further include: a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It is noted that the electronic device 9600 need not include all of the components shown in fig. 6; in addition, the electronic device 9600 may further include components not shown in fig. 6, and reference may be made to the related art.
As shown in fig. 6, the central processor 9100, sometimes referred to as a controller or operational control, may include a microprocessor or other processor device and/or logic device, which central processor 9100 receives inputs and controls the operation of the various components of the electronic device 9600.
The memory 9140 may be, for example, one or more of a buffer, a flash memory, a hard drive, a removable media, a volatile memory, a non-volatile memory, or other suitable device. The information about failure may be stored, and a program for executing the information may be stored. And the central processor 9100 can execute the program stored in the memory 9140 to realize information storage or processing, and the like.
The input unit 9120 provides input to the central processor 9100. The input unit 9120 is, for example, a key or a touch input device. The power supply 9170 is used to provide power to the electronic device 9600. The display 9160 is used for displaying display objects such as images and characters. The display may be, for example, but not limited to, an LCD display.
The memory 9140 may be a solid state memory such as Read Only Memory (ROM), random Access Memory (RAM), SIM card, etc. But also a memory which holds information even when powered down, can be selectively erased and provided with further data, an example of which is sometimes referred to as EPROM or the like. The memory 9140 may also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 may include an application/function storage portion 9142, the application/function storage portion 9142 storing application programs and function programs or a flow for executing operations of the electronic device 9600 by the central processor 9100.
The memory 9140 may also include a data store 9143, the data store 9143 for storing data, such as contacts, digital data, pictures, sounds, and/or any other data used by an electronic device. The driver storage portion 9144 of the memory 9140 may include various drivers of the electronic device for communication functions and/or for performing other functions of the electronic device (e.g., messaging applications, address book applications, etc.).
The communication module 9110 is a transmitter/receiver 9110 that transmits and receives signals via an antenna 9111. A communication module (transmitter/receiver) 9110 is coupled to the central processor 9100 to provide input signals and receive output signals, as in the case of conventional mobile communication terminals.
Based on different communication technologies, a plurality of communication modules 9110, such as a cellular network module, a bluetooth module, and/or a wireless local area network module, etc., may be provided in the same electronic device. The communication module (transmitter/receiver) 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide audio output via the speaker 9131 and to receive audio input from the microphone 9132 to implement usual telecommunications functions. The audio processor 9130 can include any suitable buffers, decoders, amplifiers and so forth. In addition, the audio processor 9130 is also coupled to the central processor 9100 so that sound can be recorded locally through the microphone 9132 and sound stored locally can be played through the speaker 9131.
The embodiments of the present application further provide a computer readable storage medium capable of implementing all the steps in the multi-UI component library data processing method in which the execution subject is a server or a client in the above embodiments, and the computer readable storage medium stores a computer program thereon, where the computer program when executed by a processor implements all the steps in the multi-UI component library data processing method in which the execution subject is a server or a client in the above embodiments, for example, the processor implements the following steps when executing the computer program:
step S101: and receiving page editing instructions of the user based on the initial UI component library, and generating a corresponding page configuration file.
Step S102: and obtaining UI component library codes corresponding to the target UI component library according to the page configuration file and the set UI component library translation model.
As can be seen from the above description, the computer readable storage medium provided in the embodiments of the present application, through the page configuration file and setting the UI component library translation model, can obtain multiple different target UI component library codes through one-time development of the initial UI component library, and save a lot of manpower when developing similar pages in the project of the multi-component library.
It will be apparent to those skilled in the art that embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (devices), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
The principles and embodiments of the present invention have been described in detail with reference to specific examples, which are provided to facilitate understanding of the method and core ideas of the present invention; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present invention, the present description should not be construed as limiting the present invention in view of the above.
Claims (8)
1. A multi-UI component library data processing method, the method comprising:
receiving a page editing instruction based on an initial UI component library by a user, and generating a corresponding page configuration file;
according to the page configuration file and a set UI component library translation model, UI component library codes corresponding to the target UI component library are obtained;
the step of obtaining UI component library codes corresponding to the target UI component library according to the page configuration file and the set UI component library translation model comprises the following steps:
determining the component association relation between the page configuration file and the target UI component library according to the tag dictionary of the target UI component library;
determining the description attribute of each component in the target UI component library according to the component association relation and the component attribute conversion rule of the target UI component library;
and generating HTML texts of all the components according to the component association relation and the description attribute of each component, and integrating the HTML texts of all the components to obtain UI component library codes of the target UI component library.
2. The multi-UI component library data processing method according to claim 1, further comprising, before the obtaining the UI component library code corresponding to the target UI component library according to the page configuration file and the set UI component library translation model:
traversing the page configuration file according to the depth priority rule, and determining each layout component and sub-components of each layout component in the page configuration file.
3. The multi-UI component library data processing method according to claim 1, comprising, after the obtaining the UI component library code corresponding to the target UI component library:
performing page rendering according to UI component library codes corresponding to the target UI component library to obtain corresponding preview pages and displaying the preview pages to the user;
and receiving a preview confirmation instruction of a user for the preview page, and exporting a UI component library code corresponding to the target UI component library for storage.
4. A multi-UI component library data processing apparatus, comprising:
the page configuration module is used for receiving page editing instructions of a user based on the initial UI component library and generating corresponding page configuration files;
the code translation module is used for obtaining UI component library codes corresponding to the target UI component library according to the page configuration file and a set UI component library translation model;
the code translation module includes:
the tag identification unit is used for determining the component association relation between the page configuration file and the target UI component library according to the tag dictionary of the target UI component library;
the attribute generation unit is used for determining the description attribute of each component in the target UI component library according to the component association relation and the component attribute conversion rule of the target UI component library;
and the code integration unit is used for generating HTML texts of all the components according to the component association relation and the description attribute of each component, and integrating the HTML texts of all the components to obtain UI component library codes of the target UI component library.
5. The multi-UI component library data processing device of claim 4, further comprising:
and the node traversing unit is used for traversing the page configuration file according to the depth priority rule and determining each layout component and sub-components of each layout component in the page configuration file.
6. The multi-UI component library data processing device of claim 4, further comprising:
the page preview unit is used for performing page rendering according to the UI component library codes corresponding to the target UI component library to obtain corresponding preview pages and displaying the preview pages to the user;
and the code export unit is used for receiving a preview confirmation instruction of a user for the preview page, exporting a UI component library code corresponding to the target UI component library and storing the UI component library code.
7. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the steps of the multi UI component library data processing method of any one of claims 1 to 3 when the program is executed by the processor.
8. A computer readable storage medium having stored thereon a computer program, characterized in that the computer program, when executed by a processor, implements the steps of the multi UI component library data processing method of any of claims 1 to 3.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110417389.XA CN113110829B (en) | 2021-04-19 | 2021-04-19 | Multi-UI component library data processing method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110417389.XA CN113110829B (en) | 2021-04-19 | 2021-04-19 | Multi-UI component library data processing method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113110829A CN113110829A (en) | 2021-07-13 |
| CN113110829B true CN113110829B (en) | 2024-02-20 |
Family
ID=76718242
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110417389.XA Active CN113110829B (en) | 2021-04-19 | 2021-04-19 | Multi-UI component library data processing method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113110829B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113656031A (en) * | 2021-08-20 | 2021-11-16 | 中国银行股份有限公司 | Mobile terminal page code generation method and device |
| CN114911535B (en) * | 2022-04-22 | 2023-12-19 | 青岛海尔科技有限公司 | Application program component configuration method, storage medium and electronic device |
| US11966565B1 (en) | 2023-04-17 | 2024-04-23 | International Business Machines Corporation | Mobile device task views based on contextual learning |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109582909A (en) * | 2018-12-19 | 2019-04-05 | 拉扎斯网络科技（上海）有限公司 | Webpage automatic generation method, device, electronic equipment and storage medium |
| CN110069312A (en) * | 2019-04-26 | 2019-07-30 | 北京三快在线科技有限公司 | A kind of method and device of UI component Configuration and generation UI Component Gallery |
| CN112214218A (en) * | 2020-10-12 | 2021-01-12 | 上海赛可出行科技服务有限公司 | High-performance and high-efficiency Sketch component library generation and management scheme and system |
| CN112286513A (en) * | 2019-07-23 | 2021-01-29 | 北京京东尚科信息技术有限公司 | Visual design method and device based on component metadata |
| CN112631580A (en) * | 2019-09-24 | 2021-04-09 | 阿里巴巴集团控股有限公司 | Data processing method and device and computing equipment |
-
2021
- 2021-04-19 CN CN202110417389.XA patent/CN113110829B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109582909A (en) * | 2018-12-19 | 2019-04-05 | 拉扎斯网络科技（上海）有限公司 | Webpage automatic generation method, device, electronic equipment and storage medium |
| CN110069312A (en) * | 2019-04-26 | 2019-07-30 | 北京三快在线科技有限公司 | A kind of method and device of UI component Configuration and generation UI Component Gallery |
| CN112286513A (en) * | 2019-07-23 | 2021-01-29 | 北京京东尚科信息技术有限公司 | Visual design method and device based on component metadata |
| CN112631580A (en) * | 2019-09-24 | 2021-04-09 | 阿里巴巴集团控股有限公司 | Data processing method and device and computing equipment |
| CN112214218A (en) * | 2020-10-12 | 2021-01-12 | 上海赛可出行科技服务有限公司 | High-performance and high-efficiency Sketch component library generation and management scheme and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113110829A (en) | 2021-07-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113110829B (en) | Multi-UI component library data processing method and device | |
| CN109597617B (en) | Method and device for quickly generating service page based on template | |
| CN114138372B (en) | Front-end component loading method and device | |
| US20140298318A1 (en) | Computer-executable application packaging method, computer-executable device and storage media performing the same | |
| CN112965701B (en) | Front-end code generation method and device | |
| CN104704468A (en) | Cross system installation of WEB applications | |
| CN112784112B (en) | Message verification method and device | |
| CN112487331A (en) | Page generation method and device, storage medium and electronic equipment | |
| CN112394932A (en) | Automatic browser webpage skin changing method and device | |
| CN113722124A (en) | Content processing method, device, equipment and storage medium of cloud mobile phone | |
| CN115510347A (en) | Presentation file conversion method and device, electronic equipment and storage medium | |
| CN109753644B (en) | Rich text editing method and device, mobile terminal and storage medium | |
| CN111679811A (en) | Web service construction method and device | |
| CN113095053A (en) | Webpage table customizing method and device | |
| CN113190229A (en) | Method and device for generating government affair page | |
| CN114244896A (en) | Message pushing method and device, electronic equipment and storage medium | |
| CN112181417B (en) | Front-end research and development configuration device and method | |
| CN111367561B (en) | Remote development method and device for software program | |
| CN114422468A (en) | Message processing method, device, terminal and storage medium | |
| CN110647327A (en) | Method and device for dynamic control of user interface based on card | |
| CN115345142A (en) | Contract template generation method and device, computer-readable storage medium and electronic equipment | |
| CN114637531A (en) | Method and device for dynamically generating application program interface | |
| CN114840576A (en) | Data standard matching method and device | |
| CN113076262A (en) | Automatic webpage testing method and device | |
| CN113342330B (en) | Front-end engineering generation method and device |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |