CN112230909A - 小程序的数据绑定方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种小程序的数据绑定方法、装置、设备及存储介质，所述小程序是依赖于宿主程序运行的程序，所述方法包括：显示可视化制作程序的小程序制作界面，所述小程序制作界面上显示有面板区和编辑区，所述面板区提供有n种基础UI控件，n为正整数；在接收到被选择的基础UI控件上的用户操作时，在所述编辑区中根据所述被选择的基础UI控件编辑得到所述小程序的程序界面；获取数据源；在接收到所述小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据所述数据绑定操作将所述目标基础UI控件与所述数据源进行绑定，所述数据源用于供所述目标基础UI控件进行显示。

Description

小程序的数据绑定方法、装置、设备及存储介质

技术领域

本申请涉及可视化编程领域，特别涉及一种小程序的数据绑定方法、装置、设备及存储介质。

背景技术

小程序是一种依赖于宿主程序的运行的程序，用户可以通过在所安装的宿主程序中添加各种各样的小程序来体验不同小程序所带来的服务。

各种类型的小程序可以由各个公司、服务机构甚至个人用户(比如，程序员)来开发，通过提交给应用程序提供商来为用户提供不同的服务，应用程序提供商提供宿主程序作为程序平台。小程序通过大量的数据来实现各种功能，开发人员将小程序与相应的数据一一绑定，使得用户能够在小程序的程序界面上看到不同的内容(比如，文字、图片等)，在用户触发特定的页面后实现页面跳转等功能。

基于上述情况，开发人员在开发小程序时，需要使用专业的开发者工具，同时需要开发人员编写大量的代码才能实现数据绑定，导致开发小程序需要开发人员具有更为专业的程序编译能力，难以推广至更为普通的个人用户来使用。

发明内容

本申请实施例提供了一种小程序的数据绑定方法、装置、设备及存储介质，可以解决相关技术中开发人员需要使用专业的开发者工具以及编写大量的代码才能实现数据绑定的问题。所述技术方案如下：

根据本申请的一个方面，提供了一种小程序的数据绑定方法，所述小程序是依赖于宿主程序运行的程序，所述方法包括：

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

在接收到被选择的基础UI控件上的用户操作时，在所述编辑区中根据所述被选择的基础UI控件编辑得到所述小程序的程序界面；

获取数据源；

在接收到所述小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据所述数据绑定操作将所述目标基础UI控件与所述数据源进行绑定，所述数据源用于供所述目标基础UI控件进行显示。

根据本申请的另一方面，提供了一种小程序的数据绑定装置，所述小程序是依赖于宿主程序运行的程序，所述装置包括：

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

接收模块，用于在接收到被选择的基础UI控件上的用户操作时，在所述编辑区中根据所述被选择的基础UI控件编辑得到所述小程序的程序界面；

获取模块，用于获取数据源；

所述接收模块，还用于在接收到所述小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据所述数据绑定操作将所述目标基础UI控件与所述数据源进行绑定，所述数据源用于供所述目标基础UI控件进行显示。

根据本申请的另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由所述处理器加载并执行以实现如上方面所述的小程序的数据绑定方法。

根据本申请的另一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上方面所述的小程序的数据绑定方法。

本申请实施例提供的技术方案带来的有益效果至少包括：

通过在可视化制作程序的小程序制作界面上将小程序的目标基础UI控件与数据源进行绑定，绑定后的目标基础UI控件能够显示相应的内容，使得用户无需编写代码，只需要通过更改目标基础UI控件所绑定的数据源，或者将目标基础UI控件与数据源之间的绑定关系解除，即可实现编辑或修改目标基础UI控件中相应的显示内容的功能，提高了用户制作小程序的效率。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请一个示例性实施例提供的可视化制作程序的小程序的制作界面示意图；

图2是本申请一个示例性实施例提供的实施环境的框图；

图3是本申请一个示例性实施例提供的小程序的数据绑定方法的流程图；

图4是本申请另一个示例性实施例提供的可视化制作程序的小程序的制作界面示意图；

图5是本申请一个示例性实施例提供的控件组件和数据字段进行绑定的界面示意图；

图6是本申请一个示例性实施例提供的控件组件和数据字段进行绑定的方法的流程图；

图7是本申请一个示例性实施例提供的控件组件和数据字段已绑定的界面示意图；

图8是本申请一个示例性实施例提供的控件组件和数据字段以随机的方式进行绑定的方法的流程图；

图9是本申请另一个示例性实施例提供的控件组件和数据字段已绑定的界面示意图；

图10是本申请另一个示例性实施例提供的可视化制作程序的数据绑定方法的流程图；

图11是本申请一个示例性实施例提供的控件组件和数据字段以手动的方式进行绑定的界面示意图；

图12是本申请一个示例性实施例提供的完成控件组件和数据字段绑定后的小程序的制作界面示意图；

图13是本申请一个示例性实施例提供的小程序的预览界面示意图；

图14是本申请的一个示例性实施例提供的小程序在终端上的预览界面示意图；

图15是本申请的一个示例性实施例提供的对下一级程序界面进行数据绑定的界面示意图；

图16是本申请的另一个示例性实施例提供的对下一级程序界面进行数据绑定的界面示意图；

图17是本申请另一个示例性实施例提供的小程序的预览界面示意图；

图18是本申请另一个示例性实施例提供的小程序在终端上的预览界面示意图；

图19是本申请一个示例性实施例提供的逻辑编排的界面示意图；

图20是本申请一个示例性实施例提供的终端的结构框图；

图21是本申请一个示例性实施例提供的小程序的数据绑定装置的结构示意图；

图22是本申请一个示例性实施例提供的计算机设备的装置结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

首先对本申请实施例中涉及的名词进行介绍：

可视化制作程序：是指一种以可视化预览方式对程序制作过程进行展示以辅助制作的程序，可选地，该可视化制作程序可以是通过代码进行编程，并根据代码输入生成编辑区域中的预览内容的程序，也可以是直接在编辑区域中通过增加界面内容，并对界面内容进行编辑后自动生成代码数据的程序，本申请实施例中，以该可视化制作程序为在编辑区域中通过增加界面内容并自动生成代码数据的程序为例进行说明。

可选地，该可视化制作程序可以是对小程序进行制作的程序，也可以是对普通程序进行制作的程序，本申请实施例中，以该可视化制作程序对小程序进行制作为例进行说明。

基础UI(User Interface，用户界面)控件：是指在应用程序的用户界面上能够看见的任何可视控件或元素，比如，图片、输入框、文本框、按钮、标签等控件，其中一些UI控件响应用户的操作，比如，用户在输入框中能够输入文字，用户通过上述UI控件与用户界面进行信息交互。

数据：是指页面上的内容，比如，图片、文本、视频、音频、动画等都构成数据，数据可以是静态的，也可以是动态的，静态的数据是指编写程序时写进程序内部的数据，动态的数据是指程序运行期间通过网络协议获取的数据。网络协议是指计算机网络中为进行数据交换而建立的规则、标准或约定的集合。在网络中，终端间所使用的字符不同，因此某个用户在终端中输入的命令，在另一终端上不能够被识别，为了能进行正常的通信，网络协议规定每个终端都要将各自的字符先变换成标准字符，才能进入网络传输，在到达目标终端后，再将标准字符转换为目标终端所使用的字符。可选地，网络协议是传输控制协议/互联网协议(Transmission Control Protocol/Internet Protocol，TCP/IP协议)。

视图层：是指小程序的开发文档，当小程序在宿主程序中运行时，小程序开发文档会被渲染成屏幕上的页面，静态数据可以直接写入小程序的开发文档。

逻辑层：是指采用直译式脚本语言所编写的文件(JavaScript文件，又被命名为JS文件)，可应用于小程序中，包括小程序的动态逻辑，比如，相应用户点击事件、发送请求获取数据等，逻辑层通过数据绑定来修改视图。

数据绑定：是指将数据与对应的UI控件进行绑定来生成小程序的界面。视图层的动态数据都需要由逻辑层提供。在编写视图层对应的程序时，需要通过预留动态数据的位置来保证视图层和逻辑层一一对应。

数据字段：是指每条数据可以包含多个数据字段。比如一条学生信息数据，包含：“学号”“姓名”、“性别”、“年龄”“成绩”等多个数据字段。

