Cross-platform interface development method and system based on Sketch, computer device and medium

Abstract

The embodiment of the present invention discloses a cross-platform interface development method and system based on Sketch, a computer device and a medium. In a specific implementation, the method includes: receiving a coded interface design component sent by a server, the coded interface design component includes a cross-platform description file and a Web file based on the original interface design image; generating an interface layout file using a Sketch plug-in based on the coded interface design component, the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel; uploading the interface layout file to the server so that the server transmits the interface layout file to a third development end to form a cross-platform interface. This implementation method generates an interface layout file from the coded interface design component received from the server using a Sketch plug-in, so that the third development end generates a cross-platform interface, thereby achieving repeated and indifferent interface development.

Description

Technical Field

[0001] The present invention relates to computer technology, and more specifically, to a Sketch-based cross-platform interface development method and system, computer equipment and medium. Background Art

[0002] With the iteration of business development requirements and the strict control of UI (User Interface) designers on design drafts, how to save design and development time and the cost of communication has become more and more the focus of development and design. However, at present, due to different opinions among project team members and code permissions between development designers, every interface development process requires UI designers and developers to repeat redundant interface design and development work, thus wasting a lot of development costs. Summary of the invention

[0003] The object of the present invention is to provide a method for solving at least one of the problems existing in the prior art.

[0004] In order to achieve the above object, the present invention adopts the following technical solutions:

[0005] A first aspect of the present invention provides a cross-platform interface development method based on Sketch, which is applied to a first development end and includes:

[0006] Receiving a coded interface design component sent by the server, the coded interface design component comes from the second development end, and the coded interface design component includes a cross-platform description file and a Web file based on the original interface design image;

[0007] Generate an interface layout file using the Sketch plug-in based on the coded interface design component, where the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel;

[0008] The interface layout file is uploaded to the server, so that the server transmits the interface layout file to the third development terminal to form a cross-platform interface.

[0009] In some optional embodiments, generating an interface layout file using a Sketch plug-in based on the coded interface design component further includes:

[0010] Read the web file of the coded interface design component to generate a web display interface;

[0011] Modifying display parameters of the interface based on the Web display interface and data parameters in a cross-platform description file corresponding to the display parameters to create a pattern panel; and

[0012] At least one pattern panel is spliced, and an interface layout file is generated according to the spliced ​​pattern panels and data and pictures corresponding to each pattern panel.

[0013] In some optional embodiments, modifying the display parameters of the Web display interface and the data parameters in the cross-platform description file corresponding to the display parameters to create the pattern panel further includes:

[0014] Modifying display parameters of the interface based on the Web display interface; and

[0015] Using the data bridge to convert the coded interface design component from Flutter-based data to Web data to call and modify the data parameters in the cross-platform description file corresponding to the display parameters; and

[0016] Create a pattern panel based on the modified display parameters and data parameters.

[0017] In some optional embodiments, the display parameters include one or more of canvas size, number of pattern panel graphics, pattern panel label attributes, data number, and data value.

[0018] In some optional embodiments, the first development end includes a material library, in which a plurality of pattern panel materials are stored.

[0019] Creating a pattern panel according to the modified display parameters and data parameters further includes:

[0020] Create a pattern panel using the pattern panel material according to the modified display parameters and data parameters.

[0021] A second aspect of the present invention provides a cross-platform interface development method, which is applied to a third development end and includes:

[0022] Receive an interface layout file sent by a server, where the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel, wherein the interface layout file is generated by using a Sketch plug-in based on a coded interface design component;

[0023] Visually configure the interface layout file to form a cross-platform interface.

[0024] In some optional embodiments, visually configuring the interface layout file to form a cross-platform cross-platform interface includes:

[0025] Draw the pattern panel in the interface according to the interface layout file; and

[0026] Modify the data source in the interface layout file and bind data to the pattern panel to complete the configuration of event binding and jump logic in the pattern panel.

[0027] A third aspect of the present invention provides a cross-platform interface development method, comprising:

[0028] The second development end sends the coded interface design component to the server, which is forwarded to the first development end via the server. The coded interface design component includes a cross-platform description file and a Web file based on the original interface design image.

