WO2019214539A1

WO2019214539A1 - 一种文档展示方法和装置

Info

Publication number: WO2019214539A1
Application number: PCT/CN2019/085466
Authority: WO
Inventors: 谢焕榆; 陈智浩
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2018-05-08
Filing date: 2019-05-05
Publication date: 2019-11-14
Anticipated expiration: 2020-11-08
Also published as: TW201947424A; CN110457656A; CN110457656B

Abstract

本申请实施例提供了一种文档展示方法和装置，所述方法包括：在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；在所述Web端将所述Markdown文档转换为Html网页文档；在所述Web端加载用于模拟React Native运行环境的兼容代码；在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。在本申请实施例中，通过在Web端加载用于模拟React Native运行环境的兼容代码，可以实现在展示React Native组件代码和相应的文档数据的同时，展示React Native组件代码的预览效果。

Description

一种文档展示方法和装置

本申请要求2018年05月08日递交的申请号为201810434160.5、发明名称为“一种文档展示方法和装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。

技术领域

本申请涉及计算机技术领域，特别是涉及一种文档展示方法和一种文档展示装置。

背景技术

随着应用程序的发展，应用程序中用到的UI组件也越来越多。其中，用于原生系统(iOS系统和Android系统)React Native组件是一种常见的UI组件。

开发者在开发React Native组件时，为了便于其他使用者使用该组件，可以为React Native组件编写用于说明React Native组件如何使用的文档。

但是，目前针对React Native组件的文档只能展示React Native组件的源代码，无法预览代码的运行效果，不利于使用者快速了解React Native组件。

发明内容

鉴于上述问题，提出了本申请实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种文档展示方法和相应的一种文档展示装置。

为了解决上述问题，本申请实施例公开了一种文档展示方法，包括：

在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；

在所述Web端将所述Markdown文档转换为Html网页文档；

在所述Web端加载用于模拟React Native运行环境的兼容代码；

在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。

优选的，还包括：

解析所述Markdown文档中的元数据；

所述在所述Web端将所述Markdown文档转换为Html网页文档的步骤包括：

加载转换组件；

通过所述转换组件采用所述元数据生成Html网页文档。

优选的，还包括：

生成指定所述元数据的配置文件；

将所述配置文件传入所述转换组件；

所述通过所述转换组件采用所述元数据生成Html网页文档的步骤包括：

通过所述转换组件获取所述配置文件指定的元数据，并采用所述元数据生成Html网页文档。

优选的，所述在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用React Native组件代码在所述Html网页文档中展示预览效果的步骤包括：

在所述Web端基于所述兼容代码模拟的React Native运行环境下，将所述React Native组件代码转换为适配所述Web端的代码；

在所述Web端展示所述Html网页文档，并采用所述适配所述Web端的代码在所述Html网页文档中展示预览效果。

优选的，在所述Web端基于所述兼容代码模拟的React Native运行环境下，将所述React Native组件代码转换为适配所述Web端的代码的步骤包括：

在所述Web端基于所述兼容代码模拟的React Native运行环境下，通过所述转换组件将所述React Native组件代码转换为适配所述Web端的代码。

优选的，所述解析所述Markdown文档中的元数据的步骤包括：

加载解析组件；

通过所述解析组件，解析所述Markdown文档中的元数据。

优选的，所述生成指定所述元数据的配置文件的步骤包括：

通过所述解析组件生成指定所述元数据的配置文件。

优选的，还包括：

建立多个所述Html网页文档的之间的链接关系。

优选的，所述Markdown文档通过如下方式生成：

加载组件库；所述组件库中包括多个React Native组件代码；

生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。

优选的，所述生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档的步骤包括：

加载文档生成组件；

通过所述文档生成组件，生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。

本申请实施例还公开了一种文档展示方法，包括：

在Web端获取第一格式文档；所述第一格式文档包含有前端组件代码；

在所述Web端将所述第一格式文档转换为第二格式文档；

在所述Web端加载用于模拟前端运行环境的兼容代码；

在所述Web端基于所述兼容代码模拟的前端运行环境下，展示所述第二格式文档，并采用所述前端组件代码在所述第二格式文档中展示预览效果。

优选的，还包括：

解析所述第一格式文档中的元数据；

所述在所述Web端将所述第一格式文档转换为第二格式文档的步骤包括：