数据元格式：用于描述数据的格式和类型。比如班级信息表，可以由组成“班级”的数据所形成的列表来表示，其中列表的每一项包含“姓名”、“年龄”、“性别”三个数据字段。

示意性的，本申请以可视化制作程序制作小程序为例进行说明，本申请中提供的方法可应用于如下场景中：无任何编译程序知识的普通用户通过小程序制作界面上的面板区和编辑区将基础UI控件和数据源进行绑定，进而完成小程序的制作过程；或者，对于有编译程序知识的专业开发人员，通过小程序制作界面以可视化的方式将基础UI控件和数据源进行绑定，无需撰写大量代码，提高了专业开发人员开发小程序的效率，同时，通过该可视化制作程序的小程序界面也能够生成代码，方便专业人员从代码的角度进行检查。

本申请中提供的方法可应用于可视化制作程序中，或者，具有可视化制作程序功能的程序中，下述实施例是以该方法应用于可视化制作程序来进行说明的。

图1示出了本申请一个示例性实施例提供的可视化制作程序的绑定数据的界面示意图。在小程序制作界面10上显示有面板区101、编辑区102、图片控件组件103、题目控件组件104和内容控件组件105、属性选项106、绑数据选项107、删除选项108和更多选项109。

可选地，在面板区101上提供有n中基础UI控件，n为正整数。可选地，基础UI控件包括：图片控件组件103、文本控件组件(比如，题目控件组件104和内容控件组件105)、视频控件组件、音频控件组件和动画控件组件中的至少一种。在编辑区102中显示小程序的列表或框架，需要向列表中添加数据，可选地，该数据是图片、文本、视频、音频、动画中的至少一种，也即将对应的基础UI控件和对应的数据进行绑定操作，从而生成小程序制作完成后的界面。可选地，属性选项106用于查看目标基础UI控件的属性，或者，查看与目标基础UI控件绑定的数据源的属性，属性是指目标基础UI控件或与目标基础UI控件绑定的数据源的相关参数，包括但不限于：名称、数量、尺寸、形状(比如，缩放、拉伸、旋转、裁剪等)、透明度、滤镜(是指用于改变图片或视频帧色调的参数)、贴纸(是指叠加在图片或视频帧上的元素)；绑数据选项107用于将目标基础UI控件与数据源进行绑定操作；删除选项108用于将已绑定的目标基础UI控件和数据源解除绑定，或者，删除小程序上的基础UI控件；更多选项109用于查看小程序制作界面的其他功能，或者，用于查看小程序对应的列表的其他形式，或者用于将小程序界面进行分享。本申请对此不加以限定。用户通过绑数据选项107对目标基础UI和数据源进行绑定，示意性的，用户将图片控件组件103与对应的图片数据源进行绑定，选择图片控件组件103，获取对应的图片数据源，选择绑数据选项107即可将图片控件103与对应的图片数据源进行绑定。

图2示出本申请一个示例性实施例提供的计算机***的结构框图。该计算机***100包括：第一终端120、服务器140和第二终端160。

第一终端120安装和运行有可视化制作程序平台，或者支持可视化制作程序的平台。第一终端120是第一用户使用的终端，第一用户使用第一终端120上的可视化制作程序平台来制作程序或小程序，示意性的，第一用户使用第一终端120上的可视化制作程序平台，通过将目标基础UI控件和对应的数据进行绑定来制作小程序。

第一终端120通过无线网络或有线网络与服务器140相连。

服务器140包括一台服务器、多台服务器、云计算平台和虚拟化中心中的至少一种。示意性的，服务器140包括处理器144和存储器142，存储器142又包括显示模块1421、接收模块1422和获取模块1423。服务器140用于为支持可视化制作程序提供后台服务，示意性的，提供程序或小程序对应的数据源的存储服务和更新服务。可选地，服务器140承担主要计算工作，第一终端120和第二终端160承担次要计算工作；或者，服务器140承担次要计算工作，第一终端120和第二终端160承担主要计算工作；或者，服务器140、第一终端120和第二终端160三者之间采用分布式计算架构进行协同计算。

第二终端160安装和运行有宿主程序，该宿主程序中添加通过第一终端120发布的小程序，第二终端160是第二用户使用的终端，可选地，第二用户在该小程序上登录或注册帐号来实现对小程序进行访问的操作。可选地，第二终端160上也可以安装和运行可视化制作程序平台，第一终端120上也可以安装和运行有宿主程序，并且在宿主程序中添加通过第二终端160或其他终端发布的小程序，第一用户在该小程序上登录或注册帐号来实现对小程序进行访问的操作。

可选地，第一终端120和第二终端160上安装的可视化制作程序平台是相同的，或两个终端上安装的可视化制作程序平台是不同控制***中的同一类型的可视化制作程序平台。第一终端120可以泛指多个终端中的一个，第二终端160可以泛指多个终端中的一个，本实施例仅以第一终端120和第二终端160来举例说明。第一终端120和第二终端160的设备类型相同或不同，该设备类型包括：智能手机、平板电脑、电子书阅读器、MP3播放器、MP4播放器、膝上型便携计算机和台式计算机中的至少一种。以下实施例以终端包括平板电脑和智能手机来举例说明。

本领域技术人员可以知晓，上述终端的数量可以更多或更少。比如上述终端可以仅为一个，或者上述终端为几十个或几百个，或者更多数量。本申请实施例对终端的数量和设备类型不加以限定。

图3示出了本申请一个示例性实施例提供的小程序的数据绑定方法，该方法应用于如图2所示的计算机***中的第一终端120或第二终端160中或该计算机***中的其它终端中。该方法包括如下步骤：

步骤301，显示可视化制作程序的小程序制作界面，小程序制作界面上显示有面板区和编辑区，面板区提供有n种基础用户界面UI控件，n为正整数。

可选地，在终端上显示该可视化制作小程序的制作界面，该终端是智能手机、平板电脑、笔记本电脑或者台式电脑。示意性的，在平板电脑上显示该可视化制作小程序的制作界面，用户通过在平板电脑的显示屏上的编辑操作对该小程序进行编辑操作。在一些实施例中，编辑操作是单击操作、双击操作、拖动操作、滑动操作、长按操作中的至少一种，本申请对此不加以限定。

结合图4对小程序制作界面上显示有面板区和编辑区进行说明，图4示出了本申请一个示例性实施例提供的可视化制作程序的小程序制作界面示意图。在该小程序制作界面11上显示有面板区101和编辑区102，可选地，面板区101在小程序制作界面11中的左侧，在一些实施例中，面板区101在小程序制作界面11中的右侧，或上侧，或下侧，本申请对面板区101在小程序制作界面的位置不加以限定。

可选地，在面板区101上提供有n种基础UI控件，n为整数。示意性的，n的值是3，则在面板区101上提供有三种基础UI控件。示意性的，基础UI控件包括：输入框(包括单行输入框和多行输入框)、选项(比如，虚拟按钮或勾选框)、时间、动态开关(支持页面之间的跳转)、页面布局等。

可选地，用户可以对制作的小程序进行命名，在制作小程序之前，或者在完成小程序制作之后对小程序进行命名，或者，在制作小程序的过程中随时对小程序进行命名。可选地，小程序命名处在小程序制作界面的上侧，通过编辑按钮(可选地，“笔”形状的编辑按钮)对小程序进行命名，在一些实施例中，小程序的命名处在小程序的右侧，本申请对此不加以限定。

可选地，在小程序制作界面11上显示有预览控件111。用户通过选择预览控件111，将小程序的程序包发送至宿主程序平台进行审核或发布。

步骤302，在接收到被选择的基础UI控件上的用户操作时，在编辑区中根据被选择的基础UI控件编辑得到小程序的程序界面。

如图1所示，在接收到被选择的基础UI控件上的用户操作时，在编辑区102中根据被选择的基础UI控件编辑得到小程序的程序界面。可选地，被选择的基础UI控件包括图片控件组件103、题目控件组件104和内容控件组件105，在一些实施例中，被选择的基础UI控件可以是视频控件组件、音频控件组件或动画控件组件。示意性的，上述被选择的基础UI控件经过排版或布局编辑得到小程序的程序界面。