[0029] The first development end generates an interface layout file using the Sketch plug-in based on the coded interface design component and uploads the file to the server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel; and

[0030] The third development end receives the interface layout file sent by the server and forms a cross-platform interface.

[0031] In some optional embodiments, after the third development end receives the interface layout file sent by the server and forms a cross-platform interface, the method further includes:

[0032] Utilize the 3D engine to embed pre-stored 3D model images into a cross-platform interface.

[0033] A fourth aspect of the present invention provides a cross-platform interface development system, comprising: a first development terminal, a second development terminal, a third development terminal and a server, wherein

[0034] The second development end is configured to send a coded interface design component to the server, which is forwarded to the first development end via the server. The coded interface design component includes a cross-platform description file and a Web file based on the original interface design image.

[0035] The first development end is configured to generate an interface layout file using a Sketch plug-in based on the coded interface design component and upload the file to the server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel; and

[0036] The third development terminal is configured to receive the interface layout file sent by the server and form a cross-platform interface.

[0037] A fifth aspect of the present invention provides a computer device, comprising:

[0038] one or more processors;

[0039] a storage device having one or more programs stored thereon;

[0040] When one or more programs are executed by one or more processors, the one or more processors are caused to implement the method as described above.

[0041] A sixth aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein when the program is executed by a processor, the method described above is implemented.

[0042] The beneficial effects of the present invention are as follows:

[0043] In view of the current existing problems, the present invention develops a cross-platform interface development method and system, computer equipment and medium based on Sketch, generates an interface layout file from the coded interface design components received from the server through the Sketch plug-in, and enables the third development end to perform visual configuration to generate a cross-platform interface, thereby realizing repeated and non-differentiated interface development, thereby compensating for the problems existing in the prior art, effectively improving the flexibility of interface design and development, improving development efficiency, reducing development costs, and having broad application prospects. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] The specific implementation modes of the present invention will be further described in detail below in conjunction with the accompanying drawings.

[0045] Figure 1 A flowchart of a cross-platform interface development method based on Sketch according to an embodiment of the present invention is shown;

[0046] Figure 2 A structural block diagram of a cross-platform interface development system for implementing a cross-platform interface development method according to an embodiment of the present invention is shown;

[0047] Figure 3 An interactive corridor diagram of a cross-platform interface development method according to an embodiment of the present invention is shown;

[0048] Figure 4 A schematic diagram showing a Web display interface in a cross-platform interface development method according to an embodiment of the present invention;

[0049] Figure 5 A schematic diagram showing a pattern panel created by a cross-platform interface development method according to an embodiment of the present invention;

[0050] Figure 6 A schematic diagram showing a combination of a cross-platform interface generated according to an embodiment of the present invention and a 3D model image; and

[0051] Figure 7 A schematic structural diagram of a computer device according to another embodiment of the present invention is shown. DETAILED DESCRIPTION

[0052] In order to explain the present invention more clearly, the present invention is further described below in conjunction with embodiments and drawings. Similar components in the drawings are represented by the same reference numerals. It should be understood by those skilled in the art that the content specifically described below is illustrative rather than restrictive, and the protection scope of the present invention should not be limited thereto.

[0053] like Figure 1 As shown, an embodiment of the present invention provides a cross-platform interface development method based on Sketch, which is applied to a first development end and includes:

[0054] Receiving a coded interface design component sent by the server, the coded interface design component comes from the second development end, and the coded interface design component includes a cross-platform description file and a Web file based on the original interface design image;

[0055] Generate an interface layout file using the Sketch plug-in based on the coded interface design component, where the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel;

[0056] The interface layout file is uploaded to the server, so that the server transmits the interface layout file to the third development terminal to form a cross-platform interface.

[0057] In this embodiment, the coded interface design components received from the server are used to generate an interface layout file through the Sketch plug-in, so that the third development end can generate a cross-platform interface, realizing repetitive and non-differentiated interface development, thereby compensating for the problems existing in the prior art, effectively improving the flexibility of interface design and development, improving development efficiency, reducing development costs, and having broad application prospects.

