HK40037429B - Mini-program production method and apparatus, terminal, and storage medium - Google Patents

Description

Methods, devices, terminals, and storage media for creating mini-programs

Technical Field

This application relates to the field of visual programming, and in particular to a method, apparatus, terminal and storage medium for creating a mini-program.

Background Technology

With the development of application development technology, application providers have provided an ecosystem of "host programs and mini-programs". A mini-program is a program that depends on a host program to run. Users only need to install the host program to add and use various mini-programs at any time within the host program.

After an application provider offers a host application as its platform, various companies, service organizations, and even individual users (referred to as programmers) can develop different types of mini-programs and submit them to the application provider. The host application then serves as the runtime container to provide various services. When developing a mini-program, programmers need to download developer tools and development documentation from the host application's platform. Programmers refer to the requirements specified in the development documentation and use the developer tools to edit the code. After successfully creating the mini-program package, they submit the package to the host application's platform. Once approved, the mini-program can be released to users.

However, because the use of developer tools requires programmers to have relatively professional code editing skills, and requires a long period of knowledge learning and experience accumulation to successfully complete the development process, it is difficult to promote it to more ordinary individual users.

Summary of the Invention

This application provides a method, apparatus, terminal, and storage medium for creating mini-programs, which can solve the problem that mini-program development is difficult to promote to ordinary individual users. The technical solution is as follows:

On the one hand, a method for creating a mini-program is provided, wherein the mini-program is a program that depends on a host program to run, and the method includes:

The interface for creating a mini-program is a visual creation program. The interface includes a panel area and an editing area. The panel area provides n basic user interface (UI) elements, where n is a positive integer.

When a user operation is received on a target basic UI element, the program interface of the mini program is obtained by editing the target basic UI element in the editing area. The target basic UI element is a UI element selected from the n basic UI elements.

The program package of the mini program is generated based on the program interface of the mini program.

On the other hand, a device for creating mini-programs is provided, wherein the mini-program is a program that depends on a host program to run, and the device includes:

The interface display module is used to display the mini-program creation interface of the visual creation program. The mini-program creation interface displays a panel area and an editing area. The panel area provides n basic UI elements, where n is a positive integer.

The program interface generation module is used to edit the program interface of the mini-program in the editing area according to the target basic UI element when a user operation is received on the target basic UI element. The target basic UI element is a UI element selected from the n basic UI elements.

The package generation module is used to generate the package of the mini-program based on the program interface of the mini-program.

On the other hand, a terminal is provided, characterized in that the terminal includes a processor and a memory; the memory stores at least one instruction, which is executed by the processor to implement the method for creating a mini-program as described above.

On the other hand, a computer-readable storage medium is provided, characterized in that the storage medium stores at least one instruction, the at least one instruction being executed by a processor to implement the method for creating a small program as described above.

In this embodiment, when creating a mini-program using a visual creation program, the program displays a mini-program creation interface including a panel area and an editing area. Upon receiving user operations on the target basic UI elements, the program interface of the mini-program is edited in the editing area based on the target basic UI elements. Finally, the visual creation program generates the mini-program package based on the program interface. Compared with the development process of related mini-programs, the method of this application, without requiring developers to have strong R&D capabilities, allows the visual creation program to synchronously generate programs related to the current operation in the background by receiving user visual operations. This enables ordinary users to complete the visual creation of mini-programs without manually editing code.

Attached Figure Description

Figure 1 shows a schematic diagram of an interface for creating a mini-program using a visual creation program, provided by an exemplary embodiment of this application;

Figure 2 shows a structural block diagram of a computer system provided in an exemplary embodiment of this application;

Figure 3 shows a flowchart illustrating a method for creating a mini-program according to an exemplary embodiment of this application;

Figure 4 shows a schematic diagram of the mini-program creation interface according to an exemplary embodiment of this application;

Figure 5 shows a flowchart illustrating a method for creating a mini-program, as shown in another exemplary embodiment of this application;

Figure 6 shows a schematic diagram of the page arrangement of the mini-program creation interface according to an exemplary embodiment of this application;

Figure 7 shows a schematic diagram of an interface for binding static data to a target UI element, as illustrated in an exemplary embodiment of this application.

Figure 8 shows a schematic diagram of the interface regarding the attribute area of a target UI element, as illustrated in an exemplary embodiment of this application;

Figure 9 shows a schematic diagram of the mini-program creation interface as illustrated in another exemplary embodiment of this application;

Figure 10 shows a schematic diagram of an interface for binding list item data, as illustrated in an exemplary embodiment of this application.

Figure 11 shows a schematic diagram of an interface for unbinding list item data, as illustrated in another exemplary embodiment of this application;

Figure 12 shows a schematic diagram of the interface preview of the applet, illustrating an exemplary embodiment of this application;

Figure 13 shows a schematic diagram of an exemplary embodiment of this application illustrating the synchronous generation of code from the mini-program creation interface;

Figure 14 shows a structural block diagram of a device for creating a mini-program provided in an exemplary embodiment of this application;

Figure 15 shows a structural block diagram of a terminal provided in an exemplary embodiment of this application;

Figure 16 shows a schematic diagram of the structure of a server provided in an exemplary embodiment of this application.

Detailed Implementation

To make the objectives, technical solutions, and advantages of the present invention clearer, the embodiments of the present invention will be described in further detail below with reference to the accompanying drawings.

In this article, "multiple" refers to two or more. "And/or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and/or B can represent: A alone, A and B simultaneously, or B alone. The character "/" generally indicates that the preceding and following related objects have an "or" relationship.

For ease of understanding, the terms used in the embodiments of this application are explained below.

Visualization: Visualization is the theory, method and technology of using computer graphics and image processing to convert data into graphics or images and display them on a screen for interactive processing.

Mini Programs: A mini program is an application developed using a programming language that relies on a host program to run. This means that users can run the mini program within the host program without downloading and installing it.

Host program: In a computer environment, the software environment on which software (such as the applet in this application) depends for its existence is called the host environment, and the environment is called the host. The host is the runtime environment (i.e., the host program). The host environment (host program) can be an operating system, a server program, or an application program.

