软件迭代过程资源复用和一致性方法、系统、介质及设备与流程

1.本发明涉及软件迭代技术领域，尤其涉及一种软件迭代过程资源复用和一致性方法、系统、介质及设备。


背景技术：

2.目前，在进行软件产品设计时，通常由设计师使用设计软件参照设计规范构建软件产品所需的组件，从而形成图形化的设计稿；开发人员参照图形化的设计稿用代码还原出设计师所设计的界面，并添加对应的逻辑，最后运行到服务器端供用户访问和使用。
3.设计师用设计软件构建设计稿的载体是图层，而开发人员还原设计师所设计的界面的载体是代码；即设计师和开发人员使用的工具和绘制组件的载体均不同，因此，开发人员参照图形化的设计稿用代码还原出设计师所设计的界面时需要进行翻译转换，目前这个过程是通过开发人员人为识别的方式去完成的，后续测试、设计还需要做大量的检查，确保开发人员所写的代码与设计师的设计内容一致。
4.也就是说，人为识别的方式会导致开发人员工作量较大，开发效率低下，如果存在极其相似的颜色或组件，会导致误用、错用的情况。且团队中开发人员的开发风格不一致，还会导致的后期维护难等问题。


技术实现要素：

5.本发明所要解决的技术问题是针对现有技术存在的问题，提供一种软件迭代过程资源复用和一致性方法、系统、介质及设备。
6.为解决上述技术问题，本发明实施例提供一种软件迭代过程资源复用和一致性方法，包括：为设计规范中的css资源定义变量名，为组件资源定义组件代码；建立软件产品项目与所需设计规范的关联关系；选择所述软件产品项目的设计稿中的一个图层，在所述软件产品项目所有关联的设计规范中查找所述图层所包含的css资源的变量名，以及所述图层所包含的组件资源的组件代码，并在所述软件产品项目的开发板块显示所述css资源的变量名和所述组件资源的组件代码。
7.为解决上述技术问题，本发明实施例还提供一种软件迭代过程资源复用和一致性系统，包括：自定义模块，用于为设计规范中的css资源定义变量名，为组件资源定义组件代码；关联关系建立模块，用于建立软件产品项目与所需设计规范的关联关系；资源查找模块，用于选择所述软件产品项目的设计稿中的一个图层，在所述软件产品项目所有关联的设计规范中查找所述图层所包含的css资源的变量名，以及所述图层所包含的组件资源的组件代码，并在所述软件产品项目的开发板块显示所述css资源的变量名和所述组件资源的组件代码。
8.为解决上述技术问题，本发明实施例还提供一种计算机可读存储介质，包括指令，当所述指令在计算机上运行时，使所述计算机执行上述技术方案所述的软件迭代过程资源复用和一致性方法。
9.为解决上述技术问题，本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述技术方案所述的软件迭代过程资源复用和一致性方法。
10.本发明的有益效果是：在设计规范中自定义css资源的变量名以及组件资源的组件代码，将软件产品项目与所需的设计规范进行关联，将设计规范直接落地到实际设计稿上，从而实现自动识别查找相应的变量名和组件代码，确保团队中工程师使用颜色、字体等css样式的统一性及准确性，减轻了开发人员撰写组件代码的的重复工作，极大地降低了开发人员的工作量，提高了开发效率，降低了后期维护难度。
11.本发明附加的方面及其优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。
附图说明
12.图1为本发明实施例提供的软件迭代过程资源复用和一致性方法流程图；
13.图2为本发明实施例提供的软件产品项目开发板块中规范关联按钮示意图；
14.图3为本发明实施例提供的设计规范关联列表示意图；
15.图4为本发明实施例提供的设计规范中项目关联按钮示意图；
16.图5为本发明实施例提供的软件产品项目列表示意图；
17.图6为本发明实施例提供的软件迭代过程资源复用和一致性系统框图。
具体实施方式
18.以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
19.实施例1
20.图1为本发明实施例提供的一种软件迭代过程资源复用和一致性方法流程图。如图1所示，该方法包括：
21.s110，为设计规范中的css资源定义变量名，为组件资源定义组件代码；
22.设计规范指一个软件开发团队中，所有设计师在进行ui设计时所需遵循的基本原则，例如在颜色使用上，系统的主题色和辅色，深色和浅色等标准色值。
23.设计规范中的资源指颜色、字体、图层样式、组件、图标、图片6大分类下的单个具体对象，其中，颜色、字体、图层样式属于css资源，组件、图标和图片属于组件资源。例如颜色中的白色便是一个颜色资源，字体中字体类型为微软雅黑、字号为12px、字重为加粗、对齐方式为居中、字体颜色为黑色、字间距为2px、行间距为22px便是一个字体资源，图层样式中阴影为蓝色便是一个图层样式资源，组件、图标与图片则是直接与设计规范插件的宿主sketch的组件和图片资源一致，例如一个矩形。
24.s120，建立软件产品项目与所需设计规范的关联关系；
25.软件产品项目指存放设计稿、设计资源、产品文档等内容的最小单元。软件产品项目和设计规范之间是多对多的关系，一个项目可以关联多个设计规范，一个设计规范也可以被多个软件产品项目关联。
26.s130,选择所述软件产品项目的设计稿中的一个图层，在所述软件产品项目所有
关联的设计规范中查找所述图层所包含的css资源的变量名，以及所述图层所包含的组件资源的组件代码；
27.s140，在所述软件产品项目的开发板块显示所述css资源的变量名和所述组件资源的组件代码。
28.上述实施例中，在设计规范中自定义css资源的变量名以及组件资源的组件代码，将软件产品项目与所需的设计规范进行关联，将设计规范直接落地到实际设计稿上，从而实现自动识别查找相应的变量名和组件代码，确保团队中工程师使用颜色、字体等css样式的统一性及准确性，减轻了开发人员撰写组件代码的的重复工作，极大地降低了开发人员的工作量，提高了开发效率，降低了后期维护难度。
29.实施例2
30.本发明实施例提供的一种软件迭代过程资源复用和一致性方法。该方法包括：s111，在设计规范的图形化界面中选择单个css资源后，在右侧的详细面板中自定义与css资源的属性值对应的变量名，并存储到后台服务器；在设计规范的图形化界面中选择单个组件资源后，在右侧的详细面板中自定义组件资源的组件代码，并存储到后台服务器。
31.s120，建立软件产品项目与所需设计规范的关联关系。
32.s130,选择所述软件产品项目的设计稿中的一个图层，在所述软件产品项目所有关联的设计规范中查找所述图层所包含的css资源的变量名，以及所述图层所包含的组件资源的组件代码。
33.s140，在所述软件产品项目的开发板块显示所述css资源的变量名和所述组件资源的组件代码。
34.上述实施例中，通过设计规范的图形化界面可方便直接地在设计规范中定义颜色、字体、图层样式等css资源的变量名，也可以直接定义组件、图标和图片等组件资源的组件代码。将软件产品项目与所需的设计规范进行关联，将设计规范直接落地到实际设计稿上，从而实现自动识别查找相应的变量名和组件代码，确保团队中工程师使用颜色、字体等css样式的统一性及准确性，减轻了开发人员撰写组件代码的的重复工作，极大地降低了开发人员的工作量，提高了开发效率，降低了后期维护难度。
35.并且，颜色、文字等使用变量名，将项目与设计规范关联后，可以避免当团队设计规范中的某个颜色或文字发生了调整后，需要大规模的在项目中进行修改，只需要修改引用的设计规范文件中的参数即可。组件提供组件代码可以大幅度的减轻工程师的重复工作，并且可以保证一个组件只有一种风格，不会出现一个组件在不同的工程师手中进行还原时会出现不同的风格，同时可以让刚加入团队的工程师快速上手进行开发工作。
36.实施例3
37.本发明实施例提供的一种软件迭代过程资源复用和一致性方法。该方法包括：s111，在设计规范的图形化界面中选择单个css资源后，在右侧的详细面板中自定义与css资源的属性值对应的变量名，并存储到后台服务器；在设计规范的图形化界面中选择单个组件资源后，在右侧的详细面板中自定义组件资源的组件代码，并存储到后台服务器。
38.s121，在软件产品项目的开发板块中，通过设计规范关联按钮打开设计规范列表，选取需要关联的设计规范，将所述软件产品项目的项目id与所选取的一个或多个设计规范的设计规范id发生至后台服务器进行关联。
39.其中，设计规范关联按钮可以设置在开发板块的右下角，如图2所示；点击设计规范关联按钮可打开如图3所示的设计规范列表，进而可方便地选取需要关联的设计规范。
40.s122，或者在设计规范中，通过项目关联按钮打开软件产品项目列表，选取需要关联的软件产品项目，将所述设计规范的设计规范id与所选取的一个或多个软件产品项目的项目id发生至后台服务器进行关联。
41.其中，项目关联按钮可以设置在设计规范的左下角，如图4所示；点击项目关联按钮可打开如图5所示的项目列表，进而可方便地选取需要关联的项目。
42.s130,选择所述软件产品项目的设计稿中的一个图层，在所述软件产品项目所有关联的设计规范中查找所述图层所包含的css资源的变量名，以及所述图层所包含的组件资源的组件代码。
43.s140，在所述软件产品项目的开发板块显示所述css资源的变量名和所述组件资源的组件代码。
44.上述实施例中，通过在软件产品项目的开发板块和设计规范中均设置关联按钮，通过关联按钮可以方便打开关联列表，从而实现快速高效地建立软件产品项目和设计规范的关联关系；进而将软件产品项目与所需的设计规范进行关联，将设计规范直接落地到实际设计稿上，从而实现自动识别查找相应的变量名和组件代码，确保团队中工程师使用颜色、字体等css样式的统一性及准确性，减轻了开发人员撰写组件代码的的重复工作，极大地降低了开发人员的工作量，提高了开发效率，降低了后期维护难度。
45.实施例4
46.本发明实施例提供的一种软件迭代过程资源复用和一致性方法。该方法包括：s111，在设计规范的图形化界面中选择单个css资源后，在右侧的详细面板中自定义与css资源的属性值对应的变量名，并存储到后台服务器；在设计规范的图形化界面中选择单个组件资源后，在右侧的详细面板中自定义组件资源的组件代码，并存储到后台服务器。
47.s121，在软件产品项目的开发板块中，通过设计规范关联按钮打开设计规范列表，选取需要关联的设计规范，将所述软件产品项目的项目id与所选取的一个或多个设计规范的设计规范id发生至后台服务器进行关联。
48.s122，或者在设计规范中，通过项目关联按钮打开软件产品项目列表，选取需要关联的软件产品项目，将所述设计规范的设计规范id与所选取的一个或多个软件产品项目的项目id发生至后台服务器进行关联。
49.s131,选择所述软件产品项目的设计稿中的一个图层，根据所述软件产品项目的项目id确定与所述软件产品项目相关联的设计规范；根据所述图层所包含的css资源的属性值在所有关联的设计规范的css资源分类中进行查找匹配，获取属性值完全匹配的设计规范中的css资源的变量名；根据所述图层所包含的组件资源的symbol id在所有关联的设计规范的组件资源分类中进行查找匹配，获取symbol id完全匹配的设计规范中的组件资源的组件代码。
50.其中，根据所述图层所包含的css资源的属性值在关联的所有设计规范的css资源分类中进行查找匹配时，将设计稿中css资源的属性值与设计规范中css资源的属性值进行格式转换，转换为统一格式(如16进制或rgba格式)再进行一一比对。
51.当所述图层所包含的组件资源为嵌套组件中的子组件时，按照从所述嵌套组件的
根节点到所述子组件对应的末节点的优先级顺序，取相应节点的symbol id与所有关联的设计规范中的组件资源的symbol id进行匹配，直至获取symbol id完全匹配的设计规范中的组件资源的组件代码。也就是说，先将所述嵌套组件的根节点的symbol id与所有关联的设计规范中的组件资源的symbol id进行匹配，获取symbol id完全匹配的设计规范中的组件资源的组件代码。如果在所有关联的设计规范中均未查找到与根据点的symbolid完全匹配的组件资源，则向前再取一级节点的symbol id，在所有关联的设计规范中进行查找，直至获取symbol id完全匹配的设计规范中的组件资源的组件代码。例如a是一个弹框，d是弹框里面的一个按钮，当选中这个按钮时需要知道d是弹框中的按钮，所以最外层的这个组件给到最高的优先级。对于复杂的嵌套组件，每一个子组件可能都是一个symbol，在选择嵌套组件中到子组件时，使用嵌套组件的根节点的symbol id与规范中的组件资源的symbol id进行匹配，这样便精准的定位了选择的子组件所属的最小范围。然后将之前定义好的组件代码返回提供回来，在图层的属性面板的css代码模块下，便会有对应的组件代码提供。
52.当所述图层所包含的组件为最小单元的组件时，在所述设计稿中用预设颜色的边框包裹所述图层，并显示其在设计软件中原始定义的组件名称。可以快速在设计软件中进行定位，做一些后续的修改，或者比对数据是否有问题。
53.s140，在所述软件产品项目的开发板块显示所述css资源的变量名和所述组件资源的组件代码。
54.上述实施例中，通过软件产品项目的项目id可以快速查询到相关联的设计规范，再根据图层所包含的css资源的属性值查找设计规范中相同属性值的css资源，进而确定css资源的变量名。如图层包含颜色资源，则根据颜色资源的颜色值在所有关联的设计规范中查找相同颜色值的颜色资源，进而将之前定义好的变量名返回到前端。如包含字体资源，则将颜色值替换为字体类型、字号、子重等字体属性进行查找匹配。如图层包含组件资源，则根据组件资源的symbol id在所有关联的设计规范的组件资源分类中进行查找匹配，获取symbol id完全匹配的设计规范中的组件资源的组件代码。
55.此外，本发明实施例还提供一种软件迭代过程资源复用和一致性系统，如图6所示，该系统包括：自定义模块210、关联关系建立模块220和资源查找模块230。
56.自定义模块210用于为设计规范中的css资源定义变量名，为组件资源定义组件代码；关联关系建立模块220用于建立软件产品项目与所需设计规范的关联关系；资源查找模块230用于选择所述软件产品项目的设计稿中的一个图层，在所述软件产品项目所有关联的设计规范中查找所述图层所包含的css资源的变量名，以及所述图层所包含的组件资源的组件代码，并在所述软件产品项目的开发板块显示所述css资源的变量名和所述组件资源的组件代码。
57.将软件产品项目与所需的设计规范进行关联，将设计规范直接落地到实际设计稿上，工程师在进行界面的开发时，选择设计稿中的某个图层时，开发板块下的右侧属性面板中显示颜色的栏目中，将会自动显示设计规范文档中对应色值的颜色变量，显示字体的栏目中，将会自动显示设计规范文档中对应的字体变量，省去了开发人员手动查找颜色变量、字体变量这一过程，可直接复制颜色变量、字体变量等到代码文件中。
58.对于sketch中的symbol组件而言，在设计规范可视化界面中定义好对应组件的组件代码后，进行关联设计规范之后，可以直接提供现成的代码供工程师直接复制到代码文
件中使用，极大的节省了工程师手动写大量重复性代码的问题。
59.上述实施例中，通过设计规范的图形化界面可方便直接地在设计规范中定义颜色、字体、图层样式等css资源的变量名，也可以直接定义组件、图标和图片等组件资源的组件代码。将软件产品项目与所需的设计规范进行关联，将设计规范直接落地到实际设计稿上，从而实现自动识别查找相应的变量名和组件代码，确保团队中工程师使用颜色、字体等css样式的统一性及准确性，减轻了开发人员撰写组件代码的的重复工作，极大地降低了开发人员的工作量，提高了开发效率，降低了后期维护难度。
60.本发明实施例还提供一种计算机可读存储介质，包括指令，当所述指令在计算机上运行时，使所述计算机执行上述实施例所述的软件迭代过程资源复用和一致性方法。
61.本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述实施例所述的软件迭代过程资源复用和一致性方法。
62.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
63.在本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
64.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
65.另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
66.集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read
‑
only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
67.以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。