[0058] In a specific example, Figure 2The cross-platform interface development system is shown, including a server 100, a first development terminal 201, a second development terminal 202, and a third development terminal 203. Among them, the server 100 can be a cloud server or a local server, and the server 100 can be one or more, which is not specifically limited in the present invention. The first development terminal 201, the second development terminal 202, and the third development terminal 203 can be electronic devices that can run development tools, such as computers, portable computers, tablet computers, and smart phones. In an embodiment of the present invention, for example, the first development terminal 201 can be an electronic device on which a Sketch plug-in is loaded and run, the second development terminal 202 can be an electronic device on which an Android Studio tool is loaded and run, and the third development terminal 203 can be an electronic device on which a Flutter-based Web tool is loaded and run. Of course, those skilled in the art can understand that the development tools loaded above are only exemplary, and the present invention is not intended to limit the specific tools loaded on the first development terminal 201, the second development terminal 202, and the third development terminal 203, and the cross-platform interface development method that can implement the embodiment of the present invention shall prevail.

[0059] Combine the following Figure 2 and Figure 3 The cross-platform interface development method of the embodiment of the present invention is described in detail with the detailed workflow of the cross-platform interface development system.

[0060] First, a first client receives a coded interface design component sent by a server, the coded interface design component comes from a second development end, and the coded interface design component includes a cross-platform description file and a Web file based on an original interface design image.

[0061] like Figure 3 As shown, in process S1 , the second development end 202 sends the coded interface design component to the server 100 .

[0062] Specifically, the UI designer designs the original interface design image using the UI design tool on his client (not shown) according to the design idea of ​​the interface development project. Here, the original interface design image is, for example, a sketch, rather than a complete interface presented in the end. Exemplarily, the UI design tool can be, for example, a Sketch tool. The UI designer sends his original interface design image to the second development terminal 202 in the form of a Sketch source file.

[0063] At the second development end 202, the developer uses the Android Studio tool to match the data logic according to the design habits and encodes the original interface design. In particular, in an embodiment of the present invention, the original interface design is converted into a Dart file, a Json file of a DSL, and a Web file of an overall UI interface with an interface configuration and a data configuration that is integrated by configuration to form a coded interface design component. Among them, the Json file of the DSL is a cross-platform description file, that is, a description file of the original interface design that can be read and recognized in a cross-platform. In the next step of the development process, the cross-platform description file and the Web file are mainly used.

[0064] In process S2 , the coded interface component is forwarded to the first development end 201 via the server 100 . That is, the first development end 201 receives the coded interface design component sent by the server 100 .

[0065] Second, the first client 201 generates an interface layout file using the Sketch plug-in based on the coded interface design component, and the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel. It can be understood that in the embodiment of the present invention, the pattern panel refers to a panel such as a pie chart, a bar chart, a line chart, etc., and one or more pattern panels will form an interface after layout.

[0066] Specifically, Figure 3 As shown, in process S3, the developer uses the designed Sketch plug-in to read the Web file of the coded interface design component using the Sketch plug-in to generate a Web display interface.

[0067] In the process S3, the first development end 201 uses the Sketch plug-in to read the Web file of the coded interface design component to generate a Web display interface. The Web display interface is as follows: Figure 4 As shown. The display parameters of the interface are modified based on the Web display interface and the data parameters in the cross-platform description file corresponding to the display parameters to create a pattern panel. It can be understood that modifying the display parameters and data parameters based on the Web display interface specifically means that in response to the click selection, keyboard input and other operations of the developer, the first client 201 modifies the display parameters of the interface based on the display parameters and the data parameters corresponding to the display parameters to create a pattern panel, and the data parameters are the data parameters described in the cross-platform description file.

