Application development platform, microprogram generation method, device and storage medium

Abstract

The disclosed embodiments provide an application development platform, a microprogram generation method, a device, and a storage medium. The application development platform includes a microprogram center and a visual configuration system, wherein the microprogram center is configured to obtain a Sketch file of a design page; the visual configuration system is configured to display a first configuration interface for configuring panels; obtain multiple panels corresponding to the design page configured by a user through the first configuration interface; parse the Sketch file to obtain layout information of a target page corresponding to the design page; and the microprogram center is further configured to splice the multiple panels based on the layout information of the target page to generate a microprogram capable of implementing the target page.

Description

Technical Field

[0001] The embodiments of the present disclosure relate to, but are not limited to, the field of computer technology, and in particular to an application development platform, a microprogram generation method, a device, and a storage medium. Background Art

[0002] Sketch is a design tool that's easy to learn and features a wealth of features, making it widely used in graphic design, the internet, computers, and other fields. Currently, during application development, designers use Sketch to create a design page and provide the Sketch file to developers. Developers then create page components based on the Sketch file's content and manually assemble them. This requires secondary development to create a truly usable page for the application, resulting in low development efficiency. Summary of the Invention

[0003] The following is a summary of the subject matter described in detail herein. This summary is not intended to limit the scope of the claims.

[0004] In a first aspect, an embodiment of the present disclosure provides an application development platform, comprising: a microprogram center and a visual configuration system, wherein the microprogram center is configured to obtain a Sketch file of a design page; the visual configuration system is configured to display a first configuration interface for configuring a panel; obtain multiple panels corresponding to the design page configured by the user through the first configuration interface; parse the Sketch file to obtain layout information of a target page corresponding to the design page; the microprogram center is further configured to splice the multiple panels based on the layout information of the target page to generate a microprogram that can implement the target page.

[0005] In a second aspect, an embodiment of the present disclosure provides a microprogram generation method, which is applied to an application development platform, and the method includes: obtaining a Sketch file of a design page; displaying a first configuration interface for configuring a panel; obtaining multiple panels corresponding to the design page configured by the user through the first configuration interface; parsing the Sketch file to obtain layout information of a target page corresponding to the design page; based on the layout information of the target page, splicing the multiple panels to generate a microprogram that can implement the target page.

[0006] In a third aspect, an embodiment of the present disclosure provides a computer device comprising: a processor and a memory storing a computer program that can be run on the processor, wherein when the processor executes the program, the steps of the microprogram generation method described in the above embodiment are implemented.

[0007] In a fourth aspect, an embodiment of the present disclosure provides a computer-readable storage medium, comprising a stored program, wherein when the program is run, the steps of the microprogram generation method described in the above embodiment are implemented.

[0008] The application development platform, microprogram generation method, device and storage medium provided by the embodiment of the present disclosure may include: a microprogram center and a visual configuration system, wherein the microprogram center is configured to obtain a Sketch file of a design page; the visual configuration system is configured to display a first configuration interface for configuring a panel; obtain multiple panels corresponding to the design page configured by the user through the first configuration interface; parse the Sketch file to obtain layout information of a target page corresponding to the design page; the microprogram center is also configured to splice multiple panels based on the layout information of the target page to generate a microprogram that can realize the target page. In this way, the user only needs to use a visual configuration method to produce a panel without the need for manual splicing by the user. The layout information of the target page parsed from the Sketch file of the design page can be used to splice multiple panels configured by the user through the visual configuration to quickly generate a microprogram that realizes the target page corresponding to the design page. In this way, when the microprogram is applied to the scenario of developing applications, development efficiency can be improved, development costs can be reduced, the threshold for use is lowered, and it has a wide range of application prospects.

[0009] Other features and advantages of the present disclosure will be described in the following description, and in part will become apparent from the description, or will be understood by practicing the present disclosure. Other advantages of the present disclosure can be realized and obtained through the solutions described in the description and the drawings.

[0010] Still other aspects will become apparent upon reading and understanding the accompanying drawings and detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The accompanying drawings are intended to facilitate understanding of the technical solutions of the present disclosure and constitute part of the specification. Together with the embodiments of the present disclosure, they are used to explain the technical solutions of the present disclosure and do not constitute a limitation of the technical solutions of the present disclosure. The shapes and sizes of the components in the accompanying drawings do not reflect the actual scale and are intended only to illustrate the contents of the present disclosure.

[0012] Figure 1 A schematic diagram of the architecture of an application development platform in an exemplary embodiment of the present disclosure;

[0013] Figure 2 is a schematic diagram of a design page in an exemplary embodiment of the present disclosure;

[0014] Figure 3 1 is a first flow chart of a microprogram generation method in an exemplary embodiment of the present disclosure;

[0015] Figure 4 A schematic diagram of a second configuration interface provided by the application development platform in an exemplary embodiment of the present disclosure;

[0016] Figure 5 A first schematic diagram of a first configuration interface provided by the application development platform in an exemplary embodiment of the present disclosure;

[0017] Figure 6 A second schematic diagram of a first configuration interface provided by the application development platform in an exemplary embodiment of the present disclosure;

[0018] Figure 7 is a schematic diagram of the architecture of a Sketch file in an exemplary embodiment of the present disclosure;

[0019] Figure 8A This is a first schematic diagram of exporting layout information of a target page in an exemplary embodiment of the present disclosure;

[0020] Figure 8B This is a second schematic diagram of exporting layout information of a target page in an exemplary embodiment of the present disclosure;

[0021] Figure 9 1 is a second flow chart of the microprogram generation method in the exemplary embodiment of the present disclosure;

[0022] Figure 10 FIG. 4 is a schematic structural diagram of a computer device in an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION

[0023] A number of embodiments are described herein, but this description is exemplary and not restrictive, and more embodiments and implementations may be possible within the scope of the embodiments described herein. Although many possible feature combinations are shown in the drawings and discussed in the detailed description, many other combinations of the disclosed features are also possible. Unless specifically limited, any feature or element of any embodiment may be used in combination with any other feature or element in any other embodiment, or may replace any other feature or element in any other embodiment.

[0024] When describing representative embodiments, the specification may have presented the method and / or process as a specific sequence of steps. However, to the extent that the method or process does not rely on the specific order of the steps described herein, the method or process should not be limited to the steps in the specific order described. As one of ordinary skill in the art will understand, other orders of steps are also possible. Therefore, the specific order of the steps set forth in the specification should not be interpreted as a limitation on the claims. In addition, the claims to the method and / or process should not be limited to performing their steps in the order written, and those skilled in the art can readily understand that these orders can be changed and still remain within the spirit and scope of the disclosed embodiments.

[0025] Unless otherwise defined, the technical or scientific terms used in the embodiments of the present disclosure should have the usual meanings understood by people with ordinary skills in the field to which the present disclosure belongs. The "first", "second" and similar words used in the embodiments of the present disclosure do not indicate any order, quantity or importance, but are only used to distinguish different components. "Include" or "comprise" and similar words mean that the elements or objects appearing before the word include the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect.

[0026] In order to help those skilled in the art better understand the technical solutions of the present disclosure, the following briefly introduces the technical terms that may be involved in the exemplary embodiments of the present disclosure.

