CN112825038A - 基于通用组件语言规范的可视化页面制作方法和相关产品 - Google Patents

Abstract

本发明公开了一种基于通用组件语言规范的可视化页面制作方法和相关产品，方法包括：获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息；响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；根据所述设置信息加载可视化页面。本发明有利于不同开发者在维护和拓展新组件时保持一致性。

Description

基于通用组件语言规范的可视化页面制作方法和相关产品

技术领域

本发明涉及计算机技术领域，具体涉及一种基于通用组件语言规范的可视化页面制作方法和相关产品。

背景技术

目前市场上各类组件库层出不穷，组件库中组件数量多、表现丰富，视觉效果较好，但组件之间的组织方式并没有达成一致，因此不同的开发人员在维护原组件、扩展新组件时，难以保持一直性，导致维护成本大，用户使用体验差。

发明内容

本发明实施例提供了一种基于通用组件语言规范的可视化页面制作方法和相关产品，解决了组件的一致性问题，有利于不同开发者在维护原组件、拓展新组件时保持一致性。

第一方面，本发明实施例提供了一种基于通用组件语言规范的可视化页面制作方法，包括：

获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；

按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；

响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；

确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息，其中，所述设置信息用于对所述至少一个目标组件的属性和事件进行设置；

根据所述设置信息加载可视化页面。

第二方面，本发明实施例提供了一种基于通用组件语言规范的可视化页面制作装置，包括：

配置信息生成单元，用于获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；以及用于按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；

页面制作单元，用于响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；以及用于确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息，其中，所述设置信息用于对所述至少一个目标组件的属性和事件进行设置；以及用于根据所述设置信息加载可视化页面。

第三方面，本发明实施例提供了一种电子设备，所述电子设备包括处理器、存储器、通信接口，以及一个或多个程序，所述程序被存储在所述存储器中，并且被配置由所述处理器执行，所述程序包括用于执行如本申请实施例第一方面中所描述的部分或全部步骤。

第四方面，本发明实施例提供了一种计算机存储介质，所述计算机存储介质存储用于电子数据交换的计算机程序，所述计算机程序使得计算机执行如本申请实施例第一方面中所描述的部分或全部步骤。

可以看出，本申请实施例中通过获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息，其中，所述设置信息用于对所述至少一个目标组件的属性和事件进行设置；根据所述设置信息更新所述至少一个目标组件对应的至少一个初始配置信息，得到至少一个更新配置信息；根据所述至少一个更新配置信息得到目标配置信息；根据所述目标配置信息加载可视化页面。本发明实施例基于通用组件语言规范解决了组件的一致性问题，有利于不同开发者在维护原组件、拓展新组件时保持一致性，用户体验好。

附图说明

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

图1是本申请实施例提供的一种基于通用组件语言规范的可视化页面制作方法的流程示意图；

图2为本申请实施例提供的布局页面的示意图；

图3为本申请实施例提供的布局页面中事件设置的示意图；

图4为本申请实施例提供的组件组合的页面效果和配置信息的示意图；

图5是本申请实施例提供的需要适配的组件的可视化图；

图6是本申请实施例提供的基于通用组件语言规范的可视化页面制作流程图；

图7为本申请实施例提供的一种电子设备的结构示意图；

图8为本申请实施例提供了一种基于通用组件语言规范的可视化页面制作装置。

具体实施方式

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

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

如图1所示，图1为本申请实施例提供的一种基于通用组件语言规范的可视化页面制作方法的流程示意图，所述方法包括：

101、获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式。

其中，基于通用组件语言规范的可视化页面制作方法应用于可视化页面制作系统中，在该可视化页面制作系统中，存在一套或多套组件库，以一套组件库为例说明，一套组件库包括至少两个组件，在大多数应用场景中，可将组件库中的组件分为基础组件和业务组件两类，如当组件库为电商组件库时，基础组件可以包括：表单组件、图表组件、列表组件、按钮组件、下拉框组件等，业务组件可以包括：购物车组件、支付组件、通讯组件、评价组件等，业务组件可以是在基础组件的组合嵌套的基础上对其属性和方法进一步进行设置得到的。

一套组件库是由多人协同开发完成，在组件开发中可能出现命名冲突，如对于a组件和b组件的颜色属性，不同的开发人员分别命名为“color”和“colour”，因此，在正式的组件开发之前，需要确定要开发的组件库中包括哪些组件并对命名进行统一规范。