加载转换组件；

通过所述转换组件采用所述元数据生成第二格式文档。

优选的，所述在所述Web端基于所述兼容代码模拟的前端运行环境下，展示所述第二格式文档，并采用所述前端组件代码在所述第二格式文档中展示预览效果的步骤包括：

在所述Web端基于所述兼容代码模拟的前端运行环境下，将所述前端组件代码转换为适配所述Web端的代码；

在所述Web端展示所述第二格式文档，并采用所述适配所述Web端的代码在所述第二格式文档中展示预览效果。

优选的，在所述Web端基于所述兼容代码模拟的前端运行环境下，将所述前端组件代码转换为适配所述Web端的代码的步骤包括：

在所述Web端基于所述兼容代码模拟的前端运行环境下，通过所述转换组件将所述前端组件代码转换为适配所述Web端的代码。

本申请实施例还公开了一种文档展示装置，包括：

文档获取模块，用于在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；

文档转换模块，用于在所述Web端将所述Markdown文档转换为Html网页文档；

兼容代码加载模块，用于在所述Web端加载用于模拟React Native运行环境的兼容代码；

展示模块，用于在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。

优选的，还包括：

解析模块，用于解析所述Markdown文档中的元数据；

所述文档转换模块包括：

转换组件加载子模块，用于加载转换组件；

转换子模块，用于通过所述转换组件采用所述元数据生成Html网页文档。

优选的，还包括：

配置文件生成模块，用于生成指定所述元数据的配置文件；

配置文件传入模块，用于将所述配置文件传入所述转换组件；

页面文档生成单元，用于通过所述转换组件获取所述配置文件指定的元数据，并采用所述元数据生成Html网页文档。

优选的，所述展示模块包括：

代码转换子模块，用于在所述Web端基于所述兼容代码模拟的React Native运行环境下，将所述React Native组件代码转换为适配所述Web端的代码；

展示子模块，用于在所述Web端展示所述Html网页文档，并采用所述适配所述Web端的代码在所述Html网页文档中展示预览效果。

优选的，所述代码转换子模块包括：

代码转换单元，用于在所述Web端基于所述兼容代码模拟的React Native运行环境下，通过所述转换组件将所述React Native组件代码转换为适配所述Web端的代码。

优选的，所述解析模块包括：

解析组件加载子模块，用于加载解析组件；

解析子模块，用于通过所述解析组件，解析所述Markdown文档中的元数据。

优选的，所述配置文件生成模块包括：

配置文件生成子模块，用于通过所述解析组件生成指定所述元数据的配置文件。

优选的，还包括：

连接关系建立模块，用于建立多个所述Html网页文档的之间的链接关系。

优选的，所述Markdown文档通过如下模块生成：

组件库加载模块，用于加载组件库；所述组件库中包括多个React Native组件代码；

文档生成模块，用于生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。

优选的，所述文档生成模块包括：

文档生成组件加载子模块，用于加载文档生成组件；

文档生成子模块，用于通过所述文档生成组件，生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。

本申请实施例还公开了一种装置，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行如上所述的一个或多个的方法。

本申请实施例还公开了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如权上所述的一个或多个的方法。

本申请实施例包括以下优点：

在本申请实施例中，通过在Web端加载用于模拟React Native运行环境的兼容代码，可以实现在展示React Native组件代码和相应的文档数据的同时，展示React Native组件代码的预览效果。

附图说明

图1是本申请的一种文档展示方法实施例一的步骤流程图；

图2是本申请的一种文档展示方法实施例二的步骤流程图；

图3是本申请实施例中实现在Web端预览文档的示意图；

图4是本申请的一种文档展示方法实施例三的步骤流程图；

图5是本申请的一种文档展示装置实施例的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

参照图1，示出了本申请的一种文档展示方法实施例一的步骤流程图，具体可以包括如下步骤：

步骤101，在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；

Web端可以是浏览器端或是其他提供网页访问功能的客户端。

对于开发者而言，为组件编写说明文档是必不可少的工作。文档的编写可以采样多种形式，在本申请实施例中采用Markdown来编写文档。

Markdown是一种可以使用普通文本编辑器编写的标记语言。Markdown具有简单的语法规则，其允许使用易读易写的纯文本格式编写文档，并且Markdown文档能转换成Html网页文档、pdf文档，方便其他使用者打开。

