CN113535165A - 界面生成方法、装置、电子设备及计算机可读存储介质 - Google Patents

Abstract

本申请实施例提供了一种界面生成方法、装置、电子设备及计算机可读存储介质，涉及计算机技术领域。该方法包括：针对每一组件，用预设的数据格式描述组件的属性信息，得到组件对应的属性配置文件，然后基于属性配置文件生成该组件对应的属性配置界面，通过属性配置界面可视化地对组件的属性配置文件进行配置，读取配置后的属性配置文件，显示该组件，依次遍历读取各个组件的属性配置文件，显示由至少一个组件构成的目标界面。本申请实施例实现了通过属性配置界面可视化地配置属性配置文件，并基于配置后的属性配置文件对组件进行修改，解决了组件难以进行灵活更改的问题，能够适应更多样的业务需求。

Description

界面生成方法、装置、电子设备及计算机可读存储介质

技术领域

本申请涉及计算机技术领域，具体而言，本申请涉及一种界面生成方法、装置、电子设备及计算机可读存储介质。

背景技术

前端界面配置的需求越来越多样化，对应于不同功能的数据和方法被封装成各式各样的组件，大量的组件被应用于前端界面设计中，许多种类的组件需要参考界面显示效果才能进行更好地调整。

目前，通常使用JSON Editor，一种用于编辑JSON的编辑器对组件进行配置，但JSON Editor编辑JSON格式的数据时不够灵活，当界面效果固定时，难以再对组件进行修改，不适应日益复杂的业务需求。

发明内容

本申请的目的旨在至少能解决上述的技术缺陷之一，特别是组件难以进行灵活更改的技术缺陷。

第一方面，提供了一种界面生成方法，该方法包括：

获取构成初始界面的至少一个组件；初始界面用于调整后得到目标界面；

针对每一组件，获取组件的属性信息，用预设数据格式对组件的属性信息进行描述，得到对应的属性配置文件；

基于属性配置文件生成针对组件的属性配置界面，通过属性配置界面对组件的属性配置文件进行配置；

读取配置后的属性配置文件，以显示组件，基于每一显示的组件生成目标界面。

在第一方面的可选实施例中，获取构成初始界面的至少一个组件之前，还包括：

接收针对界面模板的选择信息，基于选择信息，从预设的模板数据库中选择出目标界面模板；模板数据库中包括多个界面模板；

确定与目标界面模板对应的至少一个组件库；每个组件库中包括多个类别的组件，组件用于生成界面；

基于目标界面模板和至少一个组件库生成初始界面。

在第一方面的可选实施例中，属性配置界面包括多种类别的可配置属性；通过属性配置界面对组件对应的属性配置文件进行配置，包括：

基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息；

基于获取到的配置信息，更改属性配置文件中对应的属性信息。

在第一方面的可选实施例中，基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息，包括：

基于用户在属性配置界面的第一操作信息，确定当前进行配置的可配置属性的类别；

基于用户在属性配置界面的第二操作信息，获取针对属于类别的至少一个可配置属性的配置信息。

在第一方面的可选实施例中，配置信息包括基本属性信息与附加属性信息；基本属性信息包括标题、尺寸、坐标、边距、颜色、文字颜色和样式中的至少一项；附加属性信息包括组件优先级、组件绑定的事件和特殊功能选项中的至少一项。

在第一方面的可选实施例中，还包括：

对配置信息进行验证，以判断配置信息是否满足可配置属性对应的数据条件，包括以下至少一项：

配置信息符合可配置属性对应的标准数据格式；

配置信息在可配置属性预设的参数可选值范围内；

若配置信息不满足可配置属性对应的数据条件，则输出提示消息。

在第一方面的可选实施例中，还包括：

通过属性配置界面，接收针对属性配置文件的更新配置信息，基于更新配置信息对属性配置文件进行重新配置，得到更新配置文件；

基于更新配置文件对目标界面进行更新。

第二方面，提供了一种界面生成的装置，该装置包括：

获取模块，用于获取构成初始界面的至少一个组件；初始界面用于调整后得到目标界面；

描述模块，用于针对每一组件，获取组件的属性信息，用预设数据格式对组件的属性信息进行描述，得到对应的属性配置文件；

配置模块，用于基于属性配置文件生成针对组件的属性配置界面，通过属性配置界面对组件的属性配置文件进行配置；