[0027] (1) Sketch, Sketch plugins, and SketchTool;

[0028] Sketch is a design tool.

[0029] Sketch plugin refers to Sketch software set up in the form of a plugin.

[0030] SketchTool is a command-line utility that can be installed bundled with Sketch. SketchTool can handle operations such as parsing Sketch files, exporting Sketch resources, or checking Sketch files, or calling Sketch. For example, Sketch resources can include: pages, canvases, artboards, or layers. Among them, the canvas refers to the drawing area in Sketch used to draw visual elements such as graphics, characters, and images to form a page; the size of the canvas can be unlimited, and the user can drag it in any direction; one or more artboards can be inserted into a canvas. The artboard refers to the designated drawing area in the canvas, where one or more combinations of visual elements such as graphics, characters, and images can be drawn to form a panel; the size of the artboard is limited, and the artboard can have a fixed border. Layers are the most basic building blocks in Sketch. Every object in Sketch (such as the canvas, artboard, etc.) has its own layer. Layers can include text layers, graphic layers, etc. A complex-shaped graphic can be composed of multiple simple-shaped graphics. Correspondingly, a complex-shaped graphic layer can be composed of multiple simple-shaped graphic layers.

[0031] (2) Operating System (OS);

[0032] An operating system is a computer program that manages computer hardware and software resources. An operating system handles basic tasks such as managing and configuring memory, prioritizing system resource supply and demand, controlling input and output devices, or operating networks and managing file systems. For example, common mobile operating systems include Android and iOS, while common server and computer operating systems include Linux, Windows, and UNIX. Correspondingly, applications can include Android, iOS, and Windows applications.

[0033] (3) Flutter, DSL (Domain Specific Language), and JSON (JavaScript Object Notation);

[0034] Flutter is a cross-platform user interface (UI) development framework that can build high-quality native user interfaces on multiple operating systems through a set of code libraries. For example, multiple operating systems can include the Android operating system or the iOS operating system. When developing applications (Application, APP) based on the operating system, Flutter can be used to develop the user interface. In the actual application stage of the APP, the user interface can be displayed by combining the tool classes provided by Flutter with the tool classes provided by the operating system. A cross-platform user interface can refer to a user interface that is suitable for platforms such as the Android operating system, the iOS operating system, or the Windows operating system.

[0035] DSL is a grammatical rule that allows domain experts to describe the rules in the domain through simple programming.

[0036] JSON is a lightweight data format that is easy for humans to read and write, and easy for machines to parse and generate.

[0037] (4) Application (APP), interface (Interface) and page (Page);

[0038] An application, or application program, is a computer program designed to perform one or more specific tasks. It runs in user mode, can interact with users, and generally has a visual user interface. For example, applications may include, but are not limited to, applications for operating systems such as iOS, Android, the Web, Windows, macOS, or Linux. For example, an application can implement one or more functions, and a function can be divided into one or more sub-functions. For example, an application can include multiple interfaces. For example, an application can include multiple pages.

[0039] An interface is a medium for transmitting and exchanging information between a user and a machine (e.g., a computer device). It is a collection of supporting software, hardware, and methods for two-way information exchange between a user and a machine (e.g., a computer device). It enables the conversion between the internal form of information and the form acceptable to the user. A common form of interface is a graphical user interface (GUI), which refers to an operation-related user interface displayed graphically. For example, an interface can be implemented by one or more pages. For example, switching between multiple pages can be achieved by binding components (e.g., a navigation bar, etc.) to multiple pages.

[0040] A page refers to the content displayed in the interface during the interaction between users and machines.

[0041] (5) Low code;

[0042] Low-code means that in the process of users quickly creating applications based on an application development platform, users (for example, developers) can complete most of the development work through more efficient visual development methods such as dragging, clicking, or parameter configuration, without having to write a lot of code.

[0043] (6) Modules, centers, and systems;

[0044] Modules, centers, and systems may refer to any known or later developed hardware, software, firmware, artificial intelligence, fuzzy logic, or combination of hardware and / or software code that is capable of performing the associated functionality.

[0045] The exemplary embodiments of the present disclosure provide an application development platform. This application development platform is a visual development system based on Flutter and Sketch that uses low-code engineering to solve labor efficiency problems. It can provide management services for products such as panels, microprograms, or applications, can provide visual configuration services, can provide services for packaging microprograms to form cross-platform applications, etc., and can quickly generate applications suitable for different operating systems based on microprograms. Therefore, it can improve development efficiency, reduce development costs, and has broad application prospects.

[0046] In an exemplary embodiment, an application development platform may include: a microprogram center and a visual configuration system, wherein the microprogram center is configured to obtain a Sketch file of a design page; the visual configuration system is configured to display a first configuration interface for configuring a panel; obtain multiple panels corresponding to the design page configured by a user through the first configuration interface; parse the Sketch file to obtain layout information of a target page corresponding to the design page; the microprogram center is further configured to splice the multiple panels based on the layout information of the target page to generate a microprogram that can implement the target page. In this way, only the user (e.g., a developer, product manager, project manager, or tester, etc.) needs to generate multiple panels corresponding to the design page through visual configuration without the need for manual splicing by the user. The microprogram that implements the target page corresponding to the design page can be quickly generated by splicing the multiple panels configured by the user through visual configuration based on the layout information of the target page parsed from the Sketch file of the design page. In this way, when the microprogram is applied to the scenario of developing applications, development efficiency can be improved, development costs can be reduced, the threshold for use is lowered, and it has a wide range of application prospects.

[0047] In an exemplary embodiment, the visualization configuration system is configured to obtain the artboard configured by the user through the Sketch plug-in on the first configuration interface; generate a corresponding panel through the cross-platform development framework based on the artboard configured by the user; wherein the style of the artboard is the same as the style of the corresponding panel, the artboard is a page component based on Sketch, the panel is a page component based on the cross-platform development framework, and the target page is a page based on the cross-platform development framework.

[0048] In an exemplary embodiment, the application development platform may further include: a panel library, wherein the panel library is configured to store panels; a visualization configuration system configured to display a second configuration interface for displaying the panel library; obtaining a panel to be modified selected by a user from the panel library on the second configuration interface; displaying a to-be-modified artboard corresponding to the to-be-modified panel in the first configuration interface via a Sketch plug-in; and generating and displaying the user-configured artboard in response to a user operation on the first configuration interface to modify the to-be-modified artboard. In this way, panels can be quickly generated by making simple modifications.

[0049] In an exemplary embodiment, a visualization configuration system is configured to display modifiable parameters of a drawing board to be modified and a corresponding first control for modifying parameter values ​​of the modifiable parameters on a first configuration interface; in response to a user's operation on the first control, a drawing board configured by the user is generated and displayed based on the parameter values ​​of the modifiable parameters of the drawing board to be modified and the modified parameter values; wherein the modifiable parameters include: one or more of: graphics, text, numerical values, colors, sizes and data sources.

[0050] In an exemplary embodiment, the visualization configuration system is configured to generate a corresponding panel through a cross-platform development framework based on a user-configured artboard in response to a user's operation on a second control for generating a panel displayed on a first configuration interface.