在本申请实施例中，Markdown文档包含有React Native组件代码和用于说明React Native组件代码的文档数据。

在实际中，每个Markdown文档都可以存储在独立的目录中。将代码和文档数据放在一个目录中，可以方便文档的维护者同时维护代码和文档数据。其中，文档数据可以包括：标题、属性等信息。

在实际中，往往需要对多个React Native组件生成说明文档。例如，对React Native组件库中的所有React Native组件生成说明文档。

在本申请实施例中，Markdown文档可以通过如下步骤生成：

加载组件库；所述组件库中包括多个React Native组件代码；生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。

具体的，所述生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档可以包括：

加载文档生成组件；通过所述文档生成组件，生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。

文档生成组件是开发者开发的用于生成React Native组件代码的文档数据的组件，文档生成组件在扫描React Native组件代码后，即可生成相应的文档数据。

步骤102，在所述Web端将所述Markdown文档转换为Html网页文档；

为了方便将Markdown文档转换成Html网页文档，可以开发转换组件来进行转换。对于使用者而言，可以在Web端安装其他开发者开发的转换组件。

在本申请实施例中，Markdown文档转换为Html网页文档后，Markdown文档中的React Native组件代码和文档数据会被保留。因此，仍然可以在Html页面中浏览React Native组件代码和相应的文档数据。

步骤103，在所述Web端加载用于模拟React Native运行环境的兼容代码；

在实际中，React Native代码只兼容两个平台(iOS和Android)，并没有兼容Web端访问。为了能在Web端实现React Native代码，可以开发用于在Web端模拟React Native运行环境的兼容代码。

React Native运行环境也可以称为React Native框架，React Native运行环境包含了React Native组件代码运行所依赖的函数和参数。

在Web端加载该兼容代码后，即可以实现在Web端运行React Native组件代码。

步骤104，在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。

Web端模拟出React Native运行环境后，在Web端启动Html网页文档即可展示Html网页文档中的React Native代码和用于描述React Native代码的文档数据。同时，在模拟出的React Native运行环境下，可以实现React Native组件代码的运行，从而展示React Native组件代码的预览效果。

参照图2，示出了本申请的一种文档展示方法实施例二的步骤流程图，具体可以包括如下步骤：

步骤201，在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；

步骤202，解析所述Markdown文档中的元数据；所述元数据包括：文档数据以及React Native组件代码；

在本申请实施例中，所述步骤202可以包括如下子步骤：

子步骤S11，加载解析组件；

解析组件是由开发者开发的用于解析出Markdown文档中的代码和文档数据的组件。

在实际中，解析组件可以包括多个相互配合来实现分析的组件。

子步骤S12，通过所述解析组件，解析所述Markdown文档中的元数据。

解析得到的元数据，可以按结构化的形式存储(例如，树结构)，从而方便其他组件或系统使用这些元数据。

步骤203，加载转换组件；

转换组件是由开发者开发的用于将Markdown文档转换为Html网页文档。

在实际中，转换组件可以包括多个相互配合来实现转换的组件。

步骤204，通过所述转换组件采用所述元数据生成Html网页文档；

在本申请实施例中，所述的方法还可以包括：生成指定所述元数据的配置文件；将所述配置文件传入所述转换组件；

具体的，可以由解析组件在解析出元数据后，生成指定所述元数据的配置文件，并将配置文件传入到转换组件。

所述步骤204可以为：通过所述转换组件获取所述配置文件指定的元数据，并采用所述元数据生成Html页面。

为了使转换组件能更方便、更准确的获取到元数据，可用通过配置文件来指定元数据。转换组件可以根据配置文件，获取指定的元数据。

在本申请实施例中，所述的方法还可以包括：建立多个所述Html网页文档的之间的链接关系。

通过建立多个所述Html网页文档的之间的链接关系，就可以实现Html网页文档之间的跳转。

具体的，每个Markdown文档可以独立放在一个目录中，多个目录对应的就是多个站点，多个目录下的Markdown文档可以使用一种相对路径格式相互引用，实现了站点间的跳转。

步骤205，在所述Web端加载用于模拟React Native运行环境的兼容代码；

步骤206，在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。

在本申请实施例中，所述步骤206可以包括如下子步骤：