生成模块，用于读取配置后的属性配置文件，以显示组件，基于每一显示的组件生成目标界面。

在第二方面的可选实施例中，还包括初始界面生成模块，具体用于：

接收针对界面模板的选择信息，基于选择信息，从预设的模板数据库中选择出目标界面模板；模板数据库中包括多个界面模板；

确定与目标界面模板对应的至少一个组件库；每个组件库中包括多个类别的组件，组件用于生成界面；

基于目标界面模板和至少一个组件库生成初始界面。

在第二方面的可选实施例中，属性配置界面包括多种类别的可配置属性，配置模块在通过属性配置界面对组件对应的属性配置文件进行配置时，具体用于：

基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息；

基于获取到的配置信息，更改属性配置文件中对应的属性信息。

在第二方面的可选实施例中，配置模块在基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息时，具体用于：

基于用户在属性配置界面的第一操作信息，确定当前进行配置的可配置属性的类别；

基于用户在属性配置界面的第二操作信息，获取针对属于类别的至少一个可配置属性的配置信息。

在第二方面的可选实施例中，配置信息包括基本属性信息与附加属性信息；基本属性信息包括标题、尺寸、坐标、边距、颜色、文字颜色和样式中的至少一项；附加属性信息包括组件优先级、组件绑定的事件和特殊功能选项中的至少一项。

在第二方面的可选实施例中，还包括验证模块，具体用于：

对配置信息进行验证，以判断配置信息是否满足可配置属性对应的数据条件，包括以下至少一项：

配置信息符合可配置属性对应的标准数据格式；

配置信息在可配置属性预设的参数可选值范围内；

若配置信息不满足可配置属性对应的数据条件，则输出提示消息。

在第二方面的可选实施例中，还包括修改模块，具体用于：

通过属性配置界面，接收针对属性配置文件的更新配置信息，基于更新配置信息对属性配置文件进行重新配置，得到更新配置文件；

基于更新配置文件对目标界面进行更新。

第三方面，提供了一种电子设备，该电子设备包括：

存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现上述任一实施例的界面生成方法。

第四方面，本发明还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现上述任一实施例的界面生成的方法。

第五方面，本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行时实现第一方面实施例或第二方面实施例中所提供的方法。

上述的界面生成方法，针对每一组件，用预设的数据格式描述组件的属性信息，得到组件对应的属性配置文件，然后基于属性配置文件生成该组件对应的属性配置界面，通过属性配置界面可视化地对组件的属性配置文件进行配置，读取配置后的属性配置文件，显示该组件，解决了组件难以进行灵活更改的问题，能够适应更多样的业务需求。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种界面生成方法的流程示意图；

图2为本申请实施例提供的一种界面生成方法中的属性配置界面示意图；

图3为本申请实施例提供的一种界面生成方法中的属性配置界面示意图；

图4为本申请实施例提供的一种界面生成方法中的属性配置界面示意图；

图5为本申请实施例提供的一种界面生成方法中的属性配置界面示意图；

图6为本申请实施例提供的一种界面生成方法中的属性配置界面示意图；

图7为本申请实施例提供的一种界面生成方法的流程示意图；

图8为本申请实施例提供的一种界面生成方法中进行界面配置的示意图；

图9为本申请实施例提供的一种界面生成方法中进行界面配置的流程示意图；

图10为本申请实施例提供的一种界面生成装置的结构示意图；

图11为本申请实施例提供的一种界面生成的电子设备的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本申请的限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

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

本申请实施例的技术方案可以应用于界面开发场景中，传统的界面开发方式一般为编程开发，由技术部门的编程人员根据业务部门的业务人员提供的需求和业务数据通过编程设计和生成界面，在开发过程中需要多部门之间协作，不断对界面进行修改，界面的开发效率较低。

同时，在进行界面开发时，现有方案中的JSON Editor编辑JSON数据时不够灵活，当界面效果已经进行展示，组件的显示样式等无法进行更改，而在实际项目开发过程中，通常需要灵活地调整组件样式或者界面布局，传统的开发方案难以满足日益复杂的业务需求。

本申请提供的界面生成方法、装置、电子设备和计算机可读存储介质，旨在解决现有技术的如上技术问题。

在本申请实施例中，可以基于Vue框架进行研发，Vue框架是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层应用，该框架易于上手，便于与第三方库配合使用。