可选地，用户在可视化程序的小程序制作界面上制作小程序时，可以选择可视化程序平台提供的列表项模板，或者，用户进行自定义的列表项模板，或者，用户通过调用其他程序(能够生成列表项模板或提供列表项模板)或者含有列表项模板的文件来添加列表项模板。列表项是指小程序界面中能够容纳数据的结构，比如，通讯程序中通讯录的结构。可选地，用户可以通过单击操作、双击操作、拖动操作、滑动操作或长按操作来添加列表项模板。

步骤303，获取数据源。

可选地，用户可通过以下方式来获取数据源：

第一，在可视化制作程序的小程序界面上显示第一表格文件，接收用户的添加操作，添加操作用于将第一表格文件添加至可视化制作程序中。可选地，添加操作是单击操作，或者双击操作，或者拖动操作，或者滑动操作，或者长按操作。

示意性的，通过拖动第一表格文件来获取数据源，将表格文件名称为A的文件拖动至小程序制作界面中，小程序制作界面将自动对表格文件中的数据源进行识别，将数据源添加至小程序制作界面中，比如，将图片对应的数据源添加至数据表中或数据选项中。

第二，接收程序调用操作，程序调用操作用于在可视化制作程序对表格应用程序进行调用，表格应用程序中包括第二表格文件。

示意性的，通过调用表格应用程序来获取数据源，示意性的，在小程序制作界面中有调用选项，通过调用选项打开表格应用程序(比如，电子表格Excel)，小程序对表格应用程序中的B文件(第二表格文件的文件名称是B)进行数据源的识别操作，将数据源添加至小程序制作界面中的数据表或数据选项中。

第三，通过短距离无线通讯技术接收第三表格文件。

示意性的，终端通过短距离无线通讯技术接收第三表格文件，可选地，短距离无线通讯技术是蓝牙技术、紫蜂Zigbee技术、隔空投送Airdrop技术等，在可视化制作程序的平台中打开接收到的表格文件，将表格文件中的数据源添加至小程序制作界面中的数据表或数据选项中。可选地，第三表格文件也可以是其他应用程序发送至可视化制作程序平台的，比如，社交类应用程序、邮箱应用程序、即时通讯应用程序等。

可选地，用户可以选择数据表中的某一条数据，或者，选择数据表中的所有数据，可选地，用户可以通过单击操作、双击操作、拖动操作、滑动操作、或长按操作的方式将数据表拖动至小程序制作界面中相应的位置处(即列表项中)。

步骤304，在接收到小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据数据绑定操作将目标基础UI控件与数据源进行绑定，数据源用于供目标基础UI控件进行显示。

结合图5对步骤304进行说明，在绑定数据界面12上显示有：数据表绑定状态121、创建数据表122、数据表123、保存选项124和取消选项125，以及小程序界面上的图片控件组件103、题目控件组件104和内容控件组件105。

可选地，数据表绑定状态121是未绑定任何数据表的状态，或者，是绑定至少一个数据数据表的状态。可选地，当绑定至少一个数据表时，显示该数据表的名称。可选地，数据表中包括至少一条数据字段。示意性的，该数据表是名称为text-8.xlsx，该数据表包含了九条数据字段，分别与小程序界面上的九个列表项一一对应，每条数据字段中包括的数据信息是图片数据字段、题目数据字段和内容数据字段。

创建数据表选项122用于在小程序制作界面12中创建数据表，可选地，创建的数据表中的数据可以是用户通过小程序制作界面12直接输入的，或者，是通过添加表格文件或调用表格应用程序得到的数据。

保存选项124用于保存用户在小程序制作界面12中的操作，包括：编辑操作、删除操作、修改操作中的至少一种操作；取消操作125用于退出小程序制作界面12，或者，取消绑定数据表的操作。

综上所述，本实施例提供的方法，通过在可视化制作程序的小程序制作界面，将数据源与UI控件进行绑定，用户无需编译程序代码即可实现制作小程序的过程，使得无任何专业知识的普通用户在也能制作小程序。

图6示出了本申请一个示例性实施例提供的数据字段与控件组件绑定的方法的流程图。该方法应用于如图2所示的计算机***中的第一终端120或第二终端160中或该计算机***中的其它终端中。该方法包括如下步骤：

步骤601，在接收到数据绑定操作时，显示按照第一排列顺序将m个数据字段与m个控件组件进行分别绑定的绑定预览信息。

可选地，基础UI控件对应有m个控件组件，数据源包括m个数据字段，m为大于1的整数。示意性的，m的值是3，则基础UI控件对应有三个控件组件，数据源包括三个数据字段。可选地，数据字段的类型包括：图片ImageUrl类型和字符串String类型。

图7示出了本申请一个示例性实施例提供的控件组件与数据字段进行绑定的界面示意图，在绑定界面13上显示有数据表绑定状态121、数据表123、保存选项124、取消选项125和字段关联方式126，以及小程序界面上的图片控件组件103、题目控件组件104和内容控件组件105。

示意性的，数据表绑定状态121是已绑定的状态，并且在小程序制作界面上显示数据表的名称。数据表123中包含有能够与目标基础UI控件进行绑定的数据，可选地，该数据表123包括图片数据字段、题目数据字段和内容数据字段，分别与图片UI控件组件、文本UI控件组件相对应。可选地，若数据表123中含有视频数据字段，则与视频UI控件组件相对应，用户可以查看数据集来查看所有导入或添加至小程序制作界面的数据表。示意性的，在小程序界面上显示按照第一排序顺序将三个数据段与三个控件组件进行绑定的绑定预览信息，用户通过绑定预览信息查看数据字段与UI控件组件之间的绑定是否正确，比如，图片数据字段与文本UI控件组件进行绑定是不正确的，可选地，第一排序是图片数据字段、题目数据字段、内容数据字段。

步骤602，在接收到重新排列操作时，显示按照第i+1排列顺序将m个数据字段与m个控件组件进行分别绑定的绑定预览信息。

可选地，字段关联方式126是随机方式，或者，是手动方式。可选地，第i+1排列顺序是不同于第i排列顺序的排列顺序，i的起始值为1，所述第i排列顺序是随机生成的或预先设置的。

示意性的，在数据表123中有图片数据字段、题目数据字段和内容数据字段等三个数据字段，三个数据字段分别与图片UI控件组件、题目UI控件组件和内容UI控件组件，将三个数据字段进行排列组合，将数据字段的所有排列组合按照顺序进行排序，可选地，该排列顺序是随机生成的，或者是可视化制作程序平台预先设置的，或者是用户通过可视化制作程序平台预先设置的。

在一个示例中，以A代表图片数据字段，B代表题目数据字段，C代表内容数据字段，则三种数据字段的排列组合有六种(ABC、ACB、BAC、BCA、CAB和CBA)，将六种排列组合的顺序按照随机生成的方式进行排序，第2排列顺序是不同于第1排列顺序的(i的起始值为1)，比如，第1排列顺序是ABC，第2排列顺序是可以是ACB、BAC、BCA、CAB或CBA，只要是不同于ABC的排列顺序，均可以确定为第2排列顺序。

步骤603，在接收到确认绑定操作时，将m个数据字段与m个控件组件进行分别绑定。

可选地，用户通过触发绑定按钮对m个数据字段与m个控件组件进行分别绑定，或者，用户在选择数据表123后直接将m个数据字段与m个控件组件进行分别绑定，本申请对用户确认绑定操作的方式不作限定。