UI elements: UI elements are visual elements and are the basic components of the program interface in a mini-program.

The basic UI elements in this application embodiment refer to some UI elements used to implement common functions of the program interface, that is, basic UI elements.

The following examples illustrate the use of a host program as an application.

This application provides a method for creating a mini-program. Please refer to Figure 1, which shows a schematic diagram of an interface for creating a mini-program using a visual creation program, as provided in an exemplary embodiment of this application.

As shown in Figure 1, the terminal with the visual production program installed is a tablet computer 110. The interface of the tablet computer 110 displays the mini-program production interface 111 of the visual production program. The mini-program production interface 111 displays a panel area 112 and an editing area 113.

Panel 112 provides a variety of basic UI elements. Users can select some of these elements and add them to the mini-program's interface through visual operations (such as clicking and dragging). As illustrated in Figure 1, the visual creation program displays a program interface 114 named "Mini-Program 2" in the editing area 113. The basic UI elements in program interface 114 are added by the user from panel 112 through drag-and-drop operations.

After the "Mini Program 2" completes its visual editing, the visual creation program generates a "Mini Program 2" package based on the Mini Program's program interface 114 and sends the package to the host program's backend server 120. The terminal where the host program is installed is a mobile phone 130. After "Mini Program 2" passes the host program's review, it can be searched through the Mini Program search interface 131 on the mobile phone 130. The search result is displayed as an icon 132 of "Mini Program 2" in the Mini Program search interface 131. When the Mini Program search interface 131 receives a click signal on the icon 132, the Mini Program search interface 131 jumps to the Mini Program's program interface 114, thus realizing the visual creation of the Mini Program through visual operation.

Please refer to Figure 2, which shows a structural block diagram of a computer system 200 provided in an exemplary embodiment of this application. The computer system 200 includes: a first terminal 210, a server 220, and one or more second terminals 230.

The first terminal 210 and the second terminal 230 can be mobile phones, tablets, laptops, desktop computers, etc. In this article, we take a tablet as an example and a mobile phone as an example. That is, the first terminal 210 can realize the creation of visual mini-programs by providing touch screen interaction functions.

The first terminal 210 may be equipped with a third-party visual creation program, which is used to implement the mini-program creation methods provided in the following method embodiments, and the visual creation program may have an account login function. Users can register and log in to their own accounts in the visual creation program.

The second terminal 230 may have a third-party provided host program installed. This host program provides a reliable software environment for the mini-program and may have an account login function. Users can register and log in to their own accounts in the host program.

The first terminal 210 and the second terminal 230 are connected to the server 220 via wired or wireless networks.

Server 220 can be any of the following: a single server, a server cluster, virtual cloud storage, or a cloud computing center. Server 220 is used to provide background services for the host program. Server 220 has data storage capabilities and can be used to store data related to the visualization production program.

Optionally, server 220 is used to provide background services for the visualization production program, and similarly, it can be used to store relevant data for the visualization production program.

The following embodiment illustrates the use of server 220 to provide background services for the host program.

Please refer to Figure 3, which shows a flowchart of a method for creating a mini-program according to an exemplary embodiment of this application. This exemplary embodiment is executed by a visual creation program installed on a terminal. The method includes:

Step 301: Display the mini-program creation interface of the visual creation program.

When creating a mini-program using a visual creation program, the program displays the mini-program creation interface, which provides users with an operational interface for creating the mini-program. The mini-program creation interface displays a panel area and an editing area. The panel area provides n basic user interface (UI) elements, where n is a positive integer. Illustratively, as shown in Figure 4(a), the mini-program creation interface 400 displays a panel area 410 and an editing area 430.

Panel area 410 includes, but is not limited to, label UI elements 411, button UI elements 412, image UI elements 413, single-line input box UI elements 414, multi-line input box UI elements 415, radio button UI elements 416, multi-option UI elements 417, time UI elements 418, status switch UI elements 419, horizontal list UI elements 420, and vertical list UI elements 421.

Among them, the label UI element 411 is used to display a piece of text after editing; the button UI element 412 is used to perform information confirmation and other judgment-related events after editing; the image UI element 413 is used to add and display an image after editing; the single-line input box UI element 414 is used to provide a single-line text input box for the mini-program user after editing; the multi-line input box UI element 415 is used to provide a multi-line text input box for the mini-program user after editing; the radio button UI element 416 is used to provide a single selection for the information list for the mini-program user after editing; the multi-option UI element 417 is used to provide multiple selections for the information list for the mini-program user after editing; the time UI element 418 is used to provide the time selection for the mini-program user after editing; the status switch UI element 419 is used to provide the status selection of the interface for the mini-program user after editing; and the horizontal list UI element 420 and the vertical list UI element 421 are used to provide the mini-program user with a horizontally displayed list and a vertically displayed list, respectively, after editing.

When the visualization production program does not receive any user operation on the target basic UI element in panel area 410, the editing area 430 displays a blank canvas, that is, the initial state of the editing area 430 is a blank canvas.

Step 302: When a user operation is received on the target basic UI element, the program interface of the mini program is obtained by editing the target basic UI element in the editing area.

Optionally, the user operation may include single-click, double-click, long-press, drag and drop operations on the target basic UI element, etc., and this application does not limit this.

When the visualization production program receives a user operation on the target basic UI element in panel area 410, the program interface of the mini-program is edited in editing area 430 according to the target basic UI element. The target basic UI element is the UI element selected from n basic UI elements.

Optionally, the interface of a mini-program can be a static web page, meaning that the mini-program's interface does not have the ability to access the database in the backend server, and the interface is displayed based on the client of the host program.

Taking the program interface of the mini-program as a static web page as an example. As illustrated in Figure 4(b), when the visual creation program receives drag operations on the label UI element 411, the image UI element 413, and the horizontal list UI element 420, the label UI element 411, the image UI element 413, and the horizontal list UI element 420 become the target basic UI elements. The visual creation program then edits the static program interface 440 of the mini-program based on the target basic UI elements.

As shown in the static program interface 440, the text portion in the static program interface 440 is generated by dragging and dropping the label UI element 411; the image portion in the static program interface 440 is generated by dragging and dropping the image UI element 413; the list control in the static program interface 440 is generated by dragging and dropping the horizontal list UI element 420, and this list control is a horizontal list consisting of three rows: list item 1, list item 2, and list item 3.