[0068] More specifically, the first development end 201 modifies the display parameters of the interface based on the Web display interface. Figure 4 As can be seen from the diagram of the web display interface, the display parameters include but are not limited to the canvas size, the number of pattern panel graphics, and the pattern panel graphic properties. Figure 4Taking the pie chart as an example, the developer can modify one or more of the canvas size, number of pattern panel graphics, pattern panel graphic attributes, data quantity and data value of the pie chart in the pattern panel to be formed in the Web display interface according to the needs of the interface development project. Figure 4 As shown, for the canvas size, it can be set to 300-386; for the number of pattern panel graphics, the number of sectors can be set to 4; for the pattern panel graphic attributes, the graphic category can be set to personnel safety, corresponding color, sector radius, etc.; for the number of data, four data items of personnel safety, building deformation, building tilt and high-altitude equipment can be set, but it is not limited to this, and the specific data items can be modified, and the number of items can be increased or deleted; for the data value, personnel safety can be set to 45, building deformation can be set to 25, building tilt can be set to 25, and high-altitude equipment can be set to 10. Those skilled in the art should understand that the above is only exemplary, and the specific content after modification is not limited to this.

[0069] In addition, it should be noted that although Figure 4 The example in FIG. 1 shows that the pattern panel to be created is in the form of a pie chart, but the present application is not limited thereto, and it can be in various pattern forms such as a line chart, a bar chart, etc.

[0070] Furthermore, the first development end uses a data bridge to convert the coded interface design component from Flutter-based data to Web data to call and modify the data parameters in the cross-platform description file corresponding to the display parameters. Specifically, Figure 4 As shown, after the developer completes the modification of the display parameters based on the Web display interface, he can click the generate button in the Web display interface, and the first terminal 201 uses the Sketch plug-in to automatically generate data parameters corresponding to the display parameters through code, that is, the modification of the data parameters is completed. The data parameters are the data parameters in the cross-platform description file. Through this step, the Sketch plug-in is used to update the developer's modified content of the pattern panel to the descriptive code data, and the pattern panel to be created is expressed in data form.

[0071] It is worth noting that the word "modify" in the above description covers the editing and modification of display parameters and data parameters. This is because when importing coded interface design components, Web files and cross-screen description files usually have default values ​​in editable projects, but these default values ​​are only initial default styles, which have no practical significance for specific interface development projects. Therefore, developers need to modify the corresponding editable items on the Web display interface. In addition, because the present invention will generate an interface layout file in subsequent steps and store it in a file, for the subsequent new project development process, developers can directly call the interface layout file stored in the server. Developers only need to make further simple modifications to the interface layout file in the Sketch plug-in for the various display parameters displayed on the Web display interface to complete the new project. Therefore, the word "modify" can also be used for other developers' interface development process. The generation and storage of specific layout files will be described in detail below and will not be repeated here.

[0072] After modifying the display parameters and data parameters, create a pattern panel according to the modified display parameters and data parameters, such as Figure 5 The specific style of the pattern panel after creation is shown. Specifically, the first development end 201 may also include a material library, in which a plurality of pattern panel materials are stored. The first development end 201 may use the Sketch plug-in to create the pattern panel using the pattern panel materials according to the modified display parameters and data parameters. In this step, exemplarily, it will mainly involve the analysis and development of related classes of Sketch-Api in Sketch in the MacOS system regarding Objective-C: injecting MSTextLayer for text editing, MSShapeGroup and Bezier curve NSBezierPath for graphics drawing, and integrating Page, Artboard, and Group for Sketch interface pattern panel development, which will not be repeated here.

[0073] Those skilled in the art should understand that there is not necessarily only one pattern panel in an interface development project. For example, if an interface design is provided for a smart city theme, the city theme will visualize various aspects such as personnel safety, building deformation, building inclination, and high-altitude equipment in the construction data, the layout ratio of indicator lights, cameras, and commanders in each area of ​​the traffic layout, and the growth of green areas in various areas of the city over time. In this case, the process S3 needs to be looped to create multiple pattern panels. The specific creation process is similar to the above. Developers only need to use Sketch to repeat process S3.