示意性的，将数据表123中的数据字段与小程序界面上第一列表项中的UI控件组件进行绑定，绑定后的数据表123显示为已绑定数据表。在小程序界面上的第一列表项上显示预览绑定信息，该预览绑定信息包括：图片(也即图片控件组件103，是与数据表123中图片数据字段对应的图片，比如，该图片是电影海报；题目或主题(也即题目控件组件104，比如，主题是书籍，书籍的名字是小张历险记)；主题内容的简介或摘要或主题内容(也即内容控件组件105，主题内容简介只显示主题内容的一部分。比如，这是值得推荐的一本书)。

结合图8对重新排列m个数据字段进行说明，图8示出了本申请一个示例性实施例提供的重新排列m个数据字段的方法的流程图。该方法应用于如图2所示的计算机***中的第一终端120或第二终端160中或该计算机***中的其它终端中。该方法包括如下步骤：

步骤801，生成m个数据字段的全部排列顺序。

示意性的，m的值为3，则三个数据字段的全部排列顺序是六种。

步骤802，在接收到所述重新排列操作时，从全部排列顺序中随机选择出不同于第i排列顺序的一组排列顺序，确定为第i+1排列顺序。

示意性的，以随机方式对三个数据字段和三个UI控件组件分别进行绑定。在一个示例中，三个数据字段分别是A、B、C，全部排列顺序是ACB，ABC，BCA，BAC，CAB和CBA，从全部排列顺序中随机选择出不同于第1排列顺序的一组排列顺序(i的值为1)，比如，第1排列顺序是ACB，选择BCA确定为第2排列顺序，BCA是不同于ACB排列顺序的一组排列顺序。

步骤803，按照第i+1排列顺序读取m个数据字段中的第j个绑定字段以及字段类型，1≤j≤m。

示意性的，第i+1排列顺序是BCA，是不同于ACB(第i顺序排列)的一组排列顺序。按照BCA排列顺序读取三个数据段中的第j个绑定字段以及字段类型，可选地，1≤j≤m，示意性的，取j的值为2，则从BCA读取第2个数据字段，即C代表的数据字段和对应的字段类型。在一个示例中，以A代表图片数据字段，B代表题目数据字段，C代表内容数据字段，则从BCA排列顺序中读取C的数据字段是内容数据字段，对应的字段类型是字符串(String)类型。

步骤804，在m个控件组件中确定出满足绑定条件的目标控件组件。

可选地，绑定条件包括：控件组件尚未绑定数据字段，或者，控件组件与第j个字段的字段类型匹配，或者，控件组件尚未绑定数据字段且与第j个数据字段的字段类型匹配。

示意性的，在三个控件组件中确定出满足绑定条件的目标控件组件，在一个实例中，绑定条件包括：尚未绑定数据字段且与第2个(j的值取2)字段的字段类型匹配。可选地，BCA为第i+1排列顺序，第2个字段的字段类型是字符串类型。

在一个示例中，小程序界面上的图片控件组件103与第2个字段的字段类型不匹配，图片控件组件103的字段类型是图片字段类型，则图片控件组件103不是目标控件组件；题目控件组件104已绑定题目数据字段，则题目控件组件104不是目标控件；内容控件组件105尚未绑定数据字段且与第2个字段的字段类型匹配，则内容控件组件105是目标控件组件。

步骤805，将目标控件组件和第j个数据字段进行绑定。

示意性的，在确定内容组件控件105是目标控件组件后，将目标控件组件和第2个数据字段进行绑定，即将内容控件组件105和内容数据字段进行绑定。

步骤806，在m个控件组件均绑定后，显示将m个数据字段与m个控件组件进行分别绑定的绑定预览信息。

示意性的，按照上述步骤将图片控件组件103和题目控件组件104进行绑定，在一个示例中，第2个数据字段(题目数据字段)已经与内容控件组件105进行绑定，题目控件组件104已绑定内容数据字段，则图片控件组件103将与图片数据字段进行绑定。在三个控件组件均绑定后，显示三个数据字段与三个控件组件分别绑定的绑定预览信息，如图9所示。

图9示出了本申请一个示例性实施例提供的重新排列m个数据字段后与目标控件组件进行绑定的界面示意图。在重新绑定界面14上显示有：数据表绑定状态121、数据表123、保存选项124、取消选项125和字段关联方式126，以及小程序界面上的图片控件组件103、题目控件组件104和内容控件组件105。

示意性的，用户选择字段关联126的方式是随机方式，查看三个数据字段和三个控件组件的绑定预览信息，当用户不满意当前绑定预览信息时，重新选择字段关联，比如，重新点击随机方式按钮，在一些实施例中，字段关联还可以通过切换字段关联按钮对现有的数据字段和控件组件的绑定关系进行切换，本申请对此不加以限定。

在一个示例中，用户点击随机方式按钮，小程序制作界面接收到重新排列操作时，生成三个数据字段的全部排列顺序，从全部排列顺序中选择出不同于上一次排列顺序(第i排列顺序)的一组排列顺序，确定为当前排列顺序(第i+1排列顺序)，当前排列顺序是图片数据字段、题目数据字段、内容数据字段，按照当前排列顺序读取三个数据字段中的第2个绑定字段以及字段类型(第2个绑定字段是题目数据字段，字段类型是字符串类型)，而内容控件组件105尚未绑定数据字段且与第2个数据字段的字段类型匹配(属于字符串类型的字段)，则确定内容控件组件105是目标控件组件，将内容控件组件105和第2个数据字段(题目数据字段)进行绑定，同时将第1个数据字段和第3个数据字段分别与对应的控件组件进行绑定，第1个图片数据字段与图片控件组件103进行绑定，第3个内容数据字段与题目控件组件104进行绑定。

在重新绑定界面14上的小程序界面中，在图片控件组件103上显示有图片(比如，书籍的封面图)，在题目控件组件104上显示有内容摘要(比如，这是值得推荐的一本书)，在内容控件组件105上显示有相关题目(比如，小张历险记)。对比图7中的小程序界面，图片控件组件103、题目控件组件104和内容控件组件105分别与相应的图片数据字段、题目数据字段和内容数据字段进行绑定，图9中的题目控件组件103和内容控件组件104的绑定分别与内容数据字段和题目数据字段进行绑定。

综上所述，通过对数据字段的全部排列组合进行排序(排列顺序是随机生成的或预先设置的)，从中选出第i+1排列顺序，该排列顺序是不同于第i排列顺序的一组排列顺序，使得用户在随机方式下，数据字段和控件组件的绑定关系不重复。可以理解的是，以随机方式将数据字段和控件组件进行绑定，用户只需触发重新排列操作就能够按照上述实施例中提供的方法将数据字段和控件组件进行自动绑定，无需通过代码的方式修改数据字段与控件组件绑定错误的地方。

图10是本申请一个示例性实施例提供的以随机方式绑定和以手动方式绑定的方法的流程图。该方法应用于如图2所示的计算机***中的第一终端120或第二终端160中或该计算机***中的其它终端中。该方法包括如下步骤：

步骤1001，开始绑定。

示意性的，用户在平板电脑上进行可视化制作小程序的过程，在平板电脑上通过触控的方式在小程序制作界面上进行编辑。

步骤1002，选择数据表。

用户选择数据表，数据表即绑定数据的数据源。可选地，数据表中包含有至少一条数据字段。可选地，用户根据小程序的内容选择至少一个数据表。可选地，用户通过添加表格文件，或者，在小程序制作界面中相应的数据表处添加数据，或者，调用终端上的表格应用程序来进行选择数据表的操作。

示意性的，用户调用平板电脑上的表格应用程序来进行选择数据表的操作，表格应用程序中包括至少一条与小程序内容对应的数据字段。

步骤1003，生成m个数据字段的全部排列顺序。

示意性的，m的值取3，数据表中包括三个数据字段。小程序制作界面在接收用户的选择数据表操作后，生成三个数据字段的全部排列顺序，三个数据字段的全部排列顺序是六种。

步骤1004，将排列顺序随机打乱。

可选地，将三个数据字段的六种全部排列顺序以随机的方式进行打乱，或者，三个数据段的六种全部排列顺序按照预先设置的排列顺序进行排列。可选地，预先设置的排列顺序是可视化制作程序平台预先设置的(默认设置)，或者，用户通过设置选项，根据个人习惯或喜好方式自行设置的排列顺序，或者，服务器根据用户的历史绑定关系记录智能出成排列顺序。

步骤1005，选择下一个排列顺序。

可选地，小程序制作界面在接收到用户的重新排列操作时，从全部排列顺序中随机选择出不同于第i排列顺序的一组排列顺序，确定为第i+1排列顺序。

示意性的，小程序制作界面中数据字段与控件组件进行绑定是通过数据字段全部排列中的第1排列顺序来决定的，当用户选择重新排列操作(比如，点击随机选项)，将从全部排列顺序中随机选择出不同于第1排列顺序的一组排列顺序，比如，选择全部排列顺序中的第3排列顺序确定为下一个(第i+1)排列顺序。

步骤1006，与控件组件类型相匹配。

可选地，控件组件类型包括：文字类型、图片类型、视频类型、音频类型和动画类型中的至少一种类型。示意性的，可视化制作程序平台将图片数据字段与图片控件组件进行匹配。

步骤1007，建立默认绑定关系。

可视化制作程序平台将数据字段和组件控件进行绑定，建立绑定关系。可选地，该绑定关系是可视化制作程序平台默认的绑定关系，该默认的绑定关系是可视化制作程序平台对绑定关系的默认设置。

步骤1008，切换随机序列。

示意性的，用户点击随机选项切换数据字段的排列顺序，则返回步骤1005，否则，进入步骤1009。

步骤1009，手动调整绑定关系。

可选地，用户还可以通过手动方式来调整数据字段和控件组件的绑定关系。结合图11对手动调整绑定关系的过程进行说明，图11示出了本申请一个示例性实施例提供的修改绑定操作的界面示意图。在修改绑定操作界面15上显示有：数据表绑定状态121、数据表123、保存选项124、取消选项125和字段关联方式126、候选数据字段127，以及小程序界面上的图片控件组件103、题目控件组件104和内容控件组件105。

接收在小程序制作界面上的目标基础UI控件上的目标控件组件上的修改绑定操作，显示目标控件组件对应的至少一个候选数据字段127，可选地，候选数据字段127可以通过表格或者对话框的方式来显示，候选数据字段127是至多m个数据字段中字段类型与目标控件组件相匹配的数据字段。在一个示例中，候选数据字段127通过对话框的方式来显示，在候选数据字段127的对话框中有题目选项1271、内容选项1272和解绑选项1273。题目选项1271用于将题目数据字段和题目控件组件进行匹配，内容选项1272用于将内容数据字段和内容控件组件进行匹配，解绑选项1273用于将被选择的数据字段和控件组件进行解除绑定关系操作。

可选地，用户点击解绑选项1273，将内容数据字段与内容控件组件105进行解除绑定，然后点击内容选项1272，将内容数据字段与内容控件组件105进行绑定，或者，用户直接点击内容选项1272，将内容数据字段与内容控件组件105进行绑定。可选地，将内容数据字段与内容控件组件105进行绑定可以是将已经导入至可视化制作程序中的内容数据字段与内容控件组件105进行绑定，或者，是从数据表(即数据源)中重新选择新的内容数据字段和内容控件组件105进行绑定。

步骤1010，完成数据字段和控件组件的绑定。

在接收到选择操作时，将至少一个候选数据字段中被选择的数据字段与目标控件组件进行绑定。可选地，该选择操作是单击操作，或者双击操作，或者拖动操作，或者滑动操作，或者长按操作。

示意性的，用户点击内容选项1272，将内容数据字段和内容控件组件105进行绑定。

可选地，用户在完后数据字段和控件组件的绑定后，点击保存选项124，对制作的小程序进行保存，则从数据绑定界面退出，进入小程序制作界面16。

图12示出了本申请一个示例性实施例提供的保存小程序的界面示意图。在该小程序制作界面16上显示有：图片控件组件103、题目控件组件104和内容控件组件105、已绑定的数据字段128和预览控件129。

可选地，在该小程序制作界面16上，显示有已经完成数据绑定的数据字段128。可选地，该数据字段共有九条，通过表格文件添加数据字段，表格文件的名称是text-8。用户点击预览控件129，预览控件129用于将小程序的程序包推送至宿主程序中进行运行和预览中的至少一项操作，预览是指在小程序已制作完成还未在宿主程序上发布时，用户可通过提前浏览或使用小程序，检查小程序的内容或功能有无错误；运行是指小程序在宿主程序中能够正常使用。

可选地，预览控件的形状是三角形。在一些实施例中，预览控件是圆形、矩形、六边形或多边形，或者，预览控件是显示有“预览”二字的虚拟按钮，本申请对预览控件的形式不加以限定。

图13示出了本申请一个示例性实施例提供的小程序预览提示信息的界面示意图。在小程序预览提示界面17上显示有：图片控件组件103、题目控件组件104和内容控件组件105、已绑定的数据字段128、预览控件129和预览提示信息130。

可选地，当用户点击预览控件129时，显示预览提示信息130，或者，在用户使用连接有外接设备的终端时(比如，使用连接有鼠标的台式电脑)，在外接设备对应的标识移动至预览控件处，显示预览提示信息130，或者，在用户首次使用预览小程序功能时显示预览提示信息130对用户进行提示。在一个示例中，用户在台式电脑上使用该可视化制作程序平台，当鼠标指针移动至预览控件129处，显示预览提示信息130，当用户点击预览控件129时，将制作的小程序进行预览。

可选地，在预览提示信息130上显示有：小程序已推送至宿主程序，手动推送。在一些实施例中，预览提示信息130上显示有“已推送”，本申请对此不加以限定。

可选地，用户可通过预览提示信息130上的手动推送，自行将小程序推送至宿主程序进行预览。可选地，手动推送可以是用户通过复制小程序的链接至宿主程序中打开该小程序的预览界面，或者，用户通过生成与小程序的预览界面对应的图形码，调用终端中的摄像头或宿主程序中的扫描功能对图形码进行扫描打开该预览界面。本申请对此不加以限定。

图14示出了本申请一个示例性实施例提供的在终端上的小程序的预览界面示意图。小程序预览界面200上显示有：图片201、题目202和内容203。在一个示例中，图片201是书籍的封面，题目202是书籍名字(比如，小张历险记)，内容203是关于书籍内容简介或观后感(比如，这是值得推荐的一本书)。

可选地，在小程序预览界面200上还包括其他数据字段与控件组件进行绑定后显示的内容。示意性的，在小程序预览界面200上显示有六项内容，该六项内容是六组数据字段和相应的控件组件绑定后生成的内容。

可选地，小程序还包括下一级程序界面，下一级程序界面是目标基础UI控件被触发后显示的程序界面，用户对下一级程序界面进行制作，图15示出了本申请一个示例性实施例提供的制作下一级程序界面的制作界面示意图。在制作下一级程序界面的制作界面18上显示有：已完成的小程序界面200、下一级程序界面201、属性选项106、绑数据选项107、删除选项108、操作选项111、换图选项112和预览控件129。

可选地，已完成的小程序界面200是如图14所示的小程序界面。可选地，用户通过点击该小程序界面200生成下一级程序界面，或者，通过添加列表选项模版(图中未示出)生成下一级程序界面，列表选项模版是指针对小程序的界面或布局进行设置的模版或样本。在一个示例中，用户点击小程序界面200生成下一级程序界面201。可选地，用户可对该程序界面201命名为页面1。操作选项111用于对该小程序界面201进行编辑，或者，对该小程序界面201进行自定义设置。示意性的，用户选择操作选项111进入小程序自定义设置界面。换图选项112用于对小程序中的图片进行更改，可选地，通过可视化制作程序平台调用终端中的本地图库或相册更改图片，或者，通过连接至网络，从网络上获取图片来对小程序中的图片进行更改，或者，通过接收图片文件来对小程序中的图片进行更改。

用户通过绑数据选项107对下一级程序界面107进行数据绑定操作，结合图16对该过程进行说明。图16示出了本申请一个示例性实施例提供的对下一级程序界面进行数据绑定的界面示意图。在数据绑定界面19上显示有：已完成的小程序界面200、下一级程序界面201、图片控件组件202、绑定页面入参203、删除选项108、操作选项111、换图选项112和预览控件129。

可选地，用户点击图片控件组件202，显示绑数据选项107，用户点击绑数据选项107，显示绑定页面入参203。可选地，在绑定页面入参203上显示有：无绑定选项2031和图片数据绑定字段选项2032。可选地，在绑定页面入参203上还可以显示有题目绑定数据字段、内容绑定数据字段、视频绑定数据字段和动画绑定数据字段中的至少一项。在一个示例中，用户选择无绑定选项2031，此时，图片控件组件202未与任何图片数据字段进行绑定，用户选择图片数据字段选项2032，则图片控件组件202与该图片数据字段选项2032对应的数据字段进行绑定，在图片控件组件202对应的位置处将显示图片。可选地，图片数据字段选项2032还包括数据字段对应的表格文件名称。

可选地，在用户完成对下一级程序界面201的数据绑定操作后，可视化制作程序平台将目标控件组件上绑定的数据字段，自动绑定至下一级程序界面中相应的控件组件。

示意性的，用户点击如图14所示的小程序界面上的一个列表选项时，比如用户点击第一列表选项(对应的是“小张历险记”一栏)，将跳转至下一级程序界面(也即从首页界面跳转至页面1)，第一列表选项对应的目标控件组件与数据字段进行绑定后，将自动绑定至下一级程序界面201中相对应的控件组件(即显示已绑定数据的下一级程序界面201，也即显示详情页)。

图17示出了本申请一个示例性实施例提供的下一级程序界面的预览界面示意图。该预览界面20上显示有：已完成的小程序界面200、下一级程序界面201、图片控件组件202、预览提示信息204和预览控件129。

可选地，用户选择预览控件129对该下一级程序界面201进行预览。预览提示信息204用于提示用户小程序已推送至宿主程序中，可选地，用户可以选择手动推送的方式将下一级程序界面201推送至宿主程序中，该过程与推送小程序界面(即首页界面)的过程一致，此处不再赘述。

图18示出了本申请一个示例性实施例提供的终端上的下一级程序界面的示意图。在下一级程序界面201上显示有图片210、题目211和内容212。可选地，用户点击小程序的首页界面上的第一列表项(如图14所示，第一列表项对应的题目是小张历险记)，页面将跳转至该下一级程序界面201(即页面1，在页面1上显示有关于“小张历险记”的具体内容，比如，这是值得推荐的一本书，讲述了小张在旅途中的故事)。

在接收到小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，在数据绑定操作将目标基础UI控件与数据源进行绑定之后，可选地，用户可以选择生成小程序的程序代码。可视化制作程序平台根据小程序的程序界面上的基础UI控件，生成小程序的视图层代码，示意性的，根据图片UI控件组件，生成小程序的视图层代码；根据小程序的程序界面上的基础UI控件绑定的数据源，生成小程序的逻辑层代码，示意性的，根据图片UI控件组件上绑定的图片数据字段，生成小程序的逻辑代码；根据视图层代码和逻辑层代码，生成小程序的程序包，然后，将小程序的程序包发送至宿主程序中进行运行和预览操作中的至少一项，或者，将小程序的程序包发送至宿主程序的程序平台进行审核或发布。

示意性的，可视化制作程序平台确定需要生成代码的列表模板组件，递归生成该图片UI控件组件对应的标签语言(ML，Markup Language)代码，并且为列表模板组件添加表示循环语句的代码(比如，循环语句代码：for语句)，利用表示循环语句的代码将属性值与一个数组进行绑定，即可使用数组中的各项数据重复渲染该列表模板组件，属性值为绑定的数据表的名称或数据字段对应的名称；可视化制作程序平台确定需要生成代码的UI控件组件，递归生成每个UI控件组件以及对应的ML代码，检查UI控件组件是否绑定了数据字段，若该UI控件组件绑定了数据字段，添加数据字段的名称至ML代码中。列表项模板组件是指小程序界面中能够容纳数据的结构或框架对应的模板组件；递归生成是指程序在运行时直接或间接地调用自身的程序，只需要少量的程序代码就能够把复杂的问题转化为一个与原问题相似的简单的问题来求解。

示意性的，可视化制作程序平台将被绑定的数据表的格式转换成JSON(JavaScript Object Notation,JS对象简谱，即JS(JavaScript)对象简谱)格式，该格式采用独立于编程语言的文本格式来存储和表示数据，方便用户阅读和编写，计算机更容易生成该格式的文件或将该格式的文件进行解析。可视化制作程序平台将转换成JSON格式的数据表置入页面逻辑代码对应的数据对象中，在将小程序的程序包推送至宿主程序运行时，用户可以看到绑定数据字段的列表模版组件一起被渲染成了实际的列表(即小程序的页面)。渲染是指使用代码将列表项或基础UI控件和对应的数据转变成相应的程序中显示的内容。

示意性的，从列表项创建跳转到新页面的关系时，可视化制作程序平台若检测到列表项已绑定数据字段，则在表示跳转页面对应的代码后加上被绑定的数据字段，在与绑定交互类型的代码(比如，bindtap代码)对应的事件响应函数中读取数据字段的索引，根据该索引获取实际的新页面对应的数据字段，调用设置数据(setData函数，是指将数据从逻辑层发送到视图层)方法将该数据字段刷新到新页面上。

针对于具备专业知识的开发人员，可选择生成小程序的程序代码，通过修改对应的代码来修改小程序的内容。

图19示出了本申请一个示例性实施例提供的逻辑编排的界面示意图。如图19的(a)所示，在逻辑编排界面21上显示有：代码显示区域300、图片UI控件组件104。用户在该代码显示区域300进行代码编辑时，在从当前页面跳转至下一页面时，或者，查看目标UI控件的属性的情况下，按照相关的代码编辑方法来操作，则需要用户将目标UI控件的可能实现的各个功能所对应的代码进行编辑，若用户不具备编辑代码的专业知识，则会造成代码编辑上的困难。

在一个示例中，当接收到用户对目标UI控件组件的触发操作时，可视化制作程序获取该目标UI控件组件对应的功能选项(比如，属性选项106、绑数据选项107、删除选项108)，代码显示区域300自动键入该目标UI控件组件对应的功能代码，即在需要键入功能代码的一行代码中自动键入当前编辑的目标UI控件组件的相关的功能代码(比如，功能function代码)，为具有一定代码编辑能力的用户提供了便利。

可选的，在接收用户对目标UI控件组件的触发操作之前，还包括接收对需要键入目标UI控件组件对应的功能代码时在代码区域产生的触发操作。可选的，对目标UI控件组件的触发操作包括对目标UI控件组件的单击操作、双击操作等，本申请实施例对此不作限定。

示意性的，如图19的(b)所示，代码显示区域300中，变量区301所需键入的内容为当前目标UI控件组件的功能代码，在接收到用户对变量区301的点击操作后，等待接收用户对目标UI控件组件的点击操作；在接收到用户对图片UI控件组件104的点击操作后，可视化制作程序将显示图片UI控件组件对应的功能选项，比如，属性选项106、绑数据选项107、删除选项108、操作选项111和换图选项112。此时变量区301将自动键入并显示该图片UI控件组件104对应的功能代码，而无需用户在变量区301手动键入图片UI控件组件104的功能代码。

可选地，用户在小程序制作完成后，在确认所制作的小程序内容无误后，可以将小程序发送至宿主程序中。示意性的，用户点击提交控件，可视化制作程序的小程序制作界面在接收到提交控件上的提交操作时，将小程序的程序包发送至宿主程序的程序平台进行审核或发布。在一些实施例中，提交控件也被命名为提交选项、上传选项，本申请对此不加以限定。可选地，在审核通过后，该小程序可被其他用户使用。

图20示出了本申请一个示例性实施例提供的终端的结构框图。用户终端中安装和运行有宿主程序162和小程序164。该宿主程序162可以是即时通讯程序、社交程序、支付程序中的任意一种。本申请中以终端是即时通讯程序来举例说明。小程序是依赖宿主程序162运行的程序，小程序可以为多个，其中一个为用户制作的小程序。用户通过宿主程序162进入该被制作的小程序164，可选地，用户制作的小程序需要获取用户的信息(比如，用户的帐号、通讯号码、地理位置等)，或者，不需要获取用户的信息。

宿主程序162是用户制作的小程序164的应用程序，为用户制作的小程序164的实现提供环境。宿主程序162是原生应用程序。原生应用程序是可直接运行于操作***161的应用程序。宿主程序162可以是社交应用程序、专门支持制作小程序164的专用应用程序、文件管理应用程序、邮件应用程序或者游戏应用程序等。社交应用程序包括即时通讯应用(例如，微信、QQ等)、社交网站(Social Network Service，SNS)应用或者直播应用等。小程序则是可在宿主程序提供的环境中运行的应用程序。小程序可以是社交应用程序、文件管理应用程序、邮件应用程序或者游戏应用程序等，示意性的，以小程序是用户制作的小程序164为例进行说明。宿主程序162可以是微信程序(WeChat)。

小程序逻辑层单元164b和相应的小程序视图层单元164a用于实现小程序实例。一个小程序可由一个小程序逻辑层单元164b以及至少一个小程序视图层单元164a实现。小程序视图层单元164a和小程序页面可以是一一对应关系。

小程序视图层单元164a用于组织小程序的视图并渲染。小程序逻辑层单元164b用于处理小程序及相应的小程序页面的数据处理逻辑。单元可以是进程或者线程，小程序视图层单元164a如小程序视图层线程，小程序逻辑层单元164b如小程序逻辑层线程。小程序逻辑层单元164b可运行于虚拟机中。小程序视图层单元164a和小程序逻辑层单元164b可通过宿主程序原生单元162a中转通信，宿主程序原生单元162a是宿主程序162与小程序通信的接口，宿主程序原生单元162a可以是宿主程序162自身的线程或进程。各小程序页面的属于程序包的页面逻辑代码，可由小程序逻辑层单元164b在启动时进行注册，并在需要该页面逻辑代码处理数据时执行注册的页面逻辑代码。

本申请实施例描述的方法、***以及业务场景是为了更加清楚地说明本申请实施例的技术方案，并不构成对本申请实施例提供的技术方案的限定，本领域普通技术人员可知，随着技术的演变和新业务场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

以下为本申请的装置实施例，对于装置实施例中未详细描述的细节，可以结合参考上述方法实施例中相应的记载，本文不再赘述。

图21示出了本申请的一个示例性实施例提供的小程序的数据绑定装置的结构示意图。该装置可以通过软件、硬件或者两者的结合实现成为终端的全部或一部分，该装置包括：显示模块2110、接收模块2120、获取模块2130和控制模块2140，其中，接收模块2120是可选的模块。

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

接收模块2120，用于在接收到被选择的基础UI控件上的用户操作时，在编辑区中根据被选择的基础UI控件编辑得到小程序的程序界面；

获取模块2130，用于获取数据源；

所述接收模块2120，还用于在接收到小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据数据绑定操作将目标基础UI控件与数据源进行绑定，数据源用于供目标基础UI控件进行显示。

在一个可选的实施例中，基础UI控件对应有m个控件组件，数据源包括m个数据字段，m为大于1的整数；所述显示模块2110，还用于在接收到数据绑定操作时，显示按照第一排列顺序将m个数据字段与m个控件组件进行分别绑定的绑定预览信息；所述显示模块2110，还用于在接收到重新排列操作时，显示按照第i+1排列顺序将m个数据字段与m个控件组件进行分别绑定的绑定预览信息，第i+1排列顺序是不同于第i排列顺序的排列顺序，i的起始值为1，第i排列顺序是随机生成的或预先设置的；所述接收模块2120，还用于在接收到确认绑定操作时，将m个数据字段与m个控件组件进行分别绑定。

在一个可选的实施例中，所述控制模块2140，还用于生成m个数据字段的全部排列顺序；所述接收模块2120，还用于在接收到重新排列操作时，从全部排列顺序中随机选择出不同于第i排列顺序的一组排列顺序，确定为第i+1排列顺序；所述显示模块2110，还用于显示按照第i+1排列顺序将m个数据字段与m个控件组件进行分别绑定的绑定预览信息。

在一个可选的实施例中，所述获取模块2130，还用于按照第i+1排列顺序读取m个数据字段中的第j个绑定字段以及字段类型，1≤j≤m；所述控制模块2140，还用于在m个控件组件中确定出满足绑定条件的目标控件组件，绑定条件包括：控件组件尚未绑定数据字段；或控件组件与第j个字段的字段类型匹配，或，控件组件尚未绑定数据字段且与第j个字段的字段类型匹配；将目标控件组件和第j个数据字段进行绑定；所述显示模块2110，还用于在m个控件组件均绑定后，显示将m个数据字段与m个控件组件进行分别绑定的绑定预览信息。

在一个可选的实施例中，所述接收模块2120，还用于接收在目标基础UI控件上的目标控件组件上的修改绑定操作；所述显示模块2110，还用于显示目标控件组件对应的至少一个候选数据字段，候选数据字段是m个数据字段中字段类型与目标控件组件相匹配的数据字段；所述控制模块2140，还用于在接收到选择操作时，将至少一个候选数据字段中被选择的数据字段与目标控件组件进行绑定。

在一个可选的实施例中，小程序还包括下一级程序界面，下一级程序界面是目标基础UI控件被触发后显示的程序界面，所述控制模块2140，还用于将目标控件组件上绑定的数据字段，自动绑定至下一级程序界面中相对应的控件组件。

在一个可选的实施例中，所述显示模块2110，还用于显示第一表格文件；所述接收模块2120，还用于接收添加操作，添加操作用于将第一表格文件添加至可视化制作程序中；或者，所述接收模块2120，还用于接收程序调用操作，程序调用操作用于在可视化制作程序中对表格应用程序进行调用，表格应用程序中包括第二表格文件；或者，所述接收模块2120，还用于通过短距离无线通讯技术接收第三表格文件。

在一个可选的实施例中，所述控制模块2140，还用于根据小程序的程序界面上的基础根据小程序的程序界面上的基础UI控件，生成小程序的视图层代码；根据小程序的程序界面上的基础UI控件所绑定的数据源，生成小程序的逻辑层代码；根据视图层代码和逻辑层代码，生成小程序的程序包。

在一个可选的实施例中，小程序的制作界面还包括：预览控件；所述接收模块2120，还用于在接收到预览控件上的预览操作时，将小程序的程序包推送至宿主程序中进行运行和/或预览。

在一个可选的实施例中，小程序的制作界面还包括：提交控件；所述接收模块2120，还用于在接收到提交控件上的提交操作时，将小程序的程序包发送至宿主程序的程序平台进行审核或发布。

下面是对本申请应用的计算机设备进行说明，请参考图22，其示出了本申请一个示例性实施例提供的计算机设备2200的结构框图。该计算机设备2200可以是便携式移动终端，比如：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio LayerIII，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group AudioLayer IV，动态影像专家压缩标准音频层面4)播放器。计算机设备2200还可能被称为用户设备、便携式终端等其他名称。