例如，在本申请实施例中，可以在Vue框架的基础上搭配以下几种工具库：Vuex，一个专门为Vue技术栈开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；vue-router，用于统一管理路由层，具体的，将组件映射到路由，vue-router接收渲染信息，确定在何处进行渲染组件；element-ui，一个和Vue框架配合做项目开发较为便利的一个UI(User Interface，用户界面)框架。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

本申请实施例中提供的界面生成的方法，该方法可以应用于服务器，也可以应用于终端。

本技术领域技术人员可以理解，这里所使用的终端可以包括智能手机、台式计算机、平板电脑、笔记本电脑﹑智能音箱、数字助理、增强现实(augmented reality,AR)/虚拟现实(virtual reality,VR)设备、智能可穿戴设备等类型的实体设备。也可以包括运行于实体设备中的软件，例如虚拟机等。本申请实施例中终端上运行的操作系统可以包括但不限于安卓系统、IOS系统、linux,windows等。

所使用的服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储﹑网络服务、云通信、中间件服务﹑域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)﹑以及大数据和人工智能平台等基础云计算服务的云服务器。

本申请实施例中提供了一种界面生成的方法，如图1所示，该方法包括：

步骤S101，获取构成初始界面的至少一个组件，初始界面用于调整后得到目标界面。

组件是对数据和方法的封装，可以被复用，可以有自己的属性和方法。在本申请实施例中，通过不同组件的组合构成待配置页面，具体的，组件通过渲染生成不同的页面元素构成待配置页面。

在本申请实施例中，组件可以根据具体项目需求从不同的组件库中进行选择，也可以基于其他用户分享的开源组件包中获取。来自不同组件库中的组件的属性信息可能不同，因此，生成的界面的效果可能不同。例如，当组件为表单项时，对于同一个类型的表单项，如文本输入框，利用不同组件库中的组件搭建形成的文本框的尺寸、或者支持的数据字体、大小等可能不同。

可以基于界面需要实现的功能以及界面效果从组件库中获取构成初始界面的至少一个组件。

步骤S102，可以针对每一组件，获取组件的属性信息，用预设数据格式对组件的属性信息进行描述，得到对应的属性配置文件。

组件的属性信息可以包括基本属性信息、事件交互信息和扩展信息，其中，基本属性信息可以包括组件的类型、名称、颜色、尺寸等，其中，组件名称可以作为组件的标识信息。事件交互信息可以包括组件关联的点击事件、校验正则表达式、数据源、选中方式等。扩展信息可以包括基于领域和需求特别设定的额外属性。基于组件不同的类别和功能，可以将组件一些属性设置为可配置属性。

在本申请实施例中，可以用预设的数据格式对组件的属性信息进行描述，得到与每个组件分别对应的属性配置文件。其中，属性配置文件可以依据界面配置框架可以解析的语言及描述方式编写，也可以自定义编写方式，在界面配置框架配置好对应的渲染引擎即可。

预设的数据格式可以为JSON(JavaScript Object Notation，JS，对象简谱)格式。JSON是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据，具有简洁和清晰的层次结构，是一种理想的数据交换语言，易于人阅读和编写的同时，也易于机器解析和生成，有效地提升网络传输效率。具体的每个组件对应的属性配置文件可以通过JSON Schema编写，JSON Schema是一种基于JSON格式定义JSON数据结构的规范。也可以通过各种JSON编辑器或者JSON专用的工具包来组装组件的属性信息，例如组件的名称、类型以及各类别的可配置属性。

数据格式为JSON的属性配置文件可以包括对应组件的标识信息，标识信息可以根据需求进行设置，在本申请实施例中可以将组件的名称作为标识信息，便于通过获取JSON文件中组件的标识信息读取JSON文件中的数据。

在一个示例中，将组件的属性信息组装成JSON格式后，属性配置文件中可以包括：“name”代表标签名，标签名可以进行修改；“componentName”代表组件名称，可以作为标识信息；prop是vue框架中组件的三种应用程序接口之一，prop允许外部环境传递数据给组件，而“propValues”是指对以下属性设置prop，使以下属性成为可配置属性；“label”代表选项名称；“key”代表组件标志；“value”代表选项默认值；“type”代表参数类型。

步骤S103，基于属性配置文件生成针对组件的属性配置界面，通过属性配置界面对组件的属性配置文件进行配置

在本申请实施例中，可以基于属性配置文件生成针对该组件的属性配置界面。具体的，可以通过element-ui将属性配置文件中的属性信息编写成属性配置界面。