Among them, the static program interface 440 is a static web page. The actual static program interface 440 cannot perform page jumps and does not have the ability to access the backend server or local database.

Optionally, the interface of a mini-program can be a dynamic web page, meaning that the interface of the mini-program can access the database of the backend server and interact with other pages.

Taking the program interface of a mini-program as a dynamic web page as an example. Schematic, as shown in Figure 4(c), the visualization creation program receives drag operations on the label UI element 411, image UI element 413, and horizontal list UI element 420. The label UI element 411, image UI element 413, and horizontal list UI element 420 are the target basic UI elements. The visualization creation program edits the dynamic program interface 450 of the mini-program based on the target basic UI elements.

As shown in the dynamic program interface 450, the text portion in the dynamic program interface 450 is generated by dragging and dropping the label UI element 411; the image portion in the dynamic program interface 450 is generated by dragging and dropping the image UI element 413; the list control in the dynamic program interface 450 is generated by dragging and dropping the horizontal list UI element 420, and this list control is a horizontal list consisting of three rows: list item 1, list item 2, and list item 3.

As shown in the dynamic program interface 450, which differs from the static program interface 440, when the visual creation program receives a user operation on list item 1 of the list control, the dynamic program interface 450 will jump to the program interface 460. The editing of the program interface 460 is consistent with both the static program interface 440 and the dynamic program interface 450; both can be edited based on the basic UI elements of the panel area 410. Furthermore, the program interface 460 can also be either a static web page or a dynamic web page.

Step 303: Generate the mini-program package based on the mini-program's interface.

When the visual production program receives an editing operation on the target basic UI element in the editing area, it simultaneously generates a subroutine corresponding to the editing operation in the background. When the user finishes editing the target basic UI element, it packages each subroutine into a mini-program package, which is used to run in the host program.

In this embodiment, when creating a mini-program using a visual creation program, the program displays a mini-program creation interface including a panel area and an editing area. Upon receiving user operations on the target basic UI elements, the program interface of the mini-program is edited in the editing area based on the target basic UI elements. Finally, the visual creation program generates the mini-program package based on the program interface. Compared with the development process of related mini-programs, the method of this application, without requiring developers to have strong R&D capabilities, allows the visual creation program to synchronously generate programs related to the current operation in the background by receiving user visual operations. This enables ordinary users to complete the visual creation of mini-programs without manually editing code.

Please refer to Figure 5, which shows a flowchart of a method for creating a mini-program according to another exemplary embodiment of this application. This exemplary embodiment is executed by a visual creation program installed on a terminal. The method includes:

Step 501: Display the mini-program creation interface of the visual creation program.

The implementation method of this step can refer to step 301 above, and will not be repeated here in this embodiment.

Among them, the n basic UI elements include, but are not limited to, label UI elements, button UI elements, image UI elements, single-line input box UI elements, multi-line input box UI elements, radio button UI elements, multi-option UI elements, time UI elements, status switch UI elements, horizontal list UI elements, and vertical list UI elements.

Step 502: Upon receiving the page layout operation corresponding to the target basic UI element, the target basic UI element is laid out and edited in the editing area according to the page layout operation to obtain the visual part of the program interface of the mini program.

In one possible implementation, the page arrangement operation corresponding to the target basic UI element includes determining the target basic UI element from n basic UI elements, determining the position of the target basic UI element, and determining the size of the target basic UI element, etc., which are not limited in this embodiment of the application.

In one possible implementation, the visual portion of the program interface includes the target basic UI element, the position of the target basic UI element in the program interface, and the size of the target basic UI element in the program interface, etc., which are not limited in this embodiment.

In one possible implementation, this step includes the following steps.

1. When a selection operation is received on the target basic UI element, the target basic UI element is added to the program interface of the mini program in the editing area according to the selection operation.

Optionally, the selection operation includes at least one of click selection and drag selection.

The panel area of the visual production program provides n basic UI elements. The visual production program determines the basic UI element selected under the operation as the target basic UI element. The target basic UI element is added to the program interface of the mini program through the click selection operation or the drag selection operation.

As illustrated in Figure 6(a), in the visualization production process, the mini-program production interface 400 receives a drag selection operation on the image UI element 413 in the panel area 410, thereby adding the image UI element 413 (i.e. the target basic UI element) to the mini-program's program interface 610 in the editing area 430.

2. When a move operation is received on the target basic UI element, the position of the target basic UI element is moved in the program interface of the mini-program in the editing area according to the move operation.

Optionally, if the initial position of the target basic UI element in the program interface is not the user's desired position, the user can drag the target basic UI element to the desired position in the program interface through a movement operation.

As illustrated in Figure 6(b), in the visualization production program, the mini-program production interface 400 receives a movement operation on the image UI element 413 in the program interface 610, thereby moving the image UI element 413 to the position indicated by the arrow.

3. When a scaling operation is received on the target basic UI element, the size of the target basic UI element is changed in the program interface of the mini-program in the editing area according to the scaling operation.

Optionally, if the size of the target basic UI element in the mini-program's interface is not satisfactory to the user, the user can use scaling operations to scale the target basic UI element to a satisfactory size. Scaling operations include shrinking and enlarging.

As illustrated in Figure 6(c), in the visualization production program, the mini-program production interface 400 receives a scaling operation on the image UI element 413 in the program interface 610, and thus scales down the image UI element 413 according to the scaling range indicated by the arrow.

Since the embodiments of this application are based on a scenario where a visualization production program is installed on a tablet computer, the above-mentioned selection, movement, and zoom operations can be implemented by the user touching the screen.

Optionally, if the terminal on which the visualization production program is installed does not have touch screen functionality, the above selection, movement, and zoom operations can be performed using a keyboard and mouse.

Step 503: When the logical arrangement operation corresponding to the target basic UI element is received, the target basic UI element is logically edited in the editing area according to the logical arrangement operation to obtain the logical running part in the program interface of the mini program.

