CN109885298A - 一种ui组件生成方法、装置和终端设备 - Google Patents
一种ui组件生成方法、装置和终端设备 Download PDFInfo
- Publication number
- CN109885298A CN109885298A CN201910126229.2A CN201910126229A CN109885298A CN 109885298 A CN109885298 A CN 109885298A CN 201910126229 A CN201910126229 A CN 201910126229A CN 109885298 A CN109885298 A CN 109885298A
- Authority
- CN
- China
- Prior art keywords
- key
- value
- value pair
- description file
- code
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 230000008685 targeting Effects 0.000 claims description 46
- 238000004590 computer program Methods 0.000 claims description 11
- 238000000354 decomposition reaction Methods 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 description 8
- 241000406668 Loxodonta cyclotis Species 0.000 description 4
- 238000004891 communication Methods 0.000 description 4
- 241000208340 Araliaceae Species 0.000 description 3
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 3
- 235000003140 Panax quinquefolius Nutrition 0.000 description 3
- 235000008434 ginseng Nutrition 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 1
- 238000012804 iterative process Methods 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Landscapes
- Stored Programmes (AREA)
Abstract
本发明实施例提供一种UI组件生成方法、装置和终端设备，该方法包括：根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；生成与所述键值对对应的代码；使用所述代码生成UI组件。本发明实施例可以提高UI组件开发效率。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及一种用户界面(User Interface，UI)组件生成方法、装置和终端设备。
背景技术
目前UI组件开发过程中是视觉设计师向应用开发者提供设计稿，但由于视觉设计师和应用开发者这两个工种不同，经常会出现理解不一致的情况，从而在UI组件开发流程需要视觉设计师与应用开发者不断地进行沟通协调，以达到一致，最终开发出UI组件。可见，目前UI组件开发效率比较低。
发明内容
本发明实施例提供一种UI组件生成方法、装置和终端设备，以解决UI组件开发效率比较低的问题。
本发明实施例提供一种UI组件生成方法，包括：
根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；
生成与所述键值对对应的代码；
使用所述代码生成UI组件。
可选的，所述根据视觉设计稿生成描述文件包括：
对所述视觉设计稿进行分解，以得到所述视觉设计稿的至少一个对象的参数；
生成分别与所述至少一个对象对应的键值对。
可选的，所述生成分别与所述至少一个对象对应的键值对，包括：
通过目标插件将所述至少一个对象转化为至少一个键值对，每个键值对包括键和值，其中，目标键值对包括的键为目标对象的描述文件，所述目标键值对包括的值为所述目标对象的参数的描述文件，所述目标键值对为所述至少一个键值对中任意键值对，所述目标对象为所述至少一个对象中与所述目标键值对对应的对象，所述目标插件包括所述至少一个对象的描述文件和所述至少一个对象的参数的描述文件。
可选的，所述通过目标插件将所述至少一个对象转化为至少一个键值对，所述方法还包括：
若所述目标插件中缺少所述少一个对象的描述文件，和/或，缺少所述至少一个对象的参数的描述文件的情况下，在所述目标插件中添加缺少的对象的描述文件，和/或，在所述目标插件中添加缺少的参数的描述文件。
可选的，所述参数包括如下至少一项：
形状、色值、长宽和间距。
可选的，所述生成与所述键值对对应的代码，包括：
通过目标引擎将所述键值对转化为对应的代码，其中，所述目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码。
可选的，所述目标引擎中包括历史迭代版本过程中的多个UI组件对应的所述描述文件的键值对对应的代码。
可选的，所述通过目标引擎将所述键值对转化为对应的代码之前，所述方法还包括：
若所述目标引擎中缺少所述键值对中键的代码，和/或，缺少所述键值对中值的代码的情况下，在所述目标引擎中添加缺少的键的代码，和/或，在所述目标引擎中添加缺少的值的代码。
本发明实施例还提供一种UI组件生成装置，包括：
第一生成模块，用于根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；
第二生成模块，用于生成与所述键值对对应的代码；
第三生成模块，用于使用所述代码生成UI组件。
可选的，所述第一生成模块包括：
分解单元，用于对所述视觉设计稿进行分解，以得到所述视觉设计稿的至少一个对象的参数；
生成单元，用于生成分别与所述至少一个对象对应的键值对。
可选的，所述生成单元用于通过目标插件将所述至少一个对象转化为至少一个键值对，每个键值对包括键和值，其中，目标键值对包括的键为目标对象的描述文件，所述目标键值对包括的值为所述目标对象的参数的描述文件，所述目标键值对为所述至少一个键值对中任意键值对，所述目标对象为所述至少一个对象中与所述目标键值对对应的对象，所述目标插件包括所述至少一个对象的描述文件和所述至少一个对象的参数的描述文件。
可选的，所述第二生成模块用于通过目标引擎将所述键值对转化为对应的代码，其中，所述目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码。
本发明实施例还提供一种终端设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现本发明实施例提供的UI组件生成方法的步骤。
本发明实施例还提供一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例提供的UI组件生成方法的步骤。
本发明实施例中，根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；生成与所述键值对对应的代码；使用所述代码生成UI组件。这样可以避免视觉设计师与应用开发者之间的沟通，从而可以提高UI组件开发效率。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种UI组件生成方法的流程图；
图2是本发明实施例提供的一种UI组件生成方法的示意图；
图3是本发明实施例提供的一种UI组件生成的示意图；
图4是本发明实施例提供的一种UI组件生成装置的结构图；
图5是本发明实施例提供的另一种UI组件生成装置的结构图；
图6是本发明实施例提供的另一种UI组件生成装置的结构图；
图7是本发明实施例提供的另一种UI组件生成装置的结构图；
图8是本发明实施例提供的一种终端设备的结构图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本申请的说明书和权利要求书中的术语“包括”以及它的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。此外，说明书以及权利要求中使用“和/或”表示所连接对象的至少其中之一，例如A和/或B，表示包含单独A，单独B，以及A和B都存在三种情况。
在本发明实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本发明实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
请参见图1，图1是本发明实施例提供的一种UI组件生成方法的流程图，如图1所示，包括以下步骤：
步骤101、根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对。
其中，上述视觉设计稿是视觉设计师设计的稿件，该视觉设计稿可以是电子图形文件，优选的，为PSD格式的视觉设计稿。
上述根据视觉设计稿生成描述文件可以是将上述视觉设计稿转化为描述文件，或者依据上述视觉设计稿生成另一个文件，该文件为描述文件。
优选的，本发明实施例中，描述文件为JS对象简谱(JavaScript ObjectNotation，JSON)格式的描述文件。
上述视觉设计稿的参数可以是形状、色值、长宽、间距等等属性参数。
由于描述文件为程序设计语言，这样通过步骤101可以实现将视觉设计稿抽象为精确的程序设计语言，使应用开发者不必与视觉设计师沟通并理解视觉设计稿。
步骤102、生成与所述键值对对应的代码。
其中，上述代码可以是应用程序的原生代码，例如：可以是应用程序的原生代码。
上述生成与所述键值对对应的代码可以是将上述键值对转化成代码。
步骤103、使用所述代码生成UI组件。
步骤103可以是使用上述代码进行渲染，以得到与上述视觉设计稿对应的UI组件。
本发明实施例中，通过上述步骤可以实现基于视觉设计稿生成描述文件，并生成对应的代码，以生成UI组件，从而可以避免视觉设计师与应用开发者之间的沟通，从而可以提高UI组件开发效率。
作为一种可选的实施方式，上述根据视觉设计稿生成描述文件包括：
对所述视觉设计稿进行分解，以得到所述视觉设计稿的至少一个对象的参数；
生成分别与所述至少一个对象对应的键值对。
上述对所述视觉设计稿进行分解可以是视觉设计稿分解成一个或者多个对象，识别各对象的参数。需要说明的是，上述对象也可以称作组件，即分解得到视觉设计稿各组件。
其中，上述参数包括如下至少一项：
形状、色值、长宽和间距。
例如：以上述视觉设计稿包括一个车头为例，可以将该车头为作一个对象，该对象的参数可以包括形状、色值、长宽和间距这些参数。
其中，上述生成分别与所述至少一个对象对应的键值对可以是，可以是为每个对象生成一个键值对，例如：假设上述视觉设计稿内包括一部手机，则可以为手机生成一个键值对。
该实施方式中，由于生成分别与所述至少一个对象对应的键值对，这样可以通过键值对准确地反映出视觉设计稿，以提高UI组件开发的准确性。
进一步的，上述生成分别与所述至少一个对象对应的键值对，包括：
通过目标插件将所述至少一个对象转化为至少一个键值对，每个键值对包括键和值，其中，目标键值对包括的键为目标对象的描述文件，所述目标键值对包括的值为所述目标对象的参数的描述文件，所述目标键值对为所述至少一个键值对中任意键值对，所述目标对象为所述至少一个对象中与所述目标键值对对应的对象，所述目标插件包括所述至少一个对象的描述文件和所述至少一个对象的参数的描述文件。
其中，上述目标插件可以是预先开发的用于将视觉设计稿的参数转化为键值对的插件，该插件可以将视觉设计稿的对象转化为相应的键值对。
上述目标插件可以包括多个对象的描述文件，以及每个对象的参数的描述文件。
例如：以上述至少一个对象包括手机为例，上述目标插件中包括手机的描述文件，以及手机中各项参数的描述文件，从而在确定手机，以及手机的参数后，可以生成相应的键值对。例如：手机对应的键值对的键为手机的描述文件，即表示手机的描述文件。该键值对的值则包括手机的参数的描述文件，例如：可以包括手机颜色的描述文件，如手机为白色，则包括表示白色的描述文件，以及还可以包括手机长宽的描述文件，如手机为长宽分别为5cm和4cm，则包括表示长宽分别为5cm和4cm的描述文件，以及还可以包括手机与物体的间距，如手机与人物间距为2cm，则包括表示间距为2cm的描述文件，以及还可以包括手机的形状，如车头形状为长方体，则包括表示长方休的描述文件。这样通过上述键值对可以表示一部手机。当然，上述仅是一手机进行举例，例如：以为更加精确地描述手机，还可以进一步对手机进行分解，分解成屏幕、后壳，从而可以生成屏幕、后壳对应的键值对，但这些键值对都归属于手机。
需要说明的是，上述目标插件可以称作ShowX插件。另外，上述描述文件可以是JSON格式描述文件，这样可以实现将视觉设计师给出的视觉设计稿通过ShowX插件转化为JSON格式描述文件，ShowX插件可以将设计稿根据对象，以及对象的形状、色值、长宽、间距等等属性将其转化为JSON中的键值对。
该实施方式中，由于目标插件包括至少一个对象的描述文件和至少一个对象的参数的描述文件，从而在上述对象和对象的参数确定后，可以将其转化为相应的键值对，从而可以实现准确、快捷地将所述多个参数转化成对应的多个键值对，以进一步提高UI组件开发效率。
进一步的，所述通过目标插件将所述至少一个对象转化为至少一个键值对，所述方法还包括：
若所述目标插件中缺少所述少一个对象的描述文件，和/或，缺少所述至少一个对象的参数的描述文件的情况下，在所述目标插件中添加缺少的对象的描述文件，和/或，在所述目标插件中添加缺少的参数的描述文件。
其中，上述缺少所述少一个对象的描述文件可以是缺少所述少一个对象的部分或者全部对象的描述文件，上述缺少所述至少一个对象的参数的描述文件可以是缺少所述少一个对象的部分或者全部参数的描述文件。而上述在所述目标插件中添加缺少的对象的描述文件，以及在所述目标插件中添加缺少的参数的描述文件可以是根据用户输入的操作添加相应的描述文件。例如：为上述目标插件开发上述至少一个对象的描述文件。
该实施方式中，可以实现在缺少描述文件的情况下，添加相应的描述文件，从而保证根据上述视觉设计稿可以准确地生成相应的UI组件。
作为一种可选的实施方式，所述生成与所述键值对对应的代码，包括：
通过目标引擎将所述键值对转化为对应的代码，其中，所述目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码。
其中，上述目标引擎可以是预先配置好的，该引擎中包括上述键值对中键的代码，以及包括上述键值对中值的代码。这样，当键值对确定后，就可以在该引擎中查找到相应的代码，并输出。
需要说明的是，上述目标引擎可以称作IDS引擎或者其他引擎。
由于目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码，从而可以实现准确、快捷地将键值对转化为代码，以进一步提高UI组件开发效率。
进一步的，所述目标引擎中包括历史迭代版本过程中的多个UI组件对应的所述描述文件的键值对对应的代码。
该实施方式中，由于历史迭代版本过程中的多个UI组件对应的所述描述文件的键值对对应的代码，这样在开发一个UI组件，只需要修改部分代码即可，从而进一步提高开发效率。
另外，上述目标引擎还可以包括历史迭代版本过程中的多个UI组件的集合，这样可以使得应用开发者不必重复开发相似的组件，同时也使得视觉设计稿被表达得更加精确。
另外，本发明实施例中，还可以通过上述目标引擎生成UI组件，即可以直接通过目标引擎根据描述文件渲染成UI组件，从而进一步提高开发效率。
该实施方式中，可以实现在产品长期迭代过程中，有效地避免重复开发引起的资源浪费，并提高应用整体风格的一致性。
进一步的，上述通过目标引擎将所述键值对转化为对应的代码之前，所述方法还包括：
若所述目标引擎中缺少所述键值对中键的代码，和/或，缺少所述键值对中值的代码的情况下，在所述目标引擎中添加缺少的键的代码，和/或，在所述目标引擎中添加缺少的值的代码。
其中，上述所述目标引擎中缺少所述键值对中键的代码可以是缺少上述视觉设计稿件对应的键值对中部分或者全部键值对中键的代码，上述缺少所述键值对中值的代码可以是缺少上述视觉设计稿件对应的键值对中部分或者全部键值对中值的代码。而上述在所述目标引擎中添加缺少的键的代码，以及在所述目标引擎中添加缺少的值的代码可以是，根据用户输入的操作添加相应的代码。例如：为上述目标引擎开发相应的代码。
该实施方式中，可以实现在缺少代码的情况下，添加相应的代码，从而保证根据上述视觉设计稿可以准确地生成相应的UI组件。
下面以图2对本发明实施例提供的UI组件生成方法进行举例说明，如图2所示包括以下步骤：
开发视觉设计稿；
分解视觉设计稿，得到多个对象，以及各对象的参数；
判断ShowX插件是否可识别上述多个对象；
若不能识别上述多个对象，则为ShowX插件开发并添加相应对象的描述文件；
若能识别上述多个对象，则将对象转化为JSON格式的键值对；
判断IDS引擎是否可识别上述JSON格式的键值对；
若IDS引擎是不能识别上述JSON格式的键值对，则为IDS引擎开发并添加相应键值对的代码；
若IDS引擎能识别上述JSON格式的键值对，则将上述JSON格式的键值对转化为原生代码。
需要说明的是，本发明实施例中，生成的UI组件可以是移动终端上的应用程序的UI组件，例如：可以是iOS组件或者Android组件，具体可以如图3所示：将UI组件设计稿(即视觉设计组)通过ShowX插件转化志JSON描述文件，并通过IDS引擎解析得到iOS组件或者Android组件，其中，这里的解析是指生成代码和使用代码生成UI组件的过程。
需要说明的是，本发明实施例提供的上述UI组件生成方法可以应用于能够渲染UI组件的终端设备，例如：计算机、服务器或者移动终端等。
本发明实施例中，根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；生成与所述键值对对应的代码；使用所述代码生成UI组件。这样可以避免视觉设计师与应用开发者之间的沟通，从而可以提高UI组件开发效率。
请参见图4，图4是本发明实施例提供的一种UI组件生成装置的结构图，如图4所示，UI组件生成装置400包括：
第一生成模块401，用于根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；
第二生成模块402，用于生成与所述键值对对应的代码；
第三生成模块403，用于使用所述代码生成UI组件。
可选的，如图5所示，所述第一生成模块401包括：
分解单元4011，用于对所述视觉设计稿进行分解，以得到所述视觉设计稿的至少一个对象的参数；
生成单元4012，用于生成分别与所述至少一个对象对应的键值对。
可选的，生成单元4012用于通过目标插件将所述至少一个对象转化为至少一个键值对，每个键值对包括键和值，其中，目标键值对包括的键为目标对象的描述文件，所述目标键值对包括的值为所述目标对象的参数的描述文件，所述目标键值对为所述至少一个键值对中任意键值对，所述目标对象为所述至少一个对象中与所述目标键值对对应的对象，所述目标插件包括所述至少一个对象的描述文件和所述至少一个对象的参数的描述文件。
可选的，如图6所示，UI组件生成装置400还包括：
第一添加模块404，用于若所述目标插件中缺少所述少一个对象的描述文件，和/或，缺少所述至少一个对象的参数的描述文件的情况下，在所述目标插件中添加缺少的对象的描述文件，和/或，在所述目标插件中添加缺少的参数的描述文件。
可选的，所述参数包括如下至少一项：
形状、色值、长宽和间距。
可选的，第二生成模块402用于通过目标引擎将所述键值对转化为对应的代码，其中，所述目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码。
可选的，所述目标引擎中包括历史迭代版本过程中的多个UI组件对应的所述描述文件的键值对对应的代码。
可选的，如图7所示，UI组件生成装置400还包括：
第二添加模块405，若所述目标引擎中缺少所述键值对中键的代码，和/或，缺少所述键值对中值的代码的情况下，在所述目标引擎中添加缺少的键的代码，和/或，在所述目标引擎中添加缺少的值的代码。
本发明实施例提供的装置能够实现图1所示的方法实施例中实现的各个过程，且可以达到相同有益效果，为避免重复，这里不再赘述。
请参见图8，图8是本发明实施例提供的一种终端设备的结构图，如图8所示，终端设备800包括处理器801、存储器802及存储在所述存储器802上并可在所述处理器上运行的计算机程序。
其中，所述计算机程序被所述处理器801执行时实现如下步骤：
根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；
生成与所述键值对对应的代码；
使用所述代码生成UI组件。
可选的，处理器801执行的所述根据视觉设计稿生成描述文件包括：
对所述视觉设计稿进行分解，以得到所述视觉设计稿的至少一个对象的参数；
生成分别与所述至少一个对象对应的键值对。
可选的，处理器801执行的所述生成分别与所述至少一个对象对应的键值对，包括：
通过目标插件将所述至少一个对象转化为至少一个键值对，每个键值对包括键和值，其中，目标键值对包括的键为目标对象的描述文件，所述目标键值对包括的值为所述目标对象的参数的描述文件，所述目标键值对为所述至少一个键值对中任意键值对，所述目标对象为所述至少一个对象中与所述目标键值对对应的对象，所述目标插件包括所述至少一个对象的描述文件和所述至少一个对象的参数的描述文件。
可选的，所述通过目标插件将所述至少一个对象转化为至少一个键值对，处理器801还用于：
若所述目标插件中缺少所述少一个对象的描述文件，和/或，缺少所述至少一个对象的参数的描述文件的情况下，在所述目标插件中添加缺少的对象的描述文件，和/或，在所述目标插件中添加缺少的参数的描述文件。
可选的，所述参数包括如下至少一项：
形状、色值、长宽和间距。
可选的，处理器801执行的所述生成与所述键值对对应的代码，包括：
通过目标引擎将所述键值对转化为对应的代码，其中，所述目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码。
可选的，所述目标引擎中包括历史迭代版本过程中的多个UI组件对应的所述描述文件的键值对对应的代码。
可选的，所述通过目标引擎将所述键值对转化为对应的代码之前，处理器801还用于：
若所述目标引擎中缺少所述键值对中键的代码，和/或，缺少所述键值对中值的代码的情况下，在所述目标引擎中添加缺少的键的代码，和/或，在所述目标引擎中添加缺少的值的代码。
本发明实施例提供的终端设备能够实现图1所示的方法实施例中电子设备实现的各个过程，且可以达到相同有益效果，为避免重复，这里不再赘述。
本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例提供的UI组件生成方法的步骤。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。
Claims (14)
1.一种用户界面UI组件生成方法，其特征在于，包括：
根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；
生成与所述键值对对应的代码；
使用所述代码生成UI组件。
2.如权利要求1所述的方法，其特征在于，所述根据视觉设计稿生成描述文件包括：
对所述视觉设计稿进行分解，以得到所述视觉设计稿的至少一个对象的参数；
生成分别与所述至少一个对象对应的键值对。
3.如权利要求2所述的方法，其特征在于，所述生成分别与所述至少一个对象对应的键值对，包括：
通过目标插件将所述至少一个对象转化为至少一个键值对，每个键值对包括键和值，其中，目标键值对包括的键为目标对象的描述文件，所述目标键值对包括的值为所述目标对象的参数的描述文件，所述目标键值对为所述至少一个键值对中任意键值对，所述目标对象为所述至少一个对象中与所述目标键值对对应的对象，所述目标插件包括所述至少一个对象的描述文件和所述至少一个对象的参数的描述文件。
4.如权利要求3所述的方法，其特征在于，所述通过目标插件将所述至少一个对象转化为至少一个键值对，所述方法还包括：
若所述目标插件中缺少所述少一个对象的描述文件，和/或，缺少所述至少一个对象的参数的描述文件的情况下，在所述目标插件中添加缺少的对象的描述文件，和/或，在所述目标插件中添加缺少的参数的描述文件。
5.如权利要求3至4中任一项所述的方法，其特征在于，所述参数包括如下至少一项：
形状、色值、长宽和间距。
6.如权利要求1所述的方法，其特征在于，所述生成与所述键值对对应的代码，包括：
通过目标引擎将所述键值对转化为对应的代码，其中，所述目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码。
7.如权利要求6所述的方法，其特征在于，所述目标引擎中包括历史迭代版本过程中的多个UI组件对应的所述描述文件的键值对对应的代码。
8.如权利要求6或7所述的方法，其特征在于，所述通过目标引擎将所述键值对转化为对应的代码之前，所述方法还包括：
若所述目标引擎中缺少所述键值对中键的代码，和/或，缺少所述键值对中值的代码的情况下，在所述目标引擎中添加缺少的键的代码，和/或，在所述目标引擎中添加缺少的值的代码。
9.一种UI组件生成装置，其特征在于，包括：
第一生成模块，用于根据视觉设计稿生成描述文件，其中，所述描述文件包括与所述视觉设计稿的参数对应的键值对；
第二生成模块，用于生成与所述键值对对应的代码；
第三生成模块，用于使用所述代码生成UI组件。
10.如权利要求9所述的装置，其特征在于，所述第一生成模块包括：
分解单元，用于对所述视觉设计稿进行分解，以得到所述视觉设计稿的至少一个对象的参数；
生成单元，用于生成分别与所述至少一个对象对应的键值对。
11.如权利要求10所述的装置，其特征在于，所述生成单元用于通过目标插件将所述至少一个对象转化为至少一个键值对，每个键值对包括键和值，其中，目标键值对包括的键为目标对象的描述文件，所述目标键值对包括的值为所述目标对象的参数的描述文件，所述目标键值对为所述至少一个键值对中任意键值对，所述目标对象为所述至少一个对象中与所述目标键值对对应的对象，所述目标插件包括所述至少一个对象的描述文件和所述至少一个对象的参数的描述文件。
12.如权利要求9所述的装置，其特征在于，所述第二生成模块用于通过目标引擎将所述键值对转化为对应的代码，其中，所述目标引擎中包括所述键值对中键的代码，以及包括所述键值对中值的代码。
13.一种终端设备，其特征在于，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至8中任一项所述的UI组件生成方法的步骤。
14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述的UI组件生成方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910126229.2A CN109885298A (zh) | 2019-02-20 | 2019-02-20 | 一种ui组件生成方法、装置和终端设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910126229.2A CN109885298A (zh) | 2019-02-20 | 2019-02-20 | 一种ui组件生成方法、装置和终端设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109885298A true CN109885298A (zh) | 2019-06-14 |
Family
ID=66928529
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910126229.2A Pending CN109885298A (zh) | 2019-02-20 | 2019-02-20 | 一种ui组件生成方法、装置和终端设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109885298A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111142846A (zh) * | 2019-12-27 | 2020-05-12 | 北京奇艺世纪科技有限公司 | 组件开发方法、装置及系统、移动终端和可读存储介质 |
| CN112650529A (zh) * | 2020-12-31 | 2021-04-13 | 城云科技（中国）有限公司 | 可配置生成移动端app代码的系统及方法 |
| CN113934429A (zh) * | 2021-10-15 | 2022-01-14 | 北京字节跳动网络技术有限公司 | 一种设计稿的转换方法、装置、计算机设备和存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140067561A1 (en) * | 2012-09-05 | 2014-03-06 | Toshiba Tec Kabushiki Kaisha | Information processing device and program |
| CN107025676A (zh) * | 2016-01-25 | 2017-08-08 | 阿里巴巴集团控股有限公司 | 一种图片模板以及图片的生成方法及相关装置 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
-
2019
- 2019-02-20 CN CN201910126229.2A patent/CN109885298A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140067561A1 (en) * | 2012-09-05 | 2014-03-06 | Toshiba Tec Kabushiki Kaisha | Information processing device and program |
| CN107025676A (zh) * | 2016-01-25 | 2017-08-08 | 阿里巴巴集团控股有限公司 | 一种图片模板以及图片的生成方法及相关装置 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111142846A (zh) * | 2019-12-27 | 2020-05-12 | 北京奇艺世纪科技有限公司 | 组件开发方法、装置及系统、移动终端和可读存储介质 |
| CN111142846B (zh) * | 2019-12-27 | 2023-12-05 | 北京奇艺世纪科技有限公司 | 组件开发方法、装置及系统、移动终端和可读存储介质 |
| CN112650529A (zh) * | 2020-12-31 | 2021-04-13 | 城云科技（中国）有限公司 | 可配置生成移动端app代码的系统及方法 |
| CN112650529B (zh) * | 2020-12-31 | 2023-06-06 | 城云科技（中国）有限公司 | 可配置生成移动端app代码的系统及方法 |
| CN113934429A (zh) * | 2021-10-15 | 2022-01-14 | 北京字节跳动网络技术有限公司 | 一种设计稿的转换方法、装置、计算机设备和存储介质 |
| CN113934429B (zh) * | 2021-10-15 | 2023-09-05 | 抖音视界有限公司 | 一种设计稿的转换方法、装置、计算机设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109885298A (zh) | 一种ui组件生成方法、装置和终端设备 | |
| CN106155686A (zh) | 界面生成方法、装置和系统 | |
| CN109460279A (zh) | 基于小程序的表单页面开发方法、装置、设备及存储介质 | |
| CN104391934A (zh) | 数据校验方法和装置 | |
| CN102360331B (zh) | 基于形式化描述的测试程序自动生成方法 | |
| CN103294485B (zh) | 用于ABINIT并行计算系统的Web服务封装方法以及系统 | |
| CN109189379A (zh) | 代码生成方法和装置 | |
| CN110515951B (zh) | 一种bom标准化方法、系统及电子设备和存储介质 | |
| CN106970820A (zh) | 代码存储方法及代码存储装置 | |
| CN104267966B (zh) | 软件的程序代码的生成方法及装置 | |
| CN110580158A (zh) | 一种代码生成方法、装置、存储介质及电子设备 | |
| CN111679979B (zh) | 破坏性测试方法及装置 | |
| CN102023869A (zh) | 一种控件输入值校验方法及系统 | |
| CN108460068A (zh) | 报表导入导出的方法、装置、存储介质及终端 | |
| Duracik et al. | Abstract syntax tree based source code antiplagiarism system for large projects set | |
| CN113407284A (zh) | 导航界面的生成方法、装置、存储介质及电子设备 | |
| CN103294482B (zh) | 用于PWscf并行计算系统的Web服务封装方法以及系统 | |
| CN108388430A (zh) | 一种移动终端数据校验系统及方法 | |
| CN110489207A (zh) | 参数验证方法、装置及计算机可读存储介质 | |
| CN114398138A (zh) | 界面生成方法、装置、计算机设备和存储介质 | |
| CN110321501A (zh) | 链接加壳跳转方法、装置、电子设备和存储介质 | |
| CN104239072B (zh) | 软件的程序代码的生成方法及装置 | |
| CN115686515A (zh) | 参数可视化配置界面生成方法、装置、介质和电子设备 | |
| CN109947525A (zh) | 一种多语言应用名的配置方法、装置及电子设备 | |
| Capra et al. | A tool for symbolic manipulation of arc functions in symmetric net models |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190614 |
|
| RJ01 | Rejection of invention patent application after publication |