属性配置界面可以可视化地显示对应组件可以进行配置的属性，用户可通过鼠标、键盘或者屏幕触摸操作在属性配置界面的可调试区域对可配置属性进行调试，通过改变属性配置界面中的可配置属性，实现对属性配置文件中的属性信息进行更改。

步骤S104，读取配置后的属性配置文件，以显示组件，基于每一显示的组件生成目标界面。

在本申请实施例中，可以通过获取属性配置文件中的标识信息，例如属性配置文件中的组件名称，读取配置后的属性配置文件中的属性信息，在临时界面(画布)中展示组件的完整效果。

通过依次遍历每个组件对应的属性配置文件，在界面展示出每个组件的完整展示效果，直到显示出所有配置后的组件，生成目标界面。

上述实施例中的界面生成方法，针对每一组件，用预设的数据格式描述组件的属性信息，得到组件对应的属性配置文件，然后基于属性配置文件生成该组件对应的属性配置界面，通过属性配置界面可视化地对组件的属性配置文件进行配置，读取配置后的属性配置文件，显示该组件，解决了组件难以进行灵活更改的问题，能够适应更多样的业务需求。

在本申请实施例中，获取用于构成待生成界面的至少一个组件之前，还可以包括如下步骤：

(1)接收针对界面模板的选择信息，基于选择信息，从预设的模板数据库中选择出目标界面模板；模板数据库中包括多个界面模板。

在本申请实施例中，预设的模板数据库中可以预存有分别对应于多种主题的界面模板，例如，商业主题和行政工作主题等，其中，对于某一主题中的界面模板还可以进一步进行类别划分，例如商业主题中可以列举几种常用的界面模板，可以包括商品展示推广类、售后服务评分类和用户兴趣调查类等，便于用户方便地查找到与需求相符合的目标界面模板。

具体的，可以对应于每个目标界面模板，预存有对应的一张界面预览图，通过界面预览图可以提前知道该目标界面模板大概的界面布局，便于用户从模板数据库中选择出目标界面模板。

(2)确定与目标界面模板对应的至少一个组件库；每个组件库中包括多个类别的组件，组件用于生成界面。

其中，目标界面模板与至少一个组件库存在对应关系，与目标界面模板关联的每个组件库中的组件都可以用于构成目标界面模板，选择目标界面模板后，可以基于目标界面模板加载临时界面，临时界面上会存在默认的组件和界面布局，用户可以在默认的界面布局的基础上，对默认组件进行替换。

组件库可以包括多个类别的组件，例如基础组件、表单组件、布局组件、反馈组件、展示组件、业务组件和导航组件等，不同的组件库可能针对组件有不同的分类方法，即包括不同的组件类别。

作为示例作用，针对上述其中的几种类别的组件进行进一步的说明：

布局组件可以用于进行表单整体的布局结构进行配置，具体的，布局组件可以包括但不限于栅格组件，卡片式布局组件和Layout布局组件；其中，栅格布局可将表单划分为至少两列，卡片式布局组件可以将表单组合展示为卡片样式，Layout组件可以设置独立的样式配置；

基础组件可以包括实现表单常用功能的组件，具体的，可以包括可嵌套组件和非嵌套组件；其中，可嵌套组件可以包括可以进行可以嵌套其他表单组件的组件；非嵌套组件为不可嵌套其他表单组件的组件；可嵌套组件可以包括但不限于数组组件和对象组件，非嵌套组件可以包括但不限于单行输入组件、多行输入组件、标题文本组件、数字框组件、开关组件、单选框组件、对选框组件、单选下拉框组件、日期组件、月份组件、日期范围组件、时间组件、滑动条组件和表格组件等；

业务组件可以包括结合实际业务需求进行自定义设置的组件，在一个示例中，可以包括评分组件和信息收集组件等。

(3)基于目标界面模板和至少一个组件库生成初始界面。

在本申请实施例中，可以基于选择出的目标界面模板以及目标界面模板对应的组件库生成初始界面，初始界面可能具有一些基本功能，用户可以在初始界面的基础上，对构成初始界面的组件进行更细致、更深层次地调整。

在上述实施例中，可以通过在模板数据库中选择出目标界面模板，缩小组件的查找范围，直接在目标界面模板对应的组件库中选择组件，提高了界面开发效率。

