CN111045672B - 界面组件设置方法、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种界面组件设置方法、计算机设备和存储介质。所述方法包括：当监测到作用于界面的组件添加指示操作时，在界面添加对应组件添加指示操作的组件；对组件绑定监听事件，并采用监听事件监听输入操作；获取输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到组件中。采用本方法可以实现用户实时添加组件的需求，提高了界面功能的多样性。

Description

界面组件设置方法、计算机设备和存储介质

技术领域

本申请涉及智能终端技术领域，特别是涉及一种界面组件设置方法、计算机设备和存储介质。

背景技术

组件是图形用户界面的基本组成部分，以图形化的方式显示在屏幕上并能与用户交互，包括输入框、图片、按钮等。例如APP(Application应用程序)的显示界面、网页的显示界面均可设计组件。

然而，传统的界面设计都是固定的，开发人员定好了界面上使用的组件，当用户进入界面后看到的界面是一样的，即，不同用户使用同一款APP、或者不同用户使用同一个网页，界面上的组件都是固定的，功能比较单一。

发明内容

基于此，有必要针对传统界面功能单一的问题，提供一种提高功能多样性的界面组件设置方法、计算机设备和存储介质。

一种界面组件设置方法，所述方法包括：

当监测到作用于界面的组件添加指示操作时，在所述界面添加对应所述组件添加指示操作的组件；

对所述组件绑定监听事件，并采用所述监听事件监听输入操作；

获取所述输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到所述组件中。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

当监测到作用于界面的组件添加指示操作时，在所述界面添加对应所述组件添加指示操作的组件；

对所述组件绑定监听事件，并采用所述监听事件监听输入操作；

获取所述输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到所述组件中。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

当监测到作用于界面的组件添加指示操作时，在所述界面添加对应所述组件添加指示操作的组件；

对所述组件绑定监听事件，并采用所述监听事件监听输入操作；

获取所述输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到所述组件中。

上述界面组件设置方法、计算机设备和存储介质，在监测到作用于界面的组件添加指示操作时，在界面添加对应组件添加指示操作的组件，给组件绑定监听事件并监听输入操作，获取输入操作输入的信息并进行数据搜索，采用搜索到的数据填充到组件，从而给组件动态绑定数据。通过响应于组件添加指示操作，实时添加组件，并给组件动态绑定数据，对应地，用户在显示的界面上执行组件添加指示操作，即可在界面上添加组件，可以实现用户实时添加组件的需求，提高了界面功能的多样性。

附图说明

图1为一个实施例中界面组件设置方法的流程示意图；

图2为一个实施例中获取输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到组件中的流程示意图；

图3为另一个实施例中获取输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到组件中的流程示意图；

图4为另一个实施例中界面组件设置方法的流程示意图；

图5为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

在一个实施例中，如图1所示，提供了一种界面组件设置方法，以该方法应用于终端为例进行说明，包括以下步骤：

S110：当监测到作用于界面的组件添加指示操作时，在界面添加对应组件添加指示操作的组件。

组件添加指示操作是一种用于指示添加组件的交互操作。例如，组件添加指示操作可以包括作用于界面指定区域的点击操作、画圈操作、双点触控操作、遥控操作等。一种组件添加指示操作对应一个组件，不同的组件添加指示操作对应的组件不同。具体地，可以是约定不同操作类型的交互操作为不同的组件添加指示操作，例如，点击操作和画圈操作是不同的组件添加指示操作。当然，也可以是约定一种操作类型、但操作作用点不同的交互操作为不同的组件添加指示操作，例如，作用于A区域的点击操作和作用B区域的点击操作为两种不同的组件添加指示操作。

具体地，当用户需要添加组件时，用户可以在界面上执行要添加的组件所对应的组件添加指示操作，终端根据当前监测到的组件添加指示操作，在界面添加对应的组件。

S130：对组件绑定监听事件，并采用监听事件监听输入操作。

具体地，可以是给生成的组件绑定用于监听用户输入操作的监听事件。

S150：获取输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到组件中。

监听到输入操作，终端可以读取输入操作对应输入的信息。具体地，根据输入的信息进行数据搜索，可以采用精确匹配或模糊匹配的方法进行数据搜索。将搜索得到的数据填充到组件中，从而完成数据的动态绑定。

上述界面组件设置方法中，在监测到作用于界面的组件添加指示操作时，在界面添加对应组件添加指示操作的组件，给组件绑定监听事件并监听输入操作，获取输入操作输入的信息兵进行数据搜索，采用搜索到的数据填充到组件，从而给组件动态绑定数据。通过响应于组件添加指示操作，实时添加组件，并给组件动态绑定数据，对应地，用户在显示的界面上执行组件添加指示操作，即可在界面上添加组件，可以实现用户实时添加组件的需求，提高了界面功能的多样性。