[0051] In an exemplary embodiment, the visualization configuration system is configured to perform binding processing on the panel in response to a binding operation performed by a user on the panel before generating a microprogram, wherein the binding processing on the panel includes at least one of: data binding on the panel, event binding on the panel, and component binding on the panel.

[0052] In an exemplary embodiment, the application development platform may also include: a product center, which is configured to obtain one or more microprograms from the microprogram center; generate a cross-platform application based on the one or more microprograms; wherein the cross-platform application generates a target page suitable for different operating systems when running on different operating systems.

[0053] For example, a cross-platform application refers to an application applicable to platforms such as iOS, Android, Web, Windows, macOS, or Linux. Here, the embodiments of the present disclosure do not limit this.

[0054] In an exemplary embodiment, the product center is configured to obtain one or more microprograms from the microprogram center; and generate a cross-platform application corresponding to a preset operating system based on the one or more microprograms.

[0055] For example, the preset operating system may be pre-set by the user, or may be automatically set by the application development platform. Here, the embodiments of the present disclosure do not limit this.

[0056] For example, when a user relies on an application development platform to generate an iOS application, the default operating system may be the iOS operating system. In this case, the application development platform can generate an iOS application based on the microprogram. When a user relies on an application development platform to generate an Android application, the default operating system may be the iOS operating system. In this case, the application development platform can generate an Android application based on the microprogram.

[0057] Figure 1 FIG. 1 is a schematic diagram of an architecture of an application development platform in an exemplary embodiment of the present disclosure, such as Figure 1 As shown, the application development platform may include: a micro-program center 101 , a visual configuration system 102 , a panel library 103 and a product center 104 .

[0058] In an exemplary embodiment, the microprogram center can provide services such as the generation, management, retrieval, or storage of microprograms; the visual configuration system can provide visual configuration services for products such as panels, pages, or microprograms; the panel library can provide services such as panel management, retrieval, or storage, and the product center can provide services such as the generation, management, retrieval, or storage of applications.

[0059] In an exemplary embodiment, a microprogram may refer to a reusable file developed based on the dynamic DSL framework of Flutter, which may include one or more cross-platform page code blocks. When the microprogram is running, one or more cross-platform pages can be implemented. The cross-platform page may refer to a page developed based on the dynamic DSL framework of Flutter. In this way, it is easy to classify and manage, and avoid duplication of development work. For example, a microprogram can be packaged separately to generate an application, or multiple microprograms can be packaged together to generate an application. For example, taking a smart city as an example, it can be divided into functions such as smart park, smart office, smart home or smart transportation according to the scenario. A smart city application can be generated by packaging microprograms to implement smart parks, microprograms to implement smart offices, and other microprograms. For another example, taking a microprogram that implements a clock-in function as an example, a conference application can provide corporate employee check-in services by packaging a microprogram that implements a clock-in function, or a factory application can provide factory visitor management services by packaging a microprogram that implements a clock-in function.

[0060] In one exemplary embodiment, the visual configuration system can be based on the Flutter and DSL frameworks, with the Sketch plugin integrated into the upper layer and bound to SketchTool, providing services such as visual configuration of page components (e.g., panels) or parsing Sketch files. This allows users (e.g., developers) to complete most development work through more efficient visual development methods such as dragging, clicking, or parameter configuration.

[0061] In an exemplary embodiment, a panel library may refer to a collection of panels. A panel may refer to a reusable code block of a page component developed based on the Flutter dynamic DSL framework, so that classification management can be facilitated to avoid duplication of development workload. For example, panels may include but are not limited to: a line chart panel, a pie chart panel, a list panel, a circular proportional distribution chart panel, a bar chart panel, a title panel, a carousel panel, a button panel, a system announcement panel or a text panel, etc. For example, a panel can realize a page alone after layout, and multiple panels can realize a page after layout or splicing.

[0062] For example, take the design page of the smart park design page as an example. Figure 2As shown, the smart park design page may include: a line chart panel 201 for displaying safety risks, a first annular proportional distribution chart panel 202 for displaying the distribution of construction project status, a second annular proportional distribution chart panel 203 for displaying the construction progress of the main structure, a third annular proportional distribution chart panel 204 for displaying the construction progress of decoration, a first title panel 205 for displaying the name of the park, a second title panel 206 for displaying the name of the first annular proportional distribution chart panel, a first picture panel 207 for displaying a picture of the park, and a second picture panel 208 for displaying the weather of the park.

[0063] The exemplary embodiments of the present disclosure provide a microprogram generation method, which can be applied to the application development platform in one or more of the above exemplary embodiments. The microprogram generation method provided by the embodiment of the present disclosure is described below in conjunction with the above application development platform.

[0064] Figure 3 FIG. 1 is a first flow chart of a microprogram generation method in an exemplary embodiment of the present disclosure, as shown in FIG. Figure 3 As shown, the microprogram generation method may include:

[0065] Step 31: Get the Sketch file of the design page. The target page includes: multiple panels.

[0066] Step 32: Display a first configuration interface for configuring the panel.

[0067] Step 33: Acquire multiple panels corresponding to the design page configured by the user through the first configuration interface.

[0068] Step 34: Parse the Sketch file of the design page to obtain layout information of the target page corresponding to the design page.

[0069] Step 35: Based on the layout information of the target page, multiple panels are spliced ​​together to generate a microprogram that can realize the target page.

[0070] In this way, users (e.g., developers, product managers, project managers, or testers, etc.) only need to generate multiple panels corresponding to the design page through visual configuration, without the need for manual splicing by the user. The layout information of the target page parsed from the Sketch file of the design page can be used to splice the multiple panels configured by the user through visual configuration to quickly generate a microprogram that implements the target page corresponding to the design page. In this way, when the microprogram is applied to the scenario of developing applications, it can improve development efficiency, reduce development costs, lower the threshold for use, and has broad application prospects.

[0071] For example, take the design page as Figure 2The smart park design page shown in the figure can be realized by micro-program Figure 2 Taking the target page corresponding to the smart park design page shown as an example, after the designer designs the smart park design page through Sketch, the designer can upload the Sketch file of the smart park design page to the microprogram center through the interface provided by the microprogram center. Then, since the microprogram center is bound to the visual configuration system, the microprogram center can send the Sketch file of the smart park design page to the visual configuration system. Next, the visual configuration system can parse the Sketch file of the smart park design page, obtain the layout information of the target page corresponding to the smart park design page, and send the layout information of the target page corresponding to the smart park design page to the microprogram center. In addition, the visual configuration system can display the first configuration interface for configuring the panel to the user (for example, a developer, product manager, project manager or tester, etc.), so that the user can use the visual configuration system to compare the Sketch file and perform visual configuration to produce multiple panels corresponding to the smart park design page. In this way, the multiple panels corresponding to the smart park design page configured by the user can be obtained through the visual configuration system. As Figure 2 As shown, the multiple panels corresponding to the user-configured smart park design page may include: a line graph panel 201 for displaying safety risks, a first circular proportional distribution graph panel 202 for displaying the distribution of construction project status, a second circular proportional distribution graph panel 203 for displaying the construction progress of the main structure, a third circular proportional distribution graph panel 204 for displaying the construction progress of the interior decoration, a first title panel 205 for displaying the name of the park, a second title panel 206 for displaying the name of the first circular proportional distribution graph panel, a first image panel 207 for displaying an image of the park, and a second image panel 208 for displaying the park weather. Thus, the microprogram center can obtain the multiple panels corresponding to the smart park design page through the visual configuration system. In this way, the microprogram center can splice the multiple panels corresponding to the smart park design page based on the parsed layout information of the target page corresponding to the smart park design page, thereby generating a microprogram that can implement the target page corresponding to the smart park design page.

