一种UI卡片文档的生成方法和装置与流程

本申请涉及信息技术领域，尤其涉及一种ui卡片文档生成方法和装置。

背景技术：

ui卡片又叫ui组件，通过将页面拆分成多个ui组件，可以提高ui组件的复用效率，提高代码重复利用率，降低开发成本；每个ui组件都用来展示页面中的一小部分，具体ui组件对应页面中哪个区域以及区域大小由开发ui组件的人员来负责设计，比较灵活；现代前端领域开发页面基本都是通过开发ui组件然后通过ui组件组合拼装的方式构建出完整的页面提供给用户浏览使用。每个ui卡片都需要1个使用文档来描述卡片的详细使用信息，同时还将开发卡片平台，卡片平台上需要获取所有卡片的详细信息，以便利用这些卡片信息支持用户以一种可视化的方式拖拽卡片直接设计出页面。

现代前端领域基本都在使用ui卡片拼装页面的方案，一方面，开发ui卡片需要编写对应的使用文档供使用卡片的人浏览阅读；另一方面，编写卡片使用文档的语言也多种多样，比如markdown，html等等，都可以描述出卡片的使用信息，方便卡片使用者阅读。

上述方式存在的缺点是，只能生成对应的卡片使用文档给人观看，对其它程序模块解析卡片的详细使用信息极其不友好，造成了其它程序模块解析卡片的详细使用信息时难度大，成本高，解析准确率偏低等问题。

技术实现要素：

本申请的目的是提供一种ui卡片文档生成方法和装置，以解决现有技术中解析ui卡片的详细信息难度大、成本高、解析准确率低的问题。

为达到上述目的，本申请提供了一种ui卡片文档的生成方法，所述方法包括步骤：获取所述ui卡片的描述信息；将所述ui卡片的描述信息按照预设数据格式存储在描述文件中；按照所述预设数据格式解析所述描述文件，得到所述ui卡片的描述信息；根据所述ui卡片的描述信息，生成指定格式的ui卡片文档。

进一步地，所述方法还包括：预先设置所述描述文件的数据格式，其中所述数据格式与所述ui卡片的描述信息相匹配。

进一步地，所述方法还包括：当接收到调用所述ui卡片的请求时，按照所述预设数据格式解析所述ui卡片的所述描述文件，得到所述ui卡片的描述信息；根据所述ui卡片的描述信息，在指定页面中构建所述ui卡片展示效果。

进一步地，所述方法还包括：预先定义构建所述ui卡片展示效果所需的描述信息的类别；根据所述描述信息的类别，预先设置所述描述文件的数据格式。

进一步地，所述方法还包括：所述ui卡片的描述信息包括：ui卡片名、参数名、参数类型、参数默认值和ui卡片说明中的一种或多种。

本申请还提供了一种ui卡片文档的生成装置，该装置包括获取模块、存储模块、解析模块和生成模块；

所述获取模块，用于获取所述ui卡片的描述信息；

所述存储模块，用于将所述ui卡片的描述信息按照预设数据格式存储在描述文件中；

所述解析模块，用于按照所述预设数据格式解析所述描述文件，得到所述ui卡片的描述信息；

所述生成模块，用于根据所述ui卡片的描述信息，生成指定格式的ui卡片文档。

进一步地，所述装置还包括第一设置模块，用于预先设置所述描述文件的数据格式，其中所述数据格式与所述ui卡片的描述信息相匹配。

进一步地，所述装置还包括构建模块；

所述解析模块，还用于当接收到调用所述ui卡片的请求时，按照所述预设数据格式解析所述ui卡片的所述描述文件，得到所述ui卡片的描述信息；

所述构建模块，用于根据所述ui卡片的描述信息，在指定页面中构建所述ui卡片展示效果。

进一步地，所述装置还包括定义模块和第二设置模块；

所述定义模块，用于预先定义构建所述ui卡片展示效果所需的描述信息的类别；

所述第二设置模块，用于根据所述描述信息的类别，预先设置所述描述文件的数据格式。

进一步地，所述ui卡片的描述信息包括：ui卡片名、参数名、参数类型、参数默认值和ui卡片说明中的一种或多种。

本申请还提供了一种电子设备，所述设备包括：存储装置和一个或多个处理器；其中，存储装置用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述的一种ui卡片文档的生成方法。

本申请还提供了一种计算机程序产品，包括计算机程序指令，当所述指令由处理器执行时，用于实现上述的一种ui卡片文档的生成方法。

