目标组件的样式生成方法、装置、电子设备及存储介质与流程

[0001]
本公开涉及计算机技术领域，尤其涉及一种目标组件的样式生成方法、装置、电子设备及存储介质。


背景技术：

[0002]
随着计算机技术和互联网技术的飞速发展，产生了越来越多的互联网任务，例如，学习任务、签到任务、视频播放任务等等。针对各种任务，需要开发对应的组件，利用组件展示任务完成情况。
[0003]
相关技术中，开发人员需要针对各任务的任务类型、任务内容、完成条件等开发不同的组件，而且，还需要对各组件的样式进行设计，例如，针对视频播放任务，视频播放任务的组件的样式可以为视频播放时间占任务完成总时间的百分比，该视频播放任务的组件的样式属于动态样式。又例如，针对学习任务，学习任务的组件的样式可以为学习章节的数量占任务总章节的比值，该学习任务的组件的样式属于静态样式。因此，开发人员针对每个任务的组件都需要设计对应的样式，增加了开发成本，而且，组件开发的效率比较低。


技术实现要素：

[0004]
本公开提供了一种目标组件的样式生成方法、装置、电子设备及存储介质，以至少解决相关技术中开发人员设计组件的样式需要消耗开发成本，而且，组件开发效率低的问题。本公开的技术方案如下：
[0005]
根据本公开实施例的第一方面，提供了一种目标组件的样式生成方法，包括：接收账户的编辑指令，根据所述编辑指令生成目标组件的属性配置文件，所述属性配置文件包含用于生成所述目标组件的样式的参数；从所述参数中获取所述目标组件的目标参数；根据所述目标组件的动态样式属性和所述目标参数生成所述目标组件的样式。
[0006]
可选地，所述参数包含以下至少之一：样式类型信息、组件背景信息、组件尺寸信息、组件边角信息、组件任务总数信息、组件任务完成数信息、组件动效信息。
[0007]
可选地，所述从所述参数中获取所述目标组件的目标参数，包括：根据所述目标组件的传递属性和所述样式类型信息从所述参数中获取到目标参数。
[0008]
可选地，所述方法还包括：根据所述传递属性获取与所述目标参数对应的数据类型和/或与所述目标参数对应的默认信息。
[0009]
可选地，所述根据所述目标组件的动态样式属性和所述目标参数生成所述目标组件的样式，包括：将所述目标参数作为所述动态样式属性的属性值；按照所述属性值以及所述属性值与所述目标组件的样式的对应关系生成所述目标组件的样式。
[0010]
可选地，所述目标组件包含进度条组件。
[0011]
根据本公开实施例的第二方面，提供了一种目标组件的样式生成装置，包括：参数生成模块，被配置为接收账户的编辑指令，根据所述编辑指令生成目标组件的属性配置文件，所述属性配置文件包含用于生成所述目标组件的样式的参数；参数获取模块，被配置为
从所述参数中获取所述目标组件的目标参数；样式生成模块，被配置为根据所述目标组件的动态样式属性和所述目标参数生成所述目标组件的样式。
[0012]
可选地，所述参数包含以下至少之一：样式类型信息、组件背景信息、组件尺寸信息、组件边角信息、组件任务总数信息、组件任务完成数信息、组件动效信息。
[0013]
可选地，所述参数获取模块，被配置为根据所述目标组件的传递属性和所述样式类型信息从所述参数中获取到目标参数。
[0014]
可选地，所述参数获取模块，还被配置为根据所述传递属性获取与所述目标参数对应的数据类型和/或与所述目标参数对应的默认信息。
[0015]
可选地，所述样式生成模块，包括：属性值确定模块，被配置为将所述目标参数作为所述动态样式属性的属性值；组件样式生成模块，被配置为按照所述属性值以及所述属性值与所述目标组件的样式的对应关系生成所述目标组件的样式。
[0016]
可选地，所述目标组件包含进度条组件。
[0017]
根据本公开实施例的第三方面，提供了一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如第一方面所述的目标组件的样式生成方法。
[0018]
根据本公开实施例的第四方面，提供了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如第一方面所述的目标组件的样式生成方法。
[0019]
根据本公开实施例的第五方面，提供了一种计算机程序产品，包括可读性程序代码，所述可读性程序代码可由电子设备的处理器执行以完成上述第一方面所述的目标组件的样式生成方法。
[0020]
本公开的实施例提供的技术方案至少带来以下有益效果：
[0021]
本公开的实施例提供的目标组件的样式生成方案，接收账户的编辑指令，根据编辑指令生成目标组件的属性配置文件。其中，账户可以为目标组件的开发人员，属性配置文件中可以包含用于生成目标组件的样式的参数。从上述参数中获取目标组件的目标参数，进而根据目标组件的动态样式属性和目标参数生成目标组件的样式。
[0022]
在本公开的实施例中，目标组件的开发人员可以预先创建属性配置文件，属性配置文件中可以包含生成目标组件的样式所需的各种参数。当需要生成目标组件的样式时，可以将目标参数传递到目标组件内，由目标组件的动态样式属性根据目标参数自动生成目标组件的样式。本公开的实施例在预先创建的属性配置文件的基础之上，通过将属性配置文件中的目标参数传递至目标组件内，自动生成目标组件的样式，避免了开发人员手动设计目标组件的样式，降低了人工成本，在批量开发目标组件的场景下，提高了组件开发的效率。
[0023]
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
[0024]
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
[0025]
图1是根据一示例性实施例示出的一种目标组件的样式生成方法的流程图。
[0026]
图2是根据一示例性实施例示出的一种目标组件的样式生成装置的框图。
[0027]
图3是根据一示例性实施例示出的一种目标组件的样式生成电子设备的框图。
[0028]
图4是根据一示例性实施例示出的一种用于生成目标组件的样式的电子设备的框图。
具体实施方式
[0029]
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
[0030]
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
[0031]
图1是根据一示例性实施例示出的一种目标组件的样式生成方法的流程图，如图1所示，该目标组件的样式生成方法可以应用于服务器。该目标组件的样式生成方法具体可以包括以下步骤。
[0032]
在步骤s11中，接收账户的编辑指令，根据编辑指令生成目标组件的属性配置文件。
[0033]
在本公开的实施例中，账户可以立即为目标组件的开发人员，开发人员执行编辑操作，进而由编辑操作产生编辑指令。在实际应用中，编辑指令可以包含但不限于：开发人员的身份标识、操作标识、参数等等。其中，参数可以包含参数内容或者参数值等。
[0034]
接收到编辑指令之后，可以根据编辑指令生成属性配置文件，在属性配置文件中可以包含用于生成目标组件的样式的参数。
[0035]
例如，<目标组件名称:config＝”self_conf”></目标组件名称>，其中，config表示属性配置文件，self_conf表示参数。
[0036]
在步骤s12中，从参数中获取目标组件的目标参数。
[0037]
在本公开的实施例中，在开发人员创建完毕属性配置文件之后，可以将属性配置文件中的参数传递给目标组件，在实际应用中，可以传递全部参数至目标组件，也可以传递部分参数至目标组件。
[0038]
在步骤s13中，根据目标组件的动态样式属性和目标参数生成目标组件的样式。
[0039]
在本公开的实施例中，为目标组件设置对应的动态样式属性，进而根据动态样式属性和目标参数生成目标组件的样式。
[0040]
本公开的实施例提供的目标组件的样式生成方案，接收账户的编辑指令，根据编辑指令生成目标组件的属性配置文件。其中，账户可以为目标组件的开发人员，属性配置文件中可以包含用于生成目标组件的样式的参数。从上述参数中获取目标组件的目标参数，进而根据目标组件的动态样式属性和目标参数生成目标组件的样式。
[0041]
在本公开的实施例中，目标组件的开发人员可以预先创建属性配置文件，属性配
置文件中可以包含生成目标组件的样式所需的各种参数。当需要生成目标组件的样式时，可以将目标参数传递到目标组件内，由目标组件的动态样式属性根据目标参数自动生成目标组件的样式。本公开的实施例在预先创建的属性配置文件的基础之上，通过将属性配置文件中的目标参数传递至目标组件内，自动生成目标组件的样式，避免了开发人员手动设计目标组件的样式，降低了人工成本，在批量开发目标组件的场景下，提高了组件开发的效率。
[0042]
在本公开的一种示例性实施例中，目标组件可以包含进度条组件，下面以进度条组件为例进行说明，进度条组件的参数可以包含以下至少之一：样式类型信息、组件背景信息、组件尺寸信息、组件边角信息、组件任务总数信息、组件任务完成数信息、组件动效信息等。在实际应用中，属性配置文件中的参数可以包括如下几种：
[0043]
1、type(样式类型；具体参数内容可以为“1”或者“2”或者其他数值。当参数内容为1时，表示目标组件按照百分比的样式展现，当参数内容为2时，表示目标组件按照个数的样式展现)
[0044]
2、undone_bg(进度条未完成时的背景色或图片)
[0045]
3、done_bg(进度条完成时的背景色或图片)
[0046]
4、width、height(进度条的长度、高度)
[0047]
5、border_radius(进度条的圆角)
[0048]
6、show_point(是否显示进度条完成时的圆点，圆点表示进度条的完成标识，只在type＝2时该参数才有效)
[0049]
7、ponint_bg(进度条完成时的圆点的背景色或图片，只在type＝2时该参数才有效)
[0050]
8、max_number(总任务数)
[0051]
9、now_number(当前完成任务数)
[0052]
10、show_animate(是否显示进度条完成时的动画)
[0053]
其中，上述参数type即样式类型信息，上述参数undone_bg、done_bg、ponint_bg即组件背景信息，上述参数width、height即组件尺寸信息，上述参数border_radius即组件边角信息，上述参数show_point、show_animate即组件动效信息，上述参数max_number即组件任务总数信息，上述参数now_number即组件任务完成数信息。上述各参数中可以包含对应的参数内容，例如，参数type的参数内容为“1”。
[0054]
在本公开的一种示例性实施例中，在上述步骤s12的执行过程中，可以根据目标组件的传递属性和样式类型信息从属性配置文件的参数中获取目标参数。其中，目标参数可以理解为生成目标组件的样式的有效参数。例如，当上述参数type的参数内容为“1”时，参数show_point和参数ponint_bg不是目标参数。因此，在获取目标参数时，需要先获取参数type，根据参数type的参数内容判断哪些参数是目标参数，哪些参数不是目标参数。
[0055]
在实际应用中，如果目标组件采用vue.js(一套构建用户界面的渐进式框架)封装，那么传递属性可以为props属性。例如，在props属性中，可以根据[config:{type:object,default:{}}]获取目标参数。其中，config表示属性配置文件，type表示参数“样式类型”，object表示参数“样式类型”的数据类型，如浮点型、字符型等，default表示参数“样式类型”的默认信息，如“1”。又例如，可以根据[config:{undone_bg:object,default:{}}]
获取参数“undone_bg”。
[0056]
在本公开的一种示例性实施例中，在上述步骤s13的执行过程中，仍然以vue.js封装的目标组件为例进行说明，为vue组件的标签设置动态样式属性，即动态“style”属性。该动态“style”属性用于根据属性值为vue组件生成对应的样式。因此，将获取到的目标参数作为动态“style”属性的属性值，即将目标参数的名称和对应的参数内容作为动态“style”属性的属性值。然后，按照动态“style”属性的属性值与vue组件的样式之间的对应关系生成vue组件的样式。
[0057]
例如，若生成vue组件的长度和高度，则从动态“style”属性的属性值中读取出参数width、height及其参数内容，进而根据参数内容生成vue组件的长度和高度。如果从动态“style”属性的属性值中读取出参数type及其参数内容为“2”，则生成按照个数的样式展现的vue组件，若从动态“style”属性的属性值中读取出参数show_point的参数内容为“ture”，则为vue组件设置任务点。并根据动态“style”属性的属性值中的参数ponint_bg的参数内容设置任务点的背景色。还可以根据动态“style”属性的属性值中的参数done_bg的参数内容设置任务完成时组件的背景色。除此之外，还可以根据动态“style”属性的属性值中的参数now_number的参数内容和参数max_number的参数内容计算出任务完成的百分比，即将参数now_number的参数内容除以参数max_number的参数内容，得到任务完成的百分比。当动态“style”属性的属性值中的参数show_animate的参数内容为“ture”时，进一步根据参数show_animate的参数内容“0.5s linear”为进度条设置完成时的动画效果。
[0058]
本公开的实施例可以根据任意具有页面展示功能的框架封装目标组件，如vue，除此之外，还可以直接通过超级文本标记语言(hyper text markup language，简称html)和层叠样式表(cascading style sheets，简称css)生成目标组件，也就是说，本公开的实施例可以为任意目标组件生成对应的样式，兼容性强。并非限定只能为一种或几种目标组件生成对应的样式，扩大了目标组件的适应范围。
[0059]
本公开的实施例的属性配置文件中，具体的参数可以根据实际情况进行设置，提高了目标组件的样式生成的灵活性。
[0060]
图2是根据一示例性实施例示出的一种目标组件的样式生成装置的框图。该装置可以应用于服务器，该装置具体可以包括如下模块。
[0061]
参数生成模块21，被配置为接收账户的编辑指令，根据所述编辑指令生成目标组件的属性配置文件，所述属性配置文件包含用于生成所述目标组件的样式的参数；
[0062]
参数获取模块22，被配置为从所述参数中获取所述目标组件的目标参数；
[0063]
样式生成模块23，被配置为根据所述目标组件的动态样式属性和所述目标参数生成所述目标组件的样式。
[0064]
在本公开的一种示例性实施例中，所述参数包含以下至少之一：
[0065]
样式类型信息、组件背景信息、组件尺寸信息、组件边角信息、组件任务总数信息、组件任务完成数信息、组件动效信息。
[0066]
在本公开的一种示例性实施例中，所述参数获取模块22，被配置为根据所述目标组件的传递属性和所述样式类型信息从所述参数中获取到目标参数。
[0067]
在本公开的一种示例性实施例中，所述参数获取模块22，还被配置为根据所述传递属性获取与所述目标参数对应的数据类型和/或与所述目标参数对应的默认信息。
[0068]
在本公开的一种示例性实施例中，所述样式生成模块23，包括：
[0069]
属性值确定模块，被配置为将所述目标参数作为所述动态样式属性的属性值；
[0070]
组件样式生成模块，被配置为按照所述属性值以及所述属性值与所述目标组件的样式的对应关系生成所述目标组件的样式。
[0071]
在本公开的一种示例性实施例中，所述目标组件包含进度条组件。
[0072]
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
[0073]
图3是根据一示例性实施例示出的一种目标组件的样式生成电子设备300的框图。例如，电子设备300可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
[0074]
参照图3，电子设备300可以包括以下一个或多个组件：处理组件302，存储器304，电力组件306，多媒体组件308，音频组件310，输入/输出(i/o)的接口312，传感器组件314，以及通信组件316。
[0075]
处理组件302通常控制电子设备300的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件302可以包括一个或多个处理器320来执行指令，以完成上述目标组件的样式生成方法的全部或部分步骤。此外，处理组件302可以包括一个或多个模块，便于处理组件302和其他组件之间的交互。例如，处理组件302可以包括多媒体模块，以方便多媒体组件308和处理组件302之间的交互。
[0076]
存储器304被配置为存储各种类型的数据以支持在电子设备300的操作。这些数据的示例包括用于在电子设备300上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图像，视频等。存储器304可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘或光盘。
[0077]
电源组件306为电子设备300的各种组件提供电力。电源组件306可以包括电源管理系统，一个或多个电源，及其他与为电子设备300生成、管理和分配电力相关联的组件。
[0078]
多媒体组件308包括在所述电子设备300和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(lcd)和触摸面板(tp)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件308包括一个前置摄像头和/或后置摄像头。当电子设备300处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
[0079]
音频组件310被配置为输出和/或输入音频信号。例如，音频组件310包括一个麦克风(mic)，当电子设备300处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器304或经由通信组件316发送。在一些实施例中，音频组件310还包括一个扬声器，用于输出音频信号。
[0080]
i/o接口312为处理组件302和外围接口模块之间提供接口，上述外围接口模块可
以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
[0081]
传感器组件314包括一个或多个传感器，用于为电子设备300提供各个方面的状态评估。例如，传感器组件314可以检测到电子设备300的打开/关闭状态，组件的相对定位，例如所述组件为电子设备300的显示器和小键盘，传感器组件314还可以检测电子设备300或电子设备300一个组件的位置改变，用户与电子设备300接触的存在或不存在，电子设备300方位或加速/减速和电子设备300的温度变化。传感器组件314可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件314还可以包括光传感器，如cmos或ccd图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件314还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
[0082]
通信组件316被配置为便于电子设备300和其他设备之间有线或无线方式的通信。电子设备300可以接入基于通信标准的无线网络，如wifi，运营商网络(如2g、3g、4g或5g)，或它们的组合。在一个示例性实施例中，通信组件316经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件316还包括近场通信(nfc)模块，以促进短程通信。例如，在nfc模块可基于射频识别(rfid)技术，红外数据协会(irda)技术，超宽带(uwb)技术，蓝牙(bt)技术和其他技术来实现。
[0083]
在示例性实施例中，电子设备300可以被一个或多个应用专用集成电路(asic)、数字信号处理器(dsp)、数字信号处理设备(dspd)、可编程逻辑器件(pld)、现场可编程门阵列(fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述目标组件的样式生成方法。
[0084]
在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器304，上述指令可由电子设备300的处理器320执行以完成上述目标组件的样式生成方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。
[0085]
在示例性实施例中，还提供了一种计算机程序产品，该计算机程序产品包括可读性程序代码，该可读性程序代码可由电子设备300的处理器320执行以完成上述目标组件的样式生成方法。可选地，该程序代码可以存储在电子设备300的存储介质中，该存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。
[0086]
图4是根据一示例性实施例示出的一种用于生成目标组件的样式的电子设备400的框图。例如，电子设备400可以被提供为一服务器。参照图4，电子设备400包括处理组件422，其进一步包括一个或多个处理器，以及由存储器432所代表的存储器资源，用于存储可由处理组件422的执行的指令，例如应用程序。存储器432中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件422被配置为执行指令，以执行上述目标组件的样式生成方法。
[0087]
电子设备400还可以包括一个电源组件426被配置为执行电子设备400的电源管理，一个有线或无线网络接口450被配置为将电子设备400连接到网络，和一个输入输出(i/o)接口458。电子设备400可以操作基于存储在存储器432的操作系统，例如windows servertm，mac os xtm，unixtm,linuxtm，freebsdtm或类似。
[0088]
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
[0089]
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。