[0072] In an exemplary embodiment, a user interface (UI) designer can use the Sketch tool to design an application page according to the application's page development design ideas, obtaining a Sketch file for the design page. The Sketch file can then be uploaded to the micro-program center through the portal provided by the micro-program center of the application development platform. In this way, the micro-program center obtains the Sketch file for the design page.

[0073] In an exemplary embodiment, the Sketch file of the design page may refer to a file in a .sketch format of the design page.

[0074] In an exemplary embodiment, the data format of the microprogram may adopt the JSON data format based on the DSL description.

[0075] In an exemplary embodiment, the content of the microprogram may include, but is not limited to, basic information and the DSL-JSON data of the page, and may also include information such as screenshots of the microprogram visual configuration, wherein the basic information may include, but is not limited to, information such as name, version number, application type, resolution, or business attributes. The DSL-JSON data of the page may include, but is not limited to, the JSON data of all panels within the page (i.e., strings describing the panels) and the entire DSL-JSON file of the page's layout information. The page's layout information may include, for example, the location information of each panel within the page, the hierarchical structure information between all panels within the page, or the hierarchical structure information between multiple pages. This is not limited in the embodiments of the present disclosure.

[0076] In an exemplary embodiment, step 33 may include the following steps 331 to 332:

[0077] Step 331: On the first configuration interface, obtain the drawing board configured by the user through the Sketch plug-in.

[0078] Step 332: Based on the drawing board configured by the user, a panel corresponding to the drawing board configured by the user is generated through the cross-platform development framework. In this way, the panel corresponding to the design page configured by the user through the first configuration interface is obtained.

[0079] Among them, the style of the drawing board configured by the user is the same as the style of the panel generated by the cross-platform development framework. The drawing board is a page component based on Sketch, the panel is a page component based on the cross-platform development framework, and the target page is a page based on the cross-platform development framework. In this way, the visual configuration system can convert the Sketch-based page component (i.e., the drawing board) that the user visually configures through the first configuration interface into a page component (i.e., the panel) based on the cross-platform development framework that can be applied to different operating systems. In this way, the process of users generating panels through visual configuration is realized.

[0080] Among them, the style defines how the page elements are displayed.

[0081] In an exemplary embodiment, a cross-platform development framework may include Flutter and DSL, and a panel may be a page component based on Flutter and DSL. Thus, the target page implemented based on the panel can be a cross-platform page. A cross-platform page may be a page applicable to platforms such as the Android operating system, iOS operating system, or Windows operating system.

[0082] In an exemplary embodiment, the description data of the drawing board may adopt the JSON data format, and the description data of the panel may adopt the JSON data format.

[0083] In an exemplary embodiment, step 331 may include: steps 3311 to 3314:

[0084] Step 3311: Display a second configuration interface for displaying a panel library.

[0085] Step 3312: Obtain the panel to be modified selected by the user from the panel library on the second configuration interface.

[0086] Step 3313: Displaying the artboard to be modified corresponding to the panel to be modified in the first configuration interface via the Sketch plug-in, wherein the style of the artboard to be modified is the same as the style of the panel to be modified.

[0087] Step 3314: In response to the user's operation on the first configuration interface for modifying the artboard to be modified, generate and display the artboard configured by the user.

[0088] In an exemplary embodiment, the style of the panel to be modified is similar to that of the design page. For example, similarity may mean that the panel to be modified contains the largest number of page elements of the same style as those in the design page. A page element may refer to the smallest unit of UI elements on a page, such as text, icons, buttons, labels, or lists.

[0089] For example, taking a page element combination in a design page including: a first page element of a first style, a second page element of a second style, a third page element of a third style, and a fourth page element of a fourth style as an example, when the panel library includes: a first panel and a second panel of the same type, the first panel includes: a first page element of a first style and a second page element of a fifth style, the second page element of the fifth style is different from the second page element of the second style, and the second panel includes: a second page element of a second style and a third page element of a third style, relative to the first panel, the second panel contains more page elements of the same style as the design page. Therefore, the second panel can be selected as the panel to be modified, so that users can generate panels with fewer modifications.

[0090] In an exemplary embodiment, step 3314 may include: displaying the modifiable parameters of the artboard to be modified and the corresponding first control for modifying the parameter values ​​of the modifiable parameters on the first configuration interface; in response to the user's operation on the first control, generating and displaying the artboard configured by the user based on the parameter values ​​of the modifiable parameters of the artboard to be modified and the modified parameter values; wherein the modifiable parameters include: one or more of: graphics, text, values, colors, and sizes. For example, graphics may include the shape of the outer frame of the artboard, text may include text content, font, size, color, etc.; size may include: the size of the artboard, etc. Here, the embodiments of the present disclosure are not limited to this.

[0091] In an exemplary embodiment, step 332 may include: step 3321: in response to a user operating a second control for generating a panel displayed on the first configuration interface, generating a corresponding panel via a cross-platform development framework based on the user-configured artboard. The panel generated by the visualization configuration system via the cross-platform development framework corresponds to the artboard configured by the user via the Sketch plug-in in the visualization configuration system.

[0092] In an exemplary embodiment, after step 3321, step 332 may further include steps 3322 to 3325:

[0093] Step 3322: Store the generated panel into the panel library;

[0094] Step 3323: Generate panel identification information of the generated panel;

[0095] Step 3324: Obtain the artboard identification information of the artboard configured by the user;

[0096] Step 3325: Establish and store an association relationship between the panel identification information of the generated panel and the artboard identification information of the artboard configured by the user, so as to establish an association relationship between the generated panel and the artboard configured by the user.

[0097] Panel identification information refers to information that uniquely identifies a panel, such as a panel ID; and artboard identification information refers to information that uniquely identifies an artboard, such as an artboard ID. For example, panel identification information may include: a panel ID and panel name information, and artboard identification information may include: an artboard ID and artboard name information. This is not limited in the present embodiment.

[0098] In this way, in the process of generating the corresponding panel according to the drawing board configured by the user, the visualization configuration system can store the generated panel in the panel library in addition to storing the generated panel in the panel library, and can also store the association relationship between the panel identification information and the drawing board identification information (for example, the association relationship between the panel id and the drawing board id). In this way, after the subsequent visualization configuration system produces all the panels corresponding to the design page, since the layout information of the target page parsed by the visualization configuration system indicates the page layout with the drawing board identification information, therefore, on the one hand, it can be convenient for the micro-program center to match the multiple panels corresponding to the design page from the panel library according to the layout information of the target page obtained by parsing and the association relationship between the panel identification information and the drawing board identification information stored in advance. On the other hand, it can be convenient for the micro-program center to add the multiple panels corresponding to the design page to the micro-program template according to the layout information of the target page, automatically splice them, and produce a micro-program that can realize the target page corresponding to the design page.