上述界面组件设置方法可以应用于终端，用于对APP的显示界面、网页的显示界面或终端的系统显示界面等进行组件设置，使得界面功能多样化，灵活性强。其中，终端包括但不限于是个人计算机、手机、平板、可穿戴智能设备等。

在一个实施例中，步骤S110之前还包括：响应于界面开启指示操作，显示界面。

界面开启指示操作是一种用于指示打开界面的交互操作。例如，界面开启指示操作可以是用户点击APP图标的操作，用户点击APP图标，表示需要打开APP以显示APP的界面。界面开启指示操作还可以是用户点击进入网页的操作。终端响应于界面开启指示操作，显示界面，以便监测作用于所显示的界面上的组件添加指示操作。

在一个实施例中，界面包括组件添加按钮；组件添加指示操作包括作用于组件添加按钮的点击操作。

组件添加按钮是显示在界面上的虚拟按钮，终端在显示界面的同时，在界面上显示组件添加按钮。具体地，组件添加按钮的数量可以为多个，作用于不同组件添加按钮的点击操作为不同的组件添加指示操作，所对应的组件不同。终端监测到作用于组件添加按钮的点击操作时，在界面添加对应的组件。例如，界面上的组件添加按钮有两种，若用户对第一种组件添加按钮执行点击操作，则终端在界面添加第一种组件；若用户对第二种组件添加按钮执行点击操作，则终端在界面添加第二种组件。如此，用户只需要点击组件添加按钮，可以实现组件的一键新增，操作方便。

可以理解，在其他实施例中，组件添加指示操作还可以是其他操作类型的交互操作，例如，可以是作用于组件添加按钮的双击操作。在其他实施例中，界面也可以不包括组件添加按钮，对应地，组件添加指示操作可以是作用于界面内的交互操作。

在一个实施例中，步骤S110包括：当监测到作用于界面的组件添加指示操作时，生成对应组件添加指示操作的组件并添加至组件的父容器，将组件显示在界面；记录组件的添加次数，生成包含添加次数的字符串作为组件的唯一标识。

父容器是用来包含目标元素的容器，一般是界面中最外层的组件，相当于一个载体，有这个载体，添加的组件才能显示。组件的父容器可以根据当前显示的界面确定，在同一个界面生成的组件对应的父容器可以是同一个。将生成的组件添加至组件的父容器，从而可以显示组件。具体地，可以通过append方法，把动态生成的组件添加到父容器中。具体地，各不同的组件添加指示操作对应的组件可以提前在软件代码中写好，需要生成组件的时候，直接调用即可。

终端可以将字符串中预设位号的数值设置为当前记录的添加次数，字符串中其他位号的数值生成规则可以预先设定好，例如其他位号可以是固定不变的数值，也可以是按照生成字符串的先后顺序依次增加。生成字符串作为组件的唯一标识，唯一标识用于识别、选择、查找组件。通过记录组件的添加次数，根据添加次数生成组件的唯一标识，即便是添加的同一种组件而言，每次添加的组件对应的唯一标识不一样，便于区分。

例如，以界面包括组件添加按钮、组件添加指示操作包括作用于组件添加按钮的点击操作为例，设置一个常量来记录组件的添加次数，常量会从0开始，每点击一次组件添加按钮，常量就自增1，根据更改的常量生成字符串作为生成的组件的唯一标识，比如“div1”，其中数字“1”表示组件的添加次数，然后使用document.getElementById(‘div1’)的方法可以找到对应的组件，以此来进行组件的选择。

在一个实施例中，步骤S130中对组件绑定监听事件，具体可以是绑定propertychange事件。propertychange事件用来监听用户在动态生成的组件中的输入操作，通过propertychange事件来触发数据搜索的功能。例如，针对H5(HTML 5.0)编写的页面，可以给动态生成的组件绑定propertychange事件。可以理解，在其他实施例中，给组件绑定的监听事件也可以是其他类型的监听事件。

在一个实施例中，参考图2，步骤S150包括步骤S151至步骤S154。

S151：获取输入操作输入的信息，根据输入的信息在已缓存数据的本地数组中进行数据搜索。

其中，本地数组是缓存数据的数组，可以预先缓存有各个组件所需要的数据。具体地，终端可以采用精确匹配或模糊匹配的方法在已缓存数据的本地数组中进行数据搜索。