Optionally, after completing step 502 and editing the layout of the target basic UI elements to obtain the visual part of the mini program's interface, the target basic UI elements will be logically edited.

In one possible implementation, the logical orchestration operations corresponding to the target basic UI element include data binding with static data, data binding with dynamic data, and data binding with local data, etc., which are not limited in this embodiment.

In one possible implementation, this step includes the following steps.

1. Upon receiving the first logical arrangement operation corresponding to the target UI element, the target basic UI element and static data are bound in the editing area according to the first logical arrangement operation. The static data is data that is pre-written into the target basic UI element for display.

Upon receiving the first logical arrangement operation corresponding to the target UI element, the target basic UI element and static data are bound together in the editing area according to the first logical arrangement operation. The static data is the static display data pre-written into the target basic UI element, that is, the attributes displayed during the creation stage of the mini program. It can also be understood as the data written into the program when the visual production program synchronously edits the code in the background.

For example, when setting the specific image to display for an image UI element, the specific image is a type of static data; similarly, when setting the specific text content and fill color for a label UI element, the specific text content and fill color are each types of static data.

Indicatively, based on Figure 6(c), as shown in Figure 7, in the visualization production program, after the image UI element 413 completes the layout editing shown in Figure 6, a corresponding image change floating button 701 will be displayed on the mini-program production interface 400 by receiving a click operation on the image UI element 413. When the user triggers the operation through the image change floating button 701, an image selection area 702 will be displayed on the mini-program production interface 400. The images displayed in the image selection area 702 are from the local photo album, and the user can select the target image (static display data) to be added in the image selection area 702.

In one possible implementation, the execution order of step "a" in steps 502 and 503 can be interchanged. That is, for the target UI element, data binding with static data can be performed first, followed by layout operations.

As illustrated in Figure 8(a), the image UI element 413 first completes the data binding with the image6 (static data) through the image change floating button 701; secondly, when the image UI element 413 receives a trigger operation on the attribute floating button 801, as shown in Figure 8(b), the attribute area 802 is displayed in the editing area 430 of the mini-program's creation interface 400. This attribute area 802 is used for the layout operation of the image UI element 413, and the content in step 502 can be executed through the attribute area 802.

As illustrated in Figure 8(c), the attribute area 802 may include the following: For example, for the image image6, the attribute area 802 can be used to set the image image6's border type (such as a right-angled rectangle border, a rounded rectangle border, an elliptical border, etc.), scaling type (such as scaling to fill, scaling to fit, stretching, scaling to original size, etc.), area height, and adaptive height, etc. This application embodiment does not limit the possible contents of the attribute area 802.

Different target UI elements correspond to different attribute areas. For example, the attribute area of a label UI element allows for settings such as the font, color, and font size of the text within the label UI element. This application does not limit the content contained in the different attribute areas of different target UI elements.

Second, upon receiving the second logical arrangement operation corresponding to the target UI element, the target basic UI element and the first dynamic data are bound in the editing area according to the second logical arrangement operation. The first dynamic data is the data that is dynamically obtained from the target basic UI element through the network protocol during the operation of the mini program and displayed therein.

Optionally, the second logical orchestration operation can be understood as follows: when the mini-program runs on the host program, the target UI element can dynamically access the host program's backend server through the network protocol under the second logical orchestration operation pre-set during the mini-program's creation process, and obtain the first dynamic data in the target basic UI element from the backend server, and run and display the first dynamic data through the host program, that is, the first dynamic data is stored in the host program's backend server.

During the creation of the aforementioned mini-program, upon receiving the second logical arrangement operation corresponding to the target UI element, the target basic UI element is bound to the first dynamic data in the editing area according to the second logical arrangement operation.

In an illustrative example, under the second logical arrangement operation, the applet running on the host program can dynamically update the data and order related to the list items in the horizontal list UI elements. The data and order related to the list items are dynamic data, which needs to access the host program's backend server to obtain the first dynamic data related to the list items.

As illustrated in Figure 9(a), in the visualization production process, the program interface 910 of the mini-program is displayed in the mini-program production interface 400 according to the horizontal list UI element 420 in the panel area 410. The horizontal list UI element 420 contains 5 list items, namely list item 1, list item 2, list item 3, list item 4 and list item 5.

List item 1 is the template item for the horizontal list UI element 420, used to display the structure of each list item. Schematic, as shown in Figure 9(b), the template item (i.e., list item 1) includes three data fields: the first field 911, the second field 912, and the third field 913.

During the operation of the mini-program, the program interface 910, which contains horizontal list UI elements 420, is displayed by obtaining the first dynamic data that can be bound to the list items' fields. The process of binding the list items to the first dynamic data is described below with reference to the diagram. This process is a kind of second logical arrangement.

As illustrated in Figure 9(c), the number of items in the horizontal list UI element 420 can be set using the attribute setting floating button 914 corresponding to the horizontal list UI element 420 in the mini-program creation interface 400. Secondly, the first dynamic data binding of the list items in the horizontal list UI element 420 can be set using the binding data floating button 915 corresponding to the horizontal list UI element 420 in the mini-program creation interface 400.

In one possible implementation, when the mini-program creation interface 400 receives a click operation on the bound data floating button 915, the interface shown in Figure 10 is displayed.

As illustrated in Figure 10(a), data table A contains five selectable columns: content 1 (image data), content 2 (text data), content 3 (numerical data), content 4 (numerical data), and content 5 (text data). As illustrated in Figure 10(b), the mini-program interface 400 displays the list binding data table interface. The template item (i.e., list item 1) in the horizontal list UI element 420 contains the three fields mentioned above. These three fields respectively select content 1, content 2, and content 5 from data table A for data binding. Therefore, the selected content 1, content 2, and content 5 constitute the first dynamic data. The selection of the first dynamic data for the template item can be achieved through the data area 1001 in the program interface.

As illustrated in Figure 10(c), this shows the possible contents of data area 1001. In a scenario where a template item (i.e., list item 1) is bound to data table A, data area 1001 includes: the bound object in the binding relationship, i.e., data table A; the field association method in the binding relationship; and the functions of viewing, editing, and selecting data from the bound data table.