本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序被执行时，实现上述的一种ui卡片文档的生成方法。

相比于现有技术中的方式，本申请提供的一种ui卡片文档的生成方法和装置，不直接编写卡片使用文档，而是以对程序解析更简单准确的特定的数据格式来记录卡片的详细信息，以此满足其它依赖卡片详细信息工作的程序模块或产品的需求。至于ui卡片的使用文档，可以提前基于所设计的ui卡片的特定的数据格式开发工具自动生成对应的ui卡片使用文档，这样既可以实现卡片的使用文档满足卡片使用者阅读，描述卡片详细信息的特定的数据格式对依赖卡片详细信息的其它程序模块解析来说又足够的简单易行，识别准确。

附图说明

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

图1是本申请的一种ui卡片文档的生成方法的流程示意图。

图2是本申请的一种ui卡片的描述信息的二次开发利用的流程示意图。

图3是本申请的一种ui卡片文档的生成装置的模块组成示意图。

具体实施方式

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

实施例一

参阅图1，本申请实施例一提供了一种ui卡片文档的生成方法，该方法包括如下步骤：

(1)获取所述ui卡片的描述信息。

根据业务情况来确定ui卡片开发数量的多少，开发ui卡片就是使用前端相关技术，比如react等前端框架按照业务约定开发出对应的ui卡片，1个ui卡片代表页面中的特定部分，通过多个ui卡片的组合拼装可以构建出完整的页面。

在开发所述ui卡片的同时，要编写和记录所述ui卡片对应的描述信息，本实施例在进行下述步骤之前，要预先获取所述编写和记录的所述ui卡片对应的描述信息。

(2)将所述ui卡片的描述信息按照预设数据格式存储在描述文件中。

在步骤(1)预先获取所述ui卡片的描述信息后，要将所述预先获取的描述信息按照预设数据格式存储在所述描述文件中。

进一步地，所述描述文件可以是json数据格式的json文件，可以使用json数据格式来记录所述ui卡片的描述信息，将所述ui卡片的描述信息按照json数据格式存储在json文件中。这就需要在开发所述ui卡片的同时，获取所述ui卡片的描述信息，并编写所述json数据格式的描述文件，并将所述ui卡片的描述信息存储于所述json数据格式的json文件中。

进一步地，所述ui卡片的描述信息包括：ui卡片名、参数名、参数类型、参数默认值和ui卡片说明中的一种或多种。针对ui卡片需要记录的各种描述信息，通过json数据格式保存在json文件中，1个json文件记录了1个ui卡片所有需要描述的信息。

进一步地，所述方法还包括：预先设置所述描述文件的数据格式，其中所述数据格式与所述ui卡片的描述信息相匹配。

存储所述ui卡片的描述信息的json文件的json数据格式可以根据自身的业务特点进行预先设置，所设置的json数据格式与需要存储或记录的所述ui卡片的描述信息相匹配，比如json文件中通过字段name记录卡片的名称，字段params记录卡片的参数信息，字段mainlmgurl记录卡片的ui效果图网络地址等。

进一步地，可以通过一个格式说明文件来说明或记录所述描述文件的数据格式。在使用json文件来记录所述ui卡片的描述信息时，可以通过一个格式说明文件来说明或记录所述json文件的json数据格式，在ui卡片对应附件中包含了1个js文件，里面记录了供参考的一种ui卡片的描述文件的格式说明。

每个ui卡片都至少需要1个使用文档来帮助使用者浏览以便快速了解ui卡片的详细使用信息，现有技术中都是直接通过markdown/html等数据格式直接编写对应的卡片使用文档。本步骤中，每个ui卡片都不会直接编写使用文档，而是直接编写json文件来记录所述ui卡片的描述信息，所有ui卡片的使用文档通过专门工具自动化生成，不需要卡片开发人员手动一个一个编写。

(3)按照所述预设数据格式解析所述描述文件，得到所述ui卡片的描述信息。

进一步地，在使用所述json文件来存储所述ui卡片的描述信息时，可以通过目标应用程序按照所述json数据格式来解析所述ui卡片对应的所述json文件，获得所述ui卡片对应的描述信息。

进一步地，所述解析所述描述文件可以由目标应用程序或者工具自动完成。解析所使用的目标应用程序或工具可以使用任何语言开发，比如nodejs，该工具直接解析ui卡片的json文件获取所述ui卡片的描述信息。

(4)根据所述ui卡片的描述信息，生成指定格式的ui卡片文档。