S152：若从已缓存数据的本地数组中搜索到数据，则根据搜索到的数据生成列表组件。

一般列表组件包括单项数据。从已缓存数据的本地数组中搜索到的数据可以有多项，具体地，可以是每一项数据对应一个列表组件的单项数据，多项数据对应列表组件的多个单项数据。例如，输入的信息可以是“空调”，搜索到的数据包括“变频空调”、“定频空调”，可以将“变频空调”作为一个单项数据，“定频空调”作为一个单项数据。

S153：将列表组件添加到组件的父容器中。

具体地，可以采用append方法将列表组件添加到组件的父容器中，以便显示列表组件。

S154：若已缓存数据的本地数组搜索无结果，则将输入的信息作为新增数据添加至本地数组。

已缓存数据的本地数组搜索无结果，即根据输入的信息在已缓存数据的本地数组进行数据搜索时，搜索不到数据。此时，将输入的信息作为新增数据添加至本地数组，以便后续使用。

通过采用本地数组缓存数据的方式，当需要进行数据搜索时，直接在本地数组进行数据搜索，不需要每次向服务器获取数据，可以减少每次访问服务器而带来的不必要的卡顿，减少服务器的压力。

进一步地，步骤S110之后、步骤S150之前，还包括预缓存步骤。预缓存步骤包括：调用服务器接口从服务器获取组件的待绑定数据；将组件的待绑定数据缓存在本地数组中。

其中，组件的待绑定数据是组件可能需要使用的数据，可以预先标记好组件的待绑定数据。具体地，终端通过服务器接口访问服务器，并获取服务器接口返回的组件的待绑定数据并缓存在本地数组中，从而后续可以直接在本地数组进行数据搜索。具体地，预缓存步骤与步骤S130的执行顺序可以按需设置，预缓存步骤可以是在步骤S130之前或之后执行，也可以是与步骤S130同时执行。

在另一个实施例中，参考图3，步骤S150包括步骤S156至步骤S158。

S156：获取输入操作输入的信息，根据输入的信息调用服务器接口访问服务器并获取数据。

具体地，服务器接口可以是API(Application Programming Interface应用程序编程接口)。

S157：根据获取的数据生成列表组件。

获取的数据可以包括多个单项数据，具体地，终端从获取的数据中提取列表组件的单项数据，并生成列表组件。比如，服务器接口返回的是“中国移动中国联通中国电信”，则可拆分为“中国移动”、“中国联通”、“中国电信”三个单项数据，生成包括这三个单项数据的列表组件。

S158：将列表组件添加到组件的父容器中。

通过输入的信息采用服务器接口，可以采用直接访问服务器的方式进行数据搜索。

在一个实施例中，列表组件包括多个单项数据。步骤S153或步骤S158包括：给列表组件中的各单项数据绑定click点击事件；将完成绑定后的列表组件添加至组件的父容器。

click点击事件是用来监听用户点击列表组件中各单项数据的操作，通过click点击事件来拿到列表组件中每一项的值，操作便利。

在一个实施例中，参考图4，界面组件设置方法还包括步骤S170：当监测到作用于界面的组件删除指示操作时，根据组件删除指示操作删除对应的组件。

其中，组件删除指示操作是用于指示删除组件的交互操作，与组件添加指示操作互为不同的交互操作。例如，组件删除指示操作可以包括作用于界面指定区域的点击操作、画圈操作、双点触控操作、遥控操作等。一种组件删除指示操作对应一个组件，不同的组件删除指示操作对应的组件不同。通过响应于组件删除指示操作，删除对应的组件，对应地，用户在显示的界面上执行组件删除指示操作，即可在界面上删除组件，可以实现用户实时删除组件的需求，进一步提高了界面功能的多样性。

在一个实施例中，界面包括组件删除按钮；组件删除指示操作包括作用于组件删除按钮的点击操作。

组件删除按钮是显示在界面上的虚拟按钮，终端在显示界面的同时，在界面上显示组件删除按钮。具体地，组件删除按钮的数量可以为多个，作用于不同组件删除按钮的点击操作为不同的组件删除指示操作，所对应的组件不同。终端监测到作用于组件删除按钮的点击操作时，在界面删除对应的组件。如此，用户可以对组件进行一键删除，操作便利。

在一个实施例中，组件对应有唯一标识，唯一标识为包含添加次数的字符串。对应地，根据组件删除指示操作删除对应的组件的步骤，包括：清除已缓存数据的本地数组，根据组件删除指示操作确定唯一标识，移除唯一标识对应的组件。

