WO2021008295A1 - 小程序的制作方法、装置、终端及存储介质 - Google Patents

小程序的制作方法、装置、终端及存储介质 Download PDF

Info

Publication number
WO2021008295A1
WO2021008295A1 PCT/CN2020/096814 CN2020096814W WO2021008295A1 WO 2021008295 A1 WO2021008295 A1 WO 2021008295A1 CN 2020096814 W CN2020096814 W CN 2020096814W WO 2021008295 A1 WO2021008295 A1 WO 2021008295A1
Authority
WO
WIPO (PCT)
Prior art keywords
program
interface
target basic
applet
target
Prior art date
Application number
PCT/CN2020/096814
Other languages
English (en)
French (fr)
Inventor
郭沛然
宿海成
朱仕达
蔡雨利
刘历
Original Assignee
腾讯科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 腾讯科技（深圳）有限公司 filed Critical 腾讯科技（深圳）有限公司
Priority to JP2021547744A priority Critical patent/JP7246502B2/ja
Priority to EP20841007.6A priority patent/EP3944070A4/en
Publication of WO2021008295A1 publication Critical patent/WO2021008295A1/zh
Priority to US17/338,516 priority patent/US11645051B2/en
Priority to US18/128,801 priority patent/US11954464B2/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Definitions

  • the embodiments of the present application relate to the field of programming, and in particular to a method, device, terminal, and storage medium for making a small program.
  • a small program is a program that depends on the running of the host program. The user only needs to install the host program, and can add and use various small programs in the host program at any time.
  • the application provider provides the host program as the program platform
  • various companies, service organizations and even individual users can develop different types of small programs to submit to the application provider, and use the host program as a running container to provide different service.
  • programmers need to download developer tools and development documents from the program platform of the host program.
  • the programmer refers to the various requirements specified in the development document, and uses the developer's tools to edit the code. After successfully editing the package of the small program, submit the package of the small program to the program platform of the host program, and release to each user for use after approval.
  • the embodiments of the present application provide a method, device, terminal, and storage medium for making a mini program, which can reduce the difficulty of mini program development and improve development efficiency.
  • the technical solution is as follows:
  • the small program is a program that relies on a host program to run, and the method includes:
  • a small program production interface where a panel area and an editing area are displayed on the small program production interface, and the panel area provides n types of basic user interface (UI) elements, and n is a positive integer;
  • UI basic user interface
  • the program interface of the applet is obtained by editing in the editing area according to the target basic UI element, and the target basic UI element is the n types of basic UI elements The selected UI element in;
  • the program package of the small program is generated according to the program interface.
  • the small program is a program that relies on a host program to run, and the device includes:
  • the production interface display module is used to display the applet making interface, where a panel area and an editing area are displayed on the applet making interface, the panel area provides n types of basic UI elements, and n is a positive integer;
  • the program interface generation module is used to edit the program interface of the applet according to the target basic UI element in the editing area in response to receiving an arrangement operation on the target basic UI element, the target basic UI
  • the element is the selected UI element among the n types of basic UI elements;
  • the program package generation module is used to generate the program package of the small program according to the program interface.
  • a terminal which is characterized in that the terminal includes a processor and a memory; the memory stores at least one instruction, and the at least one instruction is used to be executed by the processor to implement the above aspects The method of making the said small program.
  • a computer-readable storage medium characterized in that the storage medium stores at least one instruction, and the at least one instruction is used to be executed by a processor to implement the mini program described in the foregoing aspect Production Method.
  • a computer program product in another aspect, includes computer instructions, and the computer instructions are stored in a computer-readable storage medium.
  • the processor of the computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the above-mentioned aspects or the method for making small programs provided in various optional implementations of the above-mentioned aspects.
  • the applet making interface including the panel area and the editing area is displayed, and when the editing operation on the target basic UI element is received, the editing area is edited according to the target basic UI element Obtain the program interface of the applet, and generate the package of the applet according to the program interface of the applet.
  • the method of this application can be used to synchronize the generation and current operation in the background by receiving the user's visual operation without requiring the developer to have strong research and development capabilities.
  • Related programs enable ordinary users to complete the visual production of small programs without manually editing the code, which reduces the difficulty of small program development and improves development efficiency.
  • FIG. 1 shows a schematic diagram of an interface for making a small program through a visual production program provided by an exemplary embodiment of the present application
  • Fig. 2 shows a structural block diagram of a computer system provided by an exemplary embodiment of the present application
  • FIG. 3 shows a flowchart of a method for making a small program shown in an exemplary embodiment of the present application
  • FIG. 4 shows a schematic diagram of an interface of a small program production interface shown in an exemplary embodiment of the present application
  • Fig. 5 shows a flowchart of a method for making a small program shown in another exemplary embodiment of the present application
  • FIG. 6 shows a schematic diagram of an interface regarding page layout of a mini program production interface shown in an exemplary embodiment of the present application
  • Fig. 7 shows a schematic diagram of an interface for binding static data of a target UI element according to an exemplary embodiment of the present application
  • FIG. 8 shows a schematic diagram of an interface regarding an attribute area in a target UI element according to an exemplary embodiment of the present application
  • FIG. 9 shows a schematic diagram of an interface of a small program production interface shown in another exemplary embodiment of the present application.
  • FIG. 10 shows a schematic diagram of an interface for binding data of a list item according to an exemplary embodiment of the present application
  • FIG. 11 shows a schematic diagram of an interface for unbinding data of a list item according to another exemplary embodiment of the present application.
  • FIG. 12 shows a schematic diagram of a preview interface of an applet shown in an exemplary embodiment of the present application
  • FIG. 13 shows a schematic diagram of an interface for synchronously generating code for a small program production interface according to an exemplary embodiment of the present application
  • Fig. 14 shows a structural block diagram of an apparatus for making a small program provided by an exemplary embodiment of the present application
  • FIG. 15 shows a structural block diagram of a terminal provided by an exemplary embodiment of the present application.
  • Fig. 16 shows a schematic structural diagram of a server provided by an exemplary embodiment of the present application.
  • the "plurality” mentioned herein means two or more.
  • “And/or” describes the association relationship of the associated objects, indicating that there can be three types of relationships, for example, A and/or B, which can mean: A alone exists, A and B exist at the same time, and B exists alone.
  • the character “/” generally indicates that the associated objects are in an "or” relationship.
  • Visualization is the theory, method and technology of using computer graphics and image processing technology to convert data into graphics or images and display them on the screen, and then perform interactive processing.
  • Mini Program is an application developed based on a programming language and depends on the operation of the host program, that is, the user can run the Mini Program in the host program without downloading and installing the Mini Program.
  • Host program In a computer environment, the software environment in which software (such as the applet in this application) depends is called the host environment, and the environment is called the host.
  • the host is the operating environment (that is, the host program).
  • the host environment (host program) can be an operating system, server program, or application program.
  • UI element is a kind of visual element, which is the basic part of the program interface in the applet.
  • the basic UI elements in the embodiments of the present application refer to some UI elements used to implement common functions of the program interface, that is, basic UI elements.
  • FIG. 1 shows a schematic diagram of an interface for making an applet through a visual making program provided by an exemplary embodiment of the present application.
  • the terminal where the visual production program is installed is a tablet computer 110.
  • the interface of the tablet computer 110 displays a small program production interface 111 of the visual production program.
  • the small program production interface 111 displays: a panel area 112 and an editing area 113.
  • the panel area 112 provides a variety of basic UI elements.
  • the user can select part of the basic UI elements from a variety of basic UI elements, and use visual operations (such as clicking, dragging, etc.) to adjust some of the basic UI elements in the panel area 112.
  • the visual production program displays a program interface 114 named "small program 2" in the editing area 113, and the basic UI elements in the program interface 114 are passed by the user from the panel area 112 The drag operation is added to the program interface 114.
  • the visualization production program After the "small program 2" completes the visual editing, the visualization production program generates a package of "small program 2" according to the program interface 114 of the small program, and sends the package to the backend server 120 of the host program, where the installation host The terminal of the program is the mobile phone 130.
  • "Mini Program 2" After “Mini Program 2" has passed the review of the host program, you can search for "Mini Program 2" through the Mini Program search interface 131 of the mobile phone 130.
  • the search result is that "Mini Program 2" is displayed in the Mini Program search interface 131.
  • Icon 132 when the applet search interface 131 receives a click signal on the icon 132, the applet search interface 131 jumps to the applet program interface 114, so as to realize the visual production of the applet through a visual operation.
  • FIG. 2 shows a structural block diagram of a computer system 200 provided by an exemplary embodiment of the present application.
  • the computer system 200 includes: a first terminal 210, a server 220, and at least one second terminal 230.
  • the first terminal 210 and the second terminal 230 may be a mobile phone, a tablet computer, a laptop portable computer, a desktop computer, and so on.
  • the first terminal 210 is a tablet computer as an example
  • the second terminal 230 is a mobile phone as an example. That is, the first terminal 210 can realize the production of a visual applet by providing a touch screen interactive function.
  • a visual production program may be installed in the first terminal 210, and the visual production program is used to implement the method for making small programs provided in the following method embodiments, and the visual production program may have an account login function. . Users can register and log in to their account in the visual production program.
  • a host program may be installed in the second terminal 230, the host program is used to provide a dependent software environment for the applet, and the host program may have an account login function. Users can register and log in their accounts in the host program.
  • the host program is an instant messaging application, a news reading application, a social application, a shopping application, or a payment application, which is not limited in this embodiment.
  • the first terminal 210 and the second terminal 230 are connected to the server 220 through a wired or wireless network.
  • the server 220 may be any one of a server, a server cluster, a virtual cloud storage, or a cloud computing center.
  • the server 220 is used to provide background services for the host program.
  • the server 220 has a data storage capability and can be used to store data related to the visualization production program.
  • the server 220 is used to provide a background service for the visualization production program, and similarly, it can be used to store related data of the visualization production program.
  • the server 220 is used to provide background services for the host program as an example.
  • the package of the applet is uploaded to the server 220, and the server 220 reviews the applet, and performs the applet after the approval is passed. release.
  • the user can use the second terminal 230 to search for the published applet, and choose to run the selected applet through the host program.
  • FIG. 3 shows a flowchart of a method for making a small program shown in an exemplary embodiment of the present application.
  • This exemplary embodiment takes the execution of the first terminal 210 shown in FIG. 2 as an example for description.
  • the method includes:
  • Step 301 Display the applet making interface.
  • the small program production interface is a user interface of a visual production program
  • the visualization production program may be an application independent of the host program, or the visualization production program may be a user interface with a small program production
  • the functional host program is not limited in this embodiment.
  • the visualization production program displays an interface for making the applet, and the interface for making the applet is used to provide users with an operation interface for making the applet.
  • a panel area and an editing area are displayed on the applet production interface.
  • the panel area provides n kinds of basic user interface UI elements, and n is a positive integer.
  • the applet making interface 400 displays a panel area 410 and an editing area 430.
  • the panel area 410 includes, but is not limited to, a label UI element 411, a button UI element 412, a picture UI element 413, a single-line input box UI element 414, a multi-line input box UI element 415, a single-option UI element 416, a multi-option UI element 417, and time
  • the UI element 418, the state switch UI element 419, the horizontal list UI element 420, and the vertical list UI element 421 are selected.
  • the label UI element 411 is used to display a piece of text; the button UI element 412 is used to confirm information and other judgment-related events; the picture UI element 413 is used to add and display pictures; the single-line input box UI element 414 is used to add to the applet
  • the user provides an input box for single-line text input; the multi-line input box UI element 415 is used to provide an input box for multi-line text input to the applet user; the single-option UI element 416 is used to provide an information list to the applet user Single choice; multi-option UI element 417 is used to provide applet users with multiple choices for the information list; time selection UI element 418 is used to provide applet users with the choice of time; status switch UI element 419 is used to provide The user of the program provides selection of the state of the interface; the horizontal list UI element 420 and the vertical list UI element 421 are used to provide the user of the applet with a horizontally displayed list and a vertically displayed list, respectively.
  • the editing area 430 displays a blank canvas, that is, the initial state of the editing area 430 is a blank canvas.
  • Step 302 In response to receiving an arrangement operation on the target basic UI element, edit the program interface of the applet according to the target basic UI element in the editing area.
  • the orchestration operation includes a single-click operation, a double-click operation, a long-press operation, a drag operation, etc. of the target basic UI element, which is not limited in this application.
  • the program interface of the applet is obtained by editing the target basic UI element in the editing area 430, where the target basic UI element is n kinds of basic UI The selected UI element among the elements.
  • the program interface of the applet may be a static web page, that is, the program interface of the applet does not have the ability to access the database in the background server, but displays the program interface based on the client of the host program.
  • the visualization production program receives the drag operation on the label UI element 411, the picture UI element 413, and the horizontal list UI element 420, then the label UI element 411, the picture UI element 413 and the horizontal list UI element 420 are the target basic UI elements, and the visualization production program edits the static program interface 440 of the applet according to the target basic UI elements.
  • the text part in the static program interface 440 is generated after editing by dragging the label UI element 411; the image part in the static program interface 440 is generated after editing by dragging the picture UI element 413
  • the list control in the static program interface 440 is generated by dragging and dropping the horizontal list UI element 420 after editing.
  • the list control is a horizontal list consisting of three lines: list item 1, list item 2, and list item 3. .
  • the static program interface 440 is a static web page, and the actual displayed static program interface 440 cannot perform page jumps and does not have the ability to access a background server or a local database.
  • the program interface of the applet may be a dynamic web page, that is, the program interface of the applet can access the database of the background server and interact with other pages.
  • the visualization production program receives the drag operation on the label UI element 411, the picture UI element 413, and the horizontal list UI element 420, then the label UI element 411, picture UI element 413 and the horizontal list UI element 420 are the target basic UI elements, and the visualization production program edits according to the target basic UI elements to obtain the dynamic program interface 450 of the applet.
  • the text part in the dynamic program interface 450 is generated after editing by dragging the label UI element 411; the image part in the dynamic program interface 450 is generated after editing by dragging the picture UI element 413
  • the list control in the dynamic program interface 450 is generated after editing by dragging the horizontal list UI element 420.
  • the list control is a horizontal list composed of three lines: list item 1, list item 2, and list item 3. .
  • the dynamic program interface 450 is different from the static program interface 440 in that when the list item 1 in the horizontal list UI element 420 is clicked, the dynamic program interface 450 will jump to the program interface 460 and display
  • the editing of the program interface 460 is consistent with the static program interface 440 and the dynamic program interface 450, and both can be edited according to the basic UI elements of the panel area 410.
  • the program interface 460 may also be one of a static web page and a dynamic web page.
  • Step 303 Generate a program package of the small program according to the program interface.
  • the visual production program When the visual production program receives the editing operation on the target basic UI element in the editing area, it synchronously generates the subprograms corresponding to the editing operation in the background, and when the editing of the target basic UI element is completed, each subprogram is packaged as The package of the applet, which is used to run in the host program.
  • the applet making interface including the panel area and the editing area is displayed, and when the editing operation on the target basic UI element is received, the editing area is edited according to the target basic UI element Obtain the program interface of the applet, and generate the package of the applet according to the program interface of the applet.
  • the method of this application can be used to synchronize the generation and current operation in the background by receiving the user's visual operation without requiring the developer to have strong research and development capabilities.
  • Related programs enable ordinary users to complete the visual production of small programs without manually editing the code, which reduces the difficulty of small program development and improves development efficiency.
  • FIG. 5 shows a flowchart of a method for making an applet shown in another exemplary embodiment of the present application.
  • This exemplary embodiment takes the execution of the first terminal 210 shown in FIG. 2 as an example for description. .
  • the method includes:
  • Step 501 Display the applet making interface.
  • step 301 For the implementation of this step, reference may be made to the above step 301, which will not be repeated in this embodiment.
  • n types of basic UI elements include, but are not limited to, tab UI elements, button UI elements, picture UI elements, single-line input box UI elements, multi-line input box UI elements, single-option UI elements, multiple-option UI elements, and time selection UI elements , Status switch UI elements, horizontal list UI elements and vertical list UI elements.
  • Step 502 in response to receiving a page layout operation on the target basic UI element, typesetting and editing the target basic UI element in the editing area according to the page layout operation to obtain the visual part of the program interface.
  • the page layout operation corresponding to the target basic UI element includes determining the target basic UI element from n kinds of basic UI elements, determining the position of the target basic UI element, and determining the size of the target basic UI element, etc.
  • the embodiments of this application do not limit this.
  • the visual part 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. Not limited.
  • this step includes the following steps.
  • the target basic UI element is added to the program interface of the applet in the editing area according to the selection operation.
  • the selection operation includes at least one of a click selection operation and a drag selection operation.
  • the panel area of the visual production program provides n types of basic UI elements.
  • the visual production program determines the basic UI element under the selection operation as the target basic UI element, and the target basic UI element is added to the applet through the click selection operation or the drag selection operation The program interface.
  • the applet production interface 400 receives the drag selection operation on the picture UI element 413 in the panel area 410, so that the applet in the editing area 430 A picture UI element 413 (that is, the target basic UI element) is added to the program interface 610 of.
  • the user can drag the target basic UI element to a satisfactory position of the program interface through a movement operation.
  • the applet production interface 400 receives a movement operation on the picture UI element 413 in the program interface 610, thereby moving the picture UI element 413 to the arrow position.
  • the user can zoom the target basic UI element to a satisfactory size through a zoom operation.
  • the zoom operation includes a reduction operation and an enlargement operation.
  • the zoom operation can be a gesture operation (such as a finger close to realize size enlargement, and a reverse separation of a finger to realize size reduction), a control trigger operation (such as zooming by clicking a zoom control), or a data input operation (such as input The size data can achieve precise scaling).
  • a gesture operation such as a finger close to realize size enlargement, and a reverse separation of a finger to realize size reduction
  • a control trigger operation such as zooming by clicking a zoom control
  • a data input operation such as input The size data can achieve precise scaling.
  • the applet production interface 400 receives the reduction operation on the picture UI element 413 in the program interface 610, so as to reduce the picture UI as shown by the arrow. Element 413 is reduced.
  • the embodiment of the present application is based on a scenario where the visual production program is installed on a tablet computer, the above-mentioned selection operation, movement operation, and zoom operation can be realized by touching the screen with the user's hand.
  • the terminal installed in the visualization production program does not have a touch screen function
  • the above-mentioned selection operation, movement operation, and zoom operation can be realized through the mouse and keyboard.
  • Step 503 In response to receiving the logical arrangement operation on the target basic UI element, perform logical editing on the target basic UI element in the editing area according to the logical arrangement operation to obtain the logical running part of the program interface.
  • the interaction logic includes at least one of data interaction logic and page jump logic.
  • the target basic UI element after completing the typesetting and editing of the target basic UI element in step 502, after obtaining the visual part of the program interface of the applet, the target basic UI element will be logically edited.
  • the logical orchestration operation corresponding to the target basic UI element includes a data interaction logic orchestration operation.
  • the data interaction logic orchestration operation includes data binding with static data, data binding with dynamic data, and local Data is bound to data, which is not limited in the embodiment of the present application.
  • this step includes the following steps.
  • the target basic UI element In response to receiving the first logical arrangement operation on the target UI element, the target basic UI element is data-bound with the static data in the editing area according to the first logical arrangement operation, and the static data is written to the target basic UI in advance The data displayed in the element.
  • the target basic UI element and static data are data-bound in the editing area according to the first logical arrangement operation, where the static data is pre-written to the target basic UI
  • the static display data in the element that is, the attributes displayed during the production stage of the applet, can also be understood as the data written into the program when the visual production program is synchronously editing the code in the background.
  • the specific display picture of the picture UI element is a kind of static data
  • another example is when setting the specific text content of the label UI element and the filling color of the label UI element, the specific text content and the filling color are respectively A type of static data.
  • the picture UI element 413 can receive the picture UI element 413 after completing the typesetting and editing shown in FIG.
  • the click operation displays the picture changing floating button 701 corresponding to the picture UI element 413 on the applet creation interface 400, and when the user’s trigger operation is received through the picture changing floating button 701, the picture selection area is displayed on the applet’s making interface 400 702.
  • the picture displayed in the picture selection area 702 is from a local album, and the user can select the target picture (static display data) that he wants to add in the picture selection area 702.
  • step "one" in step 502 and step 503 can replace the execution order. That is, for the target UI element, data binding with static data can be performed first, and then typesetting operations can be performed.
  • the picture UI element 413 first completes the data binding with the picture image6 (static data) through the picture change floating button 701; secondly, when the picture UI element 413 receives the attribute
  • the floating button 801 is triggered, as shown in FIG. 8(b)
  • an attribute area 802 is displayed in the editing area 430 of the production interface 400 of the applet, and the attribute area 802 is used to receive typesetting operations on the picture UI element 413 .
  • the frame type of picture image6 (such as right-angled rectangular border, rounded rectangular border, oval border, etc.), zoom type (such as zoom to fill, zoom to fit, stretch, etc.) can be set through the property area 802. Scaling to original size, etc.), area height and adaptive height, etc.
  • the embodiment of the present application does not limit the content that the attribute area 802 may include.
  • Different target UI elements correspond to different attribute areas.
  • the attribute area of the label UI element can implement the font, color, font size and other settings of the text in the label UI element.
  • the embodiment of the present application does not limit the content contained in different attribute areas of different target UI elements.
  • the target basic UI element is data-bound with the first dynamic data in the editing area according to the second logical arrangement operation, and the first dynamic data is in the small The data that is dynamically acquired through the network protocol during the running of the program and displayed in the target basic UI element.
  • the second logical arrangement operation can be understood as when the applet is running on the host program, the target UI element can dynamically access the server through the network protocol under the second logical arrangement operation preset during the production of the applet, and Obtain the first dynamic data in the target basic UI element from the server, and run and display the first dynamic data through the host program.
  • the target basic UI element and the first dynamic data are data-bound in the editing area according to 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 UI elements of the horizontal list, then the data related to the list items
  • the sequence is dynamic data, and the server needs to be accessed to obtain the first dynamic data related to the list item.
  • the program interface 910 of the applet is displayed in the applet production interface 400 according to the horizontal list UI element 420 in the panel area 410, where the horizontal
  • the list UI element 420 includes 5 list items, which are list item 1, list item 2, list item 3, list item 4, and list item 5.
  • List item 1 is a template item of the horizontal list UI element 420, which is used to display the structure of each list item.
  • the template item ie, list item 1
  • the template item includes three data fields: a first field 911, a second field 912, and a third field 913.
  • the program interface 910 including the horizontal list UI element 420 is displayed by obtaining the first dynamic data that can be bound to the data of the field of the list item.
  • the following describes the process of binding the first dynamic data of the list item by combining the schematic diagram, and this process is a kind of second logical arrangement.
  • the number of items of the list items of the horizontal list UI element 420 can be set through the attribute setting floating button 914 in the applet creation interface 400 corresponding to the horizontal list UI element 420 Complete the settings.
  • the first dynamic data binding of the list items of the horizontal list UI element 420 can be set through the binding data floating button 915 corresponding to the horizontal list UI element 420 in the applet creation interface 400.
  • data table A (such as a product table) contains five optional data columns, which are table item 1 (such as the URL address of a product image) and table item 2 (such as a product Name), table item 3 (such as commodity price), table item 4 (such as commodity discount), and table item 5 (such as commodity description).
  • table item 1 such as the URL address of a product image
  • table item 2 such as a product Name
  • table item 3 such as commodity price
  • table item 4 such as commodity discount
  • table item 5 (such as commodity description).
  • the applet creation interface 400 displays the interface of the list binding data table, and the template item (ie, list item 1) in the horizontal list UI element 420 contains the above three Fields, in which three fields select table item 1, table item 2, and table item 5 in data table A respectively for data binding, then the selected table item 1, table item 2, and table item 5 are the first dynamic data.
  • the first dynamic data selection of the template item can be realized through the data area 1001 in the program interface.
  • the specified data in the data table can be displayed in the list items of the program interface (for example, the product picture, product name, and product description are displayed in the list item).
  • the data area 1001 includes: the binding object in the binding relationship, that is, data table A; the field association mode in the binding relationship; Data viewing, data editing and data selection of the bound data table.
  • Field association refers to the association method between the field in the template item and the selected data in the data table, where the field association method can be a random method or a specified method.
  • the current field association mode is a random mode.
  • the data of the specified field can be unbound.
  • the third field in list item 1 is currently bound to the data of table item 5 in data table A.
  • the production interface 400 displays the corresponding The three-field field unbinding option 1100
  • the field unbinding option 1100 displays the currently rebinding data of the third field according to the type of the third field, including entry 2, entry 3, and entry 4.
  • the applet runs through the host program, and dynamically obtains the first dynamic data of each list item in the target basic UI element through the network protocol, so that the host program performs the applet based on the first dynamic data
  • the display of the program interface When the template item completes data binding, the applet runs through the host program, and dynamically obtains the first dynamic data of each list item in the target basic UI element through the network protocol, so that the host program performs the applet based on the first dynamic data The display of the program interface.
  • data In response to receiving the third logical arrangement operation on the target UI element, data bind the target basic UI element with the second dynamic data in the editing area according to the third logical arrangement operation, and the second dynamic data is in the applet
  • the data is calculated by native code and then written during the runtime and displayed in the target basic UI element.
  • the above-mentioned basic UI element further includes a basic UI element that can access the local terminal (installed with the host program), and obtain the second dynamic data of the local terminal.
  • the above-mentioned basic UI element also includes a positioning UI element.
  • the positioning UI element When triggered, the positioning UI element has the ability to access the positioning information of the local terminal installed by the host program, and obtain the positioning information.
  • the program interface displays the second dynamic data related to the positioning information.
  • the above-mentioned basic UI element also includes a UI element for uploading local data to the applet.
  • the UI element When triggered, the UI element has the ability to access the local data of the local terminal installed by the host program and obtain the target Local data, the target local data is displayed on the program interface of the applet.
  • the second program interface is the program interface that the target basic UI element jumps to display after being triggered.
  • the program interface of the applet of the present application includes a first program interface and a second program interface that have a hierarchical display relationship, that is, when the applet is running, the first program interface can trigger a jump to the first program interface.
  • Two program interface Two program interface.
  • the dynamic web page described is the first program interface described above.
  • the process of realizing the jump from the first program interface to the second program interface is the fourth logical arrangement operation.
  • the fourth logical arrangement operation is specifically: after completing the program interface 460 (ie, the second After the page layout and logic layout of the program interface), the list item 1 in the dynamic program interface 450 (that is, the first program interface) is data-bound with the program interface 460. Specifically, when a trigger operation on the list item 1 is received, the dynamic The program interface 450 jumps to the program interface 460.
  • Step 504 Generate a program package of the mini program according to the program interface.
  • Step 505 In response to receiving the preview operation on the preview control, push the package of the applet to the host program to run.
  • the applet production interface further includes a preview control, and when the visual production program receives a preview operation on the preview control, the package of the applet is pushed to the host program for execution.
  • the preview of the applet can be realized through the preview control 916 in the production interface 400 of the applet, and the final preview effect As shown in Fig. 12, the data bound to the field in each list item comes from the data table A shown in Fig. 10(a).
  • the applet production interface further includes a preview control, and the visualization production program and the host program are installed on the same terminal.
  • the visualization production program receives the preview operation on the preview control, the visualization production program sends the host The program sends the package of the applet.
  • the visualization production program is a host program with a small program production function.
  • the host program loads the generated program package.
  • Step 506 In response to receiving the submission operation of the submission control, the package of the applet is sent to the program platform of the host program for review or release.
  • the program platform After the mini program is completed, considering whether the mini program meets the requirements of the host program's program platform, if the mini program contains illegal or inappropriate content, the program platform will refuse to publish it.
  • the applet creation interface further includes a submit control.
  • the visual authoring program receives the submit operation on the submit control, it pushes the package of the applet to the program platform corresponding to the host program, and the program platform The mini program is reviewed through manual review or automatic review. .
  • the program interface of the applet includes a visual part and a logical running part, where the visual part is obtained according to the page layout operation, and the visual production program performs layout editing on the target basic UI element according to the page layout operation; the logic running part is based on The logical arrangement operation is obtained, and the visual production program logically edits the target basic UI elements according to the logical arrangement operation, and generates the data binding in the applet interface and the interface jump logic code; the applet generated by the above operation has good In addition to the interface display effect, it also has good interactivity, which helps to improve the quality of the applet.
  • the operations related to the production of the mini program will generate code synchronously in the background of the visualization production program. For example, when determining the target basic UI element, completing the page layout operation and completing the logic layout operation, the visualization production program generates synchronously with the current Operation related code.
  • the applet code corresponding to the target UI element is displayed in the code display area of the editing area; in response to receiving the code display area
  • the coding operation of the small and medium program code updates the small program code corresponding to the target UI element according to the coding operation.
  • the preset arrangement operation may be a long-press operation, a double-click operation, a press operation, etc., which is not limited in this embodiment.
  • a code display area 1301 is displayed in the production interface 400 of the applet.
  • the code display area 1301 is generated synchronously Code.
  • the user can also edit the code in the code display area 1301, that is, convert from a visual production applet to a code writing applet.
  • the visualization production program obtains the ID of the target UI element, and the code display area 1301 automatically enters the ID of the target UI element. That is, the ID of the currently edited target UI element is automatically entered in a line of code that needs to be entered, which provides convenience for users with certain code editing capabilities.
  • the trigger operation on the target UI element includes a single-click operation, a double-click operation, etc., on the target UI element, which is not limited in the embodiment of the present application.
  • the content that needs to be entered in the variable area 1302 is the ID of the current target UI element, that is, the ID of the picture UI element 413.
  • the visualization maker obtains the ID of the picture UI element, and the variable area 1302 will The ID of the picture UI element 413 is automatically entered and displayed, without the user having to manually enter the ID of the picture UI element 413 in the variable area 1302.
  • the code related to the current operation is generated synchronously in the background through the visual production program, so that ordinary users can also complete the production of small programs through the visual production program.
  • users with certain editing code capabilities can also edit the code through the above code display area , Improve the flexibility of making small programs.
  • FIG. 14 shows a structural block diagram of an apparatus for making a small program provided by an embodiment of the present application.
  • the device can be implemented as all or a part of computer equipment through software, hardware or a combination of both.
  • the device includes:
  • the production interface display module 1401 is used to display the applet making interface, where a panel area and an editing area are displayed on the applet making interface, the panel area provides n types of basic UI elements, and n is a positive integer;
  • the program interface generation module 1402 is configured to, in response to receiving an editing operation on the target basic UI element, edit the program interface of the applet according to the target basic UI element in the editing area, and the target basic UI element Is the selected UI element among the n types of basic UI elements;
  • the program package generation module 1403 is configured to generate the program package of the small program according to the program interface.
  • the program interface generation module 1402 includes:
  • the layout editing sub-module is used to respond to receiving the page layout operation on the target basic UI element, and perform layout editing on the target basic UI element in the editing area according to the page layout operation to obtain the visual part of the program interface;
  • the logic editing sub-module is used to perform logic editing on the target basic UI element in the editing area according to the logic layout operation in response to receiving the logic layout operation on the target basic UI element to obtain the logic operation part in the program interface.
  • the typesetting and editing submodule is configured to, in response to receiving a selection operation on the target basic UI element, add the target basic UI element to the program interface according to the selection operation;
  • the size of the target basic UI element is changed in the program interface according to the zoom operation.
  • the logical editing submodule is configured to, in response to receiving the first logical arrangement operation on the target UI element, perform data binding of the target basic UI element with the static data in the editing area according to the first logical arrangement operation ,
  • the static data is the data written in advance to the target basic UI element for display;
  • the target basic UI element In response to receiving the second logical orchestration operation on the target UI element, the target basic UI element is data-bound with the first dynamic data in the editing area according to the second logical orchestration operation, and the first dynamic data is running in the applet During the period, the data obtained dynamically through the network protocol and displayed in the target basic UI element;
  • the target basic UI element In response to receiving the third logical orchestration operation on the target UI element, the target basic UI element is data-bound with the second dynamic data in the editing area according to the third logical orchestration operation, and the second dynamic data is running in the applet During the period, it is calculated by the local code and then written, and the data displayed in the target basic UI element.
  • the device further includes: a decoding module, configured to, in response to receiving an unbinding operation on the target basic UI element, perform data unbinding on the target basic UI element and corresponding data according to the unbinding operation
  • the program interface of the applet includes: a first program interface and a second program interface that have a hierarchical display relationship;
  • the logical editing sub-module is configured to respond to receiving a fourth logical arrangement operation on the target basic UI element in the first program interface, according to the fourth logical arrangement operation in the editing area Data binding is performed with the second program interface, and the second program interface is the program interface that the target basic UI element jumps to display after being triggered.
  • the device further includes:
  • the code display module is used to display the applet code corresponding to the target UI element in the code display area of the editing area in response to a preset trigger operation on the target UI element in the editing area;
  • the code update module is used to update the applet code corresponding to the target UI element in response to receiving the encoding operation on the applet code in the code display area.
  • the applet creation interface also includes: preview control;
  • the device further includes:
  • the package push module is used to push the package of the applet to the host program to run in response to receiving the preview operation on the preview control.
  • applet creation interface also includes: submit control;
  • the device further includes:
  • the package sending module is used to send the package of the applet to the program platform of the host program for review or release in response to receiving the submission operation of the submission control.
  • FIG. 15 shows a structural block diagram of a terminal 1500 according to an exemplary embodiment of the present application.
  • the terminal 1500 may be a portable mobile terminal, such as a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III, dynamic image expert compression standard audio layer 3), MP4 (Moving Picture Experts Group Audio Layer IV, dynamic Video expert compresses standard audio level 4) player.
  • the terminal 1500 may also be called user equipment, portable terminal and other names.
  • the terminal 1500 includes a processor 1501 and a memory 1502.
  • the processor 1501 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and so on.
  • the processor 1501 can adopt at least one hardware form among DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array, Programmable Logic Array). achieve.
  • the processor 1501 may also include a main processor and a coprocessor.
  • the main processor is a processor used to process data in the wake state, also called a CPU (Central Processing Unit, central processing unit); the coprocessor is A low-power processor used to process data in the standby state.
  • the processor 1501 may be integrated with a GPU (Graphics Processing Unit, image processor), and the GPU is responsible for rendering and drawing content that needs to be displayed on the display screen.
  • the processor 1501 may further include an AI (Artificial Intelligence) processor, and the AI processor is used to process computing operations related to machine learning.
  • AI Artificial Intelligence
  • 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 magnetic disk storage devices and flash memory storage devices.
  • the non-transitory computer-readable storage medium in the memory 1502 is used to store at least one instruction, and the at least one instruction is used to be executed by the processor 1501 to implement the applet of the terminal 1500 provided in this application. Method of making.
  • the terminal 1500 may optionally further include: a peripheral device interface 1503 and at least one peripheral device.
  • 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.
  • the peripheral device interface 1503 may be used to connect at least one peripheral device related to I/O (Input/Output) to the processor 1501 and the memory 1502.
  • the processor 1501, the memory 1502, and the peripheral device interface 1503 are integrated on the same chip or circuit board; in some other embodiments, any one of the processor 1501, the memory 1502, and the peripheral device interface 1503 or The two can be implemented on separate chips or circuit boards, which are not limited in this embodiment.
  • the radio frequency circuit 1504 is used to receive and transmit RF (Radio Frequency, radio frequency) signals, also called electromagnetic signals.
  • the radio frequency circuit 1504 communicates with a communication network and other communication devices through electromagnetic signals.
  • the radio frequency circuit 1504 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals into electrical signals.
  • the radio frequency 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, and so on.
  • the radio frequency circuit 1504 can communicate with other terminals through at least one wireless communication protocol.
  • the wireless communication protocol includes but is not limited to: World Wide Web, Metropolitan Area Network, Intranet, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area network and/or WiFi (Wireless Fidelity, wireless fidelity) network.
  • the radio frequency circuit 1504 may also include NFC (Near Field Communication) related circuits, which is not limited in this application.
  • the touch screen 1505 is used to display UI (User Interface).
  • the UI can include graphics, text, icons, videos, and any combination thereof.
  • the touch display screen 1505 also has the ability to collect touch signals on or on the surface of the touch display screen 1505.
  • the touch signal may be input to the processor 1501 as a control signal for processing.
  • the touch screen 1505 is used to provide virtual buttons and/or virtual keyboards, also called soft buttons and/or soft keyboards.
  • the touch screen 1505 may be a flexible display screen, which is arranged on the curved surface or the folding surface of the terminal 1500. Even the touch screen 1505 can also be set as a non-rectangular irregular figure, that is, a special-shaped screen.
  • the touch display 1505 may be made of materials such as LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode, organic light emitting diode).
  • the camera assembly 1506 is used to collect images or videos.
  • the camera assembly 1506 includes a front camera and a rear camera.
  • the front camera is used for video calls or selfies
  • the rear camera is used for photos or videos.
  • the main camera and the wide-angle camera are fused Realize panoramic shooting and VR (Virtual Reality, virtual reality) shooting functions.
  • the camera assembly 1506 may also include a flash.
  • the flash can be a single-color flash or a dual-color flash. Dual color temperature flash refers to the combination of warm light flash and cold light flash, which can be used for light compensation under different color temperatures.
  • the audio circuit 1507 is used to provide an audio interface between the user and the terminal 1500.
  • the audio circuit 1507 may include a microphone and a speaker.
  • the microphone is used to collect sound waves of the user and the environment, and convert the sound waves into electrical signals and input them to the processor 1501 for processing, or input to the radio frequency circuit 1504 to implement voice communication.
  • the microphone can also be an array microphone or an omnidirectional acquisition microphone.
  • the speaker is used to convert the electrical signal from the processor 1501 or the radio frequency circuit 1504 into sound waves.
  • the speaker can be a traditional membrane speaker or a piezoelectric ceramic speaker.
  • the speaker When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signal into human audible sound waves, but also convert the electrical signal into human inaudible sound waves for purposes such as distance measurement.
  • the audio circuit 1507 may also include a headphone jack.
  • the positioning component 1508 is used to locate the current geographic position of the terminal 1500 to implement navigation or LBS (Location Based Service, location-based service).
  • the positioning component 1508 may be a positioning component based on the GPS (Global Positioning System, Global Positioning System) of the United States, the Beidou system of China, or the Galileo system of Russia.
  • the power supply 1509 is used to supply power to various components in the terminal 1500.
  • the power source 1509 may be alternating current, direct current, disposable batteries or rechargeable batteries.
  • the rechargeable battery may be a wired rechargeable battery or a wireless rechargeable battery.
  • a wired rechargeable battery is a battery charged through a wired line
  • a wireless rechargeable battery is a battery charged through a wireless coil.
  • the rechargeable battery can also be used to support fast charging technology.
  • the terminal 1500 further includes one or more sensors 1510.
  • the one or more sensors 1510 include, but are not limited to: an acceleration sensor 1511, a gyroscope sensor 1512, a pressure sensor 1513, a fingerprint sensor 1514, an optical sensor 1515, and a proximity sensor 1516.
  • the acceleration sensor 1511 can detect the magnitude of acceleration on the three coordinate axes of the coordinate system established by the terminal 1500. For example, the acceleration sensor 1511 can be used to detect the components of the gravitational acceleration on three coordinate axes.
  • the processor 1501 may control the touch screen 1505 to display the user interface in a horizontal view or a vertical view according to the gravity acceleration signal collected by the acceleration sensor 1511.
  • the acceleration sensor 1511 may also be used for the collection of game or user motion data.
  • the gyroscope sensor 1512 can detect the body direction and rotation angle of the terminal 1500, and the gyroscope sensor 1512 can cooperate with the acceleration sensor 1511 to collect the user's 3D actions on the terminal 1500. Based on the data collected by the gyroscope sensor 1512, the processor 1501 can implement the following functions: motion sensing (such as changing the UI according to the user's tilt operation), image stabilization during shooting, game control, and inertial navigation.
  • the pressure sensor 1513 may be disposed on the side frame of the terminal 1500 and/or the lower layer of the touch screen 1505.
  • the pressure sensor 1513 can detect the user's holding signal of the terminal 1500, and perform left and right hand recognition or quick operation according to the holding signal.
  • the operability controls on the UI interface can be controlled according to the user's pressure operation on the touch display screen 1505.
  • the operability control includes at least one of a button control, a scroll bar control, an icon control, and a menu control.
  • the fingerprint sensor 1514 is used to collect the user's fingerprint to identify the user's identity according to the collected fingerprint.
  • the processor 1501 authorizes the user to perform related sensitive operations, including unlocking the screen, viewing encrypted information, downloading software, paying, and changing settings.
  • the fingerprint sensor 1514 may be provided on the front, back or side of the terminal 1500.
  • the fingerprint sensor 1514 can be integrated with the physical button or the manufacturer logo.
  • the optical sensor 1515 is used to collect the ambient light intensity.
  • the processor 1501 may control the display brightness of the touch screen 1505 according to the intensity of the ambient light collected by the optical sensor 1515. Specifically, when the ambient light intensity is high, the display brightness of the touch display screen 1505 is increased; when the ambient light intensity is low, the display brightness of the touch display screen 1505 is decreased.
  • the processor 1501 may also dynamically adjust the shooting parameters of the camera assembly 1506 according to the ambient light intensity collected by the optical sensor 1515.
  • the proximity sensor 1516 also called a distance sensor, is usually arranged on the front of the terminal 1500.
  • the proximity sensor 1516 is used to collect the distance between the user and the front of the terminal 1500.
  • the processor 1501 controls the touch screen 1505 to switch from the on-screen state to the off-screen state; when the proximity sensor 1516 detects When the distance between the user and the front of the terminal 1500 gradually increases, the processor 1501 controls the touch display screen 1505 to switch from the rest screen state to the bright screen state.
  • FIG. 13 does not constitute a limitation on the terminal 1500, and may include more or fewer components than shown, or combine certain components, or adopt different component arrangements.
  • FIG. 16 shows a schematic structural diagram of a server provided by an embodiment of the present application.
  • the server is used to implement the method for making the applet provided in the above embodiment. Specifically:
  • the server 1600 includes a central processing unit (CPU) 1601, a system memory 1604 including a random access memory (RAM) 1602 and a read only memory (ROM) 1603, and a system bus 1605 connecting the system memory 1604 and the central processing unit 1601.
  • the server 1600 also includes a basic input/output system (I/O system) 1606 that helps transfer information between various devices in the computer, and a mass storage for storing the operating system 1613, application programs 1614, and other program modules 1615.
  • Equipment 1607 is a basic input/output system
  • the basic input/output system 1606 includes a display 1608 for displaying information and an input device 1609 such as a mouse and a keyboard for the user to input information.
  • the display 1608 and the input device 1609 are both connected to the central processing unit 1601 through the input and output controller 1610 connected to the system bus 1605.
  • the basic input/output system 1606 may also include an input and output controller 1610 for receiving and processing input from multiple other devices such as a keyboard, a mouse, or an electronic stylus.
  • the input and output controller 1610 also provides output to a display screen, a printer, or other types of output devices.
  • the mass storage device 1607 is connected to the central processing unit 1601 through a mass storage controller (not shown) connected to the system bus 1605.
  • the mass storage device 1607 and its associated computer-readable medium provide non-volatile storage for the server 1600. That is, the mass storage device 1607 may include a computer-readable medium (not shown) such as a hard disk or a CD-ROM drive.
  • the computer-readable media may include computer storage media and communication media.
  • Computer storage media includes volatile and nonvolatile, 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 RAM, ROM, EPROM, EEPROM, flash memory or other solid-state storage technologies, CD-ROM, DVD or other optical storage, tape cartridges, magnetic tape, disk storage or other magnetic storage devices.
  • RAM random access memory
  • ROM read-only memory
  • EPROM Erasable programmable read-only memory
  • EEPROM electrically erasable programmable read-only memory
  • the server 1600 may also be connected to a remote computer on the network to run through a network such as the Internet. That is, the server 1600 can be connected to the network 1612 through the network interface unit 1611 connected to the system bus 1605, or in other words, the network interface unit 1611 can also be used to connect to other types of networks or remote computer systems.
  • the memory stores at least one instruction, at least one section of program, code set or instruction set, and the at least one instruction, at least one section of program, code set or instruction set is configured to be executed by one or more processors to realize the foregoing The function of each step in the production method of the applet.
  • the embodiment of the present application also provides a computer-readable storage medium, the storage medium stores at least one instruction, at least one program, code set or instruction set, 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 realize the method for making the applet provided in the foregoing embodiments.
  • the computer-readable storage medium may include: Read Only Memory (ROM), Random Access Memory (RAM), Solid State Drives (SSD, Solid State Drives), or optical discs.
  • random access memory may include resistive random access memory (ReRAM, Resistance Random Access Memory) and dynamic random access memory (DRAM, Dynamic Random Access Memory).
  • the embodiments of the present application also provide a computer program product, the computer program product including computer instructions, and the computer instructions are stored in a computer-readable storage medium.
  • the processor of the computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the above-mentioned aspects or the method for making small programs provided in various optional implementations of the above-mentioned aspects.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种小程序的制作方法、装置、终端及存储介质，属于编程领域。所述方法包括：显示小程序制作界面，小程序制作界面上显示有面板区和编辑区，面板区提供有n种基础UI元素，n为正整数；响应于接收到对目标基础UI元素上的编排操作，在编辑区中根据目标基础UI元素编辑得到小程序的程序界面，目标基础UI元素是n种基础UI元素中被选择的UI元素；根据程序界面生成小程序的程序包。与相关小程序的开发过程相较而言，采用本申请的方法，通过接收用户可视化的操作，可以在后台全程同步生成与当前操作相关的程序，使得普通用户不需要手动编辑代码即可完成小程序的制作。