在解析获得所述ui卡片的描述信息后，通过目标应用程序或者工具自动生成指定格式的卡片文档，比如生成markdown格式的卡片文档。具体的卡片文档采用markdown还是html等其它数据格式给用户进行展示取决于开发人员本身，没有固定限制。只要解析卡片json文件自动生成对应卡片文档的工具开发好了，每次有新的ui卡片产生只需要编写第(2)步中的描述文件即可，编写完通过本步骤中描述的目标应用程序或者工具可以自动生成卡片文档供卡片使用者阅读。

因此，不管有多少个新的ui卡片生成，工具都不需要重复开发，可以直接利用，所有卡片的文档可以通过该工具自动生成。

实施例二

参见图2，实施例二的方法涉及ui卡片的描述信息的二次开发利用，实施例二中的步骤(1)-(2)与实施例一的方法中的步骤(1)-(2)完全相同。

进一步地，实施例二的方法还包括：

(3)当接收到目标平台调用所述ui卡片请求时，解析所述ui卡片的描述文件，得到所述ui卡片的描述信息；

本步骤(3)中的解析方式与实施例一中的步骤(3)中的解析方式相同，可以通过目标应用程序按照所述json数据格式来解析所述ui卡片对应的所述json文件，获得所述ui卡片对应的描述信息。

所述解析所述描述文件可以由目标应用程序或者工具自动完成。解析所使用的目标应用程序或工具可以使用任何语言开发，比如nodejs，该工具直接解析ui卡片的json文件获取所述ui卡片的描述信息。

(4)根据所述ui卡片的描述信息在指定页面中，构建所述ui卡片展示效果。

开发的ui卡片除了需要生成对应的卡片文档帮助使用人员快速了解卡片之外，已开发的卡片可能还有别的用途，比如开发卡片的目标平台可以通过向页面中拖拽卡片的方式快速构建出所需页面效果，此产品功能关键一步就是拖拽到页面上的ui卡片详细信息，比如卡片的名称，参数名称、类型、默认值等卡片相关信息需要提前获取。以前遇到需要在已有卡片基础上做二次开发产生新的产品前遇到需要获取卡片相关信息时只能从卡片的使用文档中进行解析，因为卡片的使用文档采用markdown/html等较容易做数据展示的数据格式进行编写，是为了给人看的，不是给程序解析的，后期一旦需要卡片的相关信息来开发新的产品时经常遇到需要解析的卡片信息不完整，即使卡片文档中包含了对应的信息也因为文档格式不严谨解析困难，容易解析错误。所以对程序解析很不友好，想通过程序从卡片markdown等格式的使用文档中直接准备解析出卡片的全部信息非常困难，且准确率不高。而借助于上述实施例二的方式，由于ui卡片的描述信息已经存储于固定格式的描述文件中，因此能够获取规范完整的描述信息，从而能够容易地构建ui卡片的展示效果。

进一步地，所述方法还包括：预先定义构建所述ui卡片展示效果所需的描述信息的类别；根据所述描述信息的类别，预先设置所述描述文件的数据格式。也就是说，可以根据业务场景的需要预先定义描述文件的数据格式，从而可以直接使用所定义的数据格式快速完成后续的业务场景展示需要。

在使用所述json文件来存储所述ui卡片的描述信息时，所述json文件的数据格式可以根据自身业务场景需要记录的ui卡片信息提前设计的，充分考虑了卡片文档展示需要的全部数据以及日后开发其它依赖卡片描述信息的产品时可能需要的卡片信息后进行设计的一种json格式，记录的卡片信息比较完整，json格式中哪个字段代表卡片的什么信息也是提前设计约定好的，对程序解析来说非常友好，只要编写ui卡片json文件没有问题，通过其他程序模块解析出来的卡片信息一定是准确无误的，也就能够方便地进行二次开发。

实施例三

参阅图3，本申请实施例三提供了一种ui卡片文档的生成装置，该装置包括获取模块、存储模块、解析模块和生成模块。

所述获取模块，用于获取所述ui卡片的描述信息。

根据业务情况来确定ui卡片开发数量的多少，开发ui卡片就是使用前端相关技术，比如react等前端框架按照业务约定开发出对应的ui卡片，1个ui卡片代表页面中的特定部分，通过多个ui卡片的组合拼装可以构建出完整的页面。

在开发所述ui卡片的同时，要编写和记录所述ui卡片对应的描述信息，本实施例中的所述获取模块，要预先获取所述编写和记录的所述ui卡片对应的描述信息。