在本申请实施例中，属性配置界面可以包括多种类别的可配置属性；可以通过属性配置界面对组件对应的属性配置文件进行配置，包括如下步骤：基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息；基于获取到的配置信息，更改属性配置文件中对应的属性信息。

其中，在本申请实施例中，配置信息可以包括基本属性信息与附加属性信息；基本属性信息可以包括标题、尺寸、坐标、边距、颜色、文字颜色和样式中的至少一项；附加属性信息可以包括组件优先级、组件绑定的事件和特殊功能选项中的至少一项。

属性配置界面可以包括多种类别的可配置属性，可配置属性是指可以被修改和调整的属性，可配置属性的类别可以与配置信息的类别相对应，例如也分为基本属性信息与附加属性信息，也可以用更便于用户理解的规则对可配置属性进行分类，使用户快速找到需要进行配置的可配置属性。

属性配置界面的可配置属性与属性配置文件中的属性信息存在对应关系，通过修改属性配置界面中的可配置属性实现可视化更改属性配置文件中对应的属性信息的技术效果。

在一个示例中，针对任意两个组件A和B，可以分别对应于属性配置界面1和属性配置界面2。组件A和组件B的可配置属性可以不同，并且，属性配置界面1和属性配置界面2中可以只有单类别的可配置属性，则如图2所示，可以包括如图两种属性配置界面显示效果，分别对应于基本属性和基本样式两种单类别的可配置属性，其中，在基本属性类别下包含四种可配置属性，分别为“X坐标”、“Y坐标”、“长度”和“高度”；在基本样式类别下包含五种可配置属性，分别为“标题”、“组件颜色”、“文字颜色”、“填充选项”和“透明度”，可以分别针对不同的可配置属性进行配置。

在另外的示例中，针对任一组件C，如图3所示，组件C可以对应于属性配置界面3，在属性配置界面3中可以包含两个类别的可配置属性，即“基本属性”和“基本样式”，可以通过键盘、鼠标点击或者触摸屏幕在两个类别之间进行切换。

上述示例仅做举例作用，在实际项目开发过程中，可配置属性的显示方式是多样化的，在属性配置界面以何种方式显示何种可配置属性可以基于组件的属性信息、业务的实际需求进行具体设置，本申请不做限制。

本申请实施例中，可以基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息。其中，操作信息可以分为第一操作信息和第二操作信息。

具体的，可以基于用户在属性配置界面的第一操作信息，确定当前进行配置的可配置属性的类别；可以基于用户在属性配置界面的第二操作信息，获取针对属于类别的至少一个可配置属性的配置信息。

第一操作信息可以是用户通过键盘、鼠标和触摸屏幕等交互操作对属性配置界面中可配置属性的类别的选择信息，具体的，可以通过键盘快捷键、鼠标点击操作和屏幕触摸操作在可配置属性的不同类别之间进行切换。在一些实施例中，可配置属性在分成了多个类别之后进行了进一步地分类，分成多个小类，用户针对小类的选择信息也可以作为第一操作信息。

第二操作信息可以包括用户在输入框输入符合规则的数据、在勾选框内进行勾选、在下拉列表中选择目标项、在颜色表中选择目标颜色以及在预设范围内通过按钮进行增减等交互操作产生的信息，用于获取针对不同可配置属性的配置信息。第二操作信息的类型以及生成方式可以基于属性配置界面上各种可配置属性的显示方式确定，本申请不做限制。

在一个示例中，如图3所示，属性配置界面中包含两个可配置属性的类别，分别是“基本属性”和“基本样式”。可以通过鼠标点击“基本属性”类别标题，作为第一操作信息，选择对“基本属性”中的可配置属性进行配置，根据“基本属性”的配置界面，四种可配置属性“X坐标”、“Y坐标”、“长度”和“高度”可以通过点击数值左右两边的增减按钮对数值进行修改，此时，对数值两边的增减按钮的点击操作可以作为第二操作信息，可以基于第二操作信息获取针对“基本属性”类别中的可配置属性的配置信息。

在本申请实施例中，可以对配置信息进行验证，以判断配置信息是否满足可配置属性对应的数据条件，可以包括以下至少一项：

配置信息符合可配置属性对应的标准数据格式；

配置信息在可配置属性预设的参数可选值范围内；

若配置信息不满足可配置属性对应的数据条件，则输出提示消息。