Description

小程序的制作方法、装置、终端及存储介质
本申请实施例要求于2019年07月15日提交，申请号为201910639193.8、发明名称为“小程序的制作方法、装置、终端及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请实施例中。
技术领域
本申请实施例涉及编程领域，特别涉及一种小程序的制作方法、装置、终端及存储介质。
背景技术
随着应用程序的研发技术发展，应用程序提供商提供了“宿主程序和小程序”的生态体系。小程序是一种依赖于宿主程序运行的程序。用户只需要安装宿主程序，即可在宿主程序中随时添加和使用各种各样的小程序。
应用程序提供商提供宿主程序作为程序平台后，各个公司、服务机构甚至个人用户(简称程序员)都可以研发不同类型的小程序来提交给应用程序提供商，以宿主程序作为运行容器来提供不同服务。当需要研发小程序时，程序员需要从宿主程序的程序平台上下载开发者工具和开发文档。程序员参阅开发文档上所规定的各项要求，使用开发者工具进行代码编辑。在成功编辑得到小程序的程序包后，将小程序的程序包提交至宿主程序的程序平台，在审核通过后即可发布至各个用户使用。
但是由于开发者工具的使用，需要程序员具有较为专业的代码编辑能力，需要长时间的知识学习和经验积累才能顺利完成该研发过程，导致小程序开发的难度较高，且开发效率较低。
发明内容
本申请实施例提供了一种小程序的制作方法、装置、终端及存储介质，能够降低小程序开发难度，并提高开发效率。所述技术方案如下：
一方面，提供了一种小程序的制作方法，应用于终端，所述小程序是依赖于宿主程序运行的程序，所述方法包括：
显示小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所 述面板区提供有n种基础用户界面(User Interface，UI)元素，n为正整数；
响应于接收到对目标基础UI元素的编排操作，在所述编辑区中根据所述目标基础UI元素编辑得到所述小程序的程序界面，所述目标基础UI元素是所述n种基础UI元素中被选择的UI元素；
根据所述程序界面生成所述小程序的程序包。
另一方面，提供了一种小程序的制作装置，所述小程序是依赖于宿主程序运行的程序，所述装置包括：
制作界面显示模块，用于显示小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所述面板区提供有n种基础UI元素，n为正整数；
程序界面生成模块，用于响应于接收到对目标基础UI元素上的编排操作时，在所述编辑区中根据所述目标基础UI元素编辑得到所述小程序的程序界面，所述目标基础UI元素是所述n种基础UI元素中被选择的UI元素；
程序包生成模块，用于根据所述程序界面生成所述小程序的程序包。
另一方面，提供了一种终端，其特征在于，所述终端包括处理器和存储器；所述存储器存储有至少一条指令，所述至少一条指令用于被所述处理器执行以实现如上述方面所述的小程序的制作方法。
另一方面，提供了一种计算机可读存储介质，其特征在于，所述存储介质存储有至少一条指令，所述至少一条指令用于被处理器执行以实现如上述方面所述的小程序的制作方法。
另一方面，提供了一种计算机程序产品，该计算机程序产品包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述方面或者上述方面的各种可选实现方式中提供的小程序的制作方法。
本申请实施例中，在通过制作小程序时，通过显示包括面板区和编辑区的小程序制作界面，在接收到目标基础UI元素上的编排操作时，在编辑区中根据目标基础UI元素编辑得到小程序的程序界面，从而根据小程序的程序界面生成小程序的程序包。与相关小程序的开发过程相较而言，采用本申请的方法，在不需要开发者具有较强的研发能力的情况下，通过接收用户可视化的操作，即可在后台全程同步生成与当前操作相关的程序，使得普通用户不需要手动编辑代码即可完成小程序的可视化制作，在降低小程序开发难度的同时提高了开 发效率。
附图说明
图1示出了本申请示例性实施例提供的一种通过可视化制作程序制作小程序的界面示意图；
图2示出了本申请一个示例性实施例提供的计算机***的结构框图；
图3示出了本申请一个示例性实施例示出的小程序的制作方法的流程图；
图4示出了本申请一个示例性实施例示出的小程序制作界面的界面示意图；
图5示出了本申请另一个示例性实施例示出的小程序的制作方法的流程图；
图6示出了本申请一个示例性实施例示出的关于小程序制作界面页面编排的界面示意图；
图7示出了本申请一个示例性实施例示出的关于目标UI元素绑定静态数据的界面示意图；
图8示出了本申请一个示例性实施例示出的关于目标UI元素中属性区的界面示意图；
图9示出了本申请另一个示例性实施例示出的小程序制作界面的界面示意图；
图10示出了本申请一个示例性实施例示出的关于列表项绑定数据的界面示意图；
图11示出了本申请另一个示例性实施例示出的关于列表项解绑数据的界面示意图；
图12示出了本申请一个示例性实施例示出的小程序预览的界面示意图；
图13示出了本申请一个示例性实施例示出的关于小程序制作界面同步生成代码的界面示意图；
图14示出了本申请一个示例性实施例提供的小程序的制作装置的结构框图；
图15示出了本申请一个示例性实施例提供的终端的结构方框图；
图16示出了本申请一个示例性实施例提供的服务器的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请 实施方式作进一步地详细描述。
在本文中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
为了方便理解，下面对本申请实施例中涉及的名词进行解释说明。
可视化：可视化(Visualization)是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。
小程序：小程序是一种基于编程语言开发完成、依赖于宿主程序运行的应用程序，即用户无需下载和安装小程序就可以在宿主程序中运行该小程序。
宿主程序：在计算机环境下，软件(如本申请中的小程序)赖以生存的软件环境被称作是宿主环境，环境称作宿主。宿主就是运行环境(即宿主程序)。宿主环境(宿主程序)可以是操作***，服务器程序，应用程序。
UI元素：UI元素是一种可视元素，是小程序中程序界面的基本组成部分。
本申请实施例中的基础UI元素，是指一些用于实现程序界面常用功能的UI元素，即为基础UI元素。
下述实施例是在以宿主程序为应用程序来举例说明。
本申请实施例提供了一种小程序的制作方法，请参考图1，其示出了本申请示例性实施例提供的一种通过可视化制作程序制作小程序的界面示意图。
如图1所示，安装可视化制作程序的终端为平板电脑110，平板电脑110的界面显示该可视化制作程序的小程序制作界面111，该小程序制作界面111上显示有：面板区112和编辑区113。
面板区112提供了多种基础UI元素，用户可在多种基础UI元素中选择部分基础UI元素，并通过可视化的操作(如点击、拖拽等操作)将面板区112中的部分基础UI元素添加至小程序的程序界面。示意性的，如图1所示，可视化制作程序在编辑区113中显示有命名为“小程序2”的程序界面114，在程序界面114中的基础UI元素即由用户从面板区112中通过拖拽操作添加至程序界面114中。
当“小程序2”完成可视化的编辑后，可视化制作程序根据小程序的程序界面114生成“小程序2”的程序包，并将该程序包发送至宿主程序的后台服务器 120，其中，安装宿主程序的终端为手机130。在“小程序2”通过宿主程序的审核后，可通过手机130的小程序搜索界面131对“小程序2”进行搜索，搜索的结果为在小程序搜索界面131中显示“小程序2”的图标132，当小程序搜索界面131接收到对图标132的点击信号时，小程序搜索界面131跳转至小程序的程序界面114，从而通过可视化的操作实现小程序的可视化制作。
请参考图2，其示出了本申请一个示例性实施例提供的计算机***200的结构框图。该计算机***200包括：第一终端210、服务器220和至少一个第二终端230。
第一终端210和第二终端230可以是手机、平板电脑、膝上型便携计算机和台式计算机等等。本文中，以第一终端210是平板电脑来举例说明，以第二终端230是手机来举例说明，即第一终端210可通过提供触屏互动功能来实现可视化小程序的制作。
在一些实施例中，该第一终端210中可以安装有可视化制作程序，该可视化制作程序用于实现下述各个方法实施例提供的小程序的制作方法，且该可视化制作程序可以具有帐号登录功能。用户可以在可视化制作程序中注册和登录自己的帐号。
第二终端230中可以安装有宿主程序，该宿主程序用于为小程序提供可依赖的软件环境，且该宿主程序可以具有帐号登录功能。用户可以在宿主程序中注册和登录自己的帐号。
可选的，宿主程序为即时通信应用程序、新闻阅读类应用程序、社交应用程序、购物类应用程序或者支付应用程序，本实施例对此不做限定。
第一终端210和第二终端230通过有线或无线网络与服务器220相连。
服务器220可以是一个服务器、服务器集群、虚拟云存储或云计算中心中的任意一种。服务器220用于为宿主程序提供后台服务。服务器220具有数据存储能力，可用于存储可视化制作程序的相关数据。
可选的，服务器220用于为可视化制作程序提供后台服务，同样的，可用于存储可视化制作程序的相关数据。
下述实施例是以服务器220用于为宿主程序提供后台服务来举例说明。
在一种可能的实施方式中，开发者使用第一终端210进行小程序制作后，即将小程序的程序包上传至服务器220，由服务器220对小程序进行审核，并 在审核通过后进行小程序发布。用户可以使用第二终端230搜索已发布的小程序，并选择通过宿主程序运行选中的小程序。
请参考图3，其示出了本申请一个示例性实施例示出的小程序的制作方法的流程图，该示例性实施例以图2所示的第一终端210执行为例进行说明。该方法包括：
步骤301，显示小程序制作界面。
在一种可能的实施方式中，该小程序制作界面为可视化制作程序的用户界面，其中，该可视化制作程序可以为独立于宿主程序的应用程序，或者，该可视化制作程序可以是具有小程序制作功能的宿主程序，本实施例对此不做限定。
可选的，当通过可视化制作程序来实现小程序的制作时，可视化制作程序显示小程序制作界面，小程序制作界面用于为用户提供小程序制作的操作界面。小程序制作界面上显示有面板区和编辑区，面板区提供有n种基础用户界面UI元素，n为正整数。示意性的，如图4的(a)所示，小程序制作界面400显示有面板区410和编辑区430。
面板区410包括但不限于标签UI元素411、按钮UI元素412、图片UI元素413、单行输入框UI元素414、多行输入框UI元素415、单选项UI元素416、多选项UI元素417、时间选择UI元素418、状态开关UI元素419、横排列表UI元素420和竖排列表UI元素421。
其中，标签UI元素411用于显示一段文本；按钮UI元素412用于进行信息确认等与判断相关的事件；图片UI元素413用于添加并显示图片；单行输入框UI元素414用于向小程序使用者提供单行文本输入的输入框；多行输入框UI元素415用于向小程序使用者提供多行文本输入的输入框；单选项UI元素416用于向小程序使用者提供对于信息列表的单项选择；多选项UI元素417用于向小程序使用者提供对于信息列表的多项选择；时间选择UI元素418用于向小程序使用者提供时间的选择；状态开关UI元素419用于向小程序使用者提供关于界面的状态选择；横排列表UI元素420和竖排列表UI元素421分别用于向小程序使用者提供横排显示的列表和竖排显示的列表。
其中，在可视化制作程序未接收到关于面板区410中目标基础UI元素上的用户操作时，编辑区430显示空白画布，即编辑区430的初始状态为空白画布。
步骤302，响应于接收到对目标基础UI元素上的编排操作，在编辑区中根据目标基础UI元素编辑得到小程序的程序界面。
可选的，该编排操作包括对目标基础UI元素的单击操作、双击操作、长按操作、拖拽操作等，本申请对此不作限定。
在可视化制作程序接收到关于面板区410中目标基础UI元素上的编排操作时，在编辑区430中根据目标基础UI元素编辑得到小程序的程序界面，其中，目标基础UI元素是n种基础UI元素中被选择的UI元素。
可选的，小程序的程序界面可以是静态web页面，即小程序的程序界面没有访问后台服务器中数据库的能力，而是基于宿主程序的客户端来显示程序界面。
以小程序的程序界面为静态web页面为例。示意性的，如图4的(b)所示，可视化制作程序接收到对标签UI元素411、图片UI元素413和横排列表UI元素420的拖拽操作，则标签UI元素411、图片UI元素413和横排列表UI元素420为目标基础UI元素，可视化制作程序根据目标基础UI元素编辑得到小程序的静态程序界面440。
如静态程序界面440所示，在静态程序界面440中的文字部分是通过拖拽标签UI元素411编辑后生成的；在静态程序界面440中的图片部分是通过拖拽图片UI元素413编辑后生成的；在静态程序界面440中的列表控件是通过拖拽横排列表UI元素420编辑后生成的，该列表控件是由列表项1、列表项2和列表项3这三行构成的横排列表。
其中，静态程序界面440为静态web页面，实际展示的静态程序界面440无法进行页面的跳转以及不具备访问后台服务器或本地数据库的能力。
可选的，小程序的程序界面可以是动态web页面，即小程序的程序界面可实现访问后台服务器的数据库，并与其他页面产生交互。
以小程序的程序界面为动态web页面为例。示意性的，如图4的(c)所示，可视化制作程序接收到对标签UI元素411、图片UI元素413和横排列表UI元素420的拖拽操作，则标签UI元素411、图片UI元素413和横排列表UI元素420为目标基础UI元素，可视化制作程序根据目标基础UI元素编辑得到小程序的动态程序界面450。
如动态程序界面450所示，在动态程序界面450中的文字部分是通过拖拽标签UI元素411编辑后生成的；在动态程序界面450中的图片部分是通过拖 拽图片UI元素413编辑后生成的；在动态程序界面450中的列表控件是通过拖拽横排列表UI元素420编辑后生成的，该列表控件是由列表项1、列表项2和列表项3这三行构成的横排列表。
如动态程序界面450所示，动态程序界面450与静态程序界面440不同的是，当横排列表UI元素420中的列表项1被点击时，动态程序界面450会跳转至程序界面460，显示程序界面460的编辑与静态程序界面440和动态程序界面450是一致的，都可以根据面板区410的基础UI元素编辑而成。此外，程序界面460也可以是静态web页面和动态web页面中的一种。
步骤303，根据程序界面生成小程序的程序包。
可视化制作程序在接收到编辑区中对于目标基础UI元素上的编辑操作时，同步在后台生成与编辑操作对应的子程序，并当完成对目标基础UI元素的编辑时，将各个子程序打包为小程序的程序包，该程序包用于在宿主程序中运行。
本申请实施例中，在通过制作小程序时，通过显示包括面板区和编辑区的小程序制作界面，在接收到目标基础UI元素上的编排操作时，在编辑区中根据目标基础UI元素编辑得到小程序的程序界面，从而根据小程序的程序界面生成小程序的程序包。与相关小程序的开发过程相较而言，采用本申请的方法，在不需要开发者具有较强的研发能力的情况下，通过接收用户可视化的操作，即可在后台全程同步生成与当前操作相关的程序，使得普通用户不需要手动编辑代码即可完成小程序的可视化制作，在降低小程序开发难度的同时提高了开发效率。
请参考图5，其示出了本申请另一个示例性实施例示出的小程序的制作方法的流程图，该示例性实施例以图2所示的第一终端210执行为例进行说明。。该方法包括：
步骤501，显示小程序制作界面。
本步骤的实施方式可以参考上述步骤301，本实施例在此不再赘述。
其中，n种基础UI元素包括但不限于标签UI元素、按钮UI元素、图片UI元素、单行输入框UI元素、多行输入框UI元素、单选项UI元素、多选项UI元素、时间选择UI元素、状态开关UI元素、横排列表UI元素和竖排列表UI元素。
步骤502，响应于接收到对目标基础UI元素的页面编排操作，根据页面编 排操作在编辑区中对目标基础UI元素进行排版编辑，得到程序界面中的视觉部分。
在一种可能的实施方式中，目标基础UI元素对应的页面编排操作包括从n种基础UI元素中确定出目标基础UI元素、确定目标基础UI元素的位置和确定目标基础UI元素的尺寸等，本申请实施例对此不做限定。
在一种可能的实施方式中，程序界面中的视觉部分包括目标基础UI元素、目标基础UI元素在程序界面中的位置和目标基础UI元素在程序界面中的尺寸等，本申请实施例对此不做限定。
在一种可能的实施方式中，本步骤包括如下步骤。
一、响应于接收到对目标基础UI元素的选择操作，根据选择操作在编辑区中的小程序的程序界面中增加目标基础UI元素。
可选的，选择操作包括点击选择操作和拖动选择操作中的至少一种。
可视化制作程序的面板区提供有n种基础UI元素，可视化制作程序将选择操作下的基础UI元素确定为目标基础UI元素，目标基础UI元素通过点击选择操作或拖动选择操作被增加至小程序的程序界面。
示意性的，如图6的(a)所示，可视化制作程序中，小程序制作界面400接收到了对面板区410中图片UI元素413的拖动选择操作，从而在编辑区430中的小程序的程序界面610中增加图片UI元素413(即目标基础UI元素)。
二、响应于接收到对目标基础UI元素的移动操作，根据移动操作在编辑区中的小程序的程序界面中移动目标基础UI元素的位置。
可选的，目标基础UI元素在小程序的程序界面中的初始位置并不是用户的满意位置，则用户可通过移动操作将目标基础UI元素拖动至程序界面的满意位置。
示意性的，如图6的(b)所示，可视化制作程序中，小程序制作界面400接收到了对程序界面610中图片UI元素413的移动操作，从而将图片UI元素413移动至箭头所示位置。
三、响应于接收到对目标基础UI元素的缩放操作，根据缩放操作在编辑区中的小程序的程序界面中改变目标基础UI元素的尺寸。
可选的，目标基础UI元素在小程序的程序界面中的尺寸并不是用户的满意尺寸，则用户可通过缩放操作将目标基础UI元素缩放至满意的大小，缩放操作包括缩小操作和放大操作。
在一些实施例中，该缩放操作可以为手势操作(比如手指靠近实现尺寸放大，手指反向分离实现尺寸缩小)、控件触发操作(比如通过点击缩放控件进行缩放)或数据输入操作(比如通过输入尺寸数据实现精确缩放)。
示意性的，如图6的(c)所示，可视化制作程序中，小程序制作界面400接收到了对程序界面610中图片UI元素413的缩小操作，从而按箭头所示的缩小范围将图片UI元素413进行缩小。
由于本申请实施例是基于可视化制作程序安装于平板电脑的场景下进行的，上述选择操作、移动操作和缩放操作可通过用户手触屏来实现。
可选的，当可视化制作程序所安装的终端不具备触屏功能，则可通过键鼠来实现上述选择操作、移动操作和缩放操作。
步骤503，响应于接收到对目标基础UI元素的逻辑编排操作，根据逻辑编排操作在编辑区中对目标基础UI元素进行逻辑编辑，得到程序界面中的逻辑运行部分。
对于非静态web页面而言，除了需要设计小程序的界面展示效果，即视觉部分外，还需要对程序界面的界面交互逻辑进行设计，即设置逻辑运行部分。其中，该交互逻辑包括数据交互逻辑、页面跳转逻辑中的至少一种。
可选的，在完成步骤502中对目标基础UI元素进行排版编辑,得到小程序的程序界面中的视觉部分后，将对目标基础UI元素进行逻辑编辑。
在一种可能的实施方式中，目标基础UI元素对应的逻辑编排操作包括数据交互逻辑编排操作，该数据交互逻辑编排操作包括与静态数据进行数据绑定、与动态数据进行数据绑定和与本地数据进行数据绑定等，本申请实施例对此不做限定。
在一种可能的实施方式中，本步骤包括如下步骤。
一、响应于接收到对目标UI元素的第一逻辑编排操作，根据第一逻辑编排操作在编辑区中将目标基础UI元素与静态数据进行数据绑定，静态数据是预先写入至目标基础UI元素中进行显示的数据。
在接收到目标UI元素对应的第一逻辑编排操作时，根据第一逻辑编排操作在编辑区中将目标基础UI元素与静态数据进行数据绑定，其中，静态数据是预先写入至目标基础UI元素中的静态显示数据，即在小程序的制作阶段时展示的属性，同时也可以理解为可视化制作程序在后台同步编辑代码时写进程序内部的数据。
如在设置图片UI元素的具体显示图片时，具体的显示图片为一种静态数据；又如在设置标签UI元素的具体文本内容以及标签UI元素的填充色时，具体文本内容以及填充色分别为一种静态数据。
示意性的，在图6的(c)的基础上，如图7所示，可视化制作程序中，图片UI元素413在完成图6所示的排版编辑后，可通过接收对图片UI元素413的点击操作在小程序制作界面400显示与图片UI元素413对应的换图悬浮按钮701，并当通过换图悬浮按钮701接收到用户的触发操作后，在小程序的制作界面400显示有图片选择区702，图片选择区702中所显示的图片来自本地相册，用户可以在该图片选择区702中选择希望添加的目标图片(静态显示数据)。
在一种可能的实施方式中，步骤502与步骤503中的步骤“一”可置换执行顺序。即对于目标UI元素而言，可以先执行与静态数据的数据绑定，后执行排版操作。
示意性的，如图8的(a)所示，图片UI元素413首先通过换图悬浮按钮701完成了与图片image6(静态数据)的数据绑定；其次，当图片UI元素413接收到对属性悬浮按钮801的触发操作时，如图8的(b)所示，在小程序的制作界面400的编辑区430显示有属性区802，该属性区802用于接收对图片UI元素413的排版操作。
示意性的，如图8的(c)所示，其示出了属性区802可能包括的内容。如对于图片image6而言，通过属性区802可以设置图片image6的边框类型(如直角矩形边框、圆角矩形边框、椭圆形边框等)、缩放类型(如缩放以填充、缩放以适应、拉伸、缩放以原始大小等)、区域高度和自适应高度等。本申请实施例对属性区802可能包括的内容不作限定。
不同目标UI元素对应有不同属性区，如标签UI元素的属性区可实现标签UI元素中关于文本的字体、颜色、字号等设置。本申请实施例对不同目标UI元素的不同属性区所包含的内容不作限定。
二、响应于接收到对目标UI元素的第二逻辑编排操作时，根据第二逻辑编排操作在编辑区中将目标基础UI元素与第一动态数据进行数据绑定，第一动态数据是在小程序的运行期间通过网络协议动态获取，并在目标基础UI元素中进行显示的数据。
可选的，第二逻辑编排操作可以理解为，当小程序运行于宿主程序时，目 标UI元素在小程序制作过程中预先设置的第二逻辑编排操作下，可通过网络协议动态访问服务器，并从服务器获取目标基础UI元素中的第一动态数据，并通过宿主程序运行并显示该第一动态数据。
上述小程序制作过程中，在接收到目标UI元素对应的第二逻辑编排操作时，根据第二逻辑编排操作在编辑区中将目标基础UI元素与第一动态数据进行数据绑定。
在一个示意性的例子中，第二逻辑编排操作下，运行在宿主程序上的小程序可实现动态更新横排列表UI元素中的与列表项相关的数据与顺序，则与列表项相关的数据与顺序为动态数据，需要访问服务器获取与列表项相关的第一动态数据。
示意性的，如图9的(a)所示，可视化制作程序中，根据面板区410中的横排列表UI元素420在小程序制作界面400中显示小程序的程序界面910，其中，横排列表UI元素420包含5个列表项，分别为列表项1、列表项2、列表项3、列表项4和列表项5。
列表项1为横排列表UI元素420的模板项，用于展示每一个列表项的结构。示意性的，如图9的(b)所示，模板项(即列表项1)包括第一字段911、第二字段912和第三字段913这三个数据字段。
在小程序运行的过程中，通过获取可与列表项进行字段的数据绑定的第一动态数据，来显示包含横排列表UI元素420的程序界面910。下面通过结合示意图来描述列表项绑定第一动态数据的过程，该过程即为一种第二逻辑编排。
示意性的，如图9的(c)所示，上述横排列表UI元素420的列表项的项数可通过小程序制作界面400中与横排列表UI元素420对应的属性设置悬浮按钮914来完成设置。其次，横排列表UI元素420的列表项的第一动态数据绑定可通过小程序制作界面400中与横排列表UI元素420对应的绑定数据悬浮按钮915来完成设置。
在一种可能的实施方式中，当小程序制作界面400接收到对绑定数据悬浮按钮915的点击操作时，显示如图10所示的界面。
示意性的，如图10的(a)所示，数据表A(比如商品表)包含5列可选的数据，分别为表项1(比如商品图片的URL地址)、表项2(比如商品名称)、表项3(比如商品价格)、表项4(比如商品折扣)和表项5(比如商品描述)。示意性的，如图10的(b)所示，小程序制作界面400显示列表绑定数据表的 界面，横排列表UI元素420中的模板项(即列表项1)中包含有上述三个字段，其中三个字段分别选中了数据表A中的表项1、表项2和表项5进行数据绑定，则被选中的表项1、表项2和表项5即为第一动态数据。其中，模板项的第一动态数据选择可通过程序界面中的数据区1001来实现。通过上述数据绑定过程，可以实现将数据表中的指定数据显示在程序界面的列表项中(比如将商品图片、商品名称和商品描述显示在列表项中)。
示意性的，如图10的(c)所示，其示出了数据区1001可能包括的内容。对于模板项(即列表项1)与数据表A进行数据绑定的场景来说，数据区1001包括：绑定关系中的绑定对象，即数据表A；绑定关系中的字段关联方式；已绑定数据表的数据查看、数据编辑与数据选择。
字段关联是指模板项中的字段与数据表中所选择的数据的关联方式，其中，字段关联方式是可以是随机方式，或者指定方式。示意性的，如图10的(c)所示，当前的字段关联方式为随即方式。当用户不满意当前字段的关联方式时，可进行指定字段的数据解绑。可选的，如图11所示，列表项1中第三字段当前绑定了数据表A中表项5的数据，当接收到对第三字段的点击触发操作时，制作界面400显示对应第三字段的字段解绑选项1100，字段解绑选项1100根据第三字段的类型显示第三字段当前可重新绑定的数据，包括表项2、表项3和表项4。
当模板项完成数据绑定后，小程序通过宿主程序运行，并通过网络协议动态获取目标基础UI元素中每一个列表项的第一动态数据，从而宿主程序根据该第一动态数据进行小程序的程序界面的显示。
若数据表中的数据更新，由于小程序获取到的动态数据发生变更，因此程序界面中列表项的数据也会相应发生变更。
三、响应于接收到对目标UI元素的第三逻辑编排操作，根据第三逻辑编排操作在编辑区中将目标基础UI元素与第二动态数据进行数据绑定，第二动态数据是在小程序的运行期间通过本地代码计算后写入，并在目标基础UI元素中进行显示的数据。
在一种可能的实施方式中，上述基础UI元素还包括一种可以访问本地终端(安装有宿主程序)的基础UI元素，并获取该本地终端的第二动态数据。
在一个示意性的例子中，上述基础UI元素还包括定位UI元素，该定位UI元素在被触发时具有访问宿主程序所安装的本地终端定位信息的能力，并获 取该定位信息，在小程序的程序界面显示与定位信息相关的第二动态数据。
在一个示意性的例子中，上述基础UI元素还包括用于上传本地数据至小程序的UI元素，该UI元素在被触发时具有访问宿主程序所安装的本地终端本地数据的能力，并获取目标本地数据，在小程序的程序界面显示该目标本地数据。
四、响应于接收到对第一程序界面中目标基础UI元素的第四逻辑编排操作时，根据第四逻辑编排操作在编辑区中对目标基础UI元素与第二程序界面进行数据绑定，第二程序界面是目标基础UI元素在触发后跳转显示的程序界面。
在一种可能的实施方式中，本申请的小程序的程序界面包括存在层级显示关系的第一程序界面和第二程序界面，即小程序在运行时，第一程序界面可触发跳转至第二程序界面。
在图4的(c)中，所描述的动态web页面即为上述的第一程序界面。对于实现第一程序界面跳转至第二程序界面的过程即为第四逻辑编排操作，以图4的(c)举例说明，第四逻辑编排操作具体为：在完成程序界面460(即第二程序界面)的页面编排和逻辑编排后，动态程序界面450(即第一程序界面)中列表项1与程序界面460进行数据绑定，具体为当接收到对列表项1的触发操作时，动态程序界面450跳转至程序界面460。
步骤504，根据程序界面生成小程序的程序包。
本步骤的实施方式可以参考上述步骤303，本实施例在此不再赘述。
步骤505，响应于接收到对预览控件的预览操作，将小程序的程序包推送至宿主程序中运行。
在一种可能的实施方式中，小程序制作界面还包括预览控件，当可视化制作程序接收到预览控件上的预览操作时，将小程序的程序包推送至宿主程序中进行运行。
示意性的，在图9和图10的基础上，当横排列表UI元素420完成数据绑定后，可通过小程序的制作界面400中的预览控件916实现小程序的预览，最终预览的效果如图12所示，每一个列表项中字段所绑定的数据来自图10的(a)所示的数据表A。
在一种可能的实施方式中，小程序制作界面还包括预览控件，且可视化制作程序与宿主程序安装于同一终端，则当可视化制作程序接收到预览控件上的 预览操作时，可视化制作程序向宿主程序发送小程序的程序包。
在另一种可能的实施方式中，可视化制作程序为具有小程序制作功能的宿主程序，当接收到对预览控件的预览操作时，宿主程序即加载生成的程序包。
步骤506，响应于接收到对提交控件的提交操作，将小程序的程序包发送至宿主程序的程序平台进行审核或发布。
小程序在完成制作后，由于考虑到小程序是否符合宿主程序的程序平台的要求，如包含有违法或不良内容的小程序将被该程序平台拒绝发布。
在一种可能的实施方式中，小程序制作界面还包括提交控件，当可视化制作程序接收到提交控件上的提交操作时，将小程序的程序包推送至宿主程序对应的程序平台，由程序平台通过人工审核方式或自动审核方式对小程序进行审核。。
本申请实施例中，小程序的程序界面包括视觉部分和逻辑运行部分，其中，视觉部分根据页面编排操作得到，可视化制作程序根据该页面编排操作对目标基础UI元素进行排版编辑；逻辑运行部分根据逻辑编排操作得到，可视化制作程序根据该逻辑编排操作对目标基础UI元素进行逻辑编辑，生成小程序程序界面中的数据绑定以及界面跳转逻辑代码；通过上述操作生成的小程序除了具备良好的界面显示效果外，还具有良好的交互性，有助于提高小程序的质量。
在上述各个实施例中，与小程序制作相关的操作都会在可视化制作程序的后台同步生成代码，如确定目标基础UI元素、完成页面编排操作和完成逻辑编排操作时，可视化制作程序同步生成与当前操作相关的代码。
在一些实施例中，对于部分具有代码编写基础的开发者而言，在涉及一些复杂页面逻辑的过程中，在进行可视化操作的基础上往往还需要手动输入代码。在一种可能的实施方式中，响应于对编辑区中目标UI元素的预设编排操作，在编辑区的代码显示区域内显示目标UI元素对应的小程序代码；响应于接收到对代码显示区域中小程序代码的编码操作，根据编码操作更新目标UI元素对应的小程序代码。其中，该预设编排操作可以为长按操作、双击操作、按压操作等等，本实施例对此不做限定。
示意性的，如图13的(a)所示，在小程序的制作界面400显示有代码显示区域1301，在接收到对编辑区中程序界面1300的双击操作时，同步在代码显示区域1301生成代码。
此外，用户也可以对代码显示区域1301中的代码进行编辑，即由可视化制作小程序转为代码编写制作小程序。
用户在该代码显示区域1301进行代码编辑时，若按照相关的代码编辑方法来操作，则需要用户了解各个目标UI元素的身份标识号(Identity，ID)，从而将当前所编辑的目标UI元素的ID键入所编辑的代码中，若用户对各个目标UI元素的ID并不了解，则会造成代码编辑上的困难。
在一种可能的实施方式中，当接收到用户对目标UI元素的触发操作时，可视化制作程序获取该目标UI元素的ID，代码显示区域1301自动键入该目标UI元素的ID。即在需要键入ID的一行代码中自动键入当前编辑的目标UI元素的ID，为具有一定代码编辑能力的用户提供了便利。
可选的，在接收用户对目标UI元素的触发操作之前，还包括接收对需要键入ID的代码区域的触发操作。可选的，对目标UI元素的触发操作包括对目标UI元素的单击操作、双击操作等，本申请实施例对此不作限定。
示意性的，如图13的(b)所示，代码显示区域1301中，变量区1302所需键入的内容为当前目标UI元素的ID，即图片UI元素413的ID，在接收到用户对变量区1302的点击操作后，等待接收用户对目标UI元素的点击操作；在接收到用户对程序界面1300中图片UI元素413的点击操作后，可视化制作程序获取图片UI元素的ID，变量区1302将自动键入并显示该图片UI元素413的ID，而无需用户在变量区1302手动键入图片UI元素413的ID。
通过可视化制作程序在后台同步生成与当前操作相关的代码，使得普通用户也可以通过可视化制作程序完成小程序的制作，同时对于具备一定编辑码能力的用户也可以通过上述代码显示区域进行代码的编辑，提高了小程序制作的灵活性。
请参考图14，其示出了本申请一个实施例提供的小程序的制作装置的结构框图。该装置可以通过软件、硬件或者两者的结合实现成为计算机设备的全部或一部分。该装置包括：
制作界面显示模块1401，用于显示小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所述面板区提供有n种基础UI元素，n为正整数；
程序界面生成模块1402，用于响应于接收到对目标基础UI元素的编排操作，在所述编辑区中根据所述目标基础UI元素编辑得到所述小程序的程序界 面，所述目标基础UI元素是所述n种基础UI元素中被选择的UI元素；
程序包生成模块1403，用于根据所述程序界面生成所述小程序的程序包。
可选的，所述程序界面生成模块1402，包括：
排版编辑子模块，用于响应于接收到对目标基础UI元素的页面编排操作，根据页面编排操作在编辑区中对目标基础UI元素进行排版编辑，得到程序界面中的视觉部分；
逻辑编辑子模块，用于响应于接收到对目标基础UI元素的逻辑编排操作时，根据逻辑编排操作在编辑区中对目标基础UI元素进行逻辑编辑，得到程序界面中的逻辑运行部分。
可选的，所述排版编辑子模块，用于响应于接收到对目标基础UI元素的选择操作，根据选择操作在程序界面中增加目标基础UI元素；
响应于接收到对目标基础UI元素的移动操作，根据移动操作在程序界面中移动目标基础UI元素的位置；
响应于接收到对目标基础UI元素的缩放操作时，根据缩放操作在程序界面中改变目标基础UI元素的尺寸。
可选的，所述逻辑编辑子模块，用于响应于接收到对目标UI元素的第一逻辑编排操作，根据第一逻辑编排操作在编辑区中将目标基础UI元素与静态数据进行数据绑定，静态数据是预先写入至目标基础UI元素中进行显示的数据；
响应于接收到对目标UI元素的第二逻辑编排操作，根据第二逻辑编排操作在编辑区中将目标基础UI元素与第一动态数据进行数据绑定，第一动态数据是在小程序的运行期间通过网络协议动态获取，并在目标基础UI元素中进行显示的数据；
响应于接收到对目标UI元素的第三逻辑编排操作，根据第三逻辑编排操作在编辑区中将目标基础UI元素与第二动态数据进行数据绑定，第二动态数据是在小程序的运行期间通过本地代码计算后写入，并在目标基础UI元素中进行显示的数据。
可选的，所述装置还包括：解码模块，用于响应于接收到对目标基础UI元素的解绑操作，根据解绑操作将所述目标基础UI元素与对应的数据进行数据解绑
可选的，小程序的程序界面包括：存在层级显示关系的第一程序界面和第 二程序界面；
可选的，所述逻辑编辑子模块，用于响应于接收到对第一程序界面中的目标基础UI元素的第四逻辑编排操作，根据第四逻辑编排操作在编辑区中对目标基础UI元素与第二程序界面进行数据绑定，第二程序界面是目标基础UI元素在触发后跳转显示的程序界面。
可选的，所述装置，还包括：
代码显示模块，用于响应于对编辑区中目标UI元素的预设触发操作，在编辑区的代码显示区域内显示目标UI元素对应的小程序代码；
代码更新模块，用于响应于接收到对代码显示区域中小程序代码的编码操作，根据编码操作更新目标UI元素对应的小程序代码。
可选的，小程序制作界面还包括：预览控件；
可选的，所述装置，还包括：
程序包推送模块，用于响应于接收到对预览控件的预览操作，将小程序的程序包推送至宿主程序中运行。
可选的，小程序制作界面还包括：提交控件；
可选的，所述装置，还包括：
程序包发送模块，用于响应于接收到对提交控件的提交操作，将小程序的程序包发送至宿主程序的程序平台进行审核或发布。
请参考图15，其示出了本申请一个示例性实施例提供的终端1500的结构方框图。该终端1500可以是便携式移动终端，比如：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器。终端1500还可能被称为用户设备、便携式终端等其他名称。
通常，终端1500包括有：处理器1501和存储器1502。
处理器1501可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1501可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1501也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态 下的数据进行处理的处理器，也称CPU(Central Processing Unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1501可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1501还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器1502可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是有形的和非暂态的。存储器1502还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1502中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1501所执行以实现本申请中提供的终端1500的小程序的制作方法。
在一些实施例中，终端1500还可选包括有：***设备接口1503和至少一个***设备。具体地，***设备包括：射频电路1504、触摸显示屏1505、摄像头1506、音频电路1507、定位组件1508和电源1509中的至少一种。
***设备接口1503可被用于将I/O(Input/Output，输入/输出)相关的至少一个***设备连接到处理器1501和存储器1502。在一些实施例中，处理器1501、存储器1502和***设备接口1503被集成在同一芯片或电路板上；在一些其他实施例中，处理器1501、存储器1502和***设备接口1503中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。
射频电路1504用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1504通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1504将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路1504包括：天线***、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1504可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路1504还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。
触摸显示屏1505用于显示UI(User Interface，用户界面)。该UI可以包 括图形、文本、图标、视频及其它们的任意组合。触摸显示屏1505还具有采集在触摸显示屏1505的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1501进行处理。触摸显示屏1505用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，触摸显示屏1505可以为一个，设置终端1500的前面板；在另一些实施例中，触摸显示屏1505可以为至少两个，分别设置在终端1500的不同表面或呈折叠设计；在一些实施例中，触摸显示屏1505可以是柔性显示屏，设置在终端1500的弯曲表面上或折叠面上。甚至，触摸显示屏1505还可以设置成非矩形的不规则图形，也即异形屏。触摸显示屏1505可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。
摄像头组件1506用于采集图像或视频。可选地，摄像头组件1506包括前置摄像头和后置摄像头。通常，前置摄像头用于实现视频通话或自拍，后置摄像头用于实现照片或视频的拍摄。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能，主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能。在一些实施例中，摄像头组件1506还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。
音频电路1507用于提供用户和终端1500之间的音频接口。音频电路1507可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器1501进行处理，或者输入至射频电路1504以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端1500的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1501或射频电路1504的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路1507还可以包括耳机插孔。
定位组件1508用于定位终端1500的当前地理位置，以实现导航或LBS(Location Based Service，基于位置的服务)。定位组件1508可以是基于美国 的GPS(Global Positioning System，全球定位***)、中国的北斗***或俄罗斯的伽利略***的定位组件。
电源1509用于为终端1500中的各个组件进行供电。电源1509可以是交流电、直流电、一次性电池或可充电电池。当电源1509包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。
在一些实施例中，终端1500还包括有一个或多个传感器1510。该一个或多个传感器1510包括但不限于：加速度传感器1511、陀螺仪传感器1512、压力传感器1513、指纹传感器1514、光学传感器1515以及接近传感器1516。
加速度传感器1511可以检测以终端1500建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器1511可以用于检测重力加速度在三个坐标轴上的分量。处理器1501可以根据加速度传感器1511采集的重力加速度信号，控制触摸显示屏1505以横向视图或纵向视图进行用户界面的显示。加速度传感器1511还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器1512可以检测终端1500的机体方向及转动角度，陀螺仪传感器1512可以与加速度传感器1511协同采集用户对终端1500的3D动作。处理器1501根据陀螺仪传感器1512采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器1513可以设置在终端1500的侧边框和/或触摸显示屏1505的下层。当压力传感器1513设置在终端1500的侧边框时，可以检测用户对终端1500的握持信号，根据该握持信号进行左右手识别或快捷操作。当压力传感器1513设置在触摸显示屏1505的下层时，可以根据用户对触摸显示屏1505的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器1514用于采集用户的指纹，以根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器1501授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1514可以被设置终端1500的正面、背面或侧面。当终端1500上设置有物理按键或厂商Logo时，指纹传感器1514可以与物理按 键或厂商Logo集成在一起。
光学传感器1515用于采集环境光强度。在一个实施例中，处理器1501可以根据光学传感器1515采集的环境光强度，控制触摸显示屏1505的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏1505的显示亮度；当环境光强度较低时，调低触摸显示屏1505的显示亮度。在另一个实施例中，处理器1501还可以根据光学传感器1515采集的环境光强度，动态调整摄像头组件1506的拍摄参数。
接近传感器1516，也称距离传感器，通常设置在终端1500的正面。接近传感器1516用于采集用户与终端1500的正面之间的距离。在一个实施例中，当接近传感器1516检测到用户与终端1500的正面之间的距离逐渐变小时，由处理器1501控制触摸显示屏1505从亮屏状态切换为息屏状态；当接近传感器1516检测到用户与终端1500的正面之间的距离逐渐变大时，由处理器1501控制触摸显示屏1505从息屏状态切换为亮屏状态。
本领域技术人员可以理解，图13中示出的结构并不构成对终端1500的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。
请参考图16，其示出了本申请一个实施例提供的服务器的结构示意图。该服务器用于实施上述实施例提供的小程序的制作方法。具体来讲：
所述服务器1600包括中央处理单元(CPU)1601、包括随机存取存储器(RAM)1602和只读存储器(ROM)1603的***存储器1604，以及连接***存储器1604和中央处理单元1601的***总线1605。所述服务器1600还包括帮助计算机内的各个器件之间传输信息的基本输入/输出***(I/O***)1606，和用于存储操作***1613、应用程序1614和其他程序模块1615的大容量存储设备1607。
所述基本输入/输出***1606包括有用于显示信息的显示器1608和用于用户输入信息的诸如鼠标、键盘之类的输入设备1609。其中所述显示器1608和输入设备1609都通过连接到***总线1605的输入输出控制器1610连接到中央处理单元1601。所述基本输入/输出***1606还可以包括输入输出控制器1610以用于接收和处理来自键盘、鼠标、或电子触控笔等多个其他设备的输入。类似地，输入输出控制器1610还提供输出到显示屏、打印机或其他类型的输 出设备。
所述大容量存储设备1607通过连接到***总线1605的大容量存储控制器(未示出)连接到中央处理单元1601。所述大容量存储设备1607及其相关联的计算机可读介质为服务器1600提供非易失性存储。也就是说，所述大容量存储设备1607可以包括诸如硬盘或者CD-ROM驱动器之类的计算机可读介质(未示出)。
不失一般性，所述计算机可读介质可以包括计算机存储介质和通信介质。计算机存储介质包括以用于存储诸如计算机可读指令、数据结构、程序模块或其他数据等信息的任何方法或技术实现的易失性和非易失性、可移动和不可移动介质。计算机存储介质包括RAM、ROM、EPROM、EEPROM、闪存或其他固态存储其技术，CD-ROM、DVD或其他光学存储、磁带盒、磁带、磁盘存储或其他磁性存储设备。当然，本领域技术人员可知所述计算机存储介质不局限于上述几种。上述的***存储器1604和大容量存储设备1607可以统称为存储器。
根据本申请的各种实施例，所述服务器1600还可以通过诸如因特网等网络连接到网络上的远程计算机运行。也即服务器1600可以通过连接在所述***总线1605上的网络接口单元1611连接到网络1612，或者说，也可以使用网络接口单元1611来连接到其他类型的网络或远程计算机***。
所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集经配置以由一个或者一个以上处理器执行，以实现上述小程序的制作方法中各个步骤的功能。
本申请实施例还提供一种计算机可读存储介质，该存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上述各个实施例提供的小程序的制作方法。
可选地，该计算机可读存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、固态硬盘(SSD，Solid State Drives)或光盘等。其中，随机存取记忆体可以包括电阻式随机存取记忆体(ReRAM,Resistance Random Access Memory)和动态随机存取存储器 (DRAM，Dynamic Random Access Memory)。
本申请实施例还提供了一种计算机程序产品，该计算机程序产品包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述方面或者上述方面的各种可选实现方式中提供的小程序的制作方法。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (12)

  1. 一种小程序的制作方法，其特征在于，应用于终端，所述小程序是依赖于宿主程序运行的程序，所述方法包括：
    显示小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所述面板区提供有n种基础用户界面UI元素，n为正整数；
    响应于接收到对目标基础UI元素的编排操作，在所述编辑区中根据所述目标基础UI元素编辑得到所述小程序的程序界面，所述目标基础UI元素是所述n种基础UI元素中被选择的UI元素；
    根据所述程序界面生成所述小程序的程序包。
  2. 根据权利要求1所述的方法，其特征在于，所述响应于接收到对目标基础UI元素的编排操作，在所述编辑区中根据所述目标基础UI元素编辑得到所述小程序的程序界面，包括：
    响应于接收到对所述目标基础UI元素的页面编排操作，根据所述页面编排操作在所述编辑区中对所述目标基础UI元素进行排版编辑，得到所述程序界面中的视觉部分；
    响应于接收到对所述目标基础UI元素的逻辑编排操作时，根据所述逻辑编排操作在所述编辑区中对所述目标基础UI元素进行逻辑编辑，得到所述程序界面中的逻辑运行部分。
  3. 根据权利要求2所述的方法，其特征在于，所述响应于接收到对目标基础UI元素的页面编排操作，根据所述页面编排操作在所述编辑区中对所述目标基础UI元素进行排版编辑，得到所述程序界面中的视觉部分，包括如下步骤中的至少一个：
    响应于接收到对所述目标基础UI元素的选择操作，根据所述选择操作在所述程序界面中增加所述目标基础UI元素；
    响应于接收到对所述目标基础UI元素的移动操作，根据所述移动操作在所述程序界面中移动所述目标基础UI元素的位置；
    响应于接收到对所述目标基础UI元素的缩放操作，根据所述缩放操作在所述程序界面中改变所述目标基础UI元素的尺寸。
  4. 根据权利要求2所述的方法，其特征在于，所述响应于接收到对所述目标基础UI元素的逻辑编排操作，根据所述逻辑编排操作在所述编辑区中对所述目标基础UI元素进行逻辑编辑，得到所述程序界面中的逻辑运行部分，包括：
    响应于接收到对所述目标UI元素的第一逻辑编排操作，根据所述第一逻辑编排操作在所述编辑区中将所述目标基础UI元素与静态数据进行数据绑定，所述静态数据是预先写入至所述目标基础UI元素中进行显示的数据；
    响应于接收到对所述目标UI元素的第二逻辑编排操作，根据所述第二逻辑编排操作在所述编辑区中将所述目标基础UI元素与第一动态数据进行数据绑定，所述第一动态数据是在所述小程序的运行期间通过网络协议动态获取，并在所述目标基础UI元素中进行显示的数据；
    响应于接收到对所述目标UI元素的第三逻辑编排操作，根据所述第三逻辑编排操作在所述编辑区中将所述目标基础UI元素与第二动态数据进行数据绑定，所述第二动态数据是在所述小程序在运行期间通过本地代码计算后写入，并在所述目标基础UI元素中进行显示的数据。
  5. 根据权利要求4所述的方法，其特征在于，所述方法还包括：
    响应于接收到对所述目标基础UI元素的解绑操作，根据所述解绑操作将所述目标UI元素与对应的数据进行数据解绑。
  6. 根据权利要求2所述的方法，其特征在于，所述程序界面包括：存在层级显示关系的第一程序界面和第二程序界面；
    所述响应于接收到对所述目标基础UI元素的逻辑编排操作，根据所述逻辑编排操作在所述编辑区中对所述目标基础UI元素进行逻辑编辑，得到所述程序界面中的逻辑运行部分，包括：
    响应于接收到对所述第一程序界面中所述目标基础UI元素的第四逻辑编排操作，根据所述第四逻辑编排操作在所述编辑区中，对所述目标基础UI元素与所述第二程序界面进行数据绑定，所述第二程序界面是所述目标基础UI元素在触发后跳转显示的程序界面。
  7. 根据权利要求1至6任一所述的方法，其特征在于，所述方法还包括：
    响应于对所述编辑区中目标UI元素的预设触发操作，在所述编辑区的代码显示区域内显示所述目标UI元素对应的小程序代码；
    响应于接收到对所述代码显示区域中小程序代码的编码操作，根据编码操作更新所述目标UI元素对应的小程序代码。
  8. 根据权利要求1至6任一所述的方法，其特征在于，所述小程序制作界面还包括：预览控件；
    所述方法还包括：
    响应于接收到对所述预览控件的预览操作，将所述小程序的程序包推送至所述宿主程序中运行。
  9. 根据权利要求1至6任一所述的方法，其特征在于，所述小程序制作界面还包括：提交控件；
    所述方法还包括：
    响应于接收到对所述提交控件的提交操作，将所述小程序的程序包发送至所述宿主程序的程序平台进行审核或发布。
  10. 一种小程序的制作装置，其特征在于，所述小程序是依赖于宿主程序运行的程序，所述装置包括：
    制作界面显示模块，用于显示小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所述面板区提供有n种基础UI元素，n为正整数；
    程序界面生成模块，用于响应于接收到对目标基础UI元素的编排操作，在所述编辑区中根据所述目标基础UI元素编辑得到所述小程序的程序界面，所述目标基础UI元素是所述n种基础UI元素中被选择的UI元素；
    程序包生成模块，用于根据所述程序界面生成所述小程序的程序包。
  11. 一种终端，其特征在于，所述终端包括处理器和存储器；所述存储器存储有至少一条指令，所述至少一条指令用于被所述处理器执行以实现如权利要求1至9任一所述的小程序的制作方法。
  12. 一种计算机可读存储介质，其特征在于，所述存储介质存储有至少一条指令，所述至少一条指令用于被处理器执行以实现如权利要求1至9任一所述的小程序的制作方法。
PCT/CN2020/096814 2019-07-15 2020-06-18 小程序的制作方法、装置、终端及存储介质 WO2021008295A1 (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
JP2021547744A JP7246502B2 (ja) 2019-07-15 2020-06-18 ミニプログラム作成方法、装置、端末及びプログラム
EP20841007.6A EP3944070A4 (en) 2019-07-15 2020-06-18 METHOD AND APPARATUS FOR PRODUCTION OF MINI-PROGRAM, AND TERMINAL AND INFORMATION MEDIA
US17/338,516 US11645051B2 (en) 2019-07-15 2021-06-03 Mini program production method and apparatus, terminal, and storage medium
US18/128,801 US11954464B2 (en) 2019-07-15 2023-03-30 Mini program production method and apparatus, terminal, and storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910639193.8A CN112230914B (zh) 2019-07-15 2019-07-15 小程序的制作方法、装置、终端及存储介质
CN201910639193.8 2019-07-15

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US17/338,516 Continuation US11645051B2 (en) 2019-07-15 2021-06-03 Mini program production method and apparatus, terminal, and storage medium

Publications (1)

Publication Number Publication Date
WO2021008295A1 true WO2021008295A1 (zh) 2021-01-21

Family

ID=74111218

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/096814 WO2021008295A1 (zh) 2019-07-15 2020-06-18 小程序的制作方法、装置、终端及存储介质

Country Status (5)

Country Link
US (2) US11645051B2 (zh)
EP (1) EP3944070A4 (zh)
JP (1) JP7246502B2 (zh)
CN (1) CN112230914B (zh)
WO (1) WO2021008295A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114936019A (zh) * 2021-12-09 2022-08-23 腾讯科技（深圳）有限公司 一种组件及策略联动方法、装置、设备、***及存储介质

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112230909B (zh) * 2019-07-15 2023-05-23 腾讯科技（深圳）有限公司 小程序的数据绑定方法、装置、设备及存储介质
EP3958115A4 (en) * 2020-06-28 2022-05-04 Beijing Baidu Netcom Science Technology Co., Ltd. METHOD AND DEVICE FOR PROCESSING MINIPROGRAM BATCH, ELECTRONIC DEVICE AND READABLE STORAGE MEDIUM
CN112560076B (zh) * 2021-02-23 2021-05-18 浙江口碑网络技术有限公司 程序页面展示方法、装置、计算机设备及可读存储介质
CN113407078A (zh) * 2021-06-07 2021-09-17 远光软件股份有限公司 字符图标的编辑方法、装置、存储介质及终端
CN114064024A (zh) * 2021-11-29 2022-02-18 Oppo广东移动通信有限公司 微应用的开发方法、装置、设备、存储介质及程序产品

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106610826A (zh) * 2015-10-23 2017-05-03 腾讯科技（深圳）有限公司 在线场景应用的制作方法及装置
US20180181385A1 (en) * 2016-06-03 2018-06-28 Afero, Inc. Integrated development tool with preview functionality for an internet of things (iot) system
CN109828756A (zh) * 2018-12-14 2019-05-31 深圳壹账通智能科技有限公司 基于微信小程序生成保险页面的代码的方法及电子装置
CN109960491A (zh) * 2017-12-26 2019-07-02 北京金山云网络技术有限公司 应用程序生成方法、生成装置、电子设备及存储介质
CN110968305A (zh) * 2019-12-20 2020-04-07 深圳乐信软件技术有限公司 小程序可视化生成方法、装置、设备及存储介质

Family Cites Families (32)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
AU2001259108A1 (en) * 2000-04-21 2001-11-07 Togethersoft Corporation Methods and systems for generating source code for object-oriented elements
US20040162803A1 (en) * 2003-02-15 2004-08-19 Rhoads Jeffrey S. Method and system to enable a single sports software application's use across multiple sports
US20050198610A1 (en) * 2004-03-03 2005-09-08 Ulf Fildebrandt Providing and using design time support
US20060041879A1 (en) * 2004-08-19 2006-02-23 Bower Shelley K System and method for changing defined user interface elements in a previously compiled program
DE202006000135U1 (de) * 2006-01-05 2006-04-20 Framework Systems Gmbh Vorrichtung zum Erzeugen von Programmcode eines Nutzerprogrammes
CN100356323C (zh) * 2006-02-15 2007-12-19 无锡永中科技有限公司 用户面板管理器和创建自定义动态子窗口的方法
JP5087133B2 (ja) 2008-03-21 2012-11-28 株式会社三菱東京Ｕｆｊ銀行 アプリケーション開発支援装置、プログラム及び記録媒体
US9436482B2 (en) * 2009-03-25 2016-09-06 Microsoft Technology Licensing, Llc Input content to application via web browser
CA2686367A1 (en) * 2009-11-26 2011-05-26 Ibm Canada Limited - Ibm Canada Limitee Dynamic native editor code view facade
US8464229B2 (en) * 2009-12-29 2013-06-11 Microgen Aptitude Limited Creation of form-based software application in a graphical user interface (GUI) environment
US8370799B2 (en) * 2010-09-28 2013-02-05 International Business Machines Corporation Provision of code base modification using automatic learning of code changes
US8843892B2 (en) * 2010-12-03 2014-09-23 Adobe Systems Incorporated Visual representations of code in application development environments
EP2530583B1 (en) * 2011-05-31 2019-11-27 Accenture Global Services Limited Computer-implemented method, system and computer program product for displaying a user interface component
CN105354014B (zh) * 2014-08-18 2018-10-23 阿里巴巴集团控股有限公司 应用界面渲染展示方法及装置
WO2016049626A1 (en) * 2014-09-26 2016-03-31 Oracle International Corporation Efficient and intuitive databinding for mobile applications
CN105739957B (zh) * 2014-12-09 2018-11-16 阿里巴巴集团控股有限公司 用户界面数据处理方法及***
US9870205B1 (en) * 2014-12-29 2018-01-16 Palantir Technologies Inc. Storing logical units of program code generated using a dynamic programming notebook user interface
WO2016113914A1 (ja) 2015-01-16 2016-07-21 株式会社野村総合研究所 開発支援システム
CN106603465A (zh) 2015-10-14 2017-04-26 阿里巴巴集团控股有限公司 服务账号关联方法、装置、***及终端设备
US9910641B2 (en) * 2015-10-14 2018-03-06 Microsoft Technology Licensing, Llc Generation of application behaviors
CN106528729A (zh) * 2016-10-26 2017-03-22 微景天下（北京）科技有限公司 一种创建web应用的***及方法
CN106528261A (zh) * 2016-12-02 2017-03-22 武汉斗鱼网络科技有限公司 应用页面初始化的编译控制装置及方法
CN108228287B (zh) * 2016-12-15 2021-05-25 龙芯中科技术股份有限公司 基于qt的用户界面控件的生成方法及装置
CN106909385A (zh) * 2017-02-27 2017-06-30 百度在线网络技术（北京）有限公司 可视化页面编辑器及可视化页面编辑器的操作方法
WO2018226621A1 (en) 2017-06-05 2018-12-13 Umajin Inc. Methods and systems for an application system
CN109240678B (zh) * 2017-07-07 2022-07-15 阿里巴巴集团控股有限公司 代码生成方法及装置
CN107798084A (zh) * 2017-10-17 2018-03-13 广东广业开元科技有限公司 一种web前端页面的可视化编辑生成***及装置
CN107992304B (zh) * 2017-12-29 2021-01-08 北京远特科技股份有限公司 一种生成显示界面的方法和装置
CN108121449A (zh) * 2017-12-31 2018-06-05 武汉烽火云创软件技术有限公司 可编辑更新的基于体感控制的可视化交互管理***
CN108958731B (zh) * 2018-06-05 2022-04-12 广州视源电子科技股份有限公司 一种应用程序界面生成方法、装置、设备和存储介质
CN109657182B (zh) * 2018-12-18 2020-09-08 深圳店匠科技有限公司 网页的生成方法、***和计算机可读存储介质
CN110297635B (zh) * 2019-06-27 2023-05-16 百度在线网络技术（北京）有限公司 页面的显示方法、装置、设备以及存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106610826A (zh) * 2015-10-23 2017-05-03 腾讯科技（深圳）有限公司 在线场景应用的制作方法及装置
US20180181385A1 (en) * 2016-06-03 2018-06-28 Afero, Inc. Integrated development tool with preview functionality for an internet of things (iot) system
CN109960491A (zh) * 2017-12-26 2019-07-02 北京金山云网络技术有限公司 应用程序生成方法、生成装置、电子设备及存储介质
CN109828756A (zh) * 2018-12-14 2019-05-31 深圳壹账通智能科技有限公司 基于微信小程序生成保险页面的代码的方法及电子装置
CN110968305A (zh) * 2019-12-20 2020-04-07 深圳乐信软件技术有限公司 小程序可视化生成方法、装置、设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
DAN DING GE: "Brand New Visual Development Tool: Build and Experience WeChat Mini Programs –the Best Ones Ever– without Coding Language!", QUAN ZHAN LIE BIAN , 27 November 2016 (2016-11-27), XP009525645, Retrieved from the Internet <URL:https://mp.weixin.qq.com/s/nPyDLYugCA2sHg-QodEo3A> *
LUCK332: "Visual Design Tool for WeChat Mini Programs: Supporting Easy Export from Mini Programs, WebAPP and Backstage", 9 August 2017 (2017-08-09), XP009525647, Retrieved from the Internet <URL:https://blog.csdn.net/luck332/article/details/76974170> *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114936019A (zh) * 2021-12-09 2022-08-23 腾讯科技（深圳）有限公司 一种组件及策略联动方法、装置、设备、***及存储介质
CN114936019B (zh) * 2021-12-09 2024-01-30 腾讯科技（深圳）有限公司 一种组件及策略联动方法、装置、设备、***及存储介质

Also Published As

Publication number Publication date
US20230236808A1 (en) 2023-07-27
JP7246502B2 (ja) 2023-03-27
US20210294583A1 (en) 2021-09-23
CN112230914B (zh) 2023-09-15
US11954464B2 (en) 2024-04-09
JP2022521720A (ja) 2022-04-12
EP3944070A4 (en) 2022-06-22
CN112230914A (zh) 2021-01-15
EP3944070A1 (en) 2022-01-26
US11645051B2 (en) 2023-05-09

Similar Documents

Publication Publication Date Title
WO2021008295A1 (zh) 小程序的制作方法、装置、终端及存储介质
US11150792B2 (en) Method and device for executing object on display
US20240053879A1 (en) Object Drag Method and Device
JP7217357B2 (ja) ミニプログラムのデータバインディング方法、装置、デバイス及びコンピュータプログラム
US11604580B2 (en) Configuration of application execution spaces and sub-spaces for sharing data on a mobile touch screen device
WO2022083241A1 (zh) 信息引导方法及装置
WO2022127233A1 (zh) 虚拟物品的发送方法和计算机设备
JP2014207672A (ja) イメージ合成方法及びこれを具現する電子装置
US10353988B2 (en) Electronic device and method for displaying webpage using the same
US20140229823A1 (en) Display apparatus and control method thereof
CN111191176A (zh) 网站内容更新方法、装置、终端及存储介质
CN112416486A (zh) 信息引导方法、装置、终端及存储介质
CN111324255A (zh) 一种基于双屏终端的应用处理方法及通信终端
CN112230906A (zh) 列表控件的创建方法、装置、设备及可读存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20841007

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2021547744

Country of ref document: JP

Kind code of ref document: A

ENP Entry into the national phase

Ref document number: 2020841007

Country of ref document: EP

Effective date: 20210825

NENP Non-entry into the national phase

Ref country code: DE