[0074] After generating all the pattern panels of the interface development project, the first terminal 201 splices these pattern panels, and generates an interface layout file according to the spliced ​​pattern panels and the data and pictures corresponding to each pattern panel. In the layout file, at this time, it only represents the relationship between the data and the pattern panel picture, and the content relationship of the layout pattern panel and the data binding in advance, which is equivalent to associating a group of pattern panels belonging to the theme of the interface project, and the data and pictures corresponding to each pattern panel in the group of pattern panels together to form a code description form, and packaging it into a file, wherein each pattern panel, the data and pictures corresponding to the pattern panel can be assigned a unique identification code id. Among them, the identification code id is represented by a serial number, and the layout file describes the picture, position coordinates, width and height, data jump process, etc. of each pattern panel.

[0075] Third, the first development end 201 uploads the interface layout file to the server 100, so that the server transmits the interface layout file to the third development end to form a cross-platform interface.

[0076] Reference Figure 3 As shown, in process S4 , the first development end 201 uploads the interface layout file to the server 100 .

[0077] In process S5 , the third development end 203 receives the interface layout file sent by the server 100 , and forms a cross-platform interface in process S6 .

[0078] Specifically, in process S6, the third development end 203 uses the visual configurator to draw the pattern panel in the interface according to the interface layout file; and to modify the data source in the interface layout file and bind data to the pattern panel to complete the configuration of event binding and jump logic in the pattern panel.

[0079] When drawing the pattern panel in the interface, adjust the specific position of the pattern panel generated in Sketch, and configure the data binding and jump logic based on the specific interface address of the data source described in the interface layout file, so as to finally generate a set of cross-platform interfaces that can be directly applied on Web, Android / IOS, Windows and other platforms. More specifically, the third development end 203 can use a visual configurator to generate an interface program (APP), which can be executed by different platforms to generate a cross-platform interface for application on these platforms. Of course, the above platforms are not intended to be limiting, and other platforms are also possible, for example, Hongmeng.

[0080] Optionally, in the visual configurator, the pattern panel can also be initially demonstrated and verified to facilitate further modifications by the developer. The modification process can, for example, be done by the developer returning to the design of the second development end. The process is simple and easy to repeat, and can quickly provide demand verification.

[0081] After generating the cross-platform interface, the third development end 203 uploads the cross-platform interface to the server 100 in process S7 .

[0082] Through the above settings, according to the designer's interface design sketch, mature design component resources can be used in the Sketch plug-in to convert it into cross-platform code data, and each design component can be corresponded to a piece of code data. Through splicing, an interface layout file including multiple pattern panels and their corresponding data and pictures is formed. In this process, the layout file is essentially generated by multiple Widgets. The layout file of an interface will include the splicing of multiple Widgets, which is equivalent to the collection code of the cross-platform interface. By importing the collection code into the visual configurator to add event binding information, different pattern panels and pattern panels, and the data of the same pattern panel are filled into the pattern panel UI. By storing the collection code in the server and drawing the pattern panel and binding the data and events in the visual configurator of the developer at the other end, repeated development calls by developers at multiple ends, multiple times, and multiple stages are realized, breaking through the code permissions between different developers and designers, and realizing repeated and indifferent interface development.

[0083] Specifically in practical applications, compared with the prior art in which each designer designs independently and the developer directly codes each complete design original drawing, which involves redundant design work, the interface development method of the embodiment of the present invention can simplify the design process, improve the repeatability of interface development, and for project updates and modifications in the design process, the developer only needs to simply modify and configure the corresponding options in the Web display interface directly on the second development end, and use the visual configurator on the third development end to perform simple data and jump logic binding, thereby improving development efficiency and reducing development costs.

[0084] In some optional embodiments, the server 100 may have pre-stored 3D model images of the project theme described in the above interface development project pre-designed and uploaded by 3D designers. At this time, the interface development system may also include a fourth development terminal, where developers of the development terminal can download the 3D model images from the server and use the 3D engine to embed the pre-stored 3D model images into the cross-platform interface, such as Figure 6 As shown, the 3D model can be, for example, a 3D model image of a smart city. Through this setting, the cross-platform interface can be combined with the 3D model image for flexible visualization.

[0085] Corresponding to the Sketch-based interface development method, such as Figure 2 As shown, the cross-platform interface development system includes: a first development terminal, a second development terminal, a third development terminal and a server, wherein