具体的，针对不同的可配置属性可能有不同的数据条件，例如，针对组件基本属性中的“X坐标”、“Y坐标”、“长度”和“高度”，数据格式为数字，参数可选值范围则与设置的界面大小有关。而对于配置方式为文本输入的可配置属性，可以规定输入数据为特定的格式，例如中文和英文等。

当配置信息不满足可配置属性对应的数据条件时，输出提示消息，并撤销上一步第二操作信息，提示用户重新进行配置。

在本申请实施例中，可以将配置后的属性配置文件以及根据配置后的属性配置文件生成的目标界面进行存储，便于后续使用。

具体的，针对目标界面，可以基于目标界面生成预览缩略图，并将目标界面以及对应的缩略图更新至界面数据库中，作为新的界面模板供用户选择，便于用户在该目标界面上继续进行修改和调整。

针对配置后的属性配置文件，可以将属性配置文件与组件库中对应的组件关联，当再次需要使用该组件时，无需再次生成属性配置文件，可直接基于组件获取对应的属性配置文件，其中，属性配置文件的数据格式可以为JSON。

通过对配置后的各项数据进行保存，便于用户进行后续的使用和修改，提高了界面开发效率。

在本申请实施例中，生成目标界面后，如果对目标界面的展示效果不满意，仍然可以基于属性配置界面继续进行修改，直到实现满意的展示效果为止。

具体的，可以通过属性配置界面，接收针对属性配置文件的更新配置信息，基于更新配置信息对属性配置文件进行重新配置，得到更新配置文件；基于更新配置文件对目标界面进行更新。

用户可以通过属性配置界面在配置后的基础上继续进行修改和调试，生成对应的更新配置信息，基于更新配置信息中针对属性配置文件中属性信息的修改信息对属性配置文件进行重新配置，得到更新配置文件，同样通过获取更新配置文件中的标识信息，例如组件名称，读取更新配置文件，在临时界面(画布)上展示更新后的组件效果。

在一个示例中，可以如图4和图5所示，通过可视化地对属性配置界面中的可配置属性进行配置，临时界面(画布)上会展示组件被修改后的效果。例如，图5中对图4中的“高度”属性进行修改，组件的尺寸大小会根据修改后的高度进行更改并展示。

如图6所示，通过鼠标点击可以更换进行配置的类别，在基本样式中，可以将组件的颜色更改为黑色，文字颜色更改为白色，在临时界面(画布)上显示更改后组件的展示效果。

为了更清楚阐释本申请的界面生成方法，以下将结合具体示例对界面生成方法进行进一步说明。

在一个实施例中，本申请提供界面生成方法，如图7所示，包括如下步骤：

步骤S701，在模板数据库中预存有多个界面模板，接收界面模板选择信息，从至少一个界面模板中选择出目标界面模板；

步骤S702，确定与目标界面模板对应的至少一个组件库，每个组件库中可以包括多个类别的组件，用于生成初始界面；

步骤S703，基于目标界面模板和至少一个组件库生成初始界面；

步骤S704，判断是否需要对初始界面进行配置，若需要则进入步骤S705，否则进入步骤S706；

步骤S705，结束界面生成流程，进行保存；

步骤S706，获取构成初始界面的至少一个组件，针对每一组件，获取组件的属性信息；

步骤S707，用预设数据格式对组件的属性信息进行描述，得到对应的属性配置文件；其中，预设数据格式可以是JSON格式，即得到格式为JSON的属性配置文件；

步骤S708，基于属性配置文件生成针对组件的属性配置界面；属性配置界面包括多种类别的可配置属性；

步骤S709，基于用户在属性配置界面的第一操作信息，确定当前进行配置的可配置属性的类别；

步骤S710，基于用户在属性配置界面的第二操作信息，获取针对属于类别的至少一个可配置属性的配置信息；其中，第二操作信息可以是在文本输入框中输入文本、在勾选框中进行勾选、在下拉列表中选择目标项和通过增减按钮对数值进行增减等；配置信息包括基本属性信息与附加属性信息；基本属性信息包括标题、尺寸、坐标、边距、颜色、文字颜色和样式中的至少一项；附加属性信息包括组件优先级、组件绑定的事件和特殊功能选项中的至少一项；

步骤S711，基于获取到的配置信息，更改属性配置文件中对应的属性信息；

步骤S712，读取配置后的属性配置文件，以显示组件，基于每一显示的组件生成目标界面。

