CN110688115A - 生成界面的方法和装置 - Google Patents

Abstract

本发明公开了一种生成界面的方法和装置。其中，该方法包括：获取目标任务，其中，目标任务为：生成控制目标设备的用户端界面；获取组件的属性信息，其中，属性信息用于指示组件在界面中的显示方式；基于目标任务和属性信息确定目标组件；调用目标组件，生成用户端界面。本发明解决了相关技术中采用JavaScript语言对物联网用户端进行web前端开发，导致开发的工作效率低，可读性、维护性差的技术问题。

Description

生成界面的方法和装置

技术领域

本发明涉及前端开发领域，具体而言，涉及一种生成界面的方法和装置。

背景技术

随着物联网技术的发展，传统的基于JavaScript语言的万维网(World Wide Web，web)前端开发越来越不能满足开发需求。虽然JavaScript以其灵活性能实现各种网页的需求，但是代码量也大幅上升，而且在web前端开发的过程时，开发人员需要花费大半时间来实现界面设计(User Interface，UI)。在没有统一标准的前提下，每个程序员针对同一UI的实现方式千差万别，造成代码效率低，可读性、维护性差的现象。另外，前端采用JavaScript语言开发，后端的开发语言却多种多样，这也大大增加了前后端开发人员的沟通难度。

针对相关技术中采用JavaScript语言对物联网用户端进行web前端开发，导致开发的工作效率低，可读性、维护性差的技术问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种生成界面的方法和装置，以至少解决相关技术中采用JavaScript语言对物联网用户端进行web前端开发，导致开发的工作效率低，可读性、维护性差的技术问题。

根据本发明实施例的一个方面，提供了一种生成界面的方法，包括：获取目标任务，其中，目标任务为：生成控制目标设备的用户端界面；获取组件的属性信息，其中，属性信息用于指示组件在界面中的显示方式；基于目标任务和属性信息确定目标组件；调用目标组件，生成用户端界面。

可选地，在获取组件的属性信息之前，上述方法还包括：生成组件库，其中，组件库为组件的集合。

可选地，调用目标组件，生成用户端界面，包括：通过服务接口调用目标组件；配置目标组件的参数信息，生成用户端界面，其中，参数信息表征属性信息在用户端界面的属性值。

可选地，组件库包括：单文件组件和合成组件，其中，组件库中每个组件的代码和实例均预存于后台。

可选地，组件库包括布局组件，用于用户端界面的布局，其中，布局组件包括如下至少之一：卡片组件、分割线组件、弹性布局组件、列表组件和工具栏组件。

可选地，组件库包括基础组件，用于用户端界面的单个功能的实现，其中，基础组件包括如下至少之一：手风琴组件、底部操作栏组件、按钮组件、折叠展开组件、下拉菜单组件、导航组件、图标组件、通知栏组件、进度条组件、滚动区域组件、搜索栏组件、步骤条组件和标签栏组件。

可选地，组件库包括表单数据组件，用于数据信息的展现，其中，表单数据组件包括如下至少之一：勾选按钮组件、选项组件、倒计时组件、跑马灯组件、单选框组件、评分组件、滑块组件、步进器组件、开关组件和时间轴组件。

可选地，组件库包括操作反馈组件，用于用户端界面与用户的交互，其中，操作反馈组件包括如下至少之一：操作列表组件、日期选择组件、对话框组件、选择器组件、弹出层组件、轻提示组件和动画组件。

可选地，组件库包括业务组件，用于用户端界面特定逻辑的实现，其中，业务组件包括如下至少之一：拖动验证组件、错误页组件、仪表盘组件、电源关闭组件、进度组件和扇形区域选择组件。

可选地，用户端界面基于Vue架构开发。

根据本发明实施例的另一方面，还提供了一种生成界面的装置，包括：第一获取模块，用于获取目标任务，其中，目标任务为：生成控制目标设备的用户端界面；第二获取模块，用于获取组件的属性信息，其中，属性信息用于指示组件在界面中的显示方式；确定模块，用于基于目标任务和属性信息确定目标组件；调用模块，用于调用目标组件，生成用户端界面。