其中，一般的，在设计组件库中的组件时，都会按照统一的风格来设置组件，例如，可以将目标组件的扩展属性中的style(风格)的color(颜色)统一设置为red(红色)，当加载目标组件时，组件库将红色的颜色属性映射至可视化页面中的目标组件上，该目标组件显示为红色。

其中，因为目前的组件库中的组件的配置信息可读性较差，不仅需要用户掌握对应的编程知识，还需要花大量精力在阅读文档上，此外，因为组件之间的组织形式不一，因此也需要经常查询文档来了解组件支持的属性和方法，从而浪费大量时间和精力。因此，本申请实施例通过约定一种通用组件语言规范(Common Component LanguageSpecification，以下简称为CLS)对组件的组织形式进行规范。CLS是统一描述所有目标组件的属性和方法的一段规范的JSON(一种轻量级的数据交换格式)，其中，也可以采用其他内容格式如XML对组件进行描述。该规范将所有组件都按照同一种标准结构来描述，它依次按照组件的名称标识、基本属性、扩展属性、事件、有效性校验……的顺序对组件进行描述。

其中，名称标识包括id(唯一标识，可用于DOM文档对象模型中)、name(数据标识，用于和后台接口交互时的标识)和label(展示给用户看的文本，如“用户名”)，基本属性包括component(组件名称)、value(组件的值)、items(组件如果具有下一级结果，在此继续递归描述。借此方式，可以类似DOM形成一颗JSON树。简单场景如select(选择)的下拉列表、表格的列；复杂场景如组件间的嵌套)、decoration(用于修饰当前组件)、extra(在引入外部组件的场景下，用于向外部组件透传属性)、attributes(扩展属性)、events(组件上的事件)和validity(有效性校验)，扩展属性(attributes)包括class(组件顶层的CSS(层叠样式表)类名)、style(样式)、disabled(组件是否禁用编辑)、defaults(items的默认值)等，事件(events)包括click(监听组件的点击事件)、mouseEnter(监听组件的鼠标移入事件)、change(监听组件值的变化)等，有效性校验包括required(组件值是否必填)和format(组件值的数据类型)，方法包括get(获取)、set(设置)、trigger(eventName,data)(触发事件，eventName为事件名称，data包含了触发此事件的组件本身的完整配置)、eventHandler(处理trigger触发的事件)、show(显示)、hide(隐藏)等，其中，属性和方法相对应，如name属性可对应get name(获取名称)和set name(设置名称)。

其中，名称标识即Component必须描述，其他的属性或方法可按照实际情况进行说明，不必全部描述。在描述组件的事件时，需要通过方法和属性共同描述。在组件库开发过程时，每个组件都有对应的初始配置信息，组件的初始配置信息即是根据CLS得到的。为了得到组件的初始配置信息，首先要确定目标组件库中各个组件的预设特征，即确定各个组件的属性和方法(即确定组件的名称标识、基本属性、扩展属性、事件、有效性校验等)，然后获取与预设特征对应的描述信息，即通过描述信息体现组件的属性和方法。

102、按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的。

其中，按照组件的名称标识、基本属性、扩展属性、事件、有效性校验……的顺序将各个组件中的预设特征的描述信息组合在一起，即得到各个组件的初始配置信息。本实施例的组件库中各个组件的配置信息都是按照通用的语言规范进行描述的，可知，只要遵循该CLS的组件库均可以加载到可视化制作系统中，进行可视化制作和呈现。

103、响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中。

其中，在完成目标组件库的制作，并生成各组件对应的初始配置信息之后，还需要将目标组件库接入到可视化制作系统中，如此，在进入可视化制作系统的首页时，在显示布局页面的同时，也将显示组件库中各个组件，可视化制作系统可以是应用程序、软件或小程序等。

104、确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息。

其中，所述设置信息用于对所述至少一个目标组件的属性和事件进行设置。

其中，在所述确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息之前，所述方法还包括：

响应于组件选取指令，将所述至少一个目标组件加载至所述布局页面中。