Field association refers to the way fields in a template item are associated with selected data in a data table. This association can be random or specified. For example, as shown in Figure 10(c), the current field association is random. If the user is not satisfied with the current field association, they can unbind the data for that specific field. Optionally, as shown in Figure 11, the third field in list item 1 is currently bound to data 5 from data table A. When a click trigger operation is received on the third field, the creation interface 400 displays the corresponding field unbinding option 1100. The field unbinding option 1100 displays the data that can be rebound to the third field based on its type, including content 2, content 3, and content 4.

Once the template item completes data binding, the mini-program runs through the host program and dynamically obtains the first dynamic data of each list item in the target basic UI element through network protocol. The host program then displays the mini-program's interface based on this first dynamic data.

Third, upon receiving the third logical arrangement operation corresponding to the target UI element, the target basic UI element and the second dynamic data are bound in the editing area according to the third logical arrangement operation. The second dynamic data is the data that is calculated by local code and written to the target basic UI element for display during the operation of the mini program.

In one possible implementation, the aforementioned basic UI element also includes a basic UI element that can access the local terminal installed by the host program and obtain second dynamic data of the local terminal.

In an illustrative example, the aforementioned basic UI elements also include a location UI element, which, when triggered, has the ability to access the local terminal location information installed by the host program, obtain the location information, and display second dynamic data related to the location information on the program interface of the mini program.

In an illustrative example, the aforementioned basic UI elements also include UI elements related to uploading local data to the mini-program client. When triggered, these UI elements have the ability to access local data on the local terminal installed by the host program, obtain the target local data, and display the target local data in the mini-program's interface.

Fourth, when the fourth logical arrangement operation corresponding to the target basic UI element in the first program interface is received, the target basic UI element and the second program interface are data bound in the editing area according to the fourth logical arrangement operation. The second program interface is the program interface that the target basic UI element jumps to and displays after being triggered.

In one possible implementation, the program interface of the mini-program of this application includes a first program interface and a second program interface that have a hierarchical display relationship. That is, when the mini-program is running, the first program interface can trigger a jump to the second program interface.

In Figure 4(c), the dynamic web page described is the first program interface mentioned above. The process of jumping from the first program interface to the second program interface is the fourth logical arrangement operation. Taking Figure 4(c) as an example, the fourth logical arrangement operation is as follows: After completing the page arrangement and logical arrangement of program interface 460 (i.e., the second program interface), list item 1 in dynamic program interface 450 (i.e., the first program interface) is data bound to program interface 460. Specifically, when a trigger operation is received for list item 1, dynamic program interface 450 jumps to program interface 460.

Step 504: Generate the mini-program package based on the mini-program's interface.

The implementation method of this step can refer to step 303 above, and will not be repeated here in this embodiment.

Step 505: Upon receiving a preview operation on the preview control, push the mini-program's package to the host program for execution.

In one possible implementation, the mini-program creation interface also includes a preview control. When the visual creation program receives a preview operation on the preview control, it pushes the mini-program package to the host program for execution.

Indicatively, based on Figures 9 and 10, after the horizontal list UI element 420 completes data binding, the preview of the mini program can be achieved through the preview control 916 in the mini program creation interface 400. The final preview effect is shown in Figure 12. The data bound to the fields in each list item comes from the data table A shown in Figure 10(a).

In one possible implementation, the mini-program creation interface also includes a preview control, and the visual creation program and the host program are installed on the same terminal. When the visual creation program receives a preview operation on the preview control, the host program actively obtains the mini-program's package.

Step 506: Upon receiving a submission operation on the submission control, the mini-program's package is sent to the host program's application platform for review or release.

After a mini-program is completed, it will be rejected by the platform if it contains illegal or inappropriate content, taking into account whether the mini-program meets the requirements of the host platform.

In one possible implementation, the mini-program creation interface also includes a submission control. When the visual creation program receives a submission operation on the submission control, it pushes the mini-program package to the host program for execution.

In this embodiment, the mini-program's interface includes a visual component and a logical operation component. The visual component is obtained based on page layout operations, and the visualization creation program edits the target basic UI elements according to these operations. The logical operation component is obtained based on logical layout operations, and the visualization creation program edits the target basic UI elements logically according to these operations. The page layout and logical layout operations in this application are visual operations. Compared to the development process of related mini-programs, they do not require complex code editing to achieve the aforementioned layout and logical editing, allowing users to achieve visual creation of the mini-program through interactive operations with a touchscreen.

In the above embodiments, operations related to mini-program creation will generate code synchronously in the background of the visual creation program. For example, when determining the target basic UI elements, completing page arrangement operations, and completing logic arrangement operations, the visual creation program will synchronously generate code related to the current operation.

As illustrated in Figure 13(a), a code display area 1301 is displayed on the creation interface 400 of the mini-program. When receiving page arrangement operations and logic arrangement operations on the program interface 1300, code is generated synchronously in the code display area 1301.

In addition, users can also edit the code in the code display area 1301, that is, switch from visual creation of mini programs to code writing and creation of mini programs.

When a user edits code in the code display area 1301, if the user follows the relevant code editing method, the user needs to know the identity document (ID) of each target UI element, and then enter the ID of the target UI element being edited into the code. If the user does not know the ID of each target UI element, it will cause difficulties in code editing.

In one possible implementation, when a user triggers an action on a target UI element, the visual creation program obtains the ID of the target UI element, and the ID of the target UI element is automatically entered into the code display area 1301. That is, the ID of the currently edited target UI element is automatically entered into the line of code where the ID needs to be entered, providing convenience for users with some code editing skills.

Optionally, before receiving the user's trigger operation on the target UI element, the system may also receive a trigger operation on a code area requiring an ID to be entered. Optionally, the trigger operation on the target UI element may include a single-click operation, a double-click operation, etc., and this embodiment of the application does not limit this.

As illustrated in Figure 13(b), in the code display area 1301, the content to be entered in the variable area 1302 is the ID of the current target UI element, namely the ID of the image UI element 413. After receiving the user's click operation on the variable area 1302, it waits to receive the user's click operation on the target UI element. After receiving the user's click operation on the image UI element 413 in the program interface 1300, the visualization program obtains the ID of the image UI element, and the variable area 1302 will automatically enter and display the ID of the image UI element 413, without the user having to manually enter the ID of the image UI element 413 in the variable area 1302.