所述存储模块，用于将所述ui卡片的描述信息按照预设数据格式存储在描述文件中。

在所述获取模块预先获取所述ui卡片的描述信息后，所述存储模块要将所述预先获取的描述信息按照预设数据格式存储在所述描述文件中。

进一步地，所述描述文件可以是json数据格式的json文件，可以使用json数据格式来记录所述ui卡片的描述信息，将所述ui卡片的描述信息按照json数据格式存储在json文件中。这就需要在开发所述ui卡片的同时，获取所述ui卡片的描述信息，并编写所述json数据格式的描述文件，并将所述ui卡片的描述信息存储于所述json数据格式的json文件中。

进一步地，所述ui卡片的描述信息包括：ui卡片名、参数名、参数类型、参数默认值和ui卡片说明中的一种或多种。针对ui卡片需要记录的各种描述信息，通过json数据格式保存在json文件中，1个json文件记录了1个ui卡片所有需要描述的信息。

进一步地，所述装置还包括第一设置模块，用于预先设置所述描述文件的数据格式，其中所述数据格式与所述ui卡片的描述信息相匹配。

存储所述ui卡片的描述信息的json文件的json数据格式可以根据自身的业务特点进行预先设置，所设置的json数据格式与需要存储或记录的所述ui卡片的描述信息相匹配，比如json文件中通过字段name记录卡片的名称，字段params记录卡片的参数信息，字段mainlmgurl记录卡片的ui效果图网络地址等。

进一步地，所述装置还包括记录模块，可以通过一个格式说明文件来说明或记录所述描述文件的数据格式。在使用json文件来记录所述ui卡片的描述信息时，可以通过一个格式说明文件来说明或记录所述json文件的json数据格式，在ui卡片对应附件中包含了1个js文件，里面记录了供参考的一种ui卡片的描述文件的格式说明。

每个ui卡片都至少需要1个使用文档来帮助使用者浏览以便快速了解ui卡片的详细使用信息，现有技术中都是直接通过markdown/html等数据格式直接编写对应的卡片使用文档。本步骤中，每个ui卡片都不会直接编写使用文档，而是直接编写json文件来记录所述ui卡片的描述信息，所有ui卡片的使用文档通过专门工具自动化生成，不需要卡片开发人员手动一个一个编写。

所述解析模块，用于按照所述预设数据格式解析所述描述文件，得到所述ui卡片的描述信息。

进一步地，在使用所述json文件来存储所述ui卡片的描述信息时，所述解析模块可以通过目标应用程序按照所述json数据格式来解析所述ui卡片对应的所述json文件，获得所述ui卡片对应的描述信息。

进一步地，所述解析所述描述文件可以由目标应用程序或者工具自动完成。解析所使用的目标应用程序或工具可以使用任何语言开发，比如nodejs，该工具直接解析ui卡片的json文件获取所述ui卡片的描述信息。

所述生成模块，用于根据所述ui卡片的描述信息，生成指定格式的ui卡片文档。

在解析获得所述ui卡片的描述信息后，所述生成模块通过目标应用程序或者工具自动生成指定格式的卡片文档，比如生成markdown格式的卡片文档。具体的卡片文档采用markdown还是html等其它数据格式给用户进行展示取决于开发人员本身，没有固定限制。只要解析卡片json文件自动生成对应卡片文档的工具开发好了，每次有新的ui卡片产生只需要编写第(2)步中的描述文件即可，编写完通过本步骤中描述的目标应用程序或者工具可以自动生成卡片文档供卡片使用者阅读。

因此，不管有多少个新的ui卡片生成，工具都不需要重复开发，可以直接利用，所有卡片的文档可以通过该工具自动生成。

进一步地，所述解析模块，还用于当接收到目标平台调用所述ui卡片请求时，解析所述ui卡片的描述文件，得到所述ui卡片的描述信息；可以通过目标应用程序按照所述json数据格式来解析所述ui卡片对应的所述json文件，获得所述ui卡片对应的描述信息。

所述解析所述描述文件可以由目标应用程序或者工具自动完成。解析所使用的目标应用程序或工具可以使用任何语言开发，比如nodejs，该工具直接解析ui卡片的json文件获取所述ui卡片的描述信息。

所述装置还包括构建模块，用于根据所述ui卡片的描述信息在指定页面中，构建所述ui卡片展示效果。