其中，布局页面的示意图如图2所示，布局页面包括组件区、舞台区和配置区，在组件区包括各个类型的组件，如图2中所示，表单类型下可包括radio、多选、下拉、文本、按钮、上传，列表类型下可包括表格、手风琴和卡片，图标类型可包括饼图、线图、柱图和环图，还可包括其他类型的组件，用户在将组件区的文本组件拖拽至舞台区的目标位置后，在配置区将其组件名称设置为“游戏名称”，将其有效性校验中的类型设置为“字符串”，将组件区的下拉组件拖拽至名称为“游戏名称”的文本组件下方后，将其组件名称设置为“游戏类型”……即可得到图2中舞台区所示的“页面”，该页面所呈现的效果，可以是真实组件库加载进来的效果，也可以是对实际效果的模拟示意图。因此，在该过程中，目标组件即为文本组件、下拉组件等，以文本组件为例，其设置信息即组件名称和有效性校验。在配置去，用户可对选取的组件进行属性和方法的设置，在对其属性进行设置时，可设置各个组件的名称、取值、样式名以及其他属性，在对其方法进行设置时，如图3所示，选中组件为“form”表单组件，事件类型可选择“点击”，触发行为可选择“提交表单”，其中，事件类型包括：点击、双击、鼠标移入、鼠标移出、获得焦点、失去焦点、值发生变化等，触发行为包括：提交表单、跳转链接、关闭页面、显示组件、隐藏组件等。

105、根据所述设置信息加载可视化页面。

其中，所述根据所述设置信息加载可视化页面包括：

A1：根据所述设置信息更新所述至少一个目标组件对应的至少一个初始配置信息，得到至少一个更新配置信息。

其中，在对布局页面上的目标组件的属性和事件进行设置之后，系统将根据设置的属性和事件更新目标组件的初始配置信息，使得底层的配置信息与顶层页面所显示的目标组件相符。

其中，所述根据所述设置信息更新所述至少一个目标组件对应的至少一个初始配置信息，得到至少一个更新配置信息，包括：

B1：根据所述设置信息确认所述至少一个目标组件中每个目标组件的特征；

B2：根据所述至少一个目标组件中每个目标组件的特征更新所述至少一个目标组件中每个目标组件的预设特征的描述信息；

B3：按照预设顺序组织所述至少一个目标组件中每个目标组件的预设特征的更新后的描述信息，得到至少一个更新配置信息。

其中，至少一个更新配置信息也遵循通用组件语言规范。更新可以是只对目标组件的一部分属性或方法进行更新，也可以在目标组件原属性和原方法的基础上增添更多的属性和方法，例如对于按钮组件，可增添事件“click”以及对应的方法“hide”，使得在按钮组件被点击后隐藏。

A2：根据所述至少一个更新配置信息得到目标配置信息。

其中，用户在预览图2中舞台区所示的“页面”后，可将其进行保存，即得到该页面以及该页面对应的目标配置信息，例如用户想要得到图4中左侧所示的页面效果，相应的会生成右侧所示的目标配置信息。

其中，所述根据所述至少一个更新配置信息得到目标配置信息，包括：

确认所述至少一个目标组件中的关联组件，其中，所述关联组件间的关系包括嵌套和组合；

根据所述关联组件间的关系对所述关联组件对应的更新配置信息进行调整，得到关联配置信息；

根据所述关联配置信息和非关联组件的更新配置信息得到所述目标配置信息，其中，所述非关联组件为所述至少一个目标组件中除所述关联组件以外的目标组件。

其中，如图4所示，图4所示页面效果中包括输入组件input和按钮组件button，这两个组件之间通过组合并嵌套成一个大的组件，因此在其对应的目标配置文件中，先定义了一个“form”，然后将两个组件一起放入“form”中分别对输入组件的id、name、label、component、attributes、validity以及按钮组件的id、name、label、component、attributes进行表述，。

其中，目标配置文件的本质是程序体，因为目标配置信息的内容格式为JSON，所以整个目标配置文件的内容格式也为JSON，可以在需要的时候将组件的目标配置信息转化为各编程语言所支持的数据格式，因此本申请实施例中这种由组件组成页面的描述方法可用于快速页面开发，支持跨平台、跨程序语言，适合Web开发、iOS和Android的终端开发、桌面开发等。

A3：根据所述目标配置信息加载可视化页面。