通常，计算机设备2200包括有：处理器2201和存储器2202。

处理器2201可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器2201可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器2201也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器2201可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器2201还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器2202可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是有形的和非暂态的。存储器2202还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器2202中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器2201所执行以实现本申请中提供的小程序的数据绑定方法。

在一些实施例中，计算机设备2200还可选包括有：***设备接口2203和至少一个***设备。具体地，***设备包括：射频电路2204、触摸显示屏2205、摄像头2206、音频电路2207、定位组件2208和电源2209中的至少一种。

***设备接口2203可被用于将I/O(Input/Output，输入/输出)相关的至少一个***设备连接到处理器2201和存储器2202。在一些实施例中，处理器2201、存储器2202和***设备接口2203被集成在同一芯片或电路板上；在一些其他实施例中，处理器2201、存储器2202和***设备接口2203中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路2204用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路2204通过电磁信号与通信网络以及其他通信设备进行通信。射频电路2204将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路2204包括：天线***、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路2204可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G，或3G，或4G，或5G，或它们的组合)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路2204还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

触摸显示屏2205用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。触摸显示屏2205还具有采集在触摸显示屏2205的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器2201进行处理。触摸显示屏2205用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，触摸显示屏2205可以为一个，设置计算机设备2200的前面板；在另一些实施例中，触摸显示屏2205可以为至少两个，分别设置在计算机设备2200的不同表面或呈折叠设计；在一些实施例中，触摸显示屏2205可以是柔性显示屏，设置在计算机设备2200的弯曲表面上或折叠面上。甚至，触摸显示屏2205还可以设置成非矩形的不规则图形，也即异形屏。触摸显示屏2205可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(OrganicLight-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件2206用于采集图像或视频。可选地，摄像头组件2206包括前置摄像头和后置摄像头。通常，前置摄像头用于实现视频通话或自拍，后置摄像头用于实现照片或视频的拍摄。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能，主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能。在一些实施例中，摄像头组件2206还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路2207用于提供用户和计算机设备2200之间的音频接口。音频电路2207可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器2201进行处理，或者输入至射频电路2204以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在计算机设备2200的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器2201或射频电路2204的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路2207还可以包括耳机插孔。

定位组件2208用于定位计算机设备2200的当前地理位置，以实现导航或LBS(Location Based Service，基于位置的服务)。定位组件2208可以是基于美国的GPS(Global Positioning System，全球定位***)、中国的北斗***或俄罗斯的伽利略***的定位组件。

电源2209用于为计算机设备2200中的各个组件进行供电。电源2209可以是交流电、直流电、一次性电池或可充电电池。当电源2209包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，计算机设备2200还包括有一个或多个传感器2210。该一个或多个传感器2210包括但不限于：加速度传感器2211、陀螺仪传感器2212、压力传感器2213、指纹传感器2214、光学传感器2215以及接近传感器2216。

加速度传感器2211可以检测以计算机设备2200建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器2211可以用于检测重力加速度在三个坐标轴上的分量。处理器2201可以根据加速度传感器2211采集的重力加速度信号，控制触摸显示屏2205以横向视图或纵向视图进行用户界面的显示。加速度传感器2211还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器2212可以检测计算机设备2200的机体方向及转动角度，陀螺仪传感器2212可以与加速度传感器2211协同采集用户对计算机设备2200的3D动作。处理器2201根据陀螺仪传感器2212采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器2213可以设置在计算机设备2200的侧边框和/或触摸显示屏2205的下层。当压力传感器2213设置在计算机设备2200的侧边框时，可以检测用户对计算机设备2200的握持信号，根据该握持信号进行左右手识别或快捷操作。当压力传感器2213设置在触摸显示屏2205的下层时，可以根据用户对触摸显示屏2205的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器2214用于采集用户的指纹，以根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器2201授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器2214可以被设置计算机设备2200的正面、背面或侧面。当计算机设备2200上设置有物理按键或厂商Logo时，指纹传感器2214可以与物理按键或厂商Logo集成在一起。

光学传感器2215用于采集环境光强度。在一个实施例中，处理器2201可以根据光学传感器2215采集的环境光强度，控制触摸显示屏2205的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏2205的显示亮度；当环境光强度较低时，调低触摸显示屏2205的显示亮度。在另一个实施例中，处理器2201还可以根据光学传感器2215采集的环境光强度，动态调整摄像头组件2206的拍摄参数。

接近传感器2216，也称距离传感器，通常设置在计算机设备2200的正面。接近传感器2216用于采集用户与计算机设备2200的正面之间的距离。在一个实施例中，当接近传感器2216检测到用户与计算机设备2200的正面之间的距离逐渐变小时，由处理器2201控制触摸显示屏2205从亮屏状态切换为息屏状态；当接近传感器2216检测到用户与计算机设备2200的正面之间的距离逐渐变大时，由处理器2201控制触摸显示屏2205从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图21中示出的结构并不构成对计算机设备2100的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

本申请还提供了一种计算机设备，该计算机设备包括：处理器和存储器，该存储器中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现上述各方法实施例提供的小程序的数据绑定方法。

本申请还提供了一种计算机可读存储介质，该存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由所述处理器加载并执行以实现上述各方法实施例提供的小程序的数据绑定方法。

应当理解的是，在本文中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

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

Claims (13)

1.一种小程序的数据绑定方法，其特征在于，所述小程序是依赖于宿主程序运行的程序，所述方法包括：

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

在接收到被选择的基础UI控件上的用户操作时，在所述编辑区中根据所述被选择的基础UI控件编辑得到所述小程序的程序界面；

获取数据源；

在接收到所述小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据所述数据绑定操作将所述目标基础UI控件与所述数据源进行绑定，所述数据源用于供所述目标基础UI控件进行显示。

2.根据权利要求1所述的方法，其特征在于，所述基础UI控件对应有m个控件组件，所述数据源包括m个数据字段，m为大于1的整数；

所述根据所述数据绑定操作将所述目标基础UI控件与所述数据源进行绑定，包括：

在接收到所述数据绑定操作时，显示按照第一排列顺序将所述m个数据字段与所述m个控件组件进行分别绑定的绑定预览信息；

在接收到重新排列操作时，显示按照第i+1排列顺序将所述m个数据字段与所述m个控件组件进行分别绑定的绑定预览信息，所述第i+1排列顺序是不同于第i排列顺序的排列顺序，i的起始值为1，所述第i排列顺序是随机生成的或预先设置的；

在接收到确认绑定操作时，将所述m个数据字段与所述m个控件组件进行分别绑定。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

生成所述m个数据字段的全部排列顺序；

所述在接收到重新排列操作时，显示按照第i+1排列顺序将所述m个数据字段与所述m个控件组件进行分别绑定的绑定预览信息，包括：

在接收到所述重新排列操作时，从所述全部排列顺序中随机选择出不同于所述第i排列顺序的一组排列顺序，确定为所述第i+1排列顺序；

显示按照所述第i+1排列顺序将所述m个数据字段与所述m个控件组件进行分别绑定的绑定预览信息。

4.根据权利要求3所述的方法，其特征在于，所述显示按照所述第i+1排列顺序将所述m个数据字段与所述m个控件组件进行分别绑定的绑定预览信息，包括：

按照所述第i+1排列顺序读取所述m个数据字段中的第j个绑定字段以及字段类型，1≤j≤m；

在所述m个控件组件中确定出满足绑定条件的目标控件组件，所述绑定条件包括：所述控件组件尚未绑定数据字段；或，所述控件组件与所述第j个字段的字段类型匹配；或，所述控件组件尚未绑定数据字段且与所述第j个字段的字段类型匹配；

将所述目标控件组件和所述第j个数据字段进行绑定；

在所述m个控件组件均绑定后，显示将所述m个数据字段与所述m个控件组件进行分别绑定的绑定预览信息。

5.根据权利要求2至4任一所述的方法，其特征在于，所述方法还包括：

接收在所述目标基础UI控件上的目标控件组件上的修改绑定操作；

显示所述目标控件组件对应的至少一个候选数据字段，所述候选数据字段是所述m个数据字段中字段类型与所述目标控件组件相匹配的数据字段；

在接收到选择操作时，将所述至少一个候选数据字段中被选择的数据字段与所述目标控件组件进行绑定。

6.根据权利要求2至4任一所述的方法，其特征在于，所述小程序还包括下一级程序界面，所述下一级程序界面是所述目标基础UI控件被触发后显示的程序界面，所述方法还包括：

将所述目标控件组件上绑定的数据字段，自动绑定至所述下一级程序界面中相对应的控件组件。

7.根据权利要求1至4任一所述的方法，其特征在于，所述获取数据源，包括：

显示第一表格文件；

接收添加操作，所述添加操作用于将所述第一表格文件添加至所述可视化制作程序中；

或者，

接收程序调用操作，所述程序调用操作用于在所述可视化制作程序中对表格应用程序进行调用，所述表格应用程序中包括第二表格；

或者，

通过短距离无线通讯技术接收第三表格文件。

8.根据权利要求1至4任一所述的方法，其特征在于，所述在接收到所述小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据所述数据绑定操作将所述目标基础UI控件与所述数据源进行绑定之后，还包括：

根据所述小程序的程序界面上的所述基础UI控件，生成所述小程序的视图层代码；

根据所述小程序的程序界面上的所述基础UI控件所绑定的数据源，生成所述小程序的逻辑层代码；

根据所述视图层代码和所述逻辑层代码，生成所述小程序的程序包。

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

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

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

所述方法还包括：

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

11.一种小程序的数据绑定装置，其特征在于，所述小程序是依赖于宿主程序运行的程序，所述装置包括：

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

接收模块，用于在接收到被选择的基础UI控件上的用户操作时，在所述编辑区中根据所述被选择的基础UI控件编辑得到所述小程序的程序界面；

获取模块，用于获取数据源；

所述接收模块，还用于在接收到所述小程序的程序界面上的目标基础UI控件对应的数据绑定操作时，根据所述数据绑定操作将所述目标基础UI控件与所述数据源进行绑定，所述数据源用于供所述目标基础UI控件进行显示。

12.一种计算机设备，其特征在于，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由所述处理器加载并执行以实现如权利要求1至10任一所述的小程序的数据绑定方法。

13.一种计算机可读存储介质，其特征在于，所述可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如权利要求1至10任一所述的小程序的数据绑定方法。

Images