子步骤S21，在所述Web端基于所述兼容代码模拟的React Native运行环境下，将所述React Native组件代码转换为适配所述Web端的代码；

具体的，React Native组件实际使用的是.jsx代码，而在Web端运行的则是.js代码。兼容代码的实际作用就提供将.jsx代码转换为.js代码的方法。

通过兼容代码提供的转换方法，可以将React Native组件所用到的.jsx代码都转换为.js代码。

在本申请实施例中，所述子步骤S21可以包括为：在所述Web端基于所述兼容代码模拟的React Native运行环境下，通过所述转换组件将所述React Native组件代码转换为适配所述Web端的代码。

具体的，可以通过转换组件调用兼容代码提供的转换方法，将React Native组件代码转换为适配Web端的代码。

子步骤S22，在所述Web端展示所述Html网页文档，并采用所述适配所述Web端的代码在所述Html网页文档中展示预览效果。

参照图3所示，为本申请实施例中实现在Web端预览文档的示意图。

对于Markdown文档和Markdown文档中.jsx格式的React Native组件代码，可以采用分析组件(例如，解析器parser)进行分析，得到结构化的元数据meta.json。

在Web端加载用于模拟React Native运行环境的兼容代码，以在Web端模拟React Native运行环境。

在模拟的React Native运行环境下，通过转换组件将元数据meta.json使用兼容代码转换为Html网页文档，并在Html网页文档中展示React Native组件代码的预览效果。

参照图4示出了本申请的一种文档展示方法实施例三的步骤流程图，具体可以包括如下步骤：

步骤401，在Web端获取第一格式文档；所述第一格式文档包含有前端组件代码；

在本申请实施例中，第一格式文档可以为Markdown文档；前端组件代码可以为React Native组件代码、Weex组件代码。Weex是一个使用Web开发原生应用的框架。Weex组件代码是基于Weex框架编写的组件代码。

步骤402，在所述Web端将所述第一格式文档转换为第二格式文档；

第二格式文档可以为Html网页文档。

在本申请实施例中，所述的方法还可以包括：解析所述第一格式文档中的元数据；

所述步骤402可以包括：加载转换组件；通过所述转换组件采用所述元数据生成第二格式文档。

所述通过所述转换组件采用所述元数据生成第二格式文档的步骤可以包括：

通过所述转换组件获取所述配置文件指定的元数据，并采用所述元数据生成第二格式文档。

在本申请实施例中，所述解析所述第一格式文档中的元数据的步骤包括：加载解析组件；通过所述解析组件，解析所述第一格式文档中的元数据。

在本申请实施例中，所述生成指定所述元数据的配置文件的步骤包括：通过所述解析组件生成指定所述元数据的配置文件。

在本申请实施例中，所述的方法还可以包括：建立多个所述第二格式文档的之间的链接关系。

在本申请实施例中，所述第二格式文档通过如下方式生成：

加载组件库；所述组件库中包括多个前端组件代码；生成针对所述前端组件代码的文档数据，并采用所述文档数据和所述前端组件代码生成第二格式文档。

在本申请实施例中，所述生成针对所述前端组件代码的文档数据，并采用所述文档数据和所述前端组件代码生成第二格式文档的步骤包括：

加载文档生成组件；通过所述文档生成组件，生成针对所述前端组件代码的文档数据，并采用所述文档数据和所述前端组件代码生成第二格式文档。

步骤403，在所述Web端加载用于模拟前端运行环境的兼容代码；

前端运行环境包含了前端组件代码运行所依赖的函数和参数。在Web端加载该兼容代码后，即可以实现在Web端运行前端组件代码。

步骤404，在所述Web端基于所述兼容代码模拟的前端运行环境下，展示所述第二格式文档，并采用所述前端组件代码在所述第二格式文档中展示预览效果。

Web端模拟出前端运行环境后，在Web端启动第二格式文档即可展示第二格式文档中的前端组件代码和用于描述前端组件代码的文档数据。同时，在模拟出的前端运行环境下，可以实现前端组件代码的运行，从而展示前端组件代码的预览效果。

在本申请实施例中，通过在Web端加载用于模拟前端运行环境的兼容代码，可以实现在展示前端组件代码和相应的文档数据的同时，展示前端组件代码的预览效果。

在本申请实施例中，所述步骤404可以包括：