其中，页面渲染时会加载组件库，解析引擎解析各个目标组件的目标配置信息，将目标配置信息对接为组件展示，从而显示由各个目标组件构成的预览页面，在此之后，用户可选择预览或保存该页面，或者继续修改预览页面，也可查看该页面对应的源码，即目标配置信息。

其中，根据目标配置信息从组件库中加载目标组件，则页面中显示的目标组件的属性和方法会相应的更新，例如，目标组件为按钮，默认颜色为红色，将其配置为绿色，则在解析对应的配置文件后，页面上将会加载绿色的按钮。在将所有的组件的配置信息依次解析并完成加载之后，最终将得到由所有目标组件构成的可视化页面。

其中，在未将可视化制作工具接入组件库时，即组件不可视时，也可进行可视化页面的制作，方法如下：

确认至少一个目标组件和所述至少一个目标组件的预设特征；

获取所述至少一个目标组件中每个目标组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；

按照预设顺序组织所述至少一个目标组件中每个目标组件的预设特征的描述信息，得到所述至少一个目标组件的至少一个配置信息；

根据所述至少一个配置信息得到目标配置信息；

根据所述目标配置信息从组件库中加载所述目标组件，得到所述可视化页面；

其中，所述预设特征、所述预设格式和所述预设顺序是由所述通用组件语言规范所约束的。

其中，所述根据所述目标配置信息从组件库中加载所述目标组件，得到所述可视化页面，包括：

解析所述目标配置信息，得到所述至少一个配置信息，所述配置信息包括组件名称；

根据所述组件名称从组件库中获取所述至少一个目标组件；

根据所述至少一个配置信息对所述至少一个目标组件进行配置；

加载配置后的所述至少一个目标组件，得到所述可视化页面。

其中，可以通过目标配置信息直接读取到组件的属性的参数以及方法，从而得到目标组件的目标参数，当由组件名称解析出JSON描述的页面组件时，加载对应的组件进行实例化，使得最终能呈现为完整的页面，如小程序页面，H5(HTML5第5代html标准规范)页面等。

例如：

在解析上述配置信息时，解析引擎首先读取这段JSON，然后逐个遍历JSON内的每个属性和值，当解析到"component":"button"，可知这是一个按钮组件，需要加载这个组件来做具体执行的载体；解析到"label":"购买"，则“购买”这个值会被传入到按钮组件内，并在按钮上显示“购买”这两个字；解析到"attributes"，可知这个属性的值是JavaScript对象，需要进一步遍历解析，因此进一步遍历attributes，得到"style":"background:green"，则这个值会传入到组件内，并把按钮背景色设置为绿色。经过这样的解析后，就得到了一个绿色的带有“购买“字样的按钮。

可见，本实施例中的组件库可脱离可视化制作工具单独使用，实现可视化页面的制作。

本实施例基于MVVM(Model-View-ViewModel，一种软件架构)可以将页面呈现与业务逻辑相剥离，其中，页面呈现与业务逻辑之间双向绑定，互相映射，因此可以通过底层的对组件的属性和方法进行配置，来得到可视化页面，也可以通过拖拽可视化的组件到页面中指定的位置并对组件的属性进行设置从而得到可视化页面，在这种情况下，组件的默认配置信息也会跟随改变。

可以看出，本申请实施例中首先通过获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；从而使得符合该通用组件语言规范的组件库都可以被接入到同一套可视化制作系统中，而组件组织的一致性，也有利于开发人员对其进行维护。然后响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；根据所述设置信息加载可视化页面。通过可视化的方式显示组件库中各个组件有利于用户使用组件快速构建页面，减低组件属性的记忆成本。

在一个可能的示例中，在所述根据所述目标配置信息加载可视化页面之后，所述方法还包括：

响应于触发指令，执行触发事件，其中，所述触发事件与所述触发指令一一对应，所述触发事件属于所述预设特征。

其中，通过在图2所示的配置区对组件的事件进行设置或者直接对组件的配置文件中的“事件(event)”进行设置，可实现复杂的处理逻辑，如组件之间的调用、页面的跳转等，当用户有效的触发一个组件时，该组件即执行相应的触发事件。

可见，本实施例最终得到的可视化页面并不是单一的简单页面，而是可以具有复杂处理逻辑和处理方法的页面。

在一个可能的示例中，若组件库为多组件库，将所述至少两个组件从所述目标组件库加载到所述布局页面中，包括：

