CN111142853A - 用于语音对话平台的ui界面配置方法及系统 - Google Patents

Abstract

本发明实施例提供一种用于语音对话平台的UI界面配置方法。该方法包括：在UI配置页面提供JSON配置上传按钮，响应于JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；响应于JSON配置菜单中任一子配置节点的点击，UI编辑界面对子配置节点的JSON数据进行渲染，确定渲染结果进行展示，UI编辑界面还提供有对应于子配置节点的表单组件；响应于表单组件对JSON数据的修改，在渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。本发明实施例还提供一种用于语音对话平台的UI界面配置系统。本发明实施例增加了特殊的功能支持供多种形态的菜单，可以进行局部数据查看，JSON配置得到了更多表单组件支持，提高通用性与易用性。

Description

用于语音对话平台的UI界面配置方法及系统

技术领域

本发明涉及开发领域，尤其涉及一种用于语音对话平台的UI界面配置方法及系统。

背景技术

为了便于用户开发UI界面，通常会提供UI编辑器供用户操作。其简便的操作模式，提高了用户的使用效率。这些UI编辑器通常会接收用户上传一套定义好的JSON配置，即基于JSON配置的SCHEMA结构。这些组件通过渲染这个JSON配置数据，来展示一个可编辑的UI界面。通过这个可编辑的UI界面，用户能比较方便的操作一些实际上很复杂的数据。其优势就在于通过给用户呈现一个可视化的UI编辑界面，达到极大降低操作复杂数据的难度。

在实现本发明过程中，发明人发现相关技术中至少存在如下问题：

由于对于JSON数据的渲染展示方式的不同，UI编辑器缺少了支持查看局部数据的交互方式；

由于各UI编辑器对表单组件的支持情况不同，UI编辑器缺少一些特殊组件的支持；

由于UI编辑器只支持更改JSON文件内容，缺少能以可视化的方式调整JSON配置的功能。

发明内容

为了至少解决现有技术中屏幕适配是在程序运行起来后才进行，拖慢了程序的流畅性，而设计多套布局文件可能无法列举全所有的尺寸，并不能很好的做到适配，同时还会增加apk大小的问题。

第一方面，本发明实施例提供一种用于语音对话平台的UI界面配置方法，包括：

在UI配置页面提供JSON配置上传按钮，响应于所述JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；

响应于所述JSON配置菜单中任一子配置节点的点击，所述UI编辑界面对所述子配置节点的JSON数据进行渲染，确定渲染结果进行展示，所述UI编辑界面还提供有对应于所述子配置节点的表单组件，其中，所述表单组件用于编辑所述JSON数据；

响应于所述表单组件对所述JSON数据的修改，在所述渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。

第二方面，本发明实施例提供一种用于语音对话平台的UI界面配置系统，包括：

编辑界面生成程序模块，用于在UI配置页面提供JSON配置上传按钮，响应于所述JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；

数据配置程序模块，用于响应于所述JSON配置菜单中任一子配置节点的点击，所述UI编辑界面对所述子配置节点的JSON数据进行渲染，确定渲染结果进行展示，所述UI编辑界面还提供有对应于所述子配置节点的表单组件，其中，所述表单组件用于编辑所述JSON数据；

局部渲染程序模块，用于响应于所述表单组件对所述JSON数据的修改，在所述渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。

第三方面，提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例的用于语音对话平台的UI界面配置方法的步骤。

第四方面，本发明实施例提供一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现本发明任一实施例的用于语音对话平台的UI界面配置方法的步骤。

本发明实施例的有益效果在于：所提供的UI界面配置中增加了特殊的功能支持，JSON配置提供多种形态的菜单，JSON配置可以进行局部数据查看，JSON配置得到了更多表单组件支持。增强了在不同业务场景下的通用性，更加美观，提高用户的体验。对于JSON配置数据的可视化编辑方式，可以适用于绝大多数的业务场景，通用性与易用性都很强，可以支持很多业务场景的快速落地。

附图说明

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

图1是本发明一实施例提供的一种用于语音对话平台的UI界面配置方法的流程图；

图2是本发明一实施例提供的一种用于语音对话平台的UI界面配置系统的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示为本发明一实施例提供的一种用于语音对话平台的UI界面配置方法的流程图，包括如下步骤：

S11：在UI配置页面提供JSON配置上传按钮，响应于所述JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；

S12：响应于所述JSON配置菜单中任一子配置节点的点击，所述UI编辑界面对所述子配置节点的JSON数据进行渲染，确定渲染结果进行展示，所述UI编辑界面还提供有对应于所述子配置节点的表单组件，其中，所述表单组件用于编辑所述JSON数据；

S13：响应于所述表单组件对所述JSON数据的修改，在所述渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。