通过将本地数组中缓存的数据清空，并通过唯一标识来进行移除，删除便利。例如，“div1”为一个唯一标识，可以使用document.getElementById(‘div1’)的方法，找到组件，然后执行remove方法移除。

以上述界面组件设置方法应用于手机APP为例，当用户进入APP，点击进入某个界面，界面上显示组件添加按钮。用户点击其中一个组件添加按钮，可以动态生成组件并在界面上，对组件绑定监听事件，根据监听的输入操作的输入信息进行数据搜索并绑定到组件中。比如用户需要一个输入框，点击输入框对应的组件添加按钮，就可以在界面上显示输入框；当用户在输入框中输入某个关键字的时候，会自动在本地数组中进行数据搜索，根据搜索到的数据生成一个列表组件绑定在该输入框上，类似下拉框的样式，由用户点击选择需要的单项数据。又比如，用户需要一个图片，点击图片对应的组件添加按钮，生成图片的组件和一个用于输入框的组件并显示在界面；当用户在输入框中输入某个关键字，会自动在本地数组中搜索数据，根据搜索到的数据填充图片。同样的，用户需要别的组件可以点击另一个组件添加按钮继续生成组件和绑定数据。APP界面上有相应的组件删除按钮，用户点击组件删除按钮，可以进行删除组件的操作。

应该理解的是，虽然图1-4的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1-4中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种界面组件设置方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现前述的界面组件设置方法的步骤。

上述计算机设备，由于实现了前述的界面组件设置方法的步骤，同理，可提高界面功能的多样性。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现前述的界面组件设置方法的步骤。

上述计算机可读存储介质，由于实现了前述的界面组件设置方法的步骤，同理，可提高界面功能的多样性。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种界面组件设置方法，其特征在于，所述方法包括：

响应于界面开启指示操作，显示界面；

当监测到作用于界面的组件添加指示操作时，在所述界面添加对应所述组件添加指示操作的组件，所述组件添加指示操作包括作用于界面指定区域的点击操作、画圈操作、双点触控操作或遥控操作，不同的组件添加指示操作对应的组件不同；所述不同的组件添加指示操作对应的组件不同为：不同操作类型的交互操作为不同的组件添加指示操作，或者一种操作类型、但操作作用点不同的交互操作为不同的组件添加指示操作；

对所述组件绑定监听事件，并采用所述监听事件监听输入操作；

获取所述输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到所述组件中，从而给所述组件动态绑定数据。

2.根据权利要求1所述的方法，其特征在于，所述界面包括组件添加按钮；所述组件添加指示操作包括作用于所述组件添加按钮的点击操作。

3.根据权利要求1所述的方法，其特征在于，所述当监测到作用于界面的组件添加指示操作时，在所述界面添加对应所述组件添加指示操作的组件，包括：

当监测到作用于界面的组件添加指示操作时，生成对应所述组件添加指示操作的组件并添加至所述组件的父容器，将所述组件显示在所述界面；

记录所述组件的添加次数，生成包含所述添加次数的字符串作为所述组件的唯一标识。

4.根据权利要求1所述的方法，其特征在于，所述获取所述输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到所述组件中，包括：

获取所述输入操作输入的信息，根据输入的信息在已缓存数据的本地数组中进行数据搜索；

若从已缓存数据的本地数组中搜索到数据，则根据搜索到的数据生成列表组件；

将所述列表组件添加到所述组件的父容器中；

若已缓存数据的本地数组搜索无结果，则将输入的信息作为新增数据添加至所述本地数组。

5.根据权利要求4所述的方法，其特征在于，所述当监测到作用于界面的组件添加指示操作时，在所述界面添加对应所述组件添加指示操作的组件之后，所述获取所述输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到所述组件中之前，还包括：

调用服务器接口从服务器获取所述组件的待绑定数据；

将所述组件的待绑定数据缓存在所述本地数组中。

6.根据权利要求1所述的方法，其特征在于，所述获取所述输入操作输入的信息并进行数据搜索，将搜索得到的数据填充到所述组件中，包括：

获取所述输入操作输入的信息，根据输入的信息调用服务器接口访问服务器并获取数据；

根据获取的数据生成列表组件；

将所述列表组件添加到所述组件的父容器中。

7.根据权利要求4或6所述的方法，其特征在于，所述列表组件包括多个单项数据，所述将所述列表组件添加到所述组件的父容器中，包括：

给所述列表组件中的各单项数据绑定click点击事件；

将完成绑定后的列表组件添加至所述组件的父容器。

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

当监测到作用于所述界面的组件删除指示操作时，根据所述组件删除指示操作删除对应的组件。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至8中任一项所述的方法的步骤。

Images