[0099] In an exemplary embodiment, step 3323 may include: obtaining the microprogram identification information of the pre-stored microprogram; calculating the hash value of the microprogram identification information through a hash function; and splicing the hash value of the microprogram identification information, preset special characters and digital numbers to generate the drawing board identification information of the drawing board.

[0100] The microprogram identification information refers to information that can uniquely identify the microprogram. For example, the microprogram identification information may include: a microprogram name or a microprogram ID. For example, the microprogram identification information may be pre-set by a user through a visual configuration system. This disclosure does not limit this.

[0101] For example, the hash function may adopt MD5 (Message-Digest Algorithm 5, the fifth generation message digest algorithm), and correspondingly, the hash value of the microprogram identification information may adopt the MD5 code of the microprogram identification information. For example, taking the microprogram identification information including the microprogram ID as an example, the MD5 code of the microprogram identification information may adopt the MD5 code of the microprogram ID. Here, the embodiments of the present disclosure do not limit this.

[0102] For example, the preset special character may be a separator, an asterisk, or an underscore, etc. Here, the embodiment of the present disclosure does not limit this.

[0103] For example, assuming the hash function uses MD5 and the preset special character is an underscore, the process of generating panel identification information by the visual configuration system may include: concatenating the MD5 code of the microprogram identification information, the "preset special character", and the "digital number" to obtain the panel identification information. For example, assuming the microprogram identification information includes a microprogram ID, the panel ID of a particular panel = the MD5 code of the microprogram ID + the underscore "_" + the digital number "001".

[0104] The following is the design page Figure 2 The smart park design page shown in the figure allows users to configure the system visually and output Figure 2 Taking the first annular proportional distribution diagram panel 202 corresponding to the smart park design page as an example, the process of generating the panel is described with reference to the accompanying drawings. Figure 4 This is a schematic diagram of a second configuration interface provided by the application development platform in an exemplary embodiment of the present disclosure. Figure 5 This is a first schematic diagram of a first configuration interface provided by the application development platform in an exemplary embodiment of the present disclosure. Figure 6 This is a second schematic diagram of the first configuration interface provided by the application development platform in the exemplary embodiment of the present disclosure.

[0105] In actual applications, users can perform visual configuration of products such as panels, pages, and microprograms through the configuration interface provided by the visual configuration system.

[0106] The visual configuration panel process can include the following steps:

[0107] (1) The second configuration interface provided by the application development platform may provide a function list, which may include: a tab for viewing the product center, a tab for viewing the micro-program center, and a tab for viewing the panel library. In this way, after the visual configuration system displays the second configuration interface, the user can select the panel to be modified from the panel library displayed on the second configuration interface. In this way, the user can subsequently use the Sketch plug-in in the visual configuration system to visually configure the to-be-modified drawing board corresponding to the to-be-modified panel selected by the user to produce the first annular proportional distribution diagram panel 202.

[0108] For example, Figure 4 As shown, the visualization configuration system can provide a function list in the first area 41 of the second configuration interface 40; after the user selects a tab for viewing the panel library from the function list, the visualization configuration system can provide a panel list in the second area 42 of the first configuration interface, and the panel list may include: multiple tabs for viewing panels; after the user selects a tab for viewing the annular proportional distribution chart from the panel list, the visualization configuration system can display the default style annular proportional distribution chart panel or the user-selected annular proportional distribution chart panel in an enlarged manner in the first area 431 of the third area 43, and display the annular proportional distribution chart panel list in a reduced manner in the second area 432 of the third area 43, and the annular proportional distribution chart panel list may include: multiple annular proportional distribution chart panels of different styles. Among them, the annular proportional distribution chart panel may include: graphics, legends, data types, numerical values ​​and other information of the annular proportional distribution chart. Here, Figure 4 The example uses two styles of circular proportional distribution chart panels in the circular proportional distribution chart panel list as an example. When there are at least three styles of circular proportional distribution chart panels in the circular proportional distribution chart panel list, the user drags the control on the second configuration interface 40 to cause the visualization configuration system to display the circular proportional distribution chart panels of other styles in the circular proportional distribution chart panel list on the second configuration interface 40. In addition, the visualization configuration system can display basic information of the circular proportional distribution chart panel in the third area 433 of the third region 43, such as the component ID of the component bound to the circular proportional distribution chart panel or information about the circular proportional distribution chart panel. This is not limited in the present embodiment.

[0109] For example, the user clicks on the tab for viewing the panel library in the function list to select the tab for viewing the panel library. Of course, the user can also use other operations to select the tab for viewing the panel library, and this is not limited in the embodiment of the present disclosure.

[0110] (2) After the user selects a certain style of panel as the panel to be modified in the second configuration interface, the visualization configuration system can display the first configuration interface for configuring the panel, and display the to-be-modified artboard corresponding to the to-be-modified panel in the first configuration interface, so that the user can modify the to-be-modified artboard through the visualization configuration system to produce a new style of artboard (i.e., the artboard configured by the user). Thus, the visualization configuration system can generate the corresponding user-configured panel based on the artboard configured by the user. In addition, after obtaining the panel configured by the user, the visualization configuration system can upload the user-configured artboard to the panel library.

[0111] For example, after the user selects the panel to be modified, Figure 5 As shown, the visualization configuration system can display the artboard to be modified 51 corresponding to the panel to be modified, the modifiable parameters 52 of the artboard to be modified, and the first control 53 for modifying the parameter value of the modifiable parameter 52 in the first configuration interface 50 through the Sketch plug-in. In this way, the user can modify the parameter value of the modifiable parameter 52 of the artboard to be modified by operating the first control 53 corresponding to the modifiable parameter 52 of the artboard to be modified. For example, the first control 53 may include but is not limited to: input controls (such as text boxes) or selection controls (such as the following lists, etc.). For example, the modifiable parameters of the artboard to be modified may include but are not limited to: one or more of graphics, text, values, colors, sizes, and data sources. For example, taking the artboard corresponding to the annular proportional distribution chart panel as an example, the graphic information may include but is not limited to: circle size information, circle data selection information, circle color information, circle value information, or circle legend information, etc.

[0112] For example, the user selects to modify the color information of the circle on the drawing board 51 to be modified, and the first control 53 for modifying the color information of the circle is implemented as a selection control. Figure 5 As shown, in the modifiable parameters 52 of the artboard 51 to be modified corresponding to the annular proportional distribution chart panel, after the user clicks the first control 53 for modifying the circular ring color information, the visualization configuration system can provide a pop-up window 54 for selecting color information on the first configuration interface 50. In this way, the user can modify the circular ring color information of the artboard 51 to be modified by operating the pop-up window 54.

[0113] (4) After the user modifies the color information of the circular ring of the drawing board 51 to be modified through the first configuration interface 50 provided by the visualization configuration system, the visualization configuration system can generate and display the drawing board 56 configured by the user based on the parameter values ​​of the modifiable parameters of the drawing board to be modified and the modified parameter values. In addition, the visualization configuration system can use the second control 55 for generating a panel displayed on the first configuration interface to generate a corresponding panel according to the drawing board configured by the user in response to the user operation. After obtaining the panel configured by the user, the visualization configuration system can upload the panel configured by the user to the panel library, so that the panel configured by the user can enter the panel list in the second configuration interface 40.

