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

Abstract

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

Description

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

技术领域

本申请实施例涉及可视化编程领域，特别涉及一种小程序的制作方法、装置、终端及存储介质。

背景技术

随着应用程序的研发技术发展，应用程序提供商提供了“宿主程序和小程序”的生态体系。小程序是一种依赖于宿主程序运行的程序。用户只需要安装宿主程序，即可在宿主程序中随时添加和使用各种各样的小程序。

应用程序提供商提供宿主程序作为程序平台后，各个公司、服务机构甚至个人用户(简称程序员)都可以研发不同类型的小程序来提交给应用程序提供商，以宿主程序作为运行容器来提供不同服务。当需要研发小程序时，程序员需要从宿主程序的程序平台上下载开发者工具和开发文档。程序员参阅开发文档上所规定的各项要求，使用开发者工具进行代码编辑。在成功编辑得到小程序的程序包后，将小程序的程序包提交至宿主程序的程序平台，在审核通过后即可发布至各个用户使用。

但是由于开发者工具的使用，需要程序员具有较为专业的代码编辑能力，需要长时间的知识学习和经验积累才能顺利完成该研发过程，难以推广至更为普通的个人用户来使用。

发明内容

本申请实施例提供了一种小程序的制作方法、装置、终端及存储介质，能够解决小程序的研发难以推广至普通个人用户的问题。所述技术方案如下：

一方面，提供了一种小程序的制作方法，所述小程序是依赖于宿主程序运行的程序，所述方法包括：

显示可视化制作程序的小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所述面板区提供有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用于为宿主程序提供后台服务来举例说明。

请参考图3，其示出了本申请一个示例性实施例示出的小程序的制作方法的流程图，该示例性实施例由安装于终端的可视化制作程序一侧执行。该方法包括：

步骤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是不同的，当可视化制作程序接收到对列表控件的列表项1的用户操作时，动态程序界面450会跳转至程序界面460，显示程序界面460的编辑与静态程序界面440和动态程序界面450是一致的，都可以根据面板区410的基础UI元素编辑而成。此外，程序界面460也可以是静态web页面和动态web页面中的一种。

步骤303，根据小程序的程序界面生成小程序的程序包。

可视化制作程序在接收到编辑区中对于目标基础UI元素上的编辑操作时，同步在后台生成与编辑操作对应的子程序，并当用户完成对目标基础UI元素的编辑时，将各个子程序打包为小程序的程序包，该程序包用于在宿主程序中运行。

本申请实施例中，在通过可视化制作程序制作小程序时，可视化制作程序显示有包括面板区和编辑区的小程序制作界面，在接收到目标基础UI元素上的用户操作时，在编辑区中根据目标基础UI元素编辑得到小程序的程序界面，最后，可视化制作程序根据小程序的程序界面生成小程序的程序包。与相关小程序的开发过程相较而言，采用本申请的方法，在不需要开发者具有较强的研发能力的同时，通过接收用户可视化的操作，可视化制作程序在后台全程同步生成与当前操作相关的程序，使得普通用户不需要手动编辑代码即可通过可视化制作程序完成小程序的可视化制作。

请参考图5，其示出了本申请另一个示例性实施例示出的小程序的制作方法的流程图，该示例性实施例由安装于终端的可视化制作程序一侧执行。该方法包括：

步骤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元素进行逻辑编辑，得到小程序的程序界面中的逻辑运行部分。

可选的，在完成步骤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的排版操作，即可通过属性区802执行步骤502中的内容。

示意性的，如图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(图片数据)、内容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元素、完成页面编排操作和完成逻辑编排操作时，可视化制作程序同步生成与当前操作相关的代码。

示意性的，如图13的(a)所示，在小程序的制作界面400显示有代码显示区域1301，在接收对程序界面1300的页面编排操作和逻辑编排操作时，同步在代码显示区域1301生成代码。

此外，用户也可以对代码显示区域1301中的代码进行编辑，即由可视化制作小程序转为代码编写制作小程序。

用户在该代码显示区域1301进行代码编辑时，若按照相关的代码编辑方法来操作，则需要用户了解各个目标UI元素的身份标识号(Identity document，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元素在触发后跳转显示的程序界面。

可选的，小程序制作界面还包括：预览控件；

可选的，所述装置，还包括：

程序包推送模块，用于在接收到预览控件上的预览操作时，将小程序的程序包推送至宿主程序中进行运行。

可选的，小程序制作界面还包括：提交控件；

可选的，所述装置，还包括：

程序包发送模块，用于在接收到提交控件上的提交操作时，将小程序的程序包发送至宿主程序的程序平台进行审核或发布。

请参考图15，其示出了本申请一个示例性实施例提供的终端1500的结构方框图。该终端1500可以是便携式移动终端，比如：智能手机、平板电脑、MP3播放器(MovingPicture 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 ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器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(LocationBased Service，基于位置的服务)。定位组件1508可以是基于美国的GPS(GlobalPositioning 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 RandomAccess Memory)和动态随机存取存储器(DRAM，Dynamic Random Access Memory)。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

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.根据权利要求2所述的方法，其特征在于，所述小程序的程序界面包括：存在层级显示关系的第一程序界面和第二程序界面；

所述在接收到所述目标基础UI元素对应的逻辑编排操作时，根据所述逻辑编排操作在所述编辑区中对所述目标基础UI元素进行逻辑编辑，得到所述小程序的程序界面中的逻辑运行部分，包括：

在接收到所述第一程序界面中的目标基础UI元素对应的第四逻辑编排操作时，根据所述第四逻辑编排操作在所述编辑区中对所述目标基础UI元素与所述第二程序界面进行数据绑定，所述第二程序界面是所述目标基础UI元素在触发后跳转显示的程序界面。

6.根据权利要求1至5任一所述的方法，其特征在于，所述小程序制作界面还包括：预览控件；

所述方法还包括：

在接收到所述预览控件上的预览操作时，将所述小程序的程序包推送至所述宿主程序中进行运行。

7.根据权利要求1至5任一所述的方法，其特征在于，所述小程序制作界面还包括：提交控件；

所述方法还包括：

在接收到所述提交控件上的提交操作时，将所述小程序的程序包发送至所述宿主程序的程序平台进行审核或发布。

8.一种小程序的制作装置，其特征在于，所述小程序是依赖于宿主程序运行的程序，所述装置包括：

制作界面显示模块，用于显示可视化制作程序的小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所述面板区提供有n种基础UI元素，n为正整数；

程序界面生成模块，用于在接收到目标基础UI元素上的用户操作时，在所述编辑区中根据所述目标基础UI元素编辑得到所述小程序的程序界面，所述目标基础UI元素是所述n种基础UI元素中被选择的UI元素；

程序包生成模块，用于根据所述小程序的程序界面生成所述小程序的程序包。

9.一种终端，其特征在于，所述终端包括处理器和存储器；所述存储器存储有至少一条指令，所述至少一条指令用于被所述处理器执行以实现如权利要求1至7任一所述的小程序的制作方法。

10.一种计算机可读存储介质，其特征在于，所述存储介质存储有至少一条指令，所述至少一条指令用于被处理器执行以实现如权利要求1至7任一所述的小程序的制作方法。

Images