The visual creation program synchronously generates code related to the current operation in the background, allowing ordinary users to create mini-programs. At the same time, users with certain code editing skills can also edit the code through the code display area to create mini-programs.

Please refer to Figure 14, which shows a structural block diagram of a software app creation apparatus according to an embodiment of this application. This apparatus can be implemented as all or part of a computer device through software, hardware, or a combination of both. The apparatus includes:

The interface display module 1401 is used to display the mini-program creation interface of the visual creation program. The mini-program creation interface displays a panel area and an editing area. The panel area provides n basic UI elements, where n is a positive integer.

The program interface generation module 1402 is used to edit the program interface of the mini-program in the editing area according to the target basic UI element when a user operation is received on the target basic UI element. The target basic UI element is a UI element selected from the n basic UI elements.

The package generation module 1403 is used to generate the package of the mini-program based on the program interface of the mini-program.

Optionally, the program interface generation module 1402 includes:

The layout editing submodule is used to edit the layout of the target basic UI element in the editing area according to the page layout operation when the page layout operation is received, so as to obtain the visual part of the program interface of the mini program.

The logic editing submodule is used to perform logical editing on the target basic UI element in the editing area when a logical arrangement operation corresponding to the target basic UI element is received, so as to obtain the logical running part in the program interface of the mini program.

Optionally, the layout editing submodule is used to add the target basic UI element to the program interface of the mini-program in the editing area according to the selection operation when a selection operation (click selection operation or drag selection operation) is received on the target basic UI element.

When a move operation is received on the target basic UI element, the position of the target basic UI element is moved in the program interface of the mini program in the editing area according to the move operation;

When a scaling operation is received on the target basic UI element, the size of the target basic UI element is changed in the program interface of the mini-program in the editing area according to the scaling operation.

Optionally, the logic editing submodule is used to bind the target basic UI element with static data in the editing area according to the first logic arrangement operation when the first logic arrangement operation is received. The static data is data that is pre-written into the target basic UI element for display.

When the second logical arrangement operation corresponding to the target UI element is received, the target basic UI element and the first dynamic data are bound in the editing area according to the second logical arrangement operation. The first dynamic data is the data that is dynamically obtained from the target basic UI element through the network protocol during the operation of the mini program and displayed therein.

When the third logical arrangement operation corresponding to the target UI element is received, the target basic UI element and the second dynamic data are bound in the editing area according to the third logical arrangement operation. The second dynamic data is the data that is calculated by local code and written to the target basic UI element for display during the operation of the mini program.

Optionally, the program interface of a mini-program includes: a first program interface and a second program interface that have a hierarchical display relationship;

Optionally, the logic editing submodule is used to bind the target basic UI element to the second program interface in the editing area according to the fourth logic arrangement operation when the fourth logic arrangement operation is received from the target basic UI element in the first program interface. The second program interface is the program interface that the target basic UI element jumps to and displays after being triggered.

Optionally, the mini-program creation interface may also include: a preview control;

Optionally, the device further includes:

The package push module is used to push the mini-program's package to the host program for execution when a preview operation is received on the preview control.

Optionally, the mini-program creation interface may also include: a submission control;

Optionally, the device further includes:

The package sending module is used to send the mini-program's package to the host program's application platform for review or release when a submission operation is received on the submission control.

Please refer to Figure 15, which shows a structural block diagram of a terminal 1500 provided in an exemplary embodiment of this application. The terminal 1500 may be a portable mobile terminal, such as a smartphone, tablet computer, MP3 player (Moving Picture Experts Group Audio Layer III), or MP4 player (Moving Picture Experts Group Audio Layer IV). The terminal 1500 may also be referred to as a user device, portable terminal, or other names.

Typically, terminal 1500 includes a processor 1501 and a memory 1502.

Processor 1501 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1501 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 1501 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1501 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 1501 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

The memory 1502 may include one or more computer-readable storage media, which may be tangible and non-transitory. The memory 1502 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1502 is used to store at least one instruction, which is executed by the processor 1501 to implement the method for creating a small program for the terminal 1500 provided in this application.

In some embodiments, the terminal 1500 may also optionally include: a peripheral device interface 1503 and at least one peripheral device. Specifically, the peripheral device includes at least one of: a radio frequency circuit 1504, a touch display screen 1505, a camera 1506, an audio circuit 1507, a positioning component 1508, and a power supply 1509.

Peripheral interface 1503 can be used to connect at least one I/O (Input/Output) related peripheral device to processor 1501 and memory 1502. In some embodiments, processor 1501, memory 1502 and peripheral interface 1503 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 1501, memory 1502 and peripheral interface 1503 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

The radio frequency (RF) circuit 1504 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 1504 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 1504 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF circuit 1504 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 1504 can communicate with other terminals through at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and/or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 1504 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

The touch display screen 1505 is used to display a user interface (UI). This UI may include graphics, text, icons, videos, and any combination thereof. The touch display screen 1505 also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to the processor 1501 for processing. The touch display screen 1505 is used to provide virtual buttons and/or a virtual keyboard, also known as soft buttons and/or a soft keyboard. In some embodiments, there may be one touch display screen 1505, located on the front panel of the terminal 1500; in other embodiments, there may be at least two touch display screens, respectively located on different surfaces of the terminal 1500 or in a folded design; in some embodiments, the touch display screen 1505 may be a flexible display screen, located on a curved or folded surface of the terminal 1500. Furthermore, the touch display screen 1505 may also be configured as a non-rectangular, irregular shape, i.e., a non-rectangular screen. The touch display 1505 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

The camera assembly 1506 is used to acquire images or videos. Optionally, the camera assembly 1506 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is used for video calls or selfies, and the rear-facing camera is used for taking photos or videos. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, and a wide-angle camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, and panoramic shooting and VR (Virtual Reality) shooting by fusion of the main camera and the wide-angle camera. In some embodiments, the camera assembly 1506 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash is a combination of a warm-light flash and a cool-light flash, which can be used for light compensation at different color temperatures.