[0086] The second development end is configured to send a coded interface design component to the server, which is forwarded to the first development end via the server. The coded interface design component includes a cross-platform description file and a Web file based on the original interface design image.

[0087] The first development end is configured to generate an interface layout file using a Sketch plug-in based on the coded interface design component and upload the file to the server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel; and

[0088] The third development terminal is configured to receive the interface layout file sent by the server and form a cross-platform interface.

[0089] In this embodiment, the cross-platform interface development system generates an interface layout file from the coded interface design components received from the server by utilizing the Sketch plug-in on the second development end, so that the third development end generates a cross-platform interface, thereby realizing repetitive and non-differentiated interface development, thereby compensating for the problems existing in the prior art, effectively improving the flexibility of interface design and development, improving development efficiency, reducing development costs, and having broad application prospects.

[0090] Based on the same inventive concept, an embodiment of the present invention further provides a cross-platform interface development method, comprising:

[0091] The second development end sends the coded interface design component to the server, which is forwarded to the first development end via the server. The coded interface design component includes a cross-platform description file and a Web file based on the original interface design image.

[0092] The first development end generates an interface layout file using the Sketch plug-in based on the coded interface design component and uploads the file to the server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel; and

[0093] The third development end receives the interface layout file sent by the server and forms a cross-platform interface.

[0094] Optionally, after the third development end receives the interface layout file sent by the server and forms the cross-platform interface, the method further includes: using a 3D engine to embed a pre-stored 3D model image into the cross-platform interface.

[0095] In this embodiment, the Sketch plug-in on the second development end is used to generate an interface layout file from the coded interface design components received from the server, so that the third development end generates a cross-platform interface, thereby achieving repetitive and non-differentiated interface development, thereby compensating for the problems existing in the prior art, effectively improving the flexibility of interface design and development, improving development efficiency, and reducing development costs. Moreover, by inserting a 3D model image, the cross-platform interface can be combined with the 3D model image for flexible visual display.

[0096] Based on the same inventive concept, an embodiment of the present invention further provides a cross-platform interface development method, which is applied to a third development end and includes:

[0097] Receive an interface layout file sent by a server, where the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel, wherein the interface layout file is generated by using a Sketch plug-in based on a coded interface design component;

[0098] Visually configure the interface layout file to form a cross-platform interface.

[0099] The interface development method provided in this embodiment has been described in detail in the description of the cross-platform interface development method based on Sketch. The relevant parts can be referred to the above description and will not be repeated here.

[0100] In this embodiment, the third development end receives the interface layout file formed by the second development end from the server to generate a cross-platform interface, wherein the interface layout file generates the coded interface design components received from the server by utilizing the Sketch plug-in on the second development end, thereby realizing repetitive and non-differentiated interface development, thereby compensating for the problems existing in the prior art, effectively improving the flexibility of interface design and development, improving development efficiency, reducing development costs, and having broad application prospects.

[0101] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements: receiving a coded interface design component sent by a server, the coded interface design component coming from a second development end, the coded interface design component including a cross-platform description file and a Web file based on an original interface design image; generating an interface layout file using a Sketch plug-in based on the coded interface design component, the interface layout file including at least one pattern panel, and data and images corresponding to each pattern panel; uploading the interface layout file to the server, so that the server transmits the interface layout file to a third development end to form a cross-platform interface.

[0102] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements: a second development end sends a coded interface design component to a server, which is forwarded to a first development end via the server, wherein the coded interface design component includes a cross-platform description file and a Web file based on an original interface design image; the first development end generates an interface layout file based on the coded interface design component using a Sketch plug-in and uploads the file to the server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel; and a third development end receives the interface layout file sent by the server and forms a cross-platform interface.

[0103] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements: receiving an interface layout file sent by a server, the interface layout file including at least one pattern panel, and data and pictures corresponding to each pattern panel, wherein the interface layout file is generated based on a coded interface design component using a Sketch plug-in; and visually configuring the interface layout file to form a cross-platform interface.