本申请实施例提供了一种界面生成方法、装置、电子设备及计算机可读存储介质，涉及计算机技术领域。该方法包括：针对每一组件，用预设的数据格式描述组件的属性信息，得到组件对应的属性配置文件，然后基于属性配置文件生成该组件对应的属性配置界面，通过属性配置界面可视化地对组件的属性配置文件进行配置，读取配置后的属性配置文件，显示该组件，依次遍历读取各个组件的属性配置文件，显示由至少一个组件构成的目标界面。本申请实施例实现了通过属性配置界面可视化地配置属性配置文件，并基于配置后的属性配置文件对组件进行修改，解决了组件难以进行灵活更改的问题，能够适应更多样的业务需求。

在一个示例中，如图8所示，T1区工具栏的控件用于清空画布、生成JSON数据和生成代码，T2区用于在模板数据库中根据界面模板预览图选择出目标界面模板，然后根据目标界面模板显示对应的组件库，每个组件库中包含多种类别的组件，用户选择至少一个组件构成初始界面。

针对构成初始界面的组件中的任一组件，可以通过T4区域中的属性配置界面对组件进行配置，例如选中“按钮”组件，可以通过与按钮组件对应的属性配置界面对组件进行配置。属性配置界面可以包括三种类别的可配置属性，分别是“基本属性”、“事件”和“选项数据”，其中，“基本属性”包括“尺寸坐标”和“特有样式”两种细分类别，“尺寸坐标”中可以通过数据增减按钮对数值进行修改，而“特有样式”是根据不同的组件包括有不同的可配置属性，对于“按钮”组件来说，可以对组件的标题、组件颜色、文字颜色、填充选项、透明度等属性进行配置。

基于属性配置界面可视化地配置属性配置文件，然后读取属性配置文件，在画布中显示配置后的组件。

如图9所示，依次遍历并读取所有组件对应的属性配置文件，对配置后组件进行展示，生成目标界面。

本申请实施例提供了一种界面生成装置，如图10所示，该界面生成装置100可以包括：获取模块1001、描述模块1002、配置模块1003以及生成模块1004，其中，

获取模块1001，用于获取构成初始界面的至少一个组件；初始界面用于调整后得到目标界面；

描述模块1002，用于针对每一组件，获取组件的属性信息，用预设数据格式对组件的属性信息进行描述，得到对应的属性配置文件；

配置模块1003，用于基于属性配置文件生成针对组件的属性配置界面，通过属性配置界面对组件的属性配置文件进行配置；

生成模块1004，用于读取配置后的属性配置文件，以显示组件，基于每一显示的组件生成目标界面。

上述的界面生成装置，通过属性配置界面可视化地配置属性配置文件，再进一步地基于配置后的属性配置文件对组件进行修改，解决了组件难以进行灵活更改的问题，能够适应更多样的业务需求。

在本申请实施例中，还包括初始界面生成模块，具体用于：

接收针对界面模板的选择信息，基于选择信息，从预设的模板数据库中选择出目标界面模板；模板数据库中包括多个界面模板；

确定与目标界面模板对应的至少一个组件库；每个组件库中包括多个类别的组件，组件用于生成界面；

基于目标界面模板和至少一个组件库生成初始界面。

在本申请实施例中，属性配置界面包括多种类别的可配置属性，配置模块1003在通过属性配置界面对组件对应的属性配置文件进行配置时，具体用于：

基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息；

基于获取到的配置信息，更改属性配置文件中对应的属性信息。

在本申请实施例中，配置模块1003在基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息时，具体用于：

基于用户在属性配置界面的第一操作信息，确定当前进行配置的可配置属性的类别；

基于用户在属性配置界面的第二操作信息，获取针对属于类别的至少一个可配置属性的配置信息。

在本申请实施例中，配置信息包括基本属性信息与附加属性信息；基本属性信息包括标题、尺寸、坐标、边距、颜色、文字颜色和样式中的至少一项；附加属性信息包括组件优先级、组件绑定的事件和特殊功能选项中的至少一项。

在本申请实施例中，还包括验证模块，具体用于：

对配置信息进行验证，以判断配置信息是否满足可配置属性对应的数据条件，包括以下至少一项：

配置信息符合可配置属性对应的标准数据格式；

配置信息在可配置属性预设的参数可选值范围内；

若配置信息不满足可配置属性对应的数据条件，则输出提示消息。

在本申请实施例中，还包括修改模块，具体用于：