Audio circuit 1507 provides an audio interface between the user and terminal 1500. Audio circuit 1507 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting the sound waves into electrical signals that are input to processor 1501 for processing, or input to radio frequency circuit 1504 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each located at a different location on terminal 1500. The microphone may also be an array microphone or an omnidirectional microphone. The speaker converts electrical signals from processor 1501 or radio frequency circuit 1504 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, audio circuit 1507 may also include a headphone jack.

The positioning component 1508 is used to locate the current geographic location of the terminal 1500 in order to enable navigation or LBS (Location Based Service). The positioning component 1508 can be a positioning component based on the US GPS (Global Positioning System), China's BeiDou system, or Russia's Galileo system.

Power supply 1509 is used to power the various components in terminal 1500. Power supply 1509 can be AC power, DC power, a disposable battery, or a rechargeable battery. When power supply 1509 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, and a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

In some embodiments, the terminal 1500 further includes one or more sensors 1510. The one or more sensors 1510 include, but are not limited to: an accelerometer 1511, a gyroscope 1512, a pressure sensor 1513, a fingerprint sensor 1514, an optical sensor 1515, and a proximity sensor 1516.

Accelerometer 1511 can detect the magnitude of acceleration along the three coordinate axes of a coordinate system established by terminal 1500. For example, accelerometer 1511 can be used to detect the components of gravitational acceleration along the three coordinate axes. Processor 1501 can control touchscreen 1505 to display the user interface in landscape or portrait view based on the gravitational acceleration signal acquired by accelerometer 1511. Accelerometer 1511 can also be used for games or for acquiring user motion data.

The gyroscope sensor 1512 can detect the orientation and rotation angle of the terminal 1500. The gyroscope sensor 1512, in conjunction with the accelerometer sensor 1511, can collect 3D motion data from the user on the terminal 1500. Based on the data collected by the gyroscope sensor 1512, the processor 1501 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

The pressure sensor 1513 can be disposed on the side bezel of the terminal 1500 and/or on the lower layer of the touch display screen 1505. When the pressure sensor 1513 is disposed on the side bezel of the terminal 1500, it can detect the user's grip signal on the terminal 1500 and perform left/right hand recognition or quick operation based on the grip signal. When the pressure sensor 1513 is disposed on the lower layer of the touch display screen 1505, it can control the operable controls on the UI interface based on the user's pressure operation on the touch display screen 1505. The operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

The fingerprint sensor 1514 is used to collect a user's fingerprint to identify the user's identity. When the user's identity is identified as trusted, the processor 1501 authorizes the user to perform relevant sensitive operations, including unlocking the screen, viewing encrypted information, downloading software, making payments, and changing settings. The fingerprint sensor 1514 can be located on the front, back, or side of the terminal 1500. When the terminal 1500 has a physical button or manufacturer logo, the fingerprint sensor 1514 can be integrated with the physical button or manufacturer logo.

An optical sensor 1515 is used to collect ambient light intensity. In one embodiment, the processor 1501 can control the display brightness of the touch screen 1505 based on the ambient light intensity collected by the optical sensor 1515. Specifically, when the ambient light intensity is high, the display brightness of the touch screen 1505 is increased; when the ambient light intensity is low, the display brightness of the touch screen 1505 is decreased. In another embodiment, the processor 1501 can also dynamically adjust the shooting parameters of the camera assembly 1506 based on the ambient light intensity collected by the optical sensor 1515.

The proximity sensor 1516, also known as a distance sensor, is typically located on the front of the terminal 1500. The proximity sensor 1516 is used to detect the distance between the user and the front of the terminal 1500. In one embodiment, when the proximity sensor 1516 detects that the distance between the user and the front of the terminal 1500 is gradually decreasing, the processor 1501 controls the touchscreen display 1505 to switch from a screen-on state to a screen-off state; when the proximity sensor 1516 detects that the distance between the user and the front of the terminal 1500 is gradually increasing, the processor 1501 controls the touchscreen display 1505 to switch from a screen-off state to a screen-on state.

Those skilled in the art will understand that the structure shown in FIG13 does not constitute a limitation on the terminal 1500, and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

Please refer to Figure 16, which shows a schematic diagram of the structure of a server provided in one embodiment of this application. This server is used to implement the method for creating applets provided in the above embodiments. Specifically:

The server 1600 includes a central processing unit (CPU) 1601, a system memory 1604 including random access memory (RAM) 1602 and read-only memory (ROM) 1603, and a system bus 1605 connecting the system memory 1604 and the CPU 1601. The server 1600 also includes a basic input/output system (I/O system) 1606 to facilitate information transfer between various devices within the computer, and a mass storage device 1607 for storing the operating system 1613, application programs 1614, and other program modules 1615.

The basic input/output system 1606 includes a display 1608 for displaying information and an input device 1609 for user input, such as a mouse or keyboard. Both the display 1608 and the input device 1609 are connected to the central processing unit 1601 via an input/output controller 1610 connected to the system bus 1605. The basic input/output system 1606 may also include the input/output controller 1610 for receiving and processing input from multiple other devices such as a keyboard, mouse, or electronic stylus. Similarly, the input/output controller 1610 also provides output to a display screen, printer, or other types of output devices.

The mass storage device 1607 is connected to the central processing unit 1601 via a mass storage controller (not shown) connected to the system bus 1605. The mass storage device 1607 and its associated computer-readable media provide non-volatile storage for the server 1600. That is, the mass storage device 1607 may include computer-readable media (not shown) such as a hard disk or a CD-ROM drive.

Without loss of generality, the computer-readable medium may include computer storage media and communication media. Computer storage media include volatile and non-volatile, removable and non-removable media implemented using any method or technology for storing information such as computer-readable instructions, data structures, program modules, or other data. Computer storage media include RAM, ROM, EPROM, EEPROM, flash memory or other solid-state storage technologies, CD-ROM, DVD or other optical storage, magnetic tape cassettes, magnetic tape, disk storage, or other magnetic storage devices. Of course, those skilled in the art will recognize that the computer storage media are not limited to the above-mentioned types. The system memory 1604 and mass storage device 1607 described above can be collectively referred to as memory.