[0104] In practical applications, the computer-readable storage medium can adopt any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium can be, for example, but not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present embodiment, the computer-readable storage medium can be any tangible medium containing or storing a program, which can be used by an instruction execution system, a device or a device or used in combination with it.

[0105] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, which carry computer-readable program code. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0106] The program code embodied on the computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0107] Computer program code for performing the operations of the present invention may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0108] like Figure 7 As shown, a structural schematic diagram of a computer device provided by another embodiment of the present invention. Figure 7 The computer device 12 shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0109] like Figure 7 As shown, the computer device 12 is in the form of a general-purpose computing device. The components of the computer device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 that connects various system components (including the system memory 28 and the processing unit 16).

[0110] Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor or a local bus using any of a variety of bus architectures. By way of example, these architectures include, but are not limited to, an Industry Standard Architecture (ISA) bus, a Micro Channel Architecture (MAC) bus, an Enhanced ISA bus, a Video Electronics Standards Association (VESA) local bus, and a Peripheral Component Interconnect (PCI) bus.

[0111] The computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by the computer device 12, including volatile and non-volatile media, removable and non-removable media.

[0112] The system memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. The computer device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, the storage system 34 may be used to read and write non-removable, non-volatile magnetic media ( Figure 7 not shown, usually called a "hard drive"). Although Figure 7 Not shown in the figure, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk"), and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, a DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to the bus 18 via one or more data medium interfaces. The memory 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to perform the functions of the various embodiments of the present invention.

[0113] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in the memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment. The program modules 42 generally perform the functions and / or methods of the embodiments described herein.

[0114] The computer device 12 may also communicate with one or more external devices 14 (e.g., keyboards, pointing devices, displays 24, etc.), one or more devices that enable a user to interact with the computer device 12, and / or any device that enables the computer device 12 to communicate with one or more other computing devices (e.g., network cards, modems, etc.). Such communication may be performed through an input / output (I / O) interface 22. Furthermore, the computer device 12 may also communicate with one or more networks (e.g., local area networks (LANs), wide area networks (WANs), and / or public networks, such as the Internet) through a network adapter 20. Figure 7 As shown, the network adapter 20 communicates with other modules of the computer device 12 via the bus 18. It should be understood that although Figure 7 Not shown, other hardware and / or software modules may be used in conjunction with computer device 12, including but not limited to microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0115] The processor unit 16 executes various functional applications and data processing by running programs stored in the system memory 28, such as implementing a cross-platform interface development method based on Sketch or a cross-platform interface development method provided in an embodiment of the present invention.

[0116] It should be noted that the sequence of steps of the eye tracking method provided in the embodiment of the present invention can be appropriately adjusted, and the steps can be increased or decreased accordingly according to the circumstances. Any technical personnel familiar with the technical field can easily come up with changes within the technical scope disclosed in this invention, and these changes should be covered within the scope of protection of the present invention, so they will not be described in detail.

[0117] In view of the current existing problems, the present invention develops a cross-platform interface development method and system, computer equipment and medium based on Sketch, generates an interface layout file from the coded interface design components received from the server through the Sketch plug-in, and enables the third development end to perform visual configuration to generate a cross-platform interface, thereby realizing repeated and non-differentiated interface development, thereby compensating for the problems existing in the prior art, effectively improving the flexibility of interface design and development, improving development efficiency, reducing development costs, and having broad application prospects.

[0118] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not limitations on the embodiments of the present invention. For those skilled in the art, other different forms of changes or modifications can be made based on the above description. It is impossible to list all the embodiments here. All obvious changes or modifications derived from the technical solution of the present invention are still within the protection scope of the present invention.

Claims

1. A cross-platform interface development method based on Sketch, applied to a first development end, characterized in that: include: Receiving a coded interface design component sent by a server, the coded interface design component coming from a second development end, the coded interface design component including a cross-platform description file based on an original interface design image converted from the original interface design image and a Web file of an overall user interface with interface configuration and data configuration integrated by configuration; Generate an interface layout file using a Sketch plug-in based on the coded interface design component, wherein the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel; The interface layout file is uploaded to the server, so that the server transmits the interface layout file to the third development end to form a cross-platform interface.