响应于组件库选取指令，获取与所述目标组件库对应的目标描述文件；

根据所述目标描述文件将所述至少两个组件从所述目标组件库中加载到所述布局页面中。

其中，所述描述文件为components.json文件，该文件位于组件库的根目录下，用于描述当前组件库包含的所有组件，以及对应的分类方式、组件名称、ICON以及组件存储路径，以便组件库可被可视化页面制作系统识别。components.json文件可以通过扫描各组件文件而生成，在每个组件文件的内部实现中包含对组件信息的描述。

每个组件库都有一个对应的描述文件，用户在布局页面中选取组件库之后，系统会获取与该组件库对应的目标描述文件，根据该目标描述文件加载对应的组件到组件区中。若组件库只有一个，则显示布局页面后，将自动加载该组件库，若组件库有多个，可设置默认加载的组件库或设置加载上一次制作可视化页面时所加载的组件库。若有多个组件库，且所述目标组件库不是默认加载的组件库，则所述将所述多个组件从所述目标组件库加载到所述布局页面中，包括：将多个组件从默认组件库加载到所述布局页面中；响应于组件库选取指令，卸载所述默认组件库，并将所述多个组件从所述目标组件库加载到所述布局页面中。

其中，组件库可以有多个，如基础组件库、游戏组件库、电商组件库、旅游组件库等，可以针对不同的行业构建不同的组件库，从而使该可视化页面制作方法适用于更大的行业范围，也可将外接组件库接入可视化页面制作系统中，扩充其组件库。为了使组件库在多运行平台适用，如web(网页)、Android APP(安卓应用程序)、小程序等，不需要更改组件的配置信息，只需要按照页面实际的执行环境实现各个组件库即可。

可见，本实施例中提供的可视化页面制作方法可支持多组件库，实现组件库的可插拔使用，能满足不同场景的需求。

在一个可能的示例中，所述目标描述文件通过在组件文件中定位关键内容得到，所述在组件文件中定位关键内容包括：

按照目录顺序依次扫描所述至少两个组件中每个组件的组件文件，根据预设关键字在所述至少两个组件中每个组件的组件文件中定位关键内容；

根据所述关键内容生成所述目标扫描文件。

其中，预设关键字包括component、name、group、path和icon。在扫描组件文件时，如扫描到关键字：component，则可定位到相关的关键内容："component":"container"，如此，根据该组件的关键内容可生成描述文件。

扫描的过程举例如下：组件库下有一个名称为components的文件夹，在该文件夹下有input文件和button文件，这两个文件分别对应输入组件和按钮组件，其中，input文件中包括input.vue(组件)、input.css(样式表)、input.icon(图标)。在逐层扫描到input.vue文件时，在该文件内容中扫描到：@description文本输入框，则可获取输入组件的备注信息，在扫描完input文件后即可生成输入组件对应的描述信息，在扫描完组件库中所有组件对应的文件后即可生成描述文件。其中，描述文件也可以人工编写。

可见，按照本实施例提供的方法可以快速而完整的生成描述文件，且准确率高。

在一个可能的示例中，若所述目标组件库为外接组件库，在所述响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中之前，所述方法还包括：

获取所述外接组件库中至少一个组件的页面结构和JavaScript脚本；

根据所述页面结构确认所述至少一个组件的参数的名称，根据所述JavaScript脚本确认所述至少一个组件的初始配置信息；

根据所述至少一个组件的参数的名称确定所述组件库中的至少一个映射参数，并将所述至少一个组件的初始配置信息中的预设特征传给所述至少一个映射参数，所述至少一个映射参数与所述至少一个组件的参数一一对应；

根据所述至少一个映射参数的预设特征生成所述至少一个组件的初始配置信息。

其中，对于外接组件库，因为其中组件的配置信息并未按照CLS和JSON语法进行描述，因此无法直接接入可视化页面制作系统中，需要对其进行适配。组件的配置信息包括页面结构和JavaScript脚本，其中，页面结构可为HTML标签，如template标签等。可根据页面结构确定参数名，根据JavaScript脚本确认参数的值，因为外接组件库中组件的参数名与可视化页面制作系统规定的组件的参数名可能不同，因此需要在系统中找到与外接组件库中组件的参数(如colour)对应的参数即映射参数(如color)，并将外接组件库中组件的预设特征(如red)传给映射参数，在此之后，可对组件的映射参数按照CLS和JSON语法进行描述，得到初始配置信息。