开发的ui卡片除了需要生成对应的卡片文档帮助使用人员快速了解卡片之外，已开发的卡片可能还有别的用途，比如开发卡片的目标平台可以通过向页面中拖拽卡片的方式快速构建出所需页面效果，此产品功能关键一步就是拖拽到页面上的ui卡片详细信息，比如卡片的名称，参数名称、类型、默认值等卡片相关信息需要提前获取。以前遇到需要在已有卡片基础上做二次开发产生新的产品前遇到需要获取卡片相关信息时只能从卡片的使用文档中进行解析，因为卡片的使用文档采用markdown/html等较容易做数据展示的数据格式进行编写，是为了给人看的，不是给程序解析的，后期一旦需要卡片的相关信息来开发新的产品时经常遇到需要解析的卡片信息不完整，即使卡片文档中包含了对应的信息也因为文档格式不严谨解析困难，容易解析错误。所以对程序解析很不友好，想通过程序从卡片markdown等格式的使用文档中直接准备解析出卡片的全部信息非常困难，且准确率不高。而借助于上述实施例二的方式，由于ui卡片的描述信息已经存储于固定格式的描述文件中，因此能够获取规范完整的描述信息，从而能够容易地构建ui卡片的展示效果。

进一步地，所述装置还包括定义模块和第二设置模块。其中，所述定义模块，用于预先定义构建所述ui卡片展示效果所需的描述信息的类别；所述第二设置模块，用于根据所述描述信息的类别，预先设置所述描述文件的数据格式。也就是说，可以根据业务场景的需要预先定义描述文件的数据格式，从而可以直接使用所定义的数据格式快速完成后续的业务场景展示需要。

在使用所述json文件来存储所述ui卡片的描述信息时，所述json文件的数据格式可以根据自身业务场景需要记录的ui卡片信息提前设计的，充分考虑了卡片文档展示需要的全部数据以及日后开发其它依赖卡片描述信息的产品时可能需要的卡片信息后进行设计的一种json格式，记录的卡片信息比较完整，json格式中哪个字段代表卡片的什么信息也是提前设计约定好的，对程序解析来说非常友好，只要编写ui卡片json文件没有问题，通过其他程序模块解析出来的卡片信息一定是准确无误的，也就能够方便地进行二次开发。

所属领域的技术人员可以清楚的了解到，为了描述的方便和简洁，上述描述的装置、模块和单元的具体工作过程，可以参考前述方法实施例的对应过程，在此不再赘述。

另外，本申请实施例还公开了一种电子设备，其包括存储装置和一个或多个处理器，存储装置用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如实施例一和二的方法。

本申请实施例还公开了一种计算机程序产品，包括计算机程序指令，当指令由处理器执行时，用于实现如实施例一和二的方法。

本申请实施例还公开了一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序被执行时，实现如实施例一和二的方法。

相比于现有技术，本申请解决以往采用的编写ui卡片使用文档后直接从文档解析卡片相关信息困难的关键点是以特定的数据格式为基础设计出1套符合自身业务要求的ui卡片描述格式，该格式可以记录ui卡片所有需要描述的信息，这些信息不仅在卡片文档展示中可能用到，对以后可能已卡片为基础做二次开发产生的新产品来说，需要的ui卡片相关信息也全部记录在这套ui卡片的特定的数据格式中。一旦所设计的ui卡片特定的数据格式记录了卡片以后可能用到的信息，那么日后开发卡片平台等类似依赖于获取卡片详细信息的产品来说，可以通过程序直接解析卡片的特定数据格式的描述文件获取卡片的全部信息，特定的数据格式对任何编程语言来说都是支持的，因为卡片的描述文件中已经记录了卡片的全部信息，所以解析完卡片的描述文件后就可以获取到卡片的全部信息，此过程编程简单，不存在解析困难，解析正确率偏低的问题。

附图中的流程图和框图显示了根据本申请的多个实施例的方法、装置和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图和框图中的每个方框可以代表一个单元、模块、程序段或代码的一部分，包含一个或多个用于实现逻辑功能的计算机可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。也要注意的是，框图和流程图中的每个方框或方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或者操作区分开来，而不一定要求或者暗示这些实体或者操作之间存在任何这种实际的关系或者顺序。而且，术语″包括″、″包含″或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句″包括一个......″限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本申请，上述实施例仅是为说明所作的举例，而并非对实施方式的限定。对于本领域技术人员来说，在上述说明的基础上，还可以做出其它不同形式的变化或变动，而这些变化或变动将是显而易见的，处于本申请的保护范围之中。