根据本发明实施例的另一方面，还提供了一种计算机存储介质，计算机存储介质存储有多条指令，指令适于由处理器加载并执行上述任意一种生成界面的方法。

根据本发明实施例的另一方面，还提供了一种电子设备，包括：处理器和存储器；其中，存储器存储有计算机程序，计算机程序适于由处理器加载并执行上述任意一种生成界面的方法。

在本发明实施例中，获取目标任务，其中，目标任务为：生成控制目标设备的用户端界面；获取组件的属性信息，其中，属性信息用于指示组件在界面中的显示方式；基于目标任务和属性信息确定目标组件；调用目标组件，生成用户端界面。与现有技术相比，上述方案根据业务需求获取目标组件，生成用户端界面，解决了相关技术中采用JavaScript语言对物联网用户端进行web前端开发，导致开发的工作效率低，可读性、维护性差技术问题，达到了快速开发物联网用户端界面的目的。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例1的一种可选的生成界面的方法的流程示意图；

图2是根据本发明实施例1的一种可选的组件库结构示意图；

图3是根据本发明实施例1的一种可选的组件库分类示意图；以及

图4是根据本发明实施例2的一种可选的生成界面的装置的结构示意图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本发明实施例，提供了一种生成界面的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的生成界面的方法，如图1所示，该方法包括如下步骤：

步骤S102，获取目标任务，其中，目标任务为：生成控制目标设备的用户端界面。

一种可选方案中，上述目标设备可以为家用电器，例如空调、加湿器、除湿机、台灯、微波炉等；上述用户端可以为手机、笔记本、平板电脑、手环、虚拟现实(VirtualReality，VR)设备、增强现实(Augmented Reality，AR)设备等用户终端，相应地用户端界面可以为用户端的应用程序软件(APP)界面。

以除湿机为例，上述目标任务可以为生成控制除湿机进行开关机、湿度切换、风档切换、预约定时、报警提示等功能的应用程序界面，如此，用户便可以通过用户端的APP来控制目标设备。

步骤S104，获取组件的属性信息，其中，属性信息用于指示组件在界面中的显示方式。

一种可选方案中，上述组件可以为可复用的Vue实例，可以实现各自的业务功能；上述显示方式可以为组件在界面中的布局、颜色、动画、手势等。

随着React，Vue.js等以组件(指令等)为主的优秀前端框架的出现，前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不再需要面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

其中，Vue.js，简称Vue，是近几年基于JavaScript语言发展起来的用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

步骤S106，基于目标任务和属性信息确定目标组件。

在获知目标任务和不同组件的属性信息后，就可以根据目标任务确定出能够组合成用户端界面的目标组件。

步骤S108，调用目标组件，生成用户端界面。

一种可选方案中，上述调用方式可以通过组件和用户端界面之间的服务接口调用。

仍以除湿机为例，开发人员接收到开发一款控制除湿机的移动端APP的任务后，根据该任务从众多组件中确定出目标组件，然后通过服务接口调用这些目标组件，以生成相应的APP界面，进而通过APP界面达到控制除湿机开关机、湿度切换、风档切换、预约定时、报警提示等功能的目的。

上述实施例中，首先获取目标任务和组件的属性信息，其中，目标任务为：生成控制目标设备的用户端界面，属性信息用于指示组件在界面中的显示方式，然后基于目标任务和属性信息确定目标组件，并调用目标组件，生成用户端界面。与现有技术相比，上述方案根据业务需求获取目标组件，生成用户端界面，解决了相关技术中采用JavaScript语言对物联网用户端进行web前端开发，导致开发的工作效率低，可读性、维护性差技术问题，达到了快速开发物联网用户端界面的目的。

可选地，在执行步骤S104获取组件的属性信息之前，上述方法还可以包括：

步骤S103，生成组件库，其中，组件库为组件的集合。