在本实施方式中，为语音对话平台的UI编辑器提供改造组件，增加解析JSON配置的折叠菜单，方便查看JSON配置的结构；增加查看整个JSON配置下局部数据块的功能；以及增加支持各种特殊的表单插件。

对于步骤S11，用户进入语音对话平台后，进入UI配置页面，UI配置页面提供了JSON配置上传按钮，当用户点击所述JSON配置上传按钮，进行JSON配置文件上传，语音对话平台接收到用户上传的JSON配置文件后，进行解析。生成JSON配置菜单，以及JSON配置的UI编辑界面。在JSON配置菜单中显示多个配置中的子配置节点。考虑到美观，可以将JSON配置菜单在UI配置页面内的左边区域，UI编辑界面在UI配置页面内的右边区域。

作为一种实施方式，所述JSON配置菜单的类型包括：树形菜单，用于支持所述子配置节点的折叠和展开。

在本实施方式中，JSON配置菜单可以配置为树形菜单，树形菜单便于对各子配置节点进行折叠，方便用户查看JSON配置的结构。

对于步骤S12，响应于用户对所述JSON配置菜单中任一个子配置节点的点击，在所述UI编辑界面对所述子配置节点的JSON数据进行渲染，将渲染的结果在UI编辑界面中进行展示。进一步地JSON还提供有对应于用户点击子配置节点的表单组件，通过给用户提供表单组件，让用户可以根据该表单组件对JSON数据进行编辑。

作为一种实施方式，所述UI编辑界面还提供有对应于所述子配置节点的表单组件包括：

查询与所述子配置节点相对应的表单组件，将所述相对应的表单组件在所述UI编辑界面中展示。

所述子配置的类型包括：Object对象、Array数组以及字段；

所述查询与所述子配置节点相对应的表单组件包括：查询与所述Object对象和/或Array数组和/或字段类型相对应的表单组件。

在本实施方式中，将JSON配置解析为Object对象，Array数组和常规的字段，对于不同类型数据增加不同类型的调整按钮，来可视化的配置JSON配置，更加便于用户的操作。

对于步骤S13，响应于用户通过所述表单组件对所述JSON数据的修改，在已经显示的渲染结果中对编辑后的JSON数据进行局部重新渲染，将局部渲染结果进行展示，通过API进行输出，暴露出具体的操作数据结果。

通过该实施方式可以看出，所提供的UI界面配置中增加了特殊的功能支持，JSON配置提供多种形态的菜单，JSON配置可以进行局部数据查看，JSON配置得到了更多表单组件支持。增强了在不同业务场景下的通用性，更加美观，提高用户的体验。对于JSON配置数据的可视化编辑方式，可以适用于绝大多数的业务场景，通用性与易用性都很强，可以支持很多业务场景的快速落地。

作为一种实施方式，在本实施例中，在所述响应于所述JSON配置的上传之后，所述方法包括：

查询所述JSON配置中暴露的接口，通过vue程序模块将所述暴露的接口封装成所述语音对话平台适配的接口，用于兼容其他平台的JSON配置。

在本实施方式中，考虑到兼容其他平台编辑的JSON配置可以在本方法的语音对话平台中使用，增加兼容层，由于JSON配置中，会暴露出相应的接口，通过对其暴露出的结构进行vue代码封装，并在此暴露接口，从而达到将其他平台的JSON配置封装成为自己组件的目的。

如图2所示为本发明一实施例提供的一种用于语音对话平台的UI界面配置系统的结构示意图，该系统可执行上述任意实施例所述的用于语音对话平台的UI界面配置方法，并配置在终端中。

本实施例提供的一种用于语音对话平台的UI界面配置系统包括：编辑界面生成程序模块11，数据配置程序模块12和局部渲染程序模块13。

其中，编辑界面生成程序模块11用于在UI配置页面提供JSON配置上传按钮，响应于所述JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；数据配置程序模块12用于响应于所述JSON配置菜单中任一子配置节点的点击，所述UI编辑界面对所述子配置节点的JSON数据进行渲染，确定渲染结果进行展示，所述UI编辑界面还提供有对应于所述子配置节点的表单组件，其中，所述表单组件用于编辑所述JSON数据；局部渲染程序模块13用于响应于所述表单组件对所述JSON数据的修改，在所述渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。

进一步地，所述数据配置程序模块用于：

查询与所述子配置节点相对应的表单组件，将所述相对应的表单组件在所述UI编辑界面中展示。

进一步地，所述子配置的类型包括：Object对象、Array数组以及字段；

所述查询与所述子配置节点相对应的表单组件包括：查询与所述Object对象和/或Array数组和/或字段类型相对应的表单组件。

进一步地，所述编辑界面生成程序模块，还用于：

查询所述JSON配置中暴露的接口，通过vue程序模块将所述暴露的接口封装成所述语音对话平台适配的接口，用于兼容其他平台的JSON配置。