参见图5，图5是本申请实施例提供的需要适配的组件的可视化图，图中有两个复选框，其标签分别为“备选项1”和“备选项2”，且备选项1的复选框为选中状态，备选项2的复选框为未选中状态，该外接组件对应的配置信息如下：

将上述配置信息经过适配之后，得到符合预设结构的配置信息：

可知，上述符合预设结构的配置信息中的每一项均可以映射到外接组件对应的配置信息中，从而实现与外接组件库的对接。

可见，基于通用组件语言规范建立的页面可通过本实施例中提供的适配方法，在底层能被不同的组件库支持。

参见图6，图6是本申请实施例提供的基于通用组件语言规范的可视化页面制作流程图，首先，按照组件库的目录顺序扫描各个组件文件如表单组件、列表组件、图表组件等的文件，获取各个组件的分类方式、组件名称、ICON以及组件存储路径，从而生成components.json文件，解析引擎解析该文件内容后在图2中的组件区显示各个组件，之后，用户可在布局页面通过拖拽布局和设置属性进行可视化页面制作，在输出预览页面后，用户可选择保存可视化页面。

可见，基于CLS实现的组件库，结合可视化制作工具，使得页面构建成本进一步降低，页面制作无需开发经验，简单拖拽就能完成，如产品策划人员制作产品原型，电商运营人员装修店铺页面等，此外，还支持多组件库切换，能满足不同场景的需求。

请参阅图7，图7为本申请实施例提供的一种电子设备的结构示意图，如图所示，包括处理器、存储器、通信接口，以及一个或至少两个程序，所述程序被存储在所述存储器中，并且被配置由所述处理器执行。所述程序包括用于执行以下步骤的指令：

获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；

按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；

响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；

确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；

根据所述设置信息加载可视化页面。

可以看出，本申请实施例中首先通过获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；从而使得符合该通用组件语言规范的组件库都可以被接入到同一套可视化制作系统中，而组件组织的一致性，也有利于开发人员对其进行维护。然后响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；根据所述设置信息加载可视化页面。通过可视化的方式显示组件库中各个组件有利于用户使用组件快速构建页面，减低组件属性的记忆成本。

上述主要从方法执行过程的角度对本申请实施例的方案进行了介绍。可以理解的是，终端为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到，结合本文中所提供的实施例描述的各示例的单元及算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本申请实施例可以根据上述方法示例对终端进行功能单元的划分，例如，可以对应各个功能划分各个功能单元，也可以将两个或两个以上的功能集成在一个处理单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。需要说明的是，本申请实施例中对单元的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

与上述一致的，请参阅图8，图8为本申请实施例提供了一种基于通用组件语言规范的可视化页面制作装置。所述可视化页面制作装置包括配置信息生成单元801、页面制作单元802，其中：

配置信息生成单元801，用于获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；以及用于按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；

页面制作单元802，用于响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；以及用于确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；以及用于根据所述设置信息加载可视化页面。

可以看出，本申请实施例中首先通过获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；从而使得符合该通用组件语言规范的组件库都可以被接入到同一套可视化制作系统中，而组件组织的一致性，也有利于开发人员对其进行维护。然后响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；根据所述设置信息加载可视化页面。通过可视化的方式显示组件库中各个组件有利于用户使用组件快速构建页面，减低组件属性的记忆成本。

本申请实施例还提供一种计算机可读存储介质，存储用于电子数据交换的计算机程序，该计算机程序使得计算机执行如上述方法实施例中记载的任何一种基于通用组件语言规范的可视化页面制作方法的部分或全部步骤。

本申请实施例还提供一种计算机程序产品，所述计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，该计算机程序使得计算机执行如上述方法实施例中记载的任何一种基于通用组件语言规范的可视化页面制作方法的部分或全部步骤。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

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

Claims (12)

1.一种基于通用组件语言规范的可视化页面制作方法，其特征在于，所述方法包括：

获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；

按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息；

响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；

确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；

根据所述设置信息加载可视化页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述设置信息加载可视化页面，包括：

根据所述设置信息更新所述至少一个目标组件对应的至少一个初始配置信息，得到至少一个更新配置信息；