一种可选方案中，上述组件库为预先存储于后台的代码，基于Vue架构开发，可以达到组件轻量化的目的。例如Vue 2.0。Vue2.0是目前最快的前端框架之一，具有易用、灵活、高效的优点，广泛应用于开发复杂的单页应用。

通过提前生成组件库，开发人员便可以根据目标任务从组件库中挑选出合适的组件，以快速生成用户端界面，使物联网用户端的界面开发更加快速和便捷。

可选地，步骤S108调用目标组件，生成用户端界面，具体可以包括如下步骤：

步骤S1081，通过服务接口调用目标组件。

一种可选方案中，上述调用方式可以包括插入、删除和修改等。

步骤S1082，配置目标组件的参数信息，生成用户端界面，其中，参数信息表征属性信息在用户端界面的属性值。

在一个可选的实施例中，web前端组件和物联网移动网站之间通过服务接口联系，具体地，两者依赖Vue进行交换，可以随时删除、插入和修改组件及其参数信息，以生成用户满意的用户端界面。该方式大大增强了物联网移动网站的易维护性。前端组件的可移植性强，前端组件库之间的低耦合度都促成了物联网移动网站灵活多变的开发方式及升级方式，进一步提高开发人员的工作效率。

需要说明的是，上述方案实现了按需加载组件的功能，可以将直接引入组件的方式通过一定技术转化成按需引入的方式，该方式减小了打包体积、提高了加载速度，进而提升了用户体验。

例如：

import{Button}from‘gree-ui’；

可以转换成：

Import Button from‘gree-ui/lib/button’

Import‘gree-ui/lib/button/style/index.css’

可选地，组件库包括：单文件组件和合成组件，其中，组件库中每个组件的代码和实例均预存于后台。

由于单文件的代码集中，便于开发、管理和维护，可复用性高，在使用时可以直接将Vue文件拷贝到新项目中，所以组件库中包含大量的单文件组件。当然，很多单文件组件进行打包封装而成的合成组件由于使用方便，也深受开发人员喜爱。

图2示出了一种可选的组件库结构示意图。如图2所示，组件库可以划分为合成组件和单文件组件，这些组件承载着为用户端界面提供主题、颜色、动画、手势、工具等功能。每个组件都有详细的代码和案例展示，以及相关文档说明，组件库的底层依赖Vue驱动。

在一个可选的实施例中，图3示出了组件库的分类示意图。如图3所示组件库包括布局组件，用于用户端界面的布局，其中，布局组件包括如下至少之一：卡片组件、分割线组件、弹性布局组件、列表组件和工具栏组件。

布局组件，主要用于对用户端界面的布局，开发人员通过服务接口调用布局组件，并对其参数信息进行配置，实现用户端界面的基本划分。

可选地，组件库还包括基础组件，用于用户端界面的单个功能的实现，其中，基础组件包括如下至少之一：手风琴组件、底部操作栏组件、按钮组件、折叠展开组件、下拉菜单组件、导航组件、图标组件、通知栏组件、进度条组件、滚动区域组件、搜索栏组件、步骤条组件和标签栏组件。

基础组件，主要用于用户端界面的单个功能的实现，开发人员可以通过服务接口快速调用基础组件，设计用户端界面各模块的基本功能。

可选地，组件库还包括表单数据组件，用于数据信息的展现，其中，表单数据组件包括如下至少之一：勾选按钮组件、选项组件、倒计时组件、跑马灯组件、单选框组件、评分组件、滑块组件、步进器组件、开关组件和时间轴组件。

表单数据组件，主要用户数据信息的展现，方便用户了解目标设备的工作情况。

可选地，组件库还包括操作反馈组件，用于用户端界面与用户的交互，其中，操作反馈组件包括如下至少之一：操作列表组件、日期选择组件、对话框组件、选择器组件、弹出层组件、轻提示组件和动画组件。

操作反馈组件，主要用于用户端界面与用户的交互，提高用户的使用体验。