进一步地，所述JSON配置菜单的类型包括：树形菜单，用于支持所述子配置节点的折叠和展开。

本发明实施例还提供了一种非易失性计算机存储介质，计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的用于语音对话平台的UI界面配置方法；

作为一种实施方式，本发明的非易失性计算机存储介质存储有计算机可执行指令，计算机可执行指令设置为：

在UI配置页面提供JSON配置上传按钮，响应于所述JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；

响应于所述JSON配置菜单中任一子配置节点的点击，所述UI编辑界面对所述子配置节点的JSON数据进行渲染，确定渲染结果进行展示，所述UI编辑界面还提供有对应于所述子配置节点的表单组件，其中，所述表单组件用于编辑所述JSON数据；

响应于所述表单组件对所述JSON数据的修改，在所述渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。

作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的方法对应的程序指令/模块。一个或者多个程序指令存储在非易失性计算机可读存储介质中，当被处理器执行时，执行上述任意方法实施例中的用于语音对话平台的UI界面配置方法。

非易失性计算机可读存储介质可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据装置的使用所创建的数据等。此外，非易失性计算机可读存储介质可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，非易失性计算机可读存储介质可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本发明实施例还提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例的用于语音对话平台的UI界面配置方法的步骤。

本申请实施例的客户端以多种形式存在，包括但不限于：

(1)移动通信设备:这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。这类终端包括:智能手机、多媒体手机、功能性手机，以及低端手机等。

(2)超移动个人计算机设备:这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括:PDA、MID和UMPC设备等，例如平板电脑。

(3)便携式娱乐设备:这类设备可以显示和播放多媒体内容。该类设备包括:音频、视频播放器，掌上游戏机，电子书，以及智能玩具和便携式车载导航设备。

(4)其他具有数据处理功能的电子装置。

在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”，不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种用于语音对话平台的UI界面配置方法，包括：

在UI配置页面提供JSON配置上传按钮，响应于所述JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；

响应于所述JSON配置菜单中任一子配置节点的点击，所述UI编辑界面对所述子配置节点的JSON数据进行渲染，确定渲染结果进行展示，所述UI编辑界面还提供有对应于所述子配置节点的表单组件，其中，所述表单组件用于编辑所述JSON数据；

响应于所述表单组件对所述JSON数据的修改，在所述渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。

2.根据权利要求1所述的方法，其中，所述UI编辑界面还提供有对应于所述子配置节点的表单组件包括：

查询与所述子配置节点相对应的表单组件，将所述相对应的表单组件在所述UI编辑界面中展示。

3.根据权利要求2所述的方法，其中，所述子配置的类型包括：Object对象、Array数组以及字段；

所述查询与所述子配置节点相对应的表单组件包括：查询与所述Object对象和/或Array数组和/或字段类型相对应的表单组件。

4.根据权利要求1所述的方法，其中，在所述响应于所述JSON配置的上传之后，所述方法包括：

查询所述JSON配置中暴露的接口，通过vue程序模块将所述暴露的接口封装成所述语音对话平台适配的接口，用于兼容其他平台的JSON配置。

5.根据权利要求1所述的方法，其中，所述JSON配置菜单的类型包括：树形菜单，用于支持所述子配置节点的折叠和展开。

6.一种用于语音对话平台的UI界面配置系统，包括：

编辑界面生成程序模块，用于在UI配置页面提供JSON配置上传按钮，响应于所述JSON配置的上传，生成JSON配置菜单以及JSON配置的UI编辑界面；

数据配置程序模块，用于响应于所述JSON配置菜单中任一子配置节点的点击，所述UI编辑界面对所述子配置节点的JSON数据进行渲染，确定渲染结果进行展示，所述UI编辑界面还提供有对应于所述子配置节点的表单组件，其中，所述表单组件用于编辑所述JSON数据；

局部渲染程序模块，用于响应于所述表单组件对所述JSON数据的修改，在所述渲染结果中对编辑后的JSON数据重新渲染，确定新的局部渲染结果进行展示。

7.根据权利要求6所述的系统，其中，所述数据配置程序模块用于：

查询与所述子配置节点相对应的表单组件，将所述相对应的表单组件在所述UI编辑界面中展示。

8.根据权利要求7所述的系统，其中，所述子配置的类型包括：Object对象、Array数组以及字段；

所述查询与所述子配置节点相对应的表单组件包括：查询与所述Object对象和/或Array数组和/或字段类型相对应的表单组件。

9.根据权利要求6所述的系统，其中，所述编辑界面生成程序模块，还用于：

查询所述JSON配置中暴露的接口，通过vue程序模块将所述暴露的接口封装成所述语音对话平台适配的接口，用于兼容其他平台的JSON配置。

10.根据权利要求6所述的系统，其中，所述JSON配置菜单的类型包括：树形菜单，用于支持所述子配置节点的折叠和展开。

Images