根据所述至少一个更新配置信息得到目标配置信息；

根据所述目标配置信息加载可视化页面。

3.根据权利要求2所述的方法，其特征在于，所述根据所述至少一个更新配置信息得到目标配置信息，包括：

确认所述至少一个目标组件中的关联组件，其中，所述关联组件间的关系包括嵌套和组合；

根据所述关联组件间的关系对所述关联组件对应的更新配置信息进行调整，得到关联配置信息；

根据所述关联配置信息和非关联组件的更新配置信息得到所述目标配置信息，其中，所述非关联组件为所述至少一个目标组件中除所述关联组件以外的目标组件。

4.根据权利要求2所述的方法，其特征在于，所述根据所述设置信息更新所述至少一个目标组件对应的至少一个初始配置信息，得到至少一个更新配置信息，包括：

根据所述设置信息确认所述至少一个目标组件中每个目标组件的特征；

根据所述至少一个目标组件中每个目标组件的特征更新所述至少一个目标组件中每个目标组件的预设特征的描述信息；

按照预设顺序组织所述至少一个目标组件中每个目标组件的预设特征的更新后的描述信息，得到至少一个更新配置信息。

5.根据权利要求1所述的方法，其特征在于，在所述根据所述目标配置信息加载可视化页面之后，所述方法还包括：

响应于触发指令，执行触发事件，其中，所述触发事件与所述触发指令一一对应，所述触发事件属于所述预设特征。

6.根据权利要求1所述的方法，其特征在于，若组件库为多组件库，将所述至少两个组件从所述目标组件库加载到所述布局页面中，包括：

响应于组件库选取指令，获取与所述目标组件库对应的目标描述文件；

根据所述目标描述文件将所述至少两个组件从所述目标组件库中加载到所述布局页面中。

7.根据权利要求6所述的方法，其特征在于，所述目标描述文件通过在组件文件中定位关键内容得到，所述在组件文件中定位关键内容包括：

按照目录顺序依次扫描所述至少两个组件中每个组件的组件文件，根据预设关键字在所述至少两个组件中每个组件的组件文件中定位关键内容；

根据所述关键内容生成所述目标扫描文件。

8.根据权利要求1所述的方法，其特征在于，在所述确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息之前，所述方法还包括：

响应于组件选取指令，将所述至少一个目标组件加载至所述布局页面中。

9.根据权利要求1所述的方法，其特征在于，若所述目标组件库为外接组件库，在所述响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中之前，所述方法还包括：

获取所述外接组件库中至少一个组件的页面结构和JavaScript脚本；

根据所述页面结构确认所述至少一个组件的参数的名称，根据所述JavaScript脚本确认所述至少一个组件的初始配置信息；

根据所述至少一个组件的参数的名称确定所述组件库中的至少一个映射参数，并将所述至少一个组件的初始配置信息中的预设特征传给所述至少一个映射参数，所述至少一个映射参数与所述至少一个组件的参数一一对应；

根据所述至少一个映射参数的预设特征生成所述至少一个组件的初始配置信息。

10.一种基于通用组件语言规范的可视化页面制作装置，其特征在于，包括：

配置信息生成单元，用于获取目标组件库中至少两个组件的预设特征的描述信息，所述描述信息的内容格式为预设格式；以及用于按照预设顺序组织所述至少两个组件中每个组件的预设特征的描述信息，得到所述至少两个组件中每个组件的初始配置信息，其中，所述预设特征、所述预设格式和所述预设顺序是由通用组件语言规范所约束的；

页面制作单元，用于响应于页面制作指令，显示布局页面，将所述至少两个组件从所述目标组件库加载到所述布局页面中；以及用于确认所述布局页面中的至少一个目标组件，并获取所述至少一个目标组件的设置信息；以及用于根据所述设置信息加载可视化页面。

11.一种电子设备，其特征在于，包括处理器、存储器、通信接口，以及一个或多个程序，所述程序被存储在所述存储器中，并且被配置由所述处理器执行，所述程序包括用于执行如权利要求1-9任一项所述的方法中的步骤的指令。

12.一种计算机可读存储介质，其特征在于，存储用于电子数据交换的计算机程序，其中，所述计算机程序使得计算机执行如权利要求1-9任一项所述的方法。

Images