可选地，组件库还包括业务组件，用于用户端界面特定逻辑的实现，其中，业务组件包括如下至少之一：拖动验证组件、错误页组件、仪表盘组件、电源关闭组件、进度组件和扇形区域选择组件。

业务组件，主要用于用户端界面特定逻辑的实现，例如拖动验证、关闭电源、错误页显示等，完善组件库的内容。

需要说明的是，组件库中的组件可以持续更新，组件库中的组件在设计时可以保持视觉一致性，例如风格一致、颜色一致等，实现为企业或团体等APP的个性化定制。当然，组件库中的组件也具有多个样式或主题，拓展灵活，可以实现物联网用户端场景的全覆盖。

可选地，用户端界面基于Vue架构开发。

一种可选方案中，上述Vue架构可以为Vue 2.0架构。Vue2.0是目前最快的前端框架之一，具有易用、灵活、高效的优点，广泛应用于开发复杂的单页应用，具有轻量化的优势。

本申请上述实施例中，首先获取目标任务和组件的属性信息，其中，目标任务为：生成控制目标设备的用户端界面，属性信息用于指示组件在界面中的显示方式，然后基于目标任务和属性信息确定目标组件，并调用目标组件，生成用户端界面。与现有技术相比，上述方案根据业务需求获取目标组件，生成用户端界面，解决了相关技术中采用JavaScript语言对物联网用户端进行web前端开发，导致开发的工作效率低，可读性、维护性差技术问题，达到了快速开发物联网用户端界面的目的。容易注意到，本申请通过对物联网用户端常规功能的调研与分析归类，设计出低耦合性的可满足web常规功能需求的各类组件，且组件的可移植性强，使得物联网用户端界面具有灵活多变的开发方式及升级方式，提高开发人员的工作效率。同时，前端组件与用户端界面之间通过服务接口联系，可以随时删除、插入和修改组件，大大增强了物联网用户端界面的易维护性。

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

实施例2

根据本发明实施例，提供了一种生成界面的装置，图4是根据本申请实施例的生成界面的装置示意图。如图4所示，该装置400包括第一获取模块402、第二获取模块404、确定模块406和调用模块408。

其中，第一获取模块402，用于获取目标任务，其中，目标任务为：生成控制目标设备的用户端界面；第二获取模块404，用于获取组件的属性信息，其中，属性信息用于指示组件在界面中的显示方式；确定模块406，用于基于目标任务和属性信息确定目标组件；调用模块408，用于调用目标组件，生成用户端界面。

可选地，上述装置还可以包括：生成模块，用于在获取组件的属性信息之前，生成组件库，其中，组件库为组件的集合。

可选地，调用模块可以包括：调用子模块，用于通过服务接口调用目标组件；配置模块，用于配置目标组件的参数信息，生成用户端界面，其中，参数信息表征属性信息在用户端界面的属性值。

可选地，组件库包括：单文件组件和合成组件，其中，组件库中每个组件的代码和实例均预存于后台。

可选地，组件库包括布局组件，用于用户端界面的布局，其中，布局组件包括如下至少之一：卡片组件、分割线组件、弹性布局组件、列表组件和工具栏组件。

可选地，组件库包括基础组件，用于用户端界面的单个功能的实现，其中，基础组件包括如下至少之一：手风琴组件、底部操作栏组件、按钮组件、折叠展开组件、下拉菜单组件、导航组件、图标组件、通知栏组件、进度条组件、滚动区域组件、搜索栏组件、步骤条组件和标签栏组件。

可选地，组件库包括表单数据组件，用于数据信息的展现，其中，表单数据组件包括如下至少之一：勾选按钮组件、选项组件、倒计时组件、跑马灯组件、单选框组件、评分组件、滑块组件、步进器组件、开关组件和时间轴组件。

可选地，组件库包括操作反馈组件，用于用户端界面与用户的交互，其中，操作反馈组件包括如下至少之一：操作列表组件、日期选择组件、对话框组件、选择器组件、弹出层组件、轻提示组件和动画组件。

