CN113110829A - Multi-UI component library data processing method and device - Google Patents
Multi-UI component library data processing method and device Download PDFInfo
- Publication number
- CN113110829A CN113110829A CN202110417389.XA CN202110417389A CN113110829A CN 113110829 A CN113110829 A CN 113110829A CN 202110417389 A CN202110417389 A CN 202110417389A CN 113110829 A CN113110829 A CN 113110829A
- Authority
- CN
- China
- Prior art keywords
- component
- component library
- target
- library
- 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.)
- Granted
Links
- 238000003672 processing method Methods 0.000 title claims description 23
- 238000013519 translation Methods 0.000 claims abstract description 35
- 238000012545 processing Methods 0.000 claims abstract description 33
- 238000000034 method Methods 0.000 claims abstract description 20
- 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 2
- 238000011161 development Methods 0.000 abstract description 10
- 238000004891 communication Methods 0.000 description 14
- 230000006870 function Effects 0.000 description 13
- 238000010586 diagram Methods 0.000 description 12
- 230000018109 developmental process Effects 0.000 description 9
- 230000000694 effects Effects 0.000 description 7
- 239000000872 buffer Substances 0.000 description 4
- 238000013461 design Methods 0.000 description 4
- 238000013515 script Methods 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 230000001413 cellular effect Effects 0.000 description 1
- 238000005516 engineering process Methods 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
Images
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 of a user based on the initial UI component library, and generating a corresponding page configuration file; obtaining a UI component library code corresponding to a target UI component library according to the page configuration file and a set UI component library translation model; according to the method and the system, various different UI component library codes can be obtained through one-time development of the UI component library, and a large amount of manpower is saved when the same type of pages are developed in the project of the multi-component library.
Description
Technical Field
The application relates to the field of webpage front ends and can also be used in the financial field, in particular to a method and a device for processing data of a multi-UI component library.
Background
In large applications, there are often historical reasons when different subsystems use different UI component libraries, which by default are not consistent in visual style.
In order to ensure consistent UI effects, in the prior art, developers need to restore design scripts by using different UI components in different subsystems, which results in a situation that multiple repeated developments are required to restore the same design effect.
Disclosure of Invention
Aiming at the problems in the prior art, the application provides a method and a device for processing data of multiple UI component libraries, which can be used for translating and obtaining multiple different UI component library codes through one-time development of the UI component libraries, and save a large amount of manpower when similar pages are developed in projects of the multiple UI component libraries.
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 method for processing data of a multi-UI component library, including:
receiving a page editing instruction of a user based on the initial UI component library, and generating a corresponding page configuration file;
and obtaining a 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.
Further, the obtaining, according to the page configuration file and the set UI component library translation model, a UI component library code corresponding to the target UI component library includes:
determining a component association relation between the page configuration file and a target UI component library according to a 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 the components according to the component association relation and the description attributes of the components, and integrating the HTML texts of the components to obtain UI component library codes of the target UI component library.
Further, before 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, the method further includes:
and traversing the page configuration file according to a depth priority rule, and determining each layout component and a sub-component 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 the UI component library code corresponding to the target UI component library to obtain a corresponding preview page and displaying the preview page to the user;
and receiving a preview confirmation instruction of a user for the preview page and exporting and storing UI component library codes corresponding to the target UI component library.
In a second aspect, the present application provides a multi-UI component library data processing apparatus, comprising:
the page configuration module is used for receiving a page editing instruction of a user based on the initial UI component library and generating a corresponding page configuration file;
and the code translation module is used for obtaining the 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 code translation module includes:
the tag identification unit is used for determining the association relationship between the page configuration file and the components of the target UI component library according to a 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 the components according to the component association relation and the description attributes of the components, and integrating the HTML texts of the components to obtain UI component library codes of the target UI component library.
Further, still include:
and the node traversing unit is used for traversing the page configuration file according to a depth priority rule and determining each layout component and a sub-component of each layout component in the page configuration file.
Further, still include:
the page preview unit is used for rendering a page according to the UI component library code corresponding to the target UI component library to obtain a corresponding preview page and displaying the preview page to the user;
and the code export unit is used for receiving a preview confirmation instruction of the user for the preview page and exporting and storing the UI component library code corresponding to the target UI component library.
In a third aspect, the present application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, where the processor implements the steps of the multi-UI component library data processing method when executing the program.
In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, implements the steps of the multi-UI component library data processing method.
According to the technical scheme, the multi-UI component library data processing method and device are provided, through the page configuration file and the set UI component library translation model, various different target UI component library codes can be obtained through one-time development of the initial UI component library, and a large amount of manpower is saved when similar pages are developed in the project 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 needed to be used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1 is a flowchart illustrating a method for processing data of a multi-UI component library according to an embodiment of the present disclosure;
FIG. 2 is a second flowchart illustrating a data processing method for a multi-UI component library according to an embodiment of the present application;
FIG. 3 is a third schematic flowchart of a data processing method for a multi-UI component library according to an embodiment of the present application;
FIG. 4 is a block diagram of a multi-UI component library data processing apparatus according to 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
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, 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 obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
In view of the problem that developers need to use different UI components to restore design files in different subsystems in the prior art, and therefore repeated development needs to be developed for many times to restore the same design effect, the application provides a multi-UI component library data processing method and device.
In order to obtain a plurality of different UI component library codes through translation by one-time development of a UI component library and save a large amount of manpower when developing a similar page in a project of a multi-component library, the present application provides an embodiment of a multi-UI component library data processing method, which specifically includes the following contents, referring to fig. 1:
step S101: and receiving a page editing instruction of a user based on the initial UI component library, and generating a corresponding page configuration file.
Step S102: and obtaining a 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.
Optionally, the page layout is described in the form of a page configuration file, translation of multiple different target UI component libraries and parameterized 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 the multiple different target UI component libraries by setting a UI component library translation model.
Optionally, after receiving a page editing instruction of the user based on the initial UI component library, the editing operation of the user on a page for the initial UI component library is converted 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 number of UI component libraries that the user needs to translate is three, ABC, and one of the UI component libraries (e.g., the a component library) may be selected as the initial UI component library for implementing the edit preview, that is, the a component library is used by the user for displaying when editing and previewing the page effect. After the editing is completed, a configuration file describing the page is obtained, and the configuration file is transferred to codes of a corresponding different target UI component library (for example, B, C) by setting a UI component library translation model.
Optionally, the setting UI component library translation model is used for translating the configuration file describing the 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 in the embodiment of the present application can obtain a plurality of different target UI component library codes through page configuration files and setting a UI component library translation model, and through one-time development of an initial UI component library, save a lot of manpower when developing similar pages in a multi-component library project.
In order to obtain different target UI component library codes accurately according to the translation of the page configuration file, 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 include the following steps:
step S201: and determining the association relation between the page configuration file and the components of the target UI component library according to the label 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 the currently described component, for example, the tag of the button is button. According to different target UI component libraries, through a label dictionary of each target UI component library maintained in advance, for example, a component with tag being button in a configuration file, the label name of the corresponding component in element-UI is el-button, and the label name of the corresponding component in ant-design-vue is a-button. And associating each component in the page configuration file with a corresponding component of the target UI component library, and generating and assigning a corresponding generation method for subsequent component attributes.
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 the corresponding relationship between the page configuration file and the components of the target UI component library is confirmed by the above technical solution, different components respectively have their own attribute conversion methods, and the attribute descriptions adapted to different component libraries are generated by these conversion methods. Similarly, taking the button as an example, the attribute describing the button size in the page configuration file is "size", the value can be three items, namely small, middle and large, after the button conversion of the element-ui component library, the attribute name is size, the value is converted into three items, namely mini, medium and null (default is null), and in ant-design-vue, the attribute is size, but the value is converted into three items, namely small, default and large.
Step S203: and generating HTML texts of the components according to the component association relation and the description attributes of the components, and integrating the HTML texts of the components to obtain UI component library codes of the target UI component library.
Optionally, the application may further generate a complete html text corresponding to the component by combining the component tag and the attribute, and taking the button as an example, converting the configuration file { "tag": button "," size ": small", "label": cancel "} into the html text corresponding to the button component of the element-ui:
<el-button size＝"mini">cancel</el-button>
and the html text converted into the corresponding button component in ant-design-vue is:
<a-button size＝"small">cancel</a-button>
if relevant data is needed in other components, for example, the form component must have initialized form data, the necessary data part is generated through a js generation module and is referred in the html text.
Taking Vue components as an example, the component file is composed of template, script and style, and the fragments generated in the above steps are wrapped in corresponding labels (html is wrapped in the template label, js is wrapped in the script label, and style is empty by default) to be spliced into a complete Vue component file.
In order to comprehensively determine all components included in the page configuration file, in an embodiment of the multi-UI component library data processing method according to the present application, before the step S102, the following may be further included:
and traversing the page configuration file according to a depth priority rule, and determining each layout component and a sub-component of each layout component in the page configuration file.
Optionally, after the page configuration file is determined, the entire page configuration file may be traversed in a depth-first traversal form, and since some components in the UI component library are layout components, such as forms and cards, and such components may include other UI components, when a layout component is encountered, after a code of the layout component itself is generated, sub-components thereof are also traversed, and after the entire configuration file is traversed in a loop, finally, the generated code fragments are combined in a summary manner.
In order to flexibly show 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 specifically included:
step S301: and rendering a page according to the UI component library code corresponding to the target UI component library to obtain a corresponding preview page and displaying the preview page to the user.
Step S302: and receiving a preview confirmation instruction of a user for the preview page and exporting and storing UI component library codes corresponding to the target UI component library.
Optionally, in the application, page rendering may be performed according to the UI component library code corresponding to the target UI component library, the translated code of the target UI component library is displayed, the code is rendered into a preview page, and a user derives a code file after confirming an effect and puts the code file into a project for use.
In order to save a lot of manpower when developing similar pages in the project of a multi-component library by translating a plurality of different UI component library codes through one development of the UI component library, the present application provides an embodiment of a multi-UI component library data processing apparatus for implementing all or part of the contents of the multi-UI component library data processing method, and with reference to fig. 4, the multi-UI component library data processing apparatus specifically includes the following contents:
and the page configuration module 10 is configured to receive a page editing instruction of a user based on the initial UI component library, and generate a corresponding page configuration file.
And the code translation module 20 is configured to obtain a 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 embodiment of the present application can obtain a plurality of different target UI component library codes through translation by using the page configuration file and setting the UI component library translation model, and through one-time development of the initial UI component library, save a lot of manpower when developing similar pages in a multi-component library project.
In order to obtain different target UI component library codes accurately according to the page configuration file, in an embodiment of the multi-UI component library data processing apparatus of the present application, referring to fig. 5, the code translation module 20 includes:
and the tag identification unit 21 is configured to determine a component association relationship between the page configuration file and the target UI component library according to a tag dictionary of the target UI component library.
And the attribute generating unit 22 is configured to determine the description attribute of each component in the target UI component library according to the component association relationship and the component attribute conversion rule of the target UI component library.
And the code integrating unit 23 is configured to generate an HTML text of each component according to the component association relationship and the description attribute of each component, and integrate the HTML text of each component to obtain a UI component library code of the target UI component library.
In order to comprehensively determine all components included in the page profile, in an embodiment of the multi-UI component library data processing apparatus of the present application, the following contents are further specifically included:
and the node traversing unit is used for traversing the page configuration file according to a depth priority rule and determining each layout component and a sub-component 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 apparatus of the present application, the following contents are further specifically included:
the page preview unit is used for rendering a page according to the UI component library code corresponding to the target UI component library to obtain a corresponding preview page and displaying the preview page to the user;
and the code export unit is used for receiving a preview confirmation instruction of the user for the preview page and exporting and storing the UI component library code corresponding to the target UI component library.
In order to obtain a plurality of different UI component library codes through translation by developing a UI component library once and save a lot of manpower when developing a similar page in a multi-component library project, an embodiment of an electronic device for implementing all or part of contents in the multi-UI component library data processing method is provided in the present application, where the electronic device specifically includes 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 mutual communication through the bus; the communication interface is used for realizing information transmission between the multi-UI component library data processing device and relevant equipment such as a core service system, a user terminal, a relevant database and the like; the logic controller may be a desktop computer, a tablet computer, a mobile terminal, and the like, but the embodiment is not limited thereto. In this embodiment, the logic controller may be implemented with reference to the embodiment of the multi-UI component library data processing method and the embodiment of the multi-UI component library data processing apparatus in the embodiment, and the contents thereof are incorporated herein, and repeated details are not repeated.
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), an in-vehicle device, a smart wearable device, and the like. Wherein, intelligence wearing equipment can include intelligent glasses, intelligent wrist-watch, intelligent bracelet etc..
In practical applications, 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. The selection may be specifically performed according to the processing capability of the client device, the limitation of the user usage scenario, and the like. This is not a limitation of the present application. The client device may further include a processor if all operations are performed in the client device.
The client device may have a communication module (i.e., a communication unit), and may be communicatively connected to a remote server to implement data transmission with the server. The server may include a server on the task scheduling center side, and in other implementation scenarios, the server may also include a server on an intermediate platform, for example, a server on a third-party server platform that is communicatively linked to the task scheduling center server. The server may include a single computer device, or may include a server cluster formed by a plurality of servers, or a server structure of a distributed apparatus.
Fig. 6 is a schematic block diagram of a system configuration of an electronic device 9600 according to an embodiment of the present application. As shown in fig. 6, the electronic device 9600 can 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 structure to implement telecommunications or other functions.
In one embodiment, the multi-UI component library data processing method functions may be integrated into the central processor 9100. The central processor 9100 may be configured to control as follows:
step S101: and receiving a page editing instruction of a user based on the initial UI component library, and generating a corresponding page configuration file.
Step S102: and obtaining a 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, according to the electronic device provided in the embodiment of the present application, through the page configuration file and the UI component library translation model, various target UI component library codes can be obtained through translation by developing the initial UI component library once, so that a lot of manpower is saved when similar pages are developed in a multi-component library project.
In another embodiment, the multi-UI component library data processing apparatus may be configured separately from the central processor 9100, for example, the multi-UI component library data processing apparatus may be configured as a chip connected to the central processor 9100, and the function of the multi-UI component library data processing method may be realized by the 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 also does not necessarily include all of the components shown in fig. 6; further, the electronic device 9600 may further include components not shown in fig. 6, which may be referred to in the art.
As shown in fig. 6, a central processor 9100, sometimes referred to as a controller or operational control, can include a microprocessor or other processor device and/or logic device, which central processor 9100 receives input and controls the operation of the various components of the electronic device 9600.
The memory 9140 can 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 relating to the failure may be stored, and a program for executing the information may be stored. And the central processing unit 9100 can execute the program stored in the memory 9140 to realize information storage or processing, or 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. Power supply 9170 is used to provide power to electronic device 9600. The display 9160 is used for displaying display objects such as images and characters. The display may be, for example, an LCD display, but is not limited thereto.
The memory 9140 can be a solid state memory, e.g., Read Only Memory (ROM), Random Access Memory (RAM), a SIM card, or the like. There may also be a memory that holds information even when power is off, can be selectively erased, and is provided with more data, an example of which is sometimes called an EPROM or the like. The memory 9140 could also be some other type of device. 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 being used for storing application programs and function programs or for executing a flow of operations of the electronic device 9600 by the central processor 9100.
The memory 9140 can also include a data store 9143, the data store 9143 being used to store 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 for the electronic device for communication functions and/or for performing other functions of the electronic device (e.g., messaging applications, contact book applications, etc.).
The communication module 9110 is a transmitter/receiver 9110 that transmits and receives signals via an antenna 9111. The communication module (transmitter/receiver) 9110 is coupled to the central processor 9100 to provide input signals and receive output signals, which may be the same as in the case of a conventional mobile communication terminal.
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, 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 receive audio input from the microphone 9132, thereby implementing ordinary telecommunications functions. The audio processor 9130 may include any suitable buffers, decoders, amplifiers and so forth. In addition, the audio processor 9130 is also coupled to the central processor 9100, thereby enabling recording locally through the microphone 9132 and enabling locally stored sounds to be played through the speaker 9131.
An embodiment of the present application further provides a computer-readable storage medium capable of implementing all steps in the multi-UI component library data processing method with a server or a client as an execution subject in the foregoing embodiment, where the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the computer program implements all steps of the multi-UI component library data processing method with a server or a client as an execution subject in the foregoing embodiment, for example, when the processor executes the computer program, the processor implements the following steps:
step S101: and receiving a page editing instruction of a user based on the initial UI component library, and generating a corresponding page configuration file.
Step S102: and obtaining a 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 computer-readable storage medium provided in the embodiments of the present application, through the page configuration file and the setting UI component library translation model, can translate and obtain a plurality of different target UI component library codes through one development of the initial UI component library, thereby saving a lot of manpower when developing similar pages in a multi-component library project.
As will be appreciated by one skilled in the art, 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 flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams 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 principle and the implementation mode of the invention are explained by applying specific embodiments in the invention, and the description of the embodiments is only used for helping to understand the method and the core idea of the invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (10)
1. A multi-UI component library data processing method is characterized by comprising the following steps:
receiving a page editing instruction of a user based on the initial UI component library, and generating a corresponding page configuration file;
and obtaining a 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.
2. The method for processing data of multiple UI component libraries of claim 1, wherein the obtaining UI component library codes corresponding to a target UI component library according to the page profile and the translation model of the set UI component library comprises:
determining a component association relation between the page configuration file and a target UI component library according to a 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 the components according to the component association relation and the description attributes of the components, and integrating the HTML texts of the components to obtain UI component library codes of the target UI component library.
3. The method for processing data of multiple UI component libraries of claim 1, wherein before obtaining the UI component library code corresponding to the target UI component library according to the page profile and the translation model of the set UI component library, further comprising:
and traversing the page configuration file according to a depth priority rule, and determining each layout component and a sub-component of each layout component in the page configuration file.
4. The method for processing the data of the multi-UI-component-library according to claim 1, after obtaining the UI component-library code corresponding to the target UI component library, comprising:
performing page rendering according to the UI component library code corresponding to the target UI component library to obtain a corresponding preview page and displaying the preview page to the user;
and receiving a preview confirmation instruction of a user for the preview page and exporting and storing UI component library codes corresponding to the target UI component library.
5. A multi-UI component library data processing apparatus, comprising:
the page configuration module is used for receiving a page editing instruction of a user based on the initial UI component library and generating a corresponding page configuration file;
and the code translation module is used for obtaining the 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.
6. The multi-UI-component-library data processing apparatus of claim 5, wherein the code translation module comprises:
the tag identification unit is used for determining the association relationship between the page configuration file and the components of the target UI component library according to a 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 the components according to the component association relation and the description attributes of the components, and integrating the HTML texts of the components to obtain UI component library codes of the target UI component library.
7. The multi-UI-component-library data processing apparatus of claim 5, further comprising:
and the node traversing unit is used for traversing the page configuration file according to a depth priority rule and determining each layout component and a sub-component of each layout component in the page configuration file.
8. The multi-UI-component-library data processing apparatus of claim 5, further comprising:
the page preview unit is used for rendering a page according to the UI component library code corresponding to the target UI component library to obtain a corresponding preview page and displaying the preview page to the user;
and the code export unit is used for receiving a preview confirmation instruction of the user for the preview page and exporting and storing the UI component library code corresponding to the target UI component library.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the steps of the method for processing data of a multi-UI component library according to any of claims 1 to 4 are implemented when the processor executes the program.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the multi UI component library data processing method of any of claims 1 to 4.
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 true CN113110829A (en) | 2021-07-13 |
| CN113110829B 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) |
Cited By (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 |
| CN114911535A (en) * | 2022-04-22 | 2022-08-16 | 青岛海尔科技有限公司 | 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 and 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 and 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 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113656031A (en) * | 2021-08-20 | 2021-11-16 | 中国银行股份有限公司 | Mobile terminal page code generation method and device |
| CN114911535A (en) * | 2022-04-22 | 2022-08-16 | 青岛海尔科技有限公司 | Application program component configuration method, storage medium and electronic 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113110829B (en) | 2024-02-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109597617B (en) | Method and device for quickly generating service page based on template | |
| CN108495192B (en) | Page editing processing method and device | |
| CN113110829B (en) | Multi-UI component library data processing method and device | |
| CN111079047B (en) | Web-oriented page construction system | |
| CN110531962B (en) | Development processing method and device for applet and computer readable storage medium | |
| CN114138372B (en) | Front-end component loading method and device | |
| CN112965701A (en) | Front-end code generation method and device | |
| CN107122398B (en) | Data display chart generation method and system | |
| CN110554874A (en) | Method and device for reusing webpage components of SaaS platform | |
| CN113342330B (en) | Front-end engineering generation method and device | |
| CN112487331A (en) | Page generation method and device, storage medium and electronic equipment | |
| CN110780874B (en) | Method and device for generating information | |
| US20240303413A1 (en) | Document editing method and apparatus, and terminal and non-transitory storage medium | |
| CN113760276A (en) | Method and device for generating page code | |
| CN113095053A (en) | Webpage table customizing method and device | |
| CN110647327A (en) | Method and device for dynamic control of user interface based on card | |
| CN115756452A (en) | Target page code generation method, device, storage medium and program product | |
| CN113190229A (en) | Method and device for generating government affair page | |
| CN113779952B (en) | Text processing method and device and electronic equipment | |
| CN114637531A (en) | Method and device for dynamically generating application program interface | |
| CN113076262A (en) | Automatic webpage testing method and device | |
| CN113220293A (en) | Page display method and device, electronic equipment and computer readable medium | |
| CN113110828B (en) | Front-end prototype debugging method and device | |
| CN112102058A (en) | Management system parameter configuration method and device | |
| CN113157277B (en) | Host file processing 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 |