[0114] For example, Figure 6 As shown, in addition to providing the modified artboard 56 and the modifiable parameters and parameter values ​​of the modified artboard in the first configuration interface 50 , the visualization configuration system may also provide a group 57 corresponding to the modified artboard in the first configuration interface 50 .

[0115] The visual configuration system may provide a page list, an artboard list, and a group list in the first configuration interface. The page list may include: at least one tab for viewing pages, the artboard list may include: at least one tab for viewing artboards, and the group list may include: at least one tab for viewing groups. For example, Figure 6As shown, the visualization configuration system can provide a page list in the first configuration interface 50. The page list may include: at least one tab for viewing pages. After the user selects a tab for viewing a page from the page list, the visualization configuration system can provide a list of artboards corresponding to the page in the first configuration interface 50. The artboard list may include: at least one tab for viewing artboards. After the user selects a tab for viewing an artboard from the artboard list corresponding to the page, the user can perform a visual configuration of the panel drawn on the artboard through the first configuration interface 50 to form a configured panel. The visualization configuration system can provide a group corresponding to the configured panel in the first configuration interface 50 and associate the artboard with the group corresponding to the configured panel. Afterwards, the user can see the tab for viewing the group corresponding to the configured panel in the group list corresponding to the artboard. In this way, the visualization configuration system can enable users to perform visual configuration from multiple dimensions such as pages, artboards, and groups by providing the first configuration interface 50.

[0116] At this point, the process of quickly generating a panel through the visual configuration system is completed.

[0117] Of course, in addition to using the methods listed above to generate panels corresponding to design pages, users can also directly use the Sketch plug-in in the visual configuration system to generate panels corresponding to design pages. For example, when the style of the panels in the panel library differs significantly from the style of the design page, resulting in a large number of modifications required by the user, the user can directly configure the sketchpad through the visual configuration system so that the visual configuration system can generate the corresponding panels. This is not limited to this embodiment of the present disclosure.

[0118] For example, when there is a Figure 2 When there are multiple similar panels corresponding to the smart park design page shown, the user can repeat the above process and make a small modification to multiple similar panels to quickly generate Figure 2 The multiple panels corresponding to the smart park design page are shown.

[0119] In an exemplary embodiment, a Sketch file may include layout information corresponding to one or more pages, and each page may include: one or more artboards (corresponding to panels). Figure 7 As shown, the Sketch file may include N pages, and the N pages include: Page1 to PageN, wherein Page1 may include: Artboard1 (corresponding to panel 1) to ArtboardN (corresponding to panel N), that is, Page1 may include N panels, and N is a positive integer greater than 1. Figure 7In the example, a Sketch file includes N pages, and Page1 includes N panels.

[0120] In an exemplary embodiment, step 34 may include: Step 341: parsing the Sketch file of the design page by presetting the SketchTool command statement to obtain layout information of the target page corresponding to the design page.

[0121] In an exemplary embodiment, the preset SketchTool command statement may include, but is not limited to, a command statement sketchtool list artboards and a command statement sketchtool list layers, etc. This is not limited in the embodiment of the present disclosure.

[0122] In an exemplary embodiment, taking the preset SketchTool command statements including the command statement sketchtoollist artboards and the command statement sketchtoollist layers as an example, step 341 may include: the SketchTool in the visualization configuration system, by executing the command statement sketchtoollist artboards, can export the information of all artboards in the target page from the Sketch file of the design page, thereby obtaining the first layout information of the target page; next, the SketchTool in the visualization configuration system, for each artboard in the target page, by executing the command statement sketchtoollist layers, can export the layer information corresponding to each artboard in the target page from the Sketch file of the design page, thereby obtaining the second layout information of the target page. Thus, the layout information of the target page is obtained.

[0123] In an exemplary embodiment, the first layout information of the target page may include but is not limited to: page identification information, page parameter information, artboard identification information or artboard parameter information, etc. For example, Figure 8A As shown, the page identification information may include: page id and page name (name), the page parameter information may include: page border information (bounds), the page border information (bounds) may include: the coordinate information of the top left corner of the page (recorded as the origin), the page width and the page length, the artboard identification information may include: the artboard id and artboard name (name), etc., the artboard parameter information may include: the coordinate information (x, y) of the top left corner of the artboard, the artboard width (width) and the artboard length (height), etc. Here, the exemplary embodiment of the present disclosure does not limit this. Among them, Figure 8AThe following is an example of two panels (corresponding to two artboards) in a target page named "Page 1".

[0124] In an exemplary embodiment, the second layout information of the target page may include but is not limited to: artboard identification information, artboard parameter information, layer identification information, or layer parameter information. Figure 8B As shown, the layer identification information may include: layer id and layer name (name), etc., and the layer parameter information may include: coordinate information (x, y) of the upper left corner of the layer, layer width (width) and layer length (height), etc. Here, the exemplary embodiment of the present disclosure does not limit this. Figure 8B The figure below shows some layer information in a drawing board named “Park iCONS” on the target page.

[0125] In an exemplary embodiment, step 35 may include: splicing multiple panels according to the layout information of the target page, the panel identification information of multiple panels corresponding to the design page, and the association between the pre-stored panel identification information and the drawing board identification information to generate a microprogram for implementing the target page.

[0126] In this way, since the visualization configuration system can store the generated panels in the panel library in addition to the association between the panel identification information and the canvas identification information in the process of generating the corresponding panels according to the canvas configured by the user, then after the user generates all the panels of the page through the visualization configuration system, the micro-program center can match multiple panels corresponding to the design page from the panel library based on the canvas identification information in the layout information corresponding to the page obtained by parsing and the association between the pre-stored panel identification information and the canvas identification information. Then, the micro-program center can add multiple panels to the micro-program template according to the layout information of the target page corresponding to the design page and automatically splice them together, thereby producing the corresponding micro-program. So that the subsequent product center can generate the corresponding application based on the micro-program in response to the instruction for generating the application.

[0127] In an exemplary embodiment, before step 35, the microprogram generation method may further include: step 36: in response to a user's binding operation on the panel, performing binding processing on the panel, wherein the binding processing on the panel includes at least one of: data binding on the panel, event binding on the panel, and component binding on the panel. In this way, the function of visually configuring the panel through the visual configuration system can be implemented.

[0128] In an exemplary embodiment, the binding operation may include, but is not limited to, user operations such as a click operation, a drag operation, or an input operation, etc. This embodiment of the present disclosure does not limit this.

[0129] In an exemplary embodiment, data binding a panel may refer to binding its content to the panel. For example, a user may manually input data to be displayed in the panel through the visualization configuration system, or the user may bind data provided by another data server to the panel through the visualization configuration system. For example, a user may input title text into a title panel, or bind multiple data sources to a line chart panel. The present disclosure does not limit this.

[0130] In an exemplary embodiment, binding an event to a panel may refer to binding a jump event or a click event to the panel, etc. This embodiment of the present disclosure does not limit this.

[0131] In an exemplary embodiment, a panel can be bound to one or more components.