2. The interface development method according to claim 1, characterized in that: The step of generating an interface layout file based on the coded interface design component using a Sketch plug-in further includes: Reading the Web file of the coded interface design component to generate a Web display interface; Creating the pattern panel based on display parameters of the Web display interface modification interface and data parameters in a cross-platform description file corresponding to the display parameters; and The at least one pattern panel is spliced, and the interface layout file is generated according to the spliced ​​pattern panels and the data and pictures corresponding to each pattern panel.

3. The interface development method according to claim 2, characterized in that: The step of creating the pattern panel based on the display parameters of the Web display interface modification interface and the data parameters in the cross-platform description file corresponding to the display parameters further includes: Modify the display parameters of the interface based on the Web display interface; Using a data communication bridge to convert the coded interface design component from Flutter-based data to Web data, so as to call and modify the data parameters in the cross-platform description file corresponding to the display parameters; and The pattern panel is created according to the modified display parameters and the data parameters.

4. The interface development method according to claim 2, characterized in that: The display parameters include one or more of canvas size, number of pattern panel graphics, pattern panel label attributes, data number and data value.

5. The interface development method according to claim 2, characterized in that: The first development end includes a material library, wherein the material library stores a plurality of pattern panel materials. The creating the pattern panel according to the modified display parameters and the data parameters further comprises: The pattern panel is created using the pattern panel material according to the modified display parameters and data parameters.

6. A cross-platform interface development method, applied to a third development end, characterized in that: include: Receive an interface layout file sent by a server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel, wherein the interface layout file is generated by using a Sketch plug-in based on a coded interface design component, and the coded interface design component includes a cross-platform description file based on an original interface design image converted from the original interface design image, and a Web file of an overall user interface with interface configuration and data configuration integrated by configuration; The interface layout file is visually configured to form a cross-platform interface.

7. The cross-platform interface development method according to claim 6, characterized in that: The visual configuration of the interface layout file to form a cross-platform cross-platform interface includes: Draw the pattern panel in the interface according to the interface layout file; and The data source in the interface layout file is modified, and data is bound to the pattern panel to complete the configuration of event binding and jump logic in the pattern panel.

8. A cross-platform interface development method, characterized in that: include: The second development end sends a coded interface design component to the server, which is forwarded to the first development end via the server, wherein the coded interface design component includes a cross-platform description file converted from the original interface design image and a Web file of an overall user interface with interface configuration and data configuration integrated by configuration; The first development end generates an interface layout file using a Sketch plug-in based on the coded interface design component and uploads the file to the server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel; as well as The third development end receives the interface layout file sent by the server and forms a cross-platform interface.

9. The cross-platform interface development method according to claim 8, characterized in that: After the third development end receives the interface layout file sent by the server and forms a cross-platform interface, the method further includes: The pre-stored 3D model image is embedded into the cross-platform interface using a 3D engine.

10. A cross-platform interface development system, characterized in that: include: A first development terminal, a second development terminal, a third development terminal and a server, wherein The second development end is configured to send a coded interface design component to the server, which is forwarded to the first development end via the server, wherein the coded interface design component includes a cross-platform description file and a Web file based on the original interface design image; The first development end is configured to generate an interface layout file using a Sketch plug-in based on the coded interface design component and upload the file to the server, wherein the interface layout file includes at least one pattern panel, and data and images corresponding to each pattern panel; and The third development end is configured to receive the interface layout file sent by the server and form a cross-platform interface.

11. A computer device, characterized in that: include: one or more processors; a storage device having one or more programs stored thereon; When the one or more programs are executed by the one or more processors, the one or more processors are caused to implement: The method according to any one of claims 1 to 5, or The method according to any one of claims 6 to 7, or The method according to any one of claims 8 to 9.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that: in, When the program is executed by the processor, it achieves: The method according to any one of claims 1 to 5, or The method according to any one of claims 6 to 7, or The method according to any one of claims 8 to 9.

Images