在本申请实施例中，在所述Web端基于所述兼容代码模拟的前端运行环境下，将所述前端组件代码转换为适配所述Web端的代码的步骤包括：

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

参照图5，示出了本申请的一种文档展示装置实施例的结构框图，具体可以包括如下模块：

文档获取模块501，用于在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；

文档转换模块502，用于在所述Web端将所述Markdown文档转换为Html网页文档；

兼容代码加载模块503，用于在所述Web端加载用于模拟React Native运行环境的兼容代码；

展示模块504，用于在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。

在本申请实施例中，所述的装置还可以包括：

解析模块，用于解析所述Markdown文档中的元数据；

所述文档转换模块502可以包括：

转换组件加载子模块，用于加载转换组件；

在本申请实施例中，所述的装置还可以包括：

配置文件生成模块，用于生成指定所述元数据的配置文件；

在本申请实施例中，所述展示模块504可以包括：

在本申请实施例中，所述代码转换子模块可以包括：

在本申请实施例中，所述解析模块可以包括：

解析组件加载子模块，用于加载解析组件；

在本申请实施例中，所述配置文件生成模块可以包括：

在本申请实施例中，所述的装置还可以包括：

在本申请实施例中，所述Markdown文档通过如下模块生成：

在本申请实施例中，所述文档生成模块包括：

文档生成组件加载子模块，用于加载文档生成组件；

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请实施例还提供了一种装置，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行本申请实施例所述的方法。

本申请实施例还提供了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行本申请实施例所述的方法。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

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

以上对本申请所提供的一种文档展示方法和一种文档展示装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims

一种文档展示方法，其特征在于，包括：

在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；

在所述Web端将所述Markdown文档转换为Html网页文档；

在所述Web端加载用于模拟React Native运行环境的兼容代码；

在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。
根据权利要求1所述的方法，其特征在于，还包括：

解析所述Markdown文档中的元数据；

所述在所述Web端将所述Markdown文档转换为Html网页文档的步骤包括：

加载转换组件；

通过所述转换组件采用所述元数据生成Html网页文档。
根据权利要求2所述的方法，其特征在于，还包括：

生成指定所述元数据的配置文件；

将所述配置文件传入所述转换组件；

所述通过所述转换组件采用所述元数据生成Html网页文档的步骤包括：

通过所述转换组件获取所述配置文件指定的元数据，并采用所述元数据生成Html网页文档。
根据权利要求3所述的方法，其特征在于，所述在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用React Native组件代码在所述Html网页文档中展示预览效果的步骤包括：

在所述Web端基于所述兼容代码模拟的React Native运行环境下，将所述React Native组件代码转换为适配所述Web端的代码；

在所述Web端展示所述Html网页文档，并采用所述适配所述Web端的代码在所述Html网页文档中展示预览效果。
根据权利要求4所述的方法，其特征在于，在所述Web端基于所述兼容代码模拟的React Native运行环境下，将所述React Native组件代码转换为适配所述Web端的代码的步骤包括：

在所述Web端基于所述兼容代码模拟的React Native运行环境下，通过所述转换组件将所述React Native组件代码转换为适配所述Web端的代码。
根据权利要求5所述的方法，其特征在于，所述解析所述Markdown文档中的元数据的步骤包括：

加载解析组件；

通过所述解析组件，解析所述Markdown文档中的元数据。
根据权利要求6所述的方法，其特征在于，所述生成指定所述元数据的配置文件的步骤包括：

通过所述解析组件生成指定所述元数据的配置文件。
根据权利要求7所述的方法，其特征在于，还包括：

建立多个所述Html网页文档的之间的链接关系。
根据权利要求1-8任一项所述的方法，其特征在于，所述Markdown文档通过如下方式生成：

加载组件库；所述组件库中包括多个React Native组件代码；

生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。
根据权利要求9所述的方法，其特征在于，所述生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档的步骤包括：

加载文档生成组件；

通过所述文档生成组件，生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。
一种文档展示方法，其特征在于，包括：

在Web端获取第一格式文档；所述第一格式文档包含有前端组件代码；

在所述Web端将所述第一格式文档转换为第二格式文档；

在所述Web端加载用于模拟前端运行环境的兼容代码；