[0132] In one exemplary embodiment, a component (also known as a control) has the ability to execute functions or trigger code execution and complete responses through "events," such as performing user interaction. For example, components may include, but are not limited to, drop-down list boxes, text input boxes, buttons, navigation bars (TabBars), scroll bars, or check boxes. This disclosure does not limit this.

[0133] For example, let's control the display of the panel by binding components to the panel. Figure 2 As shown, a drop-down list box can be bound to the line chart panel 201. In this way, when using the application, the user who views the line chart can select the data that the user is more concerned about through the drop-down list box, so that the line chart panel only displays the data that the user is more concerned about.

[0134] Figure 9 FIG. 2 is a second flow chart of the microprogram generation method in the exemplary embodiment of the present disclosure. Figure 9 As shown, the microprogram generation method may include the following steps:

[0135] (1) Through the microprogram center, build a project template and set the basic information of the microprogram to be generated. For example, the basic information may include: name, version number, application type, resolution, or business attributes.

[0136] (2) The microprogram center determines whether to execute the microprogram generation process. If not, the draft data of the microprogram is stored. If yes, the following microprogram generation process is started.

[0137] (3) Displaying a second configuration interface for displaying the panel library through the visual configuration system, and obtaining the panel to be modified selected by the user from the panel library on the second configuration interface. The style of the panel to be modified is similar to the style of the design page.

[0138] (4) Displaying a first configuration interface through the Sketch plug-in in the visual configuration system, and displaying the artboard to be modified corresponding to the panel to be modified in the first configuration interface, and displaying the modifiable parameters of the artboard to be modified and the corresponding first control for modifying the parameter value of the modifiable parameter on the first configuration interface, so that the user can modify the artboard.

[0139] (5) In response to the user's operation on the first control, the Sketch plug-in in the visual configuration system generates and displays the sketch board configured by the user according to the parameter values ​​of the modifiable parameters of the sketch board to be modified and the modified parameter values.

[0140] (6) In response to the user's operation on the second control for generating a panel displayed on the first configuration interface, the Sketch plug-in in the visual configuration system generates a corresponding panel based on the drawing board configured by the user through the cross-platform development framework.

[0141] At this point, the user completes the process of visual configuration through the visual configuration system to generate the corresponding panel of the design page. The panel generated by the visual configuration system can be stored in the panel library for subsequent generation of the corresponding micro program.

[0142] (7) Import the Sketch file of the design page through the Micro Program Center.

[0143] (8) The Sketch file of the design page is parsed through the SketchTool in the visual configuration system to obtain the layout information of the target page corresponding to the design page.

[0144] In this way, the process of obtaining the layout information of the target page corresponding to the design page by parsing the Sketch file is completed.

[0145] (9) For at least one of the multiple panels corresponding to the design page generated by the visualization configuration system, the visualization configuration system performs at least one of event binding, data binding, and component binding on the at least one panel to improve the function of the at least one panel. The event binding may include: jump time or click event, etc., the data binding may include: manually inputting data or pulling data from the server interface for data binding, and the component binding may include: binding a drop-down list box, a text input box, a button, a navigation bar (TabBar), a scroll bar, or a check box, etc.

[0146] (10) Based on the layout information of the target page corresponding to the design page, the microprogram center splices the multiple panels corresponding to the user-configured design page to generate a microprogram capable of implementing the target page. The data format of the microprogram may be a DSL-JSON data format. The DSL-JSON file of the microprogram may include, but is not limited to: basic information of the microprogram, JSON data of all panels within the page (i.e., strings describing the panels), layout information of the panels, layout information of the page, and screenshots of the visual configuration of the microprogram.

[0147] At this point, the process of generating the microprogram is completed. The generated microprogram can be stored in the microprogram center for subsequent generation of corresponding cross-platform applications.

[0148] (11) When creating an application through the product center, you can select the corresponding micro-program and automatically package it to generate a cross-platform application. Among them, the cross-platform application generates target pages suitable for different operating systems when running on different operating systems. For example, a cross-platform application refers to an application suitable for platforms such as iOS, Android, Web, Windows, macOS, or Linux. In this way, the process of converting a micro-program into an application is realized.

[0149] The description of the above application scenario embodiment is similar to the description of the above microprogram generation method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the application scenario embodiment of the present disclosure, those skilled in the art are referred to the description in the method embodiment of the present disclosure for understanding, and no further details are given here.

[0150] Based on the same inventive concept, embodiments of the present disclosure further provide a computer device. The computer device may include: a processor and a memory storing a computer program executable on the processor, wherein when the processor executes the computer program, the steps of the microprogram generation method in one or more of the above exemplary embodiments are implemented.

[0151] In an exemplary embodiment, Figure 10 As shown, the computer device 100 may include: at least one processor 1001; and at least one memory 1002 and a bus 1003 connected to the processor 1001; wherein the processor 1001 and the memory 1002 communicate with each other via the bus 1003; the processor 1001 is used to call the program instructions in the memory 1002 to execute the steps of the microprogram generation method in one or more of the above-mentioned exemplary embodiments.

[0152] In an exemplary embodiment, the processor may be a central processing unit (CPU), other general-purpose processors, a digital signal processor (DSP), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, application-specific integrated circuits, etc. The general-purpose processor may be a microprocessor (MPU) or any conventional processor, etc. This is not limited in the embodiments of the present disclosure.

[0153] In an exemplary embodiment, the memory may include non-permanent memory in a computer-readable storage medium, random access memory (RAM), and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip. This is not limited in the present disclosure.

[0154] In an exemplary embodiment, the bus may include a power bus, a control bus, a status signal bus, etc. in addition to the data bus. However, for the sake of clarity, Figure 10 In the figure, various buses are all labeled as bus 1003. This embodiment of the present disclosure does not limit this.

[0155] During implementation, the processing performed by the computer device can be completed by hardware integrated logic circuits in the processor or by instructions in the form of software. That is, the method steps of the embodiments of the present disclosure can be embodied as being executed by a hardware processor, or by a combination of hardware and software modules in the processor. The software module can be located in a storage medium such as random access memory, flash memory, read-only memory, programmable read-only memory, or electrically erasable programmable memory, registers, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware. To avoid repetition, it will not be described in detail here.

[0156] Based on the same inventive concept, embodiments of the present disclosure further provide a computer-readable storage medium including a stored program, wherein, when the program is executed, the steps of the microprogram generation method in one or more of the above exemplary embodiments are implemented. For example, when the program is executed, the device containing the storage medium is controlled to execute the steps of the microprogram generation method in one or more of the above exemplary embodiments.

[0157] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, ROM / RAM, a magnetic disk, or an optical disk, etc. This is not limited in the embodiments of the present disclosure.

[0158] The description of the above computer device or computer-readable storage medium embodiment is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the computer device or computer-readable storage medium embodiment of the present disclosure, those skilled in the art are referred to the description of the method embodiment of the present disclosure for understanding. No further details are given here.