通过属性配置界面，接收针对属性配置文件的更新配置信息，基于更新配置信息对属性配置文件进行重新配置，得到更新配置文件；

基于更新配置文件对目标界面进行更新。

在一个可选实施例中提供了一种电子设备，如图11所示，图11所示的电子设备4000包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线4002相连。可选地，电子设备4000还可以包括收发器4004，收发器4004可以用于该电子设备与其他电子设备之间的数据交互，如数据的发送和/或数据的接收等。需要说明的是，实际应用中收发器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

处理器4001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示，图11中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器4003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器4003用于存储执行本申请方案的应用程序代码(计算机程序)，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的应用程序代码，以实现前述方法实施例所示的内容。

其中，电子设备包括但不限于诸如移动电话、笔记本电脑、PAD等等移动终端以及诸如数字TV、台式计算机等等固定终端。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。与现有技术相比，通过属性配置界面可视化地配置属性配置文件，再进一步地基于配置后的属性配置文件对组件进行修改，解决了组件难以进行灵活更改的问题，能够适应更多样的业务需求。

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

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

Claims (10)

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

获取构成初始界面的至少一个组件；所述初始界面用于调整后得到目标界面；

针对每一所述组件，获取所述组件的属性信息，用预设数据格式对所述组件的属性信息进行描述，得到对应的属性配置文件；

基于所述属性配置文件生成针对所述组件的属性配置界面，通过所述属性配置界面对所述组件的属性配置文件进行配置；

读取配置后的所述属性配置文件，以显示所述组件，基于每一显示的所述组件生成所述目标界面。

2.根据权利要求1所述的界面生成方法，其特征在于，获取构成初始界面的至少一个组件之前，还包括：

接收针对界面模板的选择信息，基于所述选择信息，从预设的模板数据库中选择出目标界面模板；所述模板数据库中包括多个界面模板；

确定与所述目标界面模板对应的至少一个组件库；所述每个组件库中包括多个类别的组件，所述组件用于生成界面；

基于所述目标界面模板和所述至少一个组件库生成所述初始界面。

3.根据权利要求2所述的界面生成方法，其特征在于，所述属性配置界面包括多种类别的可配置属性；所述通过所述属性配置界面对所述组件对应的属性配置文件进行配置，包括：

基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息；

基于获取到的所述配置信息，更改所述属性配置文件中对应的所述属性信息。

4.根据权利要求3所述的界面生成方法，其特征在于，所述基于用户在属性配置界面的操作信息获取针对不同可配置属性的配置信息，包括：

基于所述用户在属性配置界面的第一操作信息，确定当前进行配置的所述可配置属性的类别；

基于所述用户在属性配置界面的第二操作信息，获取针对属于所述类别的至少一个可配置属性的配置信息。

5.根据权利要求4所述的界面生成方法，其特征在于，所述配置信息包括基本属性信息与附加属性信息；所述基本属性信息包括标题、尺寸、坐标、边距、颜色、文字颜色和样式中的至少一项；所述附加属性信息包括组件优先级、组件绑定的事件和特殊功能选项中的至少一项。

6.根据权利要求4所述的界面生成方法，还包括：

对所述配置信息进行验证，以判断所述配置信息是否满足所述可配置属性对应的数据条件，包括以下至少一项：

所述配置信息符合所述可配置属性对应的标准数据格式；

所述配置信息在所述可配置属性预设的参数可选值范围内；

若所述配置信息不满足所述可配置属性对应的数据条件，则输出提示消息。

7.根据权利要求1所述的界面生成方法，其特征在于，还包括：

通过所述属性配置界面，接收针对所述属性配置文件的更新配置信息，基于所述更新配置信息对所述属性配置文件进行重新配置，得到更新配置文件；

基于所述更新配置文件对所述目标界面进行更新。

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

获取模块，用于获取构成初始界面的至少一个组件；所述初始界面用于调整后得到目标界面；

描述模块，用于针对每一所述组件，获取所述组件的属性信息，用预设数据格式对所述组件的属性信息进行描述，得到对应的属性配置文件；

配置模块，用于基于所述属性配置文件生成针对所述组件的属性配置界面，通过所述属性配置界面对所述组件的属性配置文件进行配置；

生成模块，用于读取配置后的所述属性配置文件，以显示所述组件，基于每一显示的所述组件生成目标界面。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-7任一项所述的界面生成方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现权利要求1-7任一项所述的界面生成方法。

Images