在所述Web端基于所述兼容代码模拟的前端运行环境下，展示所述第二格式文档，并采用所述前端组件代码在所述第二格式文档中展示预览效果。
根据权利要求11所述的方法，其特征在于，还包括：

解析所述第一格式文档中的元数据；

所述在所述Web端将所述第一格式文档转换为第二格式文档的步骤包括：

加载转换组件；

通过所述转换组件采用所述元数据生成第二格式文档。
根据权利要求12所述的方法，其特征在于，所述在所述Web端基于所述兼容代码模拟的前端运行环境下，展示所述第二格式文档，并采用所述前端组件代码在所述第二格式文档中展示预览效果的步骤包括：

在所述Web端基于所述兼容代码模拟的前端运行环境下，将所述前端组件代码转换为适配所述Web端的代码；

在所述Web端展示所述第二格式文档，并采用所述适配所述Web端的代码在所述第二格式文档中展示预览效果。
根据权利要求13所述的方法，其特征在于，在所述Web端基于所述兼容代码模拟的前端运行环境下，将所述前端组件代码转换为适配所述Web端的代码的步骤包括：

在所述Web端基于所述兼容代码模拟的前端运行环境下，通过所述转换组件将所述前端组件代码转换为适配所述Web端的代码。
一种文档展示装置，其特征在于，包括：

文档获取模块，用于在Web端获取Markdown文档；所述Markdown文档包含有React Native组件代码；

文档转换模块，用于在所述Web端将所述Markdown文档转换为Html网页文档；

兼容代码加载模块，用于在所述Web端加载用于模拟React Native运行环境的兼容代码；

展示模块，用于在所述Web端基于所述兼容代码模拟的React Native运行环境下，展示所述Html网页文档，并采用所述React Native组件代码在所述Html网页文档中展示预览效果。
根据权利要求15所述的装置，其特征在于，还包括：

解析模块，用于解析所述Markdown文档中的元数据；

所述文档转换模块包括：

转换组件加载子模块，用于加载转换组件；

转换子模块，用于通过所述转换组件采用所述元数据生成Html网页文档。
根据权利要求16所述的装置，其特征在于，还包括：

配置文件生成模块，用于生成指定所述元数据的配置文件；

配置文件传入模块，用于将所述配置文件传入所述转换组件；

所述通过所述转换组件采用所述元数据生成Html网页文档的步骤包括：

页面文档生成单元，用于通过所述转换组件获取所述配置文件指定的元数据，并采用所述元数据生成Html网页文档。
根据权利要求17所述的装置，其特征在于，所述展示模块包括：

代码转换子模块，用于在所述Web端基于所述兼容代码模拟的React Native运行环境下，将所述React Native组件代码转换为适配所述Web端的代码；

展示子模块，用于在所述Web端展示所述Html网页文档，并采用所述适配所述Web端的代码在所述Html网页文档中展示预览效果。
根据权利要求18所述的装置，其特征在于，所述代码转换子模块包括：

代码转换单元，用于在所述Web端基于所述兼容代码模拟的React Native运行环境下，通过所述转换组件将所述React Native组件代码转换为适配所述Web端的代码。
根据权利要求19所述的装置，其特征在于，所述解析模块包括：

解析组件加载子模块，用于加载解析组件；

解析子模块，用于通过所述解析组件，解析所述Markdown文档中的元数据。
根据权利要求20所述的装置，其特征在于，所述配置文件生成模块包括：

配置文件生成子模块，用于通过所述解析组件生成指定所述元数据的配置文件。
根据权利要求21所述的装置，其特征在于，还包括：

连接关系建立模块，用于建立多个所述Html网页文档的之间的链接关系。
根据权利要求15-22任一项所述的装置，其特征在于，所述Markdown文档通过如下模块生成：

组件库加载模块，用于加载组件库；所述组件库中包括多个React Native组件代码；

文档生成模块，用于生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。
根据权利要求23所述的装置，其特征在于，所述文档生成模块包括：

文档生成组件加载子模块，用于加载文档生成组件；

文档生成子模块，用于通过所述文档生成组件，生成针对所述React Native组件代码的文档数据，并采用所述文档数据和所述React Native组件代码生成Markdown文档。
一种装置，其特征在于，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行如权利要求1-10或者11-14所述的一个或多个的方法。
一个或多个机器可读介质，其特征在于，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如权利要求1-10或者11-14所述的一个或多个的方法。