[0159] It will be appreciated by those skilled in the art that all or some of the steps, systems, and functional modules / units in the methods disclosed above may be implemented as software, firmware, hardware, and appropriate combinations thereof. In hardware implementations, the division between the functional modules / units mentioned in the above description does not necessarily correspond to the division of physical components; for example, a physical component may have multiple functions, or a function or step may be performed by several physical components in cooperation. Some or all components may be implemented as software executed by a processor, such as a digital signal processor or a microprocessor, or implemented as hardware, or implemented as an integrated circuit, such as an application-specific integrated circuit. Such software may be distributed on a computer-readable medium, which may include a computer storage medium (or non-transitory medium) and a communication medium (or temporary medium). As is well known to those skilled in the art, the term computer storage medium includes volatile and non-volatile, removable, and non-removable media implemented in any method or technology for storing information (such as computer-readable instructions, data structures, program modules, or other data). Computer storage media include, but are not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to store the desired information and can be accessed by a computer. In addition, it is well known to those skilled in the art that communication media generally embodies computer-readable instructions, data structures, program modules, or other data in a modulated data signal such as a carrier wave or other transport mechanism, and may include any information delivery media.

[0160] Although the embodiments disclosed in this disclosure are as described above, the above contents are merely embodiments adopted to facilitate understanding of the disclosure and are not intended to limit the disclosure. Any person skilled in the art to which the disclosure belongs may make any modifications and changes in the form and details of the implementation without departing from the spirit and scope of the disclosure. However, the scope of patent protection of the disclosure shall still be based on the scope defined by the appended claims.

Claims

1. An application development platform, characterized in that: include: Micro-program center and visual configuration system, among which, The micro-program center is configured to obtain a Sketch file of a design page; The visualization configuration system is configured to display a first configuration interface for configuring panels; obtain multiple panels corresponding to a design page configured by a user through the first configuration interface, including: on the first configuration interface, obtaining the artboard configured by the user through a Sketch plug-in, storing the generated panels in a panel library, generating panel identification information of the generated panels, obtaining the artboard identification information of the artboard configured by the user, establishing and storing an association between the panel identification information of the generated panels and the artboard identification information of the artboard configured by the user; and parsing the Sketch file to obtain layout information of a target page corresponding to the design page; The microprogram center is also configured to splice the multiple panels based on the layout information of the target page, the panel identification information of the multiple panels corresponding to the design page, and the association between the pre-stored panel identification information and the drawing board identification information to generate a microprogram that can realize the target page.

2. The platform according to claim 1, characterized in that The style of the drawing board is the same as that of the corresponding panel. The drawing board is a page component based on Sketch, the panel is a page component based on a cross-platform development framework, and the target page is a page based on a cross-platform development framework.

3. The platform according to claim 2, characterized in that Also included: Panel Library, where The panel library is configured to store panels; The visualization configuration system is configured to display a second configuration interface for displaying a panel library; obtain a panel to be modified selected by a user from the panel library on the second configuration interface; display a to-be-modified artboard corresponding to the to-be-modified panel in the first configuration interface through a Sketch plug-in; and generate and display the artboard configured by the user in response to an operation performed by the user on the first configuration interface to modify the to-be-modified artboard.

4. The platform according to claim 3, characterized in that The visual configuration system is configured to display, on the first configuration interface, modifiable parameters of the artboard to be modified and corresponding first controls for modifying parameter values ​​of the modifiable parameters; In response to the user's operation on the first control, the user-configured artboard is generated and displayed based on the parameter values ​​of the modifiable parameters of the artboard to be modified and the modified parameter values; wherein the modifiable parameters include: one or more of: graphics, text, values, colors, sizes and data sources.

5. The platform according to claim 2, characterized in that The visualization configuration system is configured to generate the corresponding panel through a cross-platform development framework based on the drawing board configured by the user in response to the user's operation on the second control for generating the panel displayed on the first configuration interface.

6. The platform according to any one of claims 1 to 5, characterized in that The visualization configuration system is configured to, before generating the microprogram, perform binding processing on the panel in response to a binding operation performed by a user on the panel, wherein the binding processing on the panel includes: at least one of data binding on the panel, event binding on the panel, and component binding on the panel.

7. The platform according to any one of claims 1 to 5, characterized in that Also includes: The product center is configured to obtain one or more microprograms from the microprogram center; generate a cross-platform application based on the one or more microprograms; wherein the cross-platform application generates a target page applicable to different operating systems when running on different operating systems.

8. A microprogram generation method, characterized in that: Applied to an application development platform, the method includes: Get the Sketch file of the design page; Displaying a first configuration interface for configuring the panel; Acquiring a plurality of panels corresponding to the design page configured by the user through the first configuration interface, comprising: on the first configuration interface, acquiring the artboard configured by the user through the Sketch plug-in, storing the generated panels in a panel library, generating panel identification information of the generated panels, acquiring the artboard identification information of the artboard configured by the user, and establishing and storing an association between the panel identification information of the generated panels and the artboard identification information of the artboard configured by the user; Parsing the Sketch file to obtain layout information of a target page corresponding to the design page; Based on the layout information of the target page, the panel identification information of the multiple panels corresponding to the design page, and the association between the pre-stored panel identification information and the drawing board identification information, the multiple panels are spliced ​​to generate a micro program that can realize the target page.

9. The method according to claim 8, characterized in that The acquiring of the plurality of panels corresponding to the design page configured by the user through the first configuration interface includes: According to the artboard configured by the user, the corresponding panel is generated through the cross-platform development framework; wherein the style of the artboard is the same as the style of the corresponding panel, the artboard is a page component based on Sketch, the panel is a page component based on the cross-platform development framework, and the target page is a page based on the cross-platform development framework.

10. The method according to claim 9, characterized in that The step of obtaining the user-configured drawing board through the Sketch plug-in on the first configuration interface includes: Display the second configuration interface for displaying the panel library; Obtaining the panel to be modified selected by the user from the panel library on the second configuration interface; Displaying the artboard to be modified corresponding to the panel to be modified in the first configuration interface through the Sketch plug-in; In response to a user operation on the first configuration interface for modifying the artboard to be modified, a user-configured artboard is generated and displayed.

11. The method according to claim 10, characterized in that Generating and displaying the user-configured drawing board includes: Displaying on the first configuration interface the modifiable parameters of the drawing board to be modified and a corresponding first control for modifying the parameter value of the modifiable parameter; In response to the user's operation on the first control, the user-configured artboard is generated and displayed based on the parameter values ​​of the modifiable parameters of the artboard to be modified and the modified parameter values; wherein the modifiable parameters include: one or more of: graphics, text, values, colors and sizes.

12. The method according to claim 9, characterized in that The step of generating the corresponding panel through a cross-platform development framework according to the drawing board configured by the user includes: In response to a user operation on a second control for generating a panel displayed on the first configuration interface, the corresponding panel is generated through a cross-platform development framework based on the drawing board configured by the user.

13. The method according to any one of claims 9 to 12, characterized in that Before generating the microprogram, the method further includes: In response to a binding operation performed by a user on the panel, binding processing is performed on the panel, wherein the binding processing on the panel includes: at least one of data binding on the panel, event binding on the panel, and component binding on the panel.

14. A computer device comprising: A processor and a memory storing a computer program that can be run on the processor, wherein when the processor executes the program, the steps of the microprogram generation method according to any one of claims 8 to 13 are implemented.

15. A computer-readable storage medium comprising a stored program, wherein: The steps of the microprogram generation method according to any one of claims 8 to 13 are implemented when the program is running.

Images