可选地，组件库包括业务组件，用于用户端界面特定逻辑的实现，其中，业务组件包括如下至少之一：拖动验证组件、错误页组件、仪表盘组件、电源关闭组件、进度组件和扇形区域选择组件。

可选地，用户端界面基于Vue架构开发。

需要说明的是，上述第一获取模块402、第二获取模块404、确定模块406和调用模块408对应于实施例1中的步骤S102至步骤S108，该四个模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例1所公开的内容。

实施例3

根据本发明实施例，提供了一种计算机存储介质，计算机存储介质存储有多条指令，指令适于由处理器加载并执行上述实施例1中的生成界面的方法。

实施例4

根据本发明实施例，提供了一种电子设备，包括：处理器和存储器；其中，存储器存储有计算机程序，计算机程序适于由处理器加载并执行上述实施例1中的生成界面的方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (13)

1.一种生成界面的方法，其特征在于，包括：

获取目标任务，其中，所述目标任务为：生成控制目标设备的用户端界面；

获取组件的属性信息，其中，所述属性信息用于指示所述组件在界面中的显示方式；

基于所述目标任务和所述属性信息确定目标组件；

调用所述目标组件，生成所述用户端界面。

2.根据权利要求1所述的方法，其特征在于，在获取组件的属性信息之前，所述方法还包括：

生成组件库，其中，所述组件库为所述组件的集合。

3.根据权利要求1所述的方法，其特征在于，调用所述目标组件，以生成所述用户端界面，包括：

通过服务接口调用所述目标组件；

配置所述目标组件的参数信息，生成所述用户端界面，其中，所述参数信息表征所述属性信息在所述用户端界面的属性值。

4.根据权利要求2所述的方法，其特征在于，所述组件库包括：单文件组件和合成组件，其中，所述组件库中每个组件的代码和实例均预存于后台。

5.根据权利要求2所述的方法，其特征在于，所述组件库包括布局组件，用于所述用户端界面的布局，其中，所述布局组件包括如下至少之一：卡片组件、分割线组件、弹性布局组件、列表组件和工具栏组件。

6.根据权利要求2所述的方法，其特征在于，所述组件库包括基础组件，用于所述用户端界面的单个功能的实现，其中，所述基础组件包括如下至少之一：手风琴组件、底部操作栏组件、按钮组件、折叠展开组件、下拉菜单组件、导航组件、图标组件、通知栏组件、进度条组件、滚动区域组件、搜索栏组件、步骤条组件和标签栏组件。

7.根据权利要求2所述的方法，其特征在于，所述组件库包括表单数据组件，用于数据信息的展现，其中，所述表单数据组件包括如下至少之一：勾选按钮组件、选项组件、倒计时组件、跑马灯组件、单选框组件、评分组件、滑块组件、步进器组件、开关组件和时间轴组件。

8.根据权利要求2所述的方法，其特征在于，所述组件库包括操作反馈组件，用于所述用户端界面与用户的交互，其中，所述操作反馈组件包括如下至少之一：操作列表组件、日期选择组件、对话框组件、选择器组件、弹出层组件、轻提示组件和动画组件。

9.根据权利要求2所述的方法，其特征在于，所述组件库包括业务组件，用于所述用户端界面特定逻辑的实现，其中，所述业务组件包括如下至少之一：拖动验证组件、错误页组件、仪表盘组件、电源关闭组件、进度组件和扇形区域选择组件。

10.根据权利要求1所述的方法，其特征在于，所述用户端界面基于Vue架构开发。

11.一种生成界面的装置，其特征在于，包括：

第一获取模块，用于获取目标任务，其中，所述目标任务为：生成控制目标设备的用户端界面；

第二获取模块，用于获取组件的属性信息，其中，所述属性信息用于指示所述组件在界面中的显示方式；

确定模块，用于基于所述目标任务和所述属性信息确定目标组件；

调用模块，用于调用所述目标组件，生成所述用户端界面。

12.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1至10中任意一项所述的生成界面的方法。

13.一种电子设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1至10中任意一项所述的生成界面的方法。

Images