According to various embodiments of this application, the server 1600 can also be connected to a remote computer on a network, such as the Internet. That is, the server 1600 can be connected to the network 1612 via the network interface unit 1611 connected to the system bus 1605, or the network interface unit 1611 can be used to connect to other types of networks or remote computer systems.

The memory stores at least one instruction, at least one program, code set, or instruction set, which is configured to be executed by one or more processors to implement the functions of each step in the above-mentioned method for creating a mini-program.

This application also provides a computer-readable storage medium storing at least one instruction, at least one program, code set, or instruction set, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by the processor to implement the method for creating a small program as provided in the above embodiments.

Optionally, the computer-readable storage medium may include: read-only memory (ROM), random access memory (RAM), solid-state drives (SSDs), or optical discs, etc. The random access memory may include resistive random access memory (ReRAM) and dynamic random access memory (DRAM).

The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments. The above descriptions are merely optional embodiments of this application and are not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims (10)

1. A method for creating a mini-program, characterized in that the mini-program is a program that depends on a host program to run, the method comprising: The interface for creating a mini-program is a visual creation program. The interface includes a panel area, an editing area, and a code display area. The panel area provides n basic UI elements, where n is a positive integer. When a user operation is received on a target basic UI element, the program interface of the mini program is obtained by editing the target basic UI element in the editing area. The target basic UI element is a UI element selected from the n basic UI elements. The program package of the mini program is generated based on the program interface of the mini program; When a user action is received on the target basic UI element, code related to the current action is displayed in the code display area; Upon receiving a code editing operation within the code display area, and the code editing operation includes an input operation for the identity number of the target basic UI element, in response to a trigger operation on the target basic UI element, the identity number of the target basic UI element is automatically entered within the code display area. 2. The method according to claim 1, characterized in that, upon receiving a user operation on a target basic UI element, editing the program interface of the mini-program in the editing area according to the target basic UI element includes: When a page arrangement operation corresponding to the target basic UI element is received, the target basic UI element is arranged and edited in the editing area according to the page arrangement operation to obtain the visual part of the program interface of the mini program; Upon receiving the logical arrangement operation corresponding to the target basic UI element, the target basic UI element is logically edited in the editing area according to the logical arrangement operation to obtain the logical operation part in the program interface of the mini program. 3. The method according to claim 2, characterized in that, upon receiving the page arrangement operation corresponding to the target basic UI element, the step of arranging and editing the target basic UI element in the editing area according to the page arrangement operation to obtain the visual part of the program interface of the mini-program includes at least one of the following steps: Upon receiving a selection operation on the target basic UI element, the target basic UI element is added to the program interface of the mini-program in the editing area according to the selection operation; Upon receiving a move operation on the target basic UI element, the position of the target basic UI element is moved within the program interface of the mini-program in the editing area according to the move operation; Upon receiving a scaling operation on the target basic UI element, the size of the target basic UI element is changed in the program interface of the mini-program in the editing area according to the scaling operation. 4. The method according to claim 2, characterized in that, upon receiving the logical arrangement operation corresponding to the target basic UI element, logically editing the target basic UI element in the editing area according to the logical arrangement operation to obtain the logical operation part in the program interface of the mini-program, includes: Upon receiving the first logical arrangement operation corresponding to the target basic UI element, the target basic UI element is data-bound with static data in the editing area according to the first logical arrangement operation. The static data is data that is pre-written into the target basic UI element for display. Upon receiving the second logical arrangement operation corresponding to the target basic UI element, the target basic UI element is data-bound to the first dynamic data in the editing area according to the second logical arrangement operation. The first dynamic data is data dynamically obtained from the target basic UI element through network protocol during the operation of the mini program and displayed thereon. Upon receiving the third logical arrangement operation corresponding to the target basic UI element, the target basic UI element is bound to the second dynamic data in the editing area according to the third logical arrangement operation. The second dynamic data is data that is calculated by local code and written to the target basic UI element for display during the operation of the mini program. 5. The method according to claim 2, wherein the program interface of the mini-program includes: a first program interface and a second program interface having a hierarchical display relationship; Upon receiving the logical arrangement operation corresponding to the target basic UI element, the step of logically editing the target basic UI element in the editing area according to the logical arrangement operation to obtain the logical operation part in the program interface of the mini-program, including: When a fourth logical arrangement operation corresponding to the target basic UI element in the first program interface is received, the target basic UI element and the second program interface are data bound in the editing area according to the fourth logical arrangement operation. The second program interface is the program interface that the target basic UI element jumps to and displays after being triggered. 6. The method according to any one of claims 1 to 5, wherein the mini-program creation interface further includes: a preview control; The method further includes: Upon receiving a preview operation from the preview control, the mini-program package is pushed to the host program for execution. 7. The method according to any one of claims 1 to 5, wherein the mini-program creation interface further includes: a submission control; The method further includes: Upon receiving a submission operation from the submission control, the mini-program's package is sent to the host program's platform for review or release. 8. A device for creating a mini-program, characterized in that the mini-program is a program that depends on a host program to run, and the device comprises: The interface display module is used to display the mini-program creation interface of the visual creation program. The mini-program creation interface displays a panel area, an editing area, and a code display area. The panel area provides n basic UI elements, where n is a positive integer. The program interface generation module is used to edit the program interface of the mini-program in the editing area according to the target basic UI element when a user operation is received on the target basic UI element. The target basic UI element is a UI element selected from the n basic UI elements. A package generation module is used to generate a package for the mini-program based on the mini-program's interface. A functional module for displaying code related to the current operation in the code display area when a user operation is received on the target basic UI element; and for automatically typing the identity number of the target basic UI element in the code display area in response to a trigger operation on the target basic UI element when a code editing operation is received in the code display area, and the code editing operation includes an input operation for the identity number of the target basic UI element. 9. A terminal, characterized in that the terminal includes a processor and a memory; the memory stores at least one instruction, the at least one instruction being executed by the processor to implement the method for creating a mini-program as described in any one of claims 1 to 7. 10. A computer-readable storage medium, characterized in that the storage medium stores at least one instruction, the at least one instruction being executed by a processor to implement the method for creating a small program as described in any one of claims 1 to 7.