CN116974556A - File processing method, device, computer equipment and storage medium - Google Patents

File processing method, device, computer equipment and storage medium Download PDF

Info

Publication number
CN116974556A
CN116974556A CN202310145224.0A CN202310145224A CN116974556A CN 116974556 A CN116974556 A CN 116974556A CN 202310145224 A CN202310145224 A CN 202310145224A CN 116974556 A CN116974556 A CN 116974556A
Authority
CN
China
Prior art keywords
target
layer
page
file
design 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.)
Pending
Application number
CN202310145224.0A
Other languages
Chinese (zh)
Inventor
刘迪光
黄灿辉
邓坤力
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202310145224.0A priority Critical patent/CN116974556A/en
Publication of CN116974556A publication Critical patent/CN116974556A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

The present application relates to a file processing method, apparatus, computer device, storage medium and computer program product. The method comprises the following steps: receiving a file uploaded by a terminal initiating access through a target domain name; the file comprises at least one design page; extracting a plurality of initial layers from a target design page in the at least one design page aiming at the target design page; performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications; and generating a target code file corresponding to the target design page according to the target layer of the target design page. The method can improve the flexibility when analyzing the file.

Description

File processing method, device, computer equipment and storage medium
Technical Field
The present application relates to the field of computer technology, and in particular, to a file processing method, apparatus, computer device, storage medium, and computer program product.
Background
With the development of computer technology, designers may perform interface design through computer devices, for example, designers may perform interface design through a sketch software to obtain a sketch file. The tab file obtained through the tab software design can be converted into a code file through analysis, and the converted code file can be finally compiled to obtain an interface.
In the related art, when the sktch file is parsed, the sktch software needs to be installed and a plug-in is downloaded in the sktch software to parse the sktch file, however, the sktch software only supports a specific operating system, so that the flexibility is low when the sktch file is parsed.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a file processing method, apparatus, computer device, computer readable storage medium, and computer program product that can improve the flexibility of parsing a sketch file.
In a first aspect, the present application provides a method for processing a file. The method comprises the following steps: receiving a file uploaded by a terminal initiating access through a target domain name; the file comprises at least one design page; extracting a plurality of initial layers from a target design page in the at least one design page aiming at the target design page; performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications; and generating a target code file corresponding to the target design page according to the target layer of the target design page.
In a second aspect, the application further provides a file processing device. The device comprises: the file receiving module is used for receiving the file uploaded by the terminal which initiates access through the target domain name; the file comprises at least one design page; the layer extraction module is used for extracting a plurality of initial layers from a target design page aiming at the target design page in the at least one design page; the structure reorganization module is used for carrying out structure reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications; and the code file generation module is used for generating a target code file corresponding to the target design page according to the target layer of the target design page.
In one embodiment, the structural reorganization module is further configured to: acquiring position information corresponding to each initial layer respectively; according to the position information corresponding to each initial layer, arranging the initial layers into a one-dimensional array; traversing each node in the one-dimensional array, and carrying out structural reorganization on the plurality of initial layers based on the position relation between the traversed node and the last node so as to obtain a target layer of the target design page.
In one embodiment, the structural reorganization module is further configured to: traversing each node in the one-dimensional array; when the position relationship between the traversed node and the previous node is the containing relationship, taking the layer represented by the traversed node as a sub-layer of the layer represented by the previous node; when the position relationship between the traversed node and the previous node is a non-inclusion relationship, continuing to traverse the next node; and under the condition that the last node in the one-dimensional array is traversed, carrying out recursion processing on each sub-layer to obtain a target layer of the target design page.
In one embodiment, the layer extraction module is further configured to traverse each design component in the target design page if the design component is included in the target design page; and disassembling the traversed design assembly to obtain a plurality of initial layers corresponding to the traversed design assembly.
In one embodiment, the layer extraction module is further configured to, in a case where a slice is included in the target design page, export the slice included in the target design page as an initial layer; under the condition that the target design page comprises pictures, exporting the pictures included in the target design page into an initial layer; in the case that the shadow area is included in the target design page, exporting the shadow area included in the target design page as an initial layer; in the case that the irregular shape is included in the target design page, the irregular shape included in the target design page is exported as an initial layer.
In one embodiment, the layer extraction module is further configured to determine a positional relationship between the pictures when the target design page includes a plurality of pictures; when the position relation among the pictures indicates that the pictures with the coupled position relation exist in the pictures, the pictures with the coupled position relation are aggregated to obtain corresponding target pictures; and exporting the target picture to a corresponding initial layer.
In one embodiment, the code file generating module is further configured to determine each component layer included in the target layer; acquiring code information corresponding to each composition layer, and splicing the acquired code information according to the positions of each composition layer in the target layer to obtain layer code information corresponding to the target layer; and splicing the code information of each layer according to the position of each target layer in the target design page to obtain a target code file corresponding to the target design page.
In one embodiment, the target design page includes a plurality of target layers; the code file generation module is also used for comparing every two target layers in the target layers; when the comparison result indicates that the two compared target layers are the same, deleting one of the two compared target layers; and generating a target code file corresponding to the target design page according to the target layer left after the deleting process.
In one embodiment, the file processing device further includes: the code file sending module is used for sending the target code file to the terminal; and the terminal is used for compiling the target code file through a developer tool client so as to display a target interface corresponding to the file.
In a third aspect, the present application also provides a computer device. The computer device comprises a memory storing a computer program and a processor which when executing the computer program performs the steps of: receiving a file uploaded by a terminal initiating access through a target domain name; the file comprises at least one design page; extracting a plurality of initial layers from a target design page in the at least one design page aiming at the target design page; performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications; and generating a target code file corresponding to the target design page according to the target layer of the target design page.
In a fourth aspect, the present application also provides a computer-readable storage medium. The computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of: receiving a file uploaded by a terminal initiating access through a target domain name; the file comprises at least one design page; extracting a plurality of initial layers from a target design page in the at least one design page aiming at the target design page; performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications; and generating a target code file corresponding to the target design page according to the target layer of the target design page.
In a fifth aspect, the present application also provides a computer program product. The computer program product comprises a computer program which, when executed by a processor, implements the steps of: receiving a file uploaded by a terminal initiating access through a target domain name; the file comprises at least one design page; extracting a plurality of initial layers from a target design page in the at least one design page aiming at the target design page; performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications; and generating a target code file corresponding to the target design page according to the target layer of the target design page.
According to the file processing method, the device, the computer equipment, the storage medium and the computer program product, the file uploaded by the terminal initiating access through the target domain name is received, the file comprises at least one design page, a plurality of initial layers are extracted from the target design page aiming at the target design page in the at least one design page, the initial layers are subjected to structural reorganization according to the position relation among the initial layers, the target layers of the target design page and conforming to code file specifications are obtained, and the target code file corresponding to the target design page is generated according to the target layers of the target design page, so that file analysis is realized at the server side.
In a sixth aspect, the present application further provides another file processing method. The method comprises the following steps: displaying a target page returned by the target domain name access server: responding to an uploading event triggered on the target page, and displaying an uploading result of uploading the file to the server; and displaying a code file generation result returned by the server on the target page when the uploading result indicates that the uploading is successful, wherein the code file generation result is used for accessing the target code file generated for the file.
In a seventh aspect, the present application further provides another document processing apparatus. The device comprises: the target page display module is used for displaying the target page returned by the target domain name access server: the uploading result display module is used for responding to the uploading event triggered on the target page and displaying the uploading result of uploading the file to the server; and the generated result display module is used for displaying a code file generated result returned by the server on the target page when the uploading result indicates that the uploading is successful, wherein the code file generated result is used for accessing the target code file generated for the file.
In one embodiment, the target page display module is further configured to: responding to an access event which is triggered in the browser and accesses the server through the target domain name, and displaying a target page returned by the server; or in response to an access event triggered in the developer tool client that accesses the server through the target domain name, exposing the target page returned by the server.
In one embodiment, the code file generation result is a code file identification list, and the code file identification list includes code file identifications; the file processing device also comprises a downloading module, a downloading control and a downloading control, wherein the downloading module is used for displaying a downloading control corresponding to the code file identifier on the target page; in response to a trigger event for a download control, downloading, from a server, a code file corresponding to the download control identifying the characterized object code file.
In an eighth aspect, the present application also provides another computer apparatus. The computer device comprises a memory storing a computer program and a processor which when executing the computer program performs the steps of: displaying a target page returned by the target domain name access server: responding to an uploading event triggered on the target page, and displaying an uploading result of uploading the file to the server; and displaying a code file generation result returned by the server on the target page when the uploading result indicates that the uploading is successful, wherein the code file generation result is used for accessing the target code file generated for the file.
In a ninth aspect, the present application also provides another computer-readable storage medium. The computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of: displaying a target page returned by the target domain name access server: responding to an uploading event triggered on the target page, and displaying an uploading result of uploading the file to the server; and displaying a code file generation result returned by the server on the target page when the uploading result indicates that the uploading is successful, wherein the code file generation result is used for accessing the target code file generated for the file.
In a tenth aspect, the application also provides another computer program product. The computer program product comprises a computer program which, when executed by a processor, implements the steps of: displaying a target page returned by the target domain name access server: responding to an uploading event triggered on the target page, and displaying an uploading result of uploading the file to the server; and displaying a code file generation result returned by the server on the target page when the uploading result indicates that the uploading is successful, wherein the code file generation result is used for accessing the target code file generated for the file.
According to the file processing method, the device, the computer equipment, the storage medium and the computer program product, the target page returned by the server is accessed through the target domain name, the uploading result of uploading the file to the server is displayed in response to the uploading event triggered by the target page, and the code file generation result returned by the server is displayed on the target page under the condition that the uploading result indicates that the uploading is successful.
Drawings
FIG. 1 is an application environment diagram of a file generation method in one embodiment;
FIG. 2 is a flow diagram of a file generation method in one embodiment;
FIG. 3 is a layer diagram of a target design page in one embodiment;
FIG. 4 is a flow chart of a file generation method according to another embodiment;
FIG. 5 is a flow chart of a method of file generation in yet another embodiment;
FIG. 6 is an interface diagram illustrating a process of uploading a sketch file in one embodiment;
FIG. 7 is a schematic diagram of an interface of a target page after uploading is completed in one embodiment;
FIG. 8 is a flow chart diagram of a method of processing files in a particular embodiment;
FIG. 9 is a block diagram showing the structure of a file generating apparatus according to one embodiment;
FIG. 10 is a block diagram showing the structure of a file generating apparatus according to one embodiment;
FIG. 11 is an internal block diagram of a computer device in one embodiment;
fig. 12 is an internal structural diagram of a computer device in one embodiment.
Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application.
Artificial intelligence (Artificial Intelligence, AI) is the theory, method, technique and application system that uses a digital computer or a machine controlled by a digital computer to simulate, extend and extend human intelligence, sense the environment, acquire knowledge and use the knowledge to obtain optimal results. In other words, artificial intelligence is an integrated technology of computer science that attempts to understand the essence of intelligence and to produce a new intelligent machine that can react in a similar way to human intelligence. Artificial intelligence, i.e. research on design principles and implementation methods of various intelligent machines, enables the machines to have functions of sensing, reasoning and decision.
The artificial intelligence technology is a comprehensive subject, and relates to the technology with wide fields, namely the technology with a hardware level and the technology with a software level. Artificial intelligence infrastructure technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a voice processing technology, a natural language processing technology, machine learning/deep learning, automatic driving, intelligent traffic and other directions.
Machine Learning (ML) is a multi-domain interdisciplinary, involving multiple disciplines such as probability theory, statistics, approximation theory, convex analysis, algorithm complexity theory, etc. It is specially studied how a computer simulates or implements learning behavior of a human to acquire new knowledge or skills, and reorganizes existing knowledge structures to continuously improve own performance. Machine learning is the core of artificial intelligence, a fundamental approach to letting computers have intelligence, which is applied throughout various areas of artificial intelligence. Machine learning and deep learning typically include techniques such as artificial neural networks, confidence networks, reinforcement learning, transfer learning, induction learning, teaching learning, and the like.
The artificial intelligence technology related to the scheme provided by the embodiment of the application is specifically described by the following embodiments:
the file processing method provided by the embodiment of the application can be applied to an application environment shown in figure 1. Wherein the terminal 102 communicates with the server 104 via a network. The data storage system may store data that the server 104 needs to process. The data storage system may be integrated on the server 104 or may be located on the cloud or other servers. Specifically, the terminal 102 may initiate access to the server 104 through the target domain name, the server 104 may return a target page to the terminal 102, so that the terminal may upload a file through the target page, where the file includes at least one design page, for a target design page in the at least one design page, the server may extract a plurality of initial layers from the target design page, perform structural reorganization on the plurality of initial layers according to a positional relationship between the plurality of initial layers, obtain a target layer of the target design page, where the target layer meets a code file specification, generate a target code file corresponding to the target design page according to the target layer of the target design page, and the server 104 may send the target code file to the terminal 102.
The terminal 102 may be, but not limited to, various desktop computers, notebook computers, smart phones, tablet computers, internet of things devices, and portable wearable devices, where the internet of things devices may be smart speakers, smart televisions, smart air conditioners, smart vehicle devices, and the like. The portable wearable device may be a smart watch, smart bracelet, headset, or the like. The server 104 may be implemented as a stand-alone server or as a server cluster of multiple servers.
In one embodiment, as shown in fig. 2, a file processing method is provided, and the method is applied to the server 104 in fig. 1 for illustration, and includes the following steps:
step 202, receiving a file uploaded by a terminal initiating access through a target domain name; the file includes at least one design page.
Where the file refers to a sktch file, which is a vector graphic file created by specialized vector drawing software of Mac OS X, namely, the sktch software. It contains one or more layers of drawn objects, which may include text, shapes, symbols, or images. The sktch file is saved in a sktch format, while sktch only supports this format. The sktech is mainly used by graphic designers specializing in Android icons, iOS application icons, iOS UI designs, texture designs, and web page designs. The designer may create graphics using vector, pencil, shape, text, and slicing tools, and may also apply padding, borders, shadows, fades, blurs, or masks to objects on their Sketch canvas. After the design is completed, the SKETCH file may be exported to a PNG, JPG, TIFF, WEBP, SVG, PDF, or EPS file. The Sketch file can be directly uploaded to the cloud in the Sketch software and can be shared with other designers. Multiple design pages (pages) may be contained within a sktech file. The plurality refers to at least two. The target domain name refers to the domain name of the server. The target domain name corresponds to the IP address of the server, and the IP address of the server can be obtained by analyzing the target domain name, so that the access to the server can be realized.
Specifically, the terminal can initiate access to the server through the target domain name in the browser, and upload the file through the target page after the server returns to the target page. In other embodiments, the terminal may also install a developer tool client, and may initiate access to the server through the target domain name in the developer tool client, thereby uploading the file through the target interface returned by the server.
Step 204, extracting a plurality of initial layers from the target design page aiming at the target design page in the at least one design page.
The target design page may be any one of the at least one design page. The layer is the most basic building block in the sktch. Unlike other applications that distinguish the two concepts of layers and objects, each object is treated as a separate layer in the sktch. The initial layers herein refer to the atomized layers, i.e., each initial layer is a single layer and does not contain sub-layers.
Specifically, in the case where only one design page is included in the file, the server extracts a plurality of initial layers from the design page. In the case that the file includes a plurality of design pages, the server traverses each design page, determines each traversed design page as a target design page, and extracts a plurality of initial layers from the traversed target design pages. By extracting the initial layers of the atomization, the server can execute subsequent structure reorganization operation to reorganize the initial layers.
In a specific application, the server may traverse each element in the target design page, disassemble the traversed design component when traversing the design component, obtain a plurality of initial layers corresponding to the traversed design component, export the traversed slice as an initial layer when traversing the slice, export the traversed picture as an initial layer when traversing the picture, export the traversed shadow region as an initial layer when traversing the shadow region, export the traversed irregular shape as an initial layer when traversing the irregular shape, so that the server may extract the plurality of initial layers from the target design page.
And 206, carrying out structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with the code file specification.
The positional relationship between the two layers comprises any one of a containing relationship, a separating relationship and an intersecting relationship. Code file specifications refer to the relevant specifications and habits in the front-end code development process. The target layer refers to a layer obtained by performing structural reorganization on the initial layer. One or more initial layers may be included in the target layer.
Specifically, because the server needs to analyze the file into the front-end code finally, the initial layers need to be subjected to structural reorganization to obtain the target layers conforming to the code file specification, so that the code file generated later is more accurate, in the process of structural reorganization, the server can acquire the position information of the initial layers in the target design page, and the initial layers in the target design page are subjected to structural reorganization based on the position relation among the initial layers, so that the target layers of the target design page are finally obtained.
In a specific application, when an inclusion relationship exists between two initial layers, the server can use the included initial layer as a sub-layer of another initial layer, so that the two initial layers with the inclusion relationship are combined into one layer, and when a code file is generated, the two initial layers can be used as an integral page element for code generation, so that the generated code file signs a front end code file specification.
Step 208, generating a target code file corresponding to the target design page according to the target layer of the target design page.
The object code file may be one or more of a wxml file, an xcss file, an hxml file and a JS file.
Specifically, after obtaining the target layers of the target design page, the server may generate corresponding layer code information for each target layer, and finally splice the layer code information, so as to generate the target code file corresponding to the target design page. Optionally, when generating the layer code information corresponding to the target layer, the server may determine the component layers included in the target layer, obtain the code information of each component layer, and splice the code information of the component layers to obtain the layer code information corresponding to the target layer. Optionally, in the process of generating the target code file according to the target layer, the server may further perform redundancy processing on the target layer, that is, delete the repeated layers in the generated target layers, and finally generate the target code file of the target design page according to the target layer remaining after the deletion processing.
In a specific application, the server may also return the object code file to the terminal. The specific implementation process may be that the server directly returns the target code file to the terminal after generating the target code file. In other embodiments, the server may return a code file generation result to the terminal, where the code file generation result includes a code file identifier, after the terminal receives the code file generation result, the terminal may display the code file identifier in a list, a user corresponding to the terminal may trigger generation of a download request for the displayed code file identifier, and after the terminal sends the download request to the server, the server returns an object code file corresponding to the code file identifier carried in the download request.
In the file processing method, the file uploaded by the terminal initiating access through the target domain name is received, the file comprises at least one design page, a plurality of initial layers are extracted from the target design page aiming at the target design page in the at least one design page, the plurality of initial layers are structurally recombined according to the position relation among the plurality of initial layers to obtain the target layer of the target design page, which accords with code file specifications, and the target code file corresponding to the target design page is generated according to the target layer of the target design page, so that the file is analyzed at the server side.
In one embodiment, performing structural reorganization on a plurality of initial layers according to a positional relationship between the plurality of initial layers to obtain a target layer of a target design page, where the target layer meets a code file specification, including: performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain a target layer which is in accordance with the code file specification and of the target design page, wherein the method comprises the following steps: acquiring position information corresponding to each initial layer respectively; according to the position information corresponding to each initial layer, arranging a plurality of initial layers into a one-dimensional array; traversing each node in the one-dimensional array, and carrying out structural reorganization on a plurality of initial layers based on the position relation between the traversed node and the last node so as to obtain a target layer of the target design page.
The position information corresponding to the initial layer refers to the position information of the initial layer in the target design page. The one-dimensional array refers to an array obtained by arranging the initial layers according to the position information. In the one-dimensional array, an initial layer can be referred to by an object identifier of the initial layer, and then the initial layer referred to by the object identifier is a node in the one-dimensional array. For example, assuming that the server extracts 5 initial layers from the target design page, namely initial layer 1, initial layer 2, initial layer 3, initial layer 4, and initial layer 5, the one-dimensional array may be [ initial layer 1, initial layer 2, initial layer 3, initial layer 4, and initial layer 5].
Specifically, for a plurality of initial layers extracted from the same target design page, the server may obtain position information of the initial layers in the target design page, and then may arrange object identifiers of the initial layers according to a horizontal direction or a vertical direction, so as to obtain a one-dimensional array. Taking the example of arranging the object identifiers of the initial layers according to the horizontal direction, the server can acquire the horizontal coordinate information of each initial layer, and arrange the object identifiers of the initial layers according to the horizontal coordinates from small to large, so as to acquire a one-dimensional array. Further, the server may traverse each node in the one-dimensional array from beginning to end, each traverse to a node, compare the layer represented by the node with the layer represented by the previous node, obtain the positional relationship between the two, determine whether structural reorganization is needed based on the positional relationship, that is, reorganize the layers, and execute structural reorganization on the layers needed to be subjected to structural reorganization, so as to obtain the target layer of the target design page. The target layer may be one or more.
In the above embodiment, the initial layers are arranged into the one-dimensional array according to the position information corresponding to the initial layers, and then the structure reorganization is performed on the plurality of initial layers by traversing each node in the one-dimensional array based on the position relationship between the traversed node and the previous node.
In one embodiment, traversing each node in the one-dimensional array, and performing structural reorganization on a plurality of initial layers based on a positional relationship between the traversed node and a previous node, including: traversing each node in the one-dimensional array; when the position relationship between the traversed node and the previous node is the containing relationship, taking the layer represented by the traversed node as a sub-layer of the layer represented by the previous node; when the position relationship between the traversed node and the previous node is a non-inclusion relationship, continuing to traverse the next node; and under the condition that the last node in the one-dimensional array is traversed, carrying out recursion processing on each sub-layer to obtain a target layer of the target design page.
The position relationship between the traversed node and the last node refers to the position relationship between the initial layer represented by the traversed node and the initial layer represented by the last node. The position relation comprises a containing relation, a separating relation and an intersecting relation, wherein the containing relation means that an initial layer represented by a traversed node is completely contained in an initial layer represented by a previous node, the separating relation means that the initial layer represented by the traversed node is not overlapped with the initial layer represented by the previous node in any position, and the intersecting relation means that the initial layer represented by the traversed node is overlapped with the initial layer represented by the previous node in some positions. For example, assuming that the initial layer represented by the traversed node is a circle and the initial layer represented by the previous node is a rectangle, the containment relationship may be that the circle is inside the rectangle, the separation relationship may be that the circle is outside the rectangle, and the correlation relationship may be that a part of the circle is inside the rectangle and a part of the circle is outside the rectangle.
Specifically, the server compares the traversed node with the previous node to obtain the position relationship between the traversed node and the previous node, when the position relationship is the containing relationship, the server takes the layer represented by the traversed node as the sub-layer of the layer represented by the previous node, and when the position relationship between the layer represented by the traversed node and the layer represented by the previous node is the intersecting relationship or the separating relationship, the server continues to traverse the next node until the traversing is completed on all the nodes. It will be appreciated that when one layer is a sub-layer of another layer, the two layers may be combined into one layer and viewed as an integral page element during the code file generation process.
Considering that each initial layer is used as a sub-layer of other layers, the initial layer may also have sub-layers, so after traversing the one-dimensional array, the sub-layers need to be subjected to recursion treatment, and after the recursion treatment, the sub-layers and the sub-layers contained therein can be combined into a new sub-layer, and finally, the target layer of the target design page is obtained. For example, referring to fig. 3, assuming that the target design page includes three layers, the positional relationship of which is shown in fig. 3, three nodes are included in a one-dimensional array formed by arranging initial layers, the initial layer corresponding to the first node is rectangular, the initial layer corresponding to the second node is circular, the initial layer corresponding to the third node is linear, the second node and the first node are inclusion relationships, the layer where the circular is used as a sub-layer of the layer where the rectangle is located after the one-dimensional array is traversed, and the layer where the circular is also used as a sub-layer of the layer where the straight line is located, so that after the one-dimensional array is traversed, recursive processing is required to be performed on the layer where the circular is located and the layer where the straight line is located, and finally, the rectangular, the straight line and the circular are combined into the target layer.
In the above embodiment, the initial layer with the inclusion relationship is used as the sub-layer, and the sub-layer is recursively processed after traversing is completed, so that the target layer meeting the code file specification can be finally obtained by reorganization, and the accuracy of code file generation is improved.
In one embodiment, extracting a plurality of initial layers from a target design page includes: traversing each design component in the target design page in the case that the design component is contained in the target design page; and disassembling the traversed design assembly to obtain a plurality of initial layers corresponding to the traversed design assembly.
The design component refers to symbol in the search file, and is obtained by grouping a plurality of layers. The design components are obtained by grouping the layers and letting them appear as a "layer". Specifically, for each design component in the sketch file, the server may break the combined components into individual layers by using sketchtool.
For example, assuming that a design component is obtained by grouping rectangles and ellipses, after the skitchtool is disassembled, two initial layers are obtained, which are an initial layer where the rectangles are located and an initial image where the ellipses are located.
In the above embodiment, in the case that the target design page includes the design components, each design component in the target design page is traversed, the traversed design components are disassembled, a plurality of initial layers corresponding to the traversed design components are obtained, and the atomized layers are obtained through the disassembly, so that the target layers obtained through the structure recombination subsequently better conform to the code file specification, and the accuracy of code file generation is further improved.
In one embodiment, the extracting a plurality of initial layers from the target design page further includes: in the case that the slice is included in the target design page, exporting the slice included in the target design page as an initial layer; under the condition that the target design page comprises pictures, exporting the pictures included in the target design page into an initial layer; in the case that the shadow area is included in the target design page, exporting the shadow area included in the target design page as an initial layer; in the case that the irregular shape is included in the target design page, the irregular shape included in the target design page is exported as an initial layer.
Wherein the slice may export a particular region in the canvas as a file. One may have multiple slices, each slice being capable of exporting a different file. In the sktch slice can be considered a common layer and thus multiple layers to be derived can be grouped into an entire slice, which is moved as the group is moved. The designer can enter the add (Insert) > Slice (Slice) of the toolbar during the design process and click on the canvas to drag the mouse to create a new Slice area. In the slicing tool, one layer can also be clicked directly, and the sktch will immediately build a new slice around that layer.
Specifically, since the slice can be regarded as one layer, the server can directly export the slice of the target design page when performing layer extraction, and each slice can be exported as one initial layer. In particular applications, the server may export each picture as an initial layer or export multiple layers as a whole as an initial layer for the pictures in the target design page, since the pictures cannot be edited in the Sketch. Because of design requirements, shadow areas and irregular shapes may exist in the target design page, the shadows are not edited and need to be exported as a whole, so when a server traverses each element in the target design page, if traversing to the shadow areas, the shadow areas can be directly exported as an initial layer, and when traversing to the irregular shapes, the irregular shapes can be directly exported as an initial layer.
In the above embodiment, the slice, the picture, the shadow area and the irregular shape are all derived as the initial layer, so that the subsequent structure reorganization can be better performed, and the accuracy of the generated code file is further improved.
In one embodiment, in the case that a picture is included in the target design page, exporting the picture included in the target design page as an initial layer includes: under the condition that a plurality of pictures are included in the target design page, determining the position relation among the pictures; when the position relation among the pictures indicates that the pictures with the coupled position relation exist in the pictures, the pictures with the coupled position relation are aggregated to obtain corresponding target pictures; and exporting the target picture to a corresponding initial layer.
The pictures with coupled position relations refer to at least one part of intersection between the pictures, so that the pictures are mutually associated and can be regarded as a whole.
Specifically, when the server detects that the target design page comprises a plurality of pictures, the server can determine the position relation among the pictures, when the pictures with the coupled position relation exist in the pictures, the pictures with the coupled position relation are aggregated, and the aggregated pictures are integrally used as a target picture, so that the server can derive the target picture to obtain an initial layer. It can be understood that, for the pictures whose position relationships are not coupled, the pictures can be independently derived as an initial layer, so if no position relationship coupling exists between any two layers in the target design page, the server derives each picture in the target design as an initial layer.
In the above embodiment, when the position relationship between the pictures indicates that the position relationship coupled pictures exist in the plurality of pictures, the plurality of pictures coupled in the position relationship are aggregated to obtain the corresponding target picture, and the target picture is exported as the corresponding initial layer.
In one embodiment, generating an object code file corresponding to a target design page from a target layer of the target design page includes: determining each of the constituent layers contained in the target layer; acquiring code information corresponding to each composition layer, and splicing the acquired code information according to the positions of each composition layer in the target layer to obtain layer code information corresponding to the target layer; and splicing the code information of each layer according to the position of each target layer in the target design page to obtain a target code file corresponding to the target design page.
The composition layer refers to a layer composing the target layer, and the composition layer may include an initial layer, and a sub-layer combined with the initial layer through a recursion process, i.e., a sub-layer of the initial layer, a next sub-layer of the sub-layer, and the like, combined with the initial layer through the recursion process. For example, with continued reference to fig. 3, assuming that the rectangular, circular and linear structures in fig. 3 are rearranged to obtain a target layer, the constituent layers of the target layer include a layer where the rectangle is located, a layer where the circle is located and a layer where the line is located.
Specifically, in the process of structure reorganization, the server can store the composition layer information of each target layer obtained by reorganization, further in the process of generating a code file, the server can determine each composition layer contained in each target layer by reading the composition layer information stored in the structure reorganization process, further after generating the code information for each composition layer, the server can splice the obtained code information according to the position of each composition layer in the target layer, so as to obtain the layer code information corresponding to the target layer, and after obtaining the layer code information of each target layer, the server can splice the layer code information according to the position of each target layer in the target design page, so as to obtain the target code file corresponding to the target design page.
In the above embodiment, the code information corresponding to each component layer is obtained, the obtained code information is spliced according to the position of each component layer in the target layer, the layer code information corresponding to the target layer is obtained, and the layer code information is spliced according to the position of each target layer in the target design page, so that the target code file corresponding to the target design page is obtained, the target code file of the target design page can be quickly generated, and the generation efficiency of the target code file is improved.
In one embodiment, the target design page includes a plurality of target layers; generating an object code file corresponding to the target design page according to the target layer of the target design page, including: comparing each two target layers in the plurality of target layers; when the comparison result indicates that the two compared target layers are the same, deleting one of the two compared target layers; and generating a target code file corresponding to the target design page according to the target layer left after the deleting process.
Specifically, in the target layers obtained by the server through the structure reorganization, there may be some repeated layers, so the server may compare each two target layers in all the obtained target layers, and because the target layers are obtained through the structure reorganization, the server needs to compare each component layer in the target layers and the positions of the component layers in the comparison process, if the component layers contained in the two target layers are completely identical and the positions of the component layers in the target design page are the same, it may be determined that the two target layers are the same layers, and in order to avoid errors in the code file generation process, the server may delete one of the same two target layers. It is understood that when two target layers are in the process of comparing, if any one of the component layers in one of the target layers is different from all of the component layers in the other target layer, or if any one of the component layers in one of the target layers is different from all of the component layers in the other target layer, the two icon layers can be regarded as different layers.
After the comparison is completed for every two target layers, the server can generate a target code file corresponding to the target design page according to some target layers after the deletion processing.
In the above embodiment, by comparing each two target layers in the plurality of target layers, when the comparison result indicates that the two compared target layers are the same, deleting one of the two compared target layers, and generating the target code file corresponding to the target design page according to the target layers remaining after the deletion processing, the accuracy of the generated code file is further improved.
In one embodiment, the file processing method further includes the steps of: sending an object code file to a terminal; the terminal is used for compiling the target code file through the developer tool client to show a target interface corresponding to the file.
Specifically, after generating the object code file of the file uploaded by the terminal, the server may further send the generated object code file to the terminal. The user of the terminal (usually front-end development engineer) can generate a target interface by compiling the generated target code file through the developer tool client, so that the target interface corresponding to the file can be displayed, and the front-end page designed by the designer can be obtained by the user of the terminal. It should be noted that, in other embodiments, after receiving the object code file, the terminal may save the object code file, and the user of the terminal may copy the saved code file to other computer devices, and compile and display the code file through a developer tool client installed in the other computer devices.
Alternatively, the server may send the object code file to the terminal, and the server may actively send the object code file to the terminal after generating the object code file. In other embodiments, after generating the target code file, the server may save the target code file and return a code file generation result to the terminal, so that the terminal may initiate a download request to the server based on the code file generation result, and after receiving the download request, the server queries the saved target code file according to the code file identifier carried in the download request, and sends the queried target code file to the terminal.
In the above embodiment, the server may send the object code file to the terminal, so that the terminal may display the object interface corresponding to the file, thereby simplifying the process of generating the object code file by the terminal and improving the interaction efficiency in the code file generation process.
In a specific embodiment, as shown in fig. 4, a file processing method is provided, and the method is applied to the server 104 in fig. 1 for illustration, and includes the following steps:
step 402, begin parsing the sketch file.
Specifically, the terminal may initiate access to the server through the target domain name of the server, upload the sketch file through the target page after the server returns to the target page, and after receiving the sketch file uploaded by the terminal, the server starts to parse the sketch file, and proceeds to the parsing flow from step 404 to step 418.
Step 404, disassemble the symbol layer.
Specifically, the symbol layers are component layers obtained by grouping, and the component layers can be shared by all design pages, so that a server can disassemble all symbol layers related to a sketch file at first, and one symbol layer can be disassembled to obtain a plurality of initial layers.
Step 406, is a single page? If yes, go to step 408, if no, go to step 410.
Specifically, the server determines whether the search file has only one design page, if so, it directly proceeds to step 410, otherwise, it proceeds to step 408.
Step 408, traverse each page.
Specifically, the server may traverse each design page, determine the traversed design page as a target design page, and execute subsequent steps on the target design page.
In step 410, the layers are extracted.
Specifically, for each target design page, the server may perform layer extraction to obtain an initial layer. In the process of layer extraction, for the object directly drawn by the sketch software, one object can be extracted to obtain an initial layer, and the object directly drawn by the sketch software is usually in a regular shape and can comprise any one or more of a rectangle, an ellipse, a straight line and the like. For objects which cannot be directly drawn by the sketch software, the objects comprise pictures, shadow areas and irregular shapes, and the objects can be regarded as layers, wherein for the pictures, when the position relation coupling exists between the pictures, the pictures with the position relation coupling can be aggregated to obtain a target picture, the target picture is exported to be an initial layer, and for the pictures which are not coupled with other layers and have the position relation coupling, the picture can be exported to be the initial layer; in addition, a shadow region may be derived as an initial layer, an irregular shape, or as an initial layer. In addition, for a slice in a design page, it can be considered as one layer, so that one slice can be exported as one initial layer.
Step 412, flattening the layer.
At step 414, the structure is reorganized.
Specifically, the server may obtain position information corresponding to each initial layer, arrange the plurality of initial layers into a one-dimensional array according to the position information corresponding to each initial layer, traverse each node in the one-dimensional array, and perform structural reorganization on the plurality of initial layers based on a position relationship between the traversed node and a previous node, so as to obtain a target layer of the target design page.
The server traverses each node in the one-dimensional array, and based on the position relationship between the traversed node and the last node, the structure reorganization of the plurality of initial layers can be specifically: traversing each node in the one-dimensional array; when the position relationship between the traversed node and the previous node is the containing relationship, taking the layer represented by the traversed node as a sub-layer of the layer represented by the previous node; when the position relationship between the traversed node and the previous node is a non-inclusion relationship, continuing to traverse the next node; and under the condition that the last node in the one-dimensional array is traversed, carrying out recursion processing on each sub-layer to obtain a target layer of the target design page.
And step 416, redundancy processing.
Specifically, the server may compare every two target layers of the plurality of target layers; and when the comparison result indicates that the two compared target layers are the same, deleting one of the two compared target layers.
At step 418, a code file is generated.
Specifically, the server may generate the object code file corresponding to the object design page according to the object layer remaining after the deletion process. In a specific generation process, the server can determine each composition layer contained in the target layer; acquiring code information corresponding to each composition layer, and splicing the acquired code information according to the positions of each composition layer in the target layer to obtain layer code information corresponding to the target layer; and splicing the code information of each layer according to the position of each target layer in the target design page to obtain a target code file corresponding to the target design page.
Further, the server may also send the object code file to the terminal, and the terminal may compile the object code file through the developer tool client to display the object interface corresponding to the file.
According to the file processing method, the uploaded file can be analyzed by the server to obtain the target code file only by accessing the server through the target domain name, the method can be applied to any operating system, and the flexibility in file analysis is improved.
In one embodiment, as shown in fig. 5, a file processing method is provided, and the method is applied to the server 102 in fig. 1 for illustration, and includes the following steps:
step 502, a target page returned by the target domain name access server is displayed.
The target page refers to a page which can be used for uploading a sketch file.
Specifically, the terminal can initiate access to the server through the target domain name of the server, and after the server returns to the target page, the target page returned by the server is displayed. In practical application, the terminal can access the server through the browser, so that the target page is displayed in the browser. In other embodiments, the terminal may access the server through the developer tool client so that the target page may be presented in the developer tool client.
Step 504, in response to the uploading event triggered at the target page, displaying the uploading result of uploading the file to the server.
The uploading result comprises an uploading result indicating that the file uploading is successful or an uploading result indicating that the file uploading is failed.
Specifically, the target page may include an upload control for uploading the sketch file, where the upload control may be implemented by various interface elements, such as buttons, sliders, characters, graphics, hyperlinks, and the like. The user corresponding to the terminal can trigger the uploading control in the target page and select the tab file to be uploaded to trigger the uploading event, the terminal can respond to the uploading event and upload the selected tab file to the server, the server returns the uploading result, and the terminal can further display the uploading result.
The triggering operation may specifically be a touch operation, a cursor operation, a key operation, or a voice operation. The touch operation may be a touch click operation, a touch press operation, or a touch slide operation, and the touch operation may be a single-point touch operation or a multi-point touch operation; the cursor operation may be an operation of controlling the cursor to click or an operation of controlling the cursor to press; the key operation may be a virtual key operation or a physical key operation, etc.
In step 506, if the uploading result indicates that the uploading is successful, a code file generation result is returned at the target page display server, and the code file generation result is used to access the target code file generated for the uploaded file.
Wherein the code file generation result may be used to access the object code file generated for the file. Alternatively, after generating the object code file, the server may directly return the object code file to the terminal, in which case the code file generation result displayed by the terminal may be a code file list, where the code file list includes a plurality of generated object code files, and when the user clicks on one of the object code files, the code content of the object code file may be browsed. In other embodiments, after generating the object code file, the server may return the code file identifier of the object code file to the terminal, in which case the code file generation result may be a code file identifier list, where the code file identifier list includes the code file identifiers of the respective object code files.
Specifically, when the uploading result indicates that the uploading is successful, the server successfully receives the tab file uploaded by the terminal, so that the server can analyze the tab file to obtain at least one object code file corresponding to the tab file. In the analysis process, extracting a plurality of initial layers from a target design page aiming at the target design page in the sketch file; performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications; and generating a target code file corresponding to the target design page according to the target layer of the target design page. For specific implementation of each step in the parsing process, reference may be made to the above embodiments, and the disclosure is not repeated here.
After the server analyzes and obtains the target code file, the server can return a code file generation result to the server, so that the terminal can display the code file generation result returned by the server in the target page, and the terminal can access the target code file generated for the sketch file through the displayed code file generation result.
For example, referring to fig. 6, an interface schematic diagram of a process of uploading a tab file is shown, where a page 602 is a schematic diagram of a target page displayed by a terminal in an embodiment, where an upload control 602A is displayed in the target page, when a user performs a trigger operation on the upload control, another page 604 may be entered, through which page 604A tab file list 604A that may be uploaded to a server may be displayed, where one or more tab files that may be uploaded to the server may be included in the tab file list 604A, and the user may select a tab file that may need to be uploaded to the server. Further, referring to fig. 7, for an interface schematic diagram of the target page after the uploading is completed, as can be seen in fig. 7, the target page may display an uploading result 702, where the uploading result indicates that the selected sketch file has been uploaded successfully, and further, the terminal may display a code file generating result returned by the server, that is, a generated file list 704 in fig. 7, in the target page, where the generated file list includes two code file identifiers.
In the above embodiment, the target page returned by the target domain name access server is displayed, the uploading result of uploading the file to the server is displayed in response to the uploading event triggered on the target page, and the code file generating result returned by the server is displayed on the target page when the uploading result indicates that the uploading is successful.
In one embodiment, presenting a target page returned by a target domain name access server includes: and responding to an access event which is triggered in the browser and accesses the server through the target domain name, and displaying the target page returned by the server.
Specifically, a user corresponding to the terminal can open a browser, input a target domain name of the server in the browser, trigger an access event for accessing the server through the target domain name, and initiate access to the server through the access event terminal, so that the server can return to a target page. And uploading the sketch file by the user corresponding to the terminal through the target page.
In one embodiment, presenting a target page returned by a target domain name access server includes: and responding to an access event which is triggered in the developer tool client and accesses the server through the target domain name, and displaying the target page returned by the server.
Specifically, a user corresponding to the terminal can install the developer tool client, an access event for accessing the server through the target domain name is triggered by inputting the target domain name of the server in the developer tool client, the terminal can initiate access to the server through the access event, so that the server can return to a target page, and the user corresponding to the terminal can upload a sketch file through the target page.
In the embodiment, the access event that the server is accessed through the target domain name is triggered in the browser or the developer tool client, so that the interaction cost in the parsing process of the tab file can be saved, and the interaction efficiency can be improved.
In one embodiment, the code file generation result is a code file identification list, wherein the code file identification list comprises code file identifications; the method further comprises the steps of: displaying a download control corresponding to the code file identification on the target page; in response to a trigger event for the download control, the code file corresponding to the download control is downloaded from the server identifying the characterized object code file.
Wherein the code file identification is used to uniquely identify the object code file generated by the server, the code file identification may be, for example, a file name of the object code file.
Specifically, in the target page displayed by the terminal, a download control corresponding to each code file identifier may be displayed, where the download control may be implemented by various interface elements such as buttons, sliders, characters, graphics, hyperlinks, and the like. When a user performs trigger operation on any one of the download controls, the terminal can respond to a trigger event generated by the trigger operation to download the target code file represented by the code file identifier corresponding to the download control from the server.
For example, with continued reference to fig. 7, 706 and 708 in fig. 7 are download controls, when the user triggers the download control 704, the server may download the object code file identified by "index. Xcss" from the server in response to the trigger event generated by the trigger operation, and when the user triggers the download control 706, the server may download the object code file identified by "index. Wxml" from the server in response to the trigger event generated by the trigger operation.
In the above embodiment, by displaying the download control corresponding to the code file identifier on the target page, the terminal may download the target code file represented by the code file identifier corresponding to the download control from the server in response to the trigger event for the download control, thereby improving flexibility of the terminal to acquire the target code file.
In a specific embodiment, the present application further provides an application scenario, in which the file processing method of the present application may be applied. In the related art, when parsing a sketch file, a codeFun design draft intelligent sketch plug-in can be used, and after logging in by using the sketch plug-in, an uploading design is clicked in the sketch software, and finally, the parsed design draft generates a code file and uploads the code file to a codeFun platform, and similar to the image book design draft plug-in, the like. These are all the design manuscripts that are uploaded after the tab platform logs in the platform using the plug-in after downloading the tab plug-in. In the related art, the Mac os system is severely relied on because the sketch software can only be installed on the Mac os system, and the windows and liunx platform users cannot use. In addition, the related art needs to download the corresponding tab plug-in, then operate in the tab software, which is complicated and has a certain learning cost. In the embodiment of the application, the sketch design is used for converting codes, the sketch file is transmitted to the server after clicking the upload button at the webpage end, the server analyzes the sketchtool file by using the sketchtool-cli, the sketch file is converted into the small program code through a series of analysis operations, and the code file which can be generated by the terminal is downloaded to the local. Referring to fig. 8, a specific flowchart of a file processing method in this embodiment specifically includes the following steps:
At step 802, the user clicks the upload button.
Specifically, the target page displayed by the terminal includes an upload button, and the user can click the upload button to upload the tab file.
Step 804, selecting a corresponding sketch file.
Specifically, after the user clicks the upload button, the terminal may display a tab file list, from which the user may select a tab file that needs to be uploaded to the server for parsing, and the terminal may select a corresponding tab file in response to a selection operation triggered by the user.
At step 806, the server receives the sketch file.
In step 808, the sketchtool-cli parses the sketch file uploaded by the user.
Specifically, the server may parse the user's uploaded sketch file through sketchtool-cli and extract an initial layer for each design page of the sketch file. In the layer extraction process, the server can disassemble the design components in the sketch file to obtain an atomized initial layer. For objects directly drawn by the sketch software, an object can be extracted to obtain an initial layer. For objects which cannot be directly drawn by the sketch software, the objects comprise pictures, shadow areas and irregular shapes, and the objects can be regarded as layers, wherein for the pictures, when the position relation coupling exists between the pictures, the pictures with the position relation coupling can be aggregated to obtain a target picture, the target picture is exported to be an initial layer, and for the pictures which are not coupled with other layers and have the position relation coupling, the picture can be exported to be the initial layer; in addition, a shadow region may be derived as an initial layer, an irregular shape, or as an initial layer. In addition, for a slice in a design page, it can be considered as one layer, so that one slice can be exported as one initial layer.
Step 810, analyzing the reorganized sketch layer information.
Specifically, the server may obtain the position information corresponding to each initial layer, and according to the position information corresponding to each initial layer, arrange the plurality of initial layers into a one-dimensional array, traverse each node in the one-dimensional array, and based on the position relationship between the traversed node and the previous node, perform structural reorganization on the plurality of initial layers may specifically be: traversing each node in the one-dimensional array; when the position relationship between the traversed node and the previous node is the containing relationship, taking the layer represented by the traversed node as a sub-layer of the layer represented by the previous node; when the position relationship between the traversed node and the previous node is a non-inclusion relationship, continuing to traverse the next node; and under the condition that the last node in the one-dimensional array is traversed, carrying out recursion processing on each sub-layer to obtain a target layer of the target design page.
Optionally, the server may compare each two of the plurality of target layers; and when the comparison result indicates that the two compared target layers are the same, deleting one of the two compared target layers.
At step 812, a corresponding applet code file is generated.
Specifically, the server may generate the object code file corresponding to the object design page according to the object layer remaining after the deletion process. In a specific generation process, the server can determine each composition layer contained in the target layer; acquiring code information corresponding to each composition layer, and splicing the acquired code information according to the positions of each composition layer in the target layer to obtain layer code information corresponding to the target layer; and splicing the code information of each layer according to the position of each target layer in the target design page to obtain a target code file corresponding to the target design page. In this embodiment, the object code file is an applet code file.
In step 814, the corresponding code file is downloaded in the browser.
Specifically, the server may return the code file identifier of the generated applet code file to the terminal, the code file identifier may be displayed in a list form in a target page of the terminal, and a corresponding download control is displayed for each code file identifier, when the user triggers the download control, the terminal sends a download request carrying the code file identifier corresponding to the download control to the server, and the server returns the corresponding applet code file to the terminal according to the download request.
After receiving the applet code file returned by the server, the terminal can compile the object code file through the developer tool client to obtain a target interface, and can display the target interface.
In the embodiment, the user can directly upload the sketch design draft in the browser to generate the code file, so that the efficiency is improved, and the use cost of the user is reduced by a simple interaction mode.
It should be understood that, although the steps in the flowcharts related to the above embodiments are sequentially shown as indicated by arrows, these steps are not necessarily sequentially performed in the order indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described in the above embodiments may include a plurality of steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of the steps or stages is not necessarily performed sequentially, but may be performed alternately or alternately with at least some of the other steps or stages.
Based on the same inventive concept, the embodiment of the application also provides a file processing device for realizing the above related file processing method. The implementation of the solution provided by the device is similar to the implementation described in the above method, so the specific limitation in one or more embodiments of the document processing device provided below may refer to the limitation of the document processing method hereinabove, and will not be repeated herein.
In one embodiment, as shown in fig. 9, there is provided a file processing apparatus 900 comprising:
a file receiving module 902, configured to receive a file uploaded by a terminal that initiates access through a target domain name; the file comprises at least one design page;
the layer extraction module 904 is configured to extract, for a target design page in at least one design page, a plurality of initial layers from the target design page;
the structure reorganization module 906 is configured to reorganize the multiple initial layers according to the positional relationship between the multiple initial layers, so as to obtain a target layer of the target design page, where the target layer meets the code file specification;
the code file generation module 908 is configured to generate, according to a target layer of the target design page, a target code file corresponding to the target design page.
The file processing device receives the file uploaded by the terminal which initiates access through the target domain name, the file comprises at least one design page, a plurality of initial layers are extracted from the target design page aiming at the target design page in the at least one design page, the plurality of initial layers are subjected to structural recombination according to the position relation among the plurality of initial layers to obtain target layers of the target design page, the target layers conform to code file specifications, and the target code file corresponding to the target design page is generated according to the target layers of the target design page, so that the file is analyzed at the server side.
In one embodiment, the structural reorganization module is further configured to: acquiring position information corresponding to each initial layer respectively; according to the position information corresponding to each initial layer, arranging a plurality of initial layers into a one-dimensional array; traversing each node in the one-dimensional array, and carrying out structural reorganization on a plurality of initial layers based on the position relation between the traversed node and the last node so as to obtain a target layer of the target design page.
In one embodiment, the structural reorganization module is further configured to: traversing each node in the one-dimensional array; when the position relationship between the traversed node and the previous node is the containing relationship, taking the layer represented by the traversed node as a sub-layer of the layer represented by the previous node; when the position relationship between the traversed node and the previous node is a non-inclusion relationship, continuing to traverse the next node; and under the condition that the last node in the one-dimensional array is traversed, carrying out recursion processing on each sub-layer to obtain a target layer of the target design page.
In one embodiment, the layer extraction module is further configured to traverse each design component in the target design page if the design component is included in the target design page; and disassembling the traversed design assembly to obtain a plurality of initial layers corresponding to the traversed design assembly.
In one embodiment, the layer extraction module is further configured to, in a case where a slice is included in the target design page, export the slice included in the target design page as an initial layer; under the condition that the target design page comprises pictures, exporting the pictures included in the target design page into an initial layer; in the case that the shadow area is included in the target design page, exporting the shadow area included in the target design page as an initial layer; in the case that the irregular shape is included in the target design page, the irregular shape included in the target design page is exported as an initial layer.
In one embodiment, the layer extraction module is further configured to determine a positional relationship between the pictures in a case that the target design page includes a plurality of pictures; when the position relation among the pictures indicates that the pictures with the coupled position relation exist in the pictures, the pictures with the coupled position relation are aggregated to obtain corresponding target pictures; and exporting the target picture to a corresponding initial layer.
In one embodiment, the code file generating module is further configured to determine each component layer included in the target layer; acquiring code information corresponding to each composition layer, and splicing the acquired code information according to the positions of each composition layer in the target layer to obtain layer code information corresponding to the target layer; and splicing the code information of each layer according to the position of each target layer in the target design page to obtain a target code file corresponding to the target design page.
In one embodiment, the target design page includes a plurality of target layers; the code file generating module is also used for comparing every two target layers in the target layers; when the comparison result indicates that the two compared target layers are the same, deleting one of the two compared target layers; and generating a target code file corresponding to the target design page according to the target layer left after the deleting process.
In one embodiment, the above-mentioned file processing device further includes: the code file sending module is used for sending the target code file to the terminal; the terminal is used for compiling the target code file through the developer tool client to show a target interface corresponding to the file.
In one embodiment, as shown in fig. 10, there is provided a file processing apparatus 1000 including:
the target page display module 1002 is configured to display a target page returned by the target domain name access server:
an upload result display module 1004, configured to respond to an upload event triggered on the target page, and display an upload result of uploading the file to the server;
and the generated result display module 1006 is configured to generate a result of the code file returned by the target page display server when the uploading result indicates that the uploading is successful, where the code file generation result is used to access the target code file generated for the file.
According to the file processing device, the target page returned by the target domain name access server is displayed, the uploading result of uploading the file to the server is displayed in response to the uploading event triggered by the target page, and the code file generation result returned by the server is displayed on the target page under the condition that the uploading result indicates that the uploading is successful.
In one embodiment, the target page presentation module is further configured to: responding to an access event which is triggered in the browser and accesses the server through the target domain name, and displaying a target page returned by the server; or in response to an access event triggered in the developer tool client that accesses the server through the target domain name, exposing the target page returned by the server.
In one embodiment, the code file generation result is a code file identification list, wherein the code file identification list comprises code file identifications; the file processing device also comprises a downloading module, a downloading control and a downloading control, wherein the downloading module is used for displaying a downloading control corresponding to the code file identifier on the target page; in response to a trigger event for the download control, the code file corresponding to the download control is downloaded from the server identifying the characterized object code file.
The respective modules in the above-described file processing apparatus may be implemented in whole or in part by software, hardware, and combinations thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.
In one embodiment, a computer device is provided, which may be a server, and the internal structure of which may be as shown in fig. 11. The computer device includes a processor, a memory, an Input/Output interface (I/O) and a communication interface. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface is connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The database of the computer device is used to store the generated code file data. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a file processing method.
In one embodiment, a computer device is provided, which may be a terminal, and the internal structure thereof may be as shown in fig. 12. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input means. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless mode can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a file processing method. The display unit of the computer equipment is used for forming a visual picture, and can be a display screen, a projection device or a virtual reality imaging device, wherein the display screen can be a liquid crystal display screen or an electronic ink display screen, the input device of the computer equipment can be a touch layer covered on the display screen, can also be a key, a track ball or a touch pad arranged on a shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.
It will be appreciated by those skilled in the art that the structures shown in fig. 11 and 12 are merely block diagrams of portions of structures associated with the present application and are not intended to limit the computer device to which the present application may be applied, and that a particular computer device may include more or fewer components than those shown, or may combine certain components, or have different arrangements of components.
In one embodiment, a computer device is provided that includes a memory having a computer program stored therein and a processor that when executing the computer program performs the steps of the method of processing a file in any of the embodiments described above.
In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when executed by a processor, implements the steps of a file processing method of any of the embodiments described above.
In an embodiment, a computer program product is provided comprising a computer program which, when executed by a processor, implements the steps of the file processing method of any of the embodiments described above.
It should be noted that, the user information (including but not limited to user equipment information, user personal information, etc.) and the data (including but not limited to data for analysis, stored data, presented data, etc.) related to the present application are information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data need to comply with the related laws and regulations and standards of the related country and region.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high density embedded nonvolatile Memory, resistive random access Memory (ReRAM), magnetic random access Memory (Magnetoresistive Random Access Memory, MRAM), ferroelectric Memory (Ferroelectric Random Access Memory, FRAM), phase change Memory (Phase Change Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (Random Access Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in the form of a variety of forms, such as static random access memory (Static Random Access Memory, SRAM) or dynamic random access memory (Dynamic Random Access Memory, DRAM), and the like. The databases referred to in the embodiments provided herein may include at least one of a relational database and a non-relational database. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processor referred to in the embodiments provided in the present application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computing, or the like, but is not limited thereto.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.
The foregoing examples illustrate only a few embodiments of the application and are described in detail herein without thereby limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of the application should be assessed as that of the appended claims.

Claims (17)

1. A method of processing a document, the method comprising:
receiving a file uploaded by a terminal initiating access through a target domain name; the file comprises at least one design page;
extracting a plurality of initial layers from a target design page in the at least one design page aiming at the target design page;
performing structural reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications;
And generating a target code file corresponding to the target design page according to the target layer of the target design page.
2. The method of claim 1, wherein the performing structural reorganization on the plurality of initial layers according to the positional relationship between the plurality of initial layers to obtain a target layer of the target design page, where the target layer meets a code file specification, includes:
acquiring position information corresponding to each initial layer respectively;
according to the position information corresponding to each initial layer, arranging the initial layers into a one-dimensional array;
traversing each node in the one-dimensional array, and carrying out structural reorganization on the plurality of initial layers based on the position relation between the traversed node and the last node so as to obtain a target layer of the target design page.
3. The method of claim 2, wherein traversing each node in the one-dimensional array, based on a positional relationship between the traversed node and a previous node, restructuring the plurality of initial layers comprises:
traversing each node in the one-dimensional array;
When the position relationship between the traversed node and the previous node is the containing relationship, taking the layer represented by the traversed node as a sub-layer of the layer represented by the previous node;
when the position relationship between the traversed node and the previous node is a non-inclusion relationship, continuing to traverse the next node;
and under the condition that the last node in the one-dimensional array is traversed, carrying out recursion processing on each sub-layer to obtain a target layer of the target design page.
4. A method according to any one of claims 1 to 3, wherein the extracting a plurality of initial layers from the target design page comprises:
traversing each design component in the target design page in the case that the design component is contained in the target design page;
and disassembling the traversed design assembly to obtain a plurality of initial layers corresponding to the traversed design assembly.
5. A method according to any one of claims 1 to 3, wherein said extracting a plurality of initial layers from said target design page comprises:
exporting the slice included in the target design page as an initial layer under the condition that the slice is included in the target design page;
Under the condition that the target design page comprises pictures, exporting the pictures included in the target design page into an initial layer;
in the case that the shadow area is included in the target design page, exporting the shadow area included in the target design page as an initial layer;
in the case that the irregular shape is included in the target design page, the irregular shape included in the target design page is exported as an initial layer.
6. The method according to claim 5, wherein, in the case that the picture is included in the target design page, exporting the picture included in the target design page as an initial layer includes:
determining a position relationship between pictures under the condition that a plurality of pictures are included in the target design page;
when the position relation among the pictures indicates that the pictures with the coupled position relation exist in the pictures, the pictures with the coupled position relation are aggregated to obtain corresponding target pictures;
and exporting the target picture to a corresponding initial layer.
7. The method of claim 1, wherein generating the object code file corresponding to the object design page from the object layer of the object design page comprises:
Determining each component layer contained in the target layer;
acquiring code information corresponding to each composition layer, and splicing the acquired code information according to the positions of each composition layer in the target layer to obtain layer code information corresponding to the target layer;
and splicing the code information of each layer according to the position of each target layer in the target design page to obtain a target code file corresponding to the target design page.
8. The method of claim 1, wherein the target design page comprises a plurality of target layers; the generating, according to the target layer of the target design page, a target code file corresponding to the target design page includes:
comparing each two target layers in the plurality of target layers;
when the comparison result indicates that the two compared target layers are the same, deleting one of the two compared target layers;
and generating a target code file corresponding to the target design page according to the target layer left after the deleting process.
9. The method according to any one of claims 1 to 8, further comprising:
Sending the target code file to the terminal;
and the terminal is used for compiling the target code file through a developer tool client so as to display a target interface corresponding to the file.
10. A method of processing a document, the method comprising:
displaying a target page returned by the target domain name access server:
responding to an uploading event triggered on the target page, and displaying an uploading result of uploading the file to the server;
and displaying a code file generation result returned by the server on the target page when the uploading result indicates that the uploading is successful, wherein the code file generation result is used for accessing the target code file generated for the file.
11. The method of claim 10, wherein the exposing the target page returned by the target domain name access server comprises:
responding to an access event which is triggered in the browser and accesses the server through the target domain name, and displaying a target page returned by the server; or alternatively
And responding to an access event which is triggered in the developer tool client and accesses the server through the target domain name, and displaying the target page returned by the server.
12. The method of claim 10, wherein the code file generation result is a code file identification list, and the code file identification list includes code file identifications; the method further comprises the steps of:
displaying a download control corresponding to the code file identifier on the target page;
in response to a trigger event for a download control, downloading, from a server, a code file corresponding to the download control identifying the characterized object code file.
13. A document processing apparatus, the apparatus comprising:
the file receiving module is used for receiving the file uploaded by the terminal which initiates access through the target domain name; the file comprises at least one design page;
the layer extraction module is used for extracting a plurality of initial layers from a target design page aiming at the target design page in the at least one design page;
the structure reorganization module is used for carrying out structure reorganization on the plurality of initial layers according to the position relation among the plurality of initial layers to obtain target layers which are of the target design page and accord with code file specifications;
and the code file generation module is used for generating a target code file corresponding to the target design page according to the target layer of the target design page.
14. A document processing apparatus, the apparatus comprising:
the target page display module is used for displaying the target page returned by the target domain name access server:
the uploading result display module is used for responding to the uploading event triggered on the target page and displaying the uploading result of uploading the file to the server;
and the generated result display module is used for displaying a code file generated result returned by the server on the target page when the uploading result indicates that the uploading is successful, wherein the code file generated result is used for accessing the target code file generated for the file.
15. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor implements the steps of the method of any one of claims 1 to 12 when the computer program is executed.
16. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the steps of the method of any of claims 1 to 12.
17. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, implements the steps of the method of any one of claims 1 to 12.
CN202310145224.0A 2023-02-07 2023-02-07 File processing method, device, computer equipment and storage medium Pending CN116974556A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310145224.0A CN116974556A (en) 2023-02-07 2023-02-07 File processing method, device, computer equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310145224.0A CN116974556A (en) 2023-02-07 2023-02-07 File processing method, device, computer equipment and storage medium

Publications (1)

Publication Number Publication Date
CN116974556A true CN116974556A (en) 2023-10-31

Family

ID=88480350

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310145224.0A Pending CN116974556A (en) 2023-02-07 2023-02-07 File processing method, device, computer equipment and storage medium

Country Status (1)

Country Link
CN (1) CN116974556A (en)

Similar Documents

Publication Publication Date Title
CN109614424B (en) Page layout generation method, device, computing equipment and medium
CN108182060B (en) Hybrid application point burying method, mobile terminal and system
US20220414326A1 (en) Document applet generation
US10691875B2 (en) Populating visual designs with web content
US11907203B2 (en) Path encoded tree structures for operations
US20110282861A1 (en) Extracting higher-order knowledge from structured data
CN115617327A (en) Low code page building system, method and computer readable storage medium
Lehto et al. Real‐time generalization of XML‐encoded spatial data for the Web and mobile devices
CN111125598A (en) Intelligent data query method, device, equipment and storage medium
CN102158365A (en) User clustering method and system in weblog mining
CN114115844A (en) Page generation method and device, computer equipment and storage medium
CN116610304B (en) Page code generation method, device, equipment and storage medium
US10198408B1 (en) System and method for converting and importing web site content
US20120150899A1 (en) System and method for selectively generating tabular data from semi-structured content
CN116974556A (en) File processing method, device, computer equipment and storage medium
CN113868565A (en) Skin style file editing method and device
CN112001157A (en) Online design method and device for webpage data form
Hadzhikoleva et al. Generalized net model for building responsive design of web pages
US20240037325A1 (en) Ability to add non-direct ancestor columns in child spreadsheets
Singhal et al. Novel Structure for E-business Through Dynamic Web Page Visualization
AU2021106041A4 (en) Methods and systems for obtaining and storing web pages
CN113918142B (en) Data acquisition task code generation method, device and computer equipment
CN118070881A (en) Page processing method, device, computer equipment and storage medium
CN110020337A (en) Web page processing method and Related product
CN118094666A (en) Web CAD construction method based on software as-a-service

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication