CN116243919A - 一种解释渲染和代码渲染的界面渲染方法、设备及介质 - Google Patents

Abstract

本说明书实施例公开了一种解释渲染和代码渲染的界面渲染方法、设备及介质，涉及界面渲染技术领域，方法包括：确定待渲染界面的多个界面元素，对多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据框架类型，将Html结构转换为目标前端框架的前端语句；对前端语句进行持久化操作，得到目标代码文件，以将目标代码文件输出为可执行脚本文件，其中，可执行脚本文件用于执行脚本绘制待渲染界面。满足动态渲染和编译后由代码渲染交替发展、相互共存的发展，可以适应多种前端框架，提高了界面渲染的通用性和稳定性。

Description

一种解释渲染和代码渲染的界面渲染方法、设备及介质

技术领域

本说明书涉及界面渲染技术领域，尤其涉及一种解释渲染和代码渲染的界面渲染方法、设备及介质。

背景技术

低代码开发工具，一般通过建立可视化页面模型，进而解析模型绘制页面。解析模型绘制页面的过程中，往往依赖一个页面解析引擎，此引擎是一个高度封装的黑盒模块，对外界不透明，不能满足开发者需要高度控制页面代码的场景。此外，在低代码开发工具领域，各厂商一般采用JSON格式的文档描述页面，可以通过实现一个前端渲染引擎绘制页面，也可以直接将JSON格式的文档转换为目标前端框架的源代码。使用渲染引擎解析渲染页面具有很好的动态性，开发者可随时调整JSON格式的描述页面文档，实时调整最终页面效果。对于对代码安全要求高的客户，希望可以掌控所有代码，并在客户现场可以构建完整应用，以便于保证代码安全。

低代码开发工具往往采用生成渲染页面代码的方式，为开发者提供更高的控制代码的能力，然而直接生成渲染页面代码的方式，往往又会损失一部分动态渲染能力。将描述页面文档直接转换为目标框架源代码，进而构建前端页面，可以满足客户对代码控制力的要求。但是对低代码开发工具厂商来说，前端框架具有架构多样性和发展迅速的特点，往往只能绑定一种框架，在技术变革时面临巨大成本。在渲染前端页面领域，会面临动态渲染和编译后由代码渲染交替发展、相互共存的情况，只绑定一种前端框架，无法满足界面渲染的通用性和稳定性。

发明内容

本说明书一个或多个实施例提供了一种解释渲染和代码渲染的界面渲染方法、设备及介质，用于解决如下技术问题：在渲染前端页面领域，会面临动态渲染和编译后由代码渲染交替发展、相互共存的情况，只绑定一种前端框架，无法满足界面渲染的通用性和稳定性。

本说明书一个或多个实施例采用下述技术方案：

本说明书一个或多个实施例提供一种解释渲染和代码渲染的界面渲染方法，其特征在于，所述方法包括：确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将所述界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。

进一步地，确定待渲染界面的多个界面元素，具体包括：在描述界面过程中，预先对界面元素进行分类，得到容器类元素和原子类元素，其中，所述容器类元素的属性包括元素标识、元素类型和元素内容，所述原子类元素的属性包括元素标识和元素类型；根据所述容器类元素的属性以及所述原子类元素的属性，将所述待渲染界面的界面元素分为页面容器类元素、组件容器类元素和组件引用原子类元素。

进一步地，对所述多个界面元素分别进行定义，生成界面描述文档，具体包括：对所述界面元素中的页面容器类元素、组件容器类元素和组件引用原子类元素分别进行属性定义，得到多个界面元素属性；根据所述多个界面元素属性进行元素组装，生成界面描述文档。

进一步地，通过Html转换器，将所述界面描述文档转换为Html结构，具体包括：通过Html转换器，读取所述界面描述文档；在所述界面描述文档中，以页面容器类元素开始，遍历每个界面元素，以读取界面元素的元素类型，其中，所述元素类型包括容器类元素和原子类元素；根据每个界面元素的元素类型，在预先构建的映射表中，确定出与所述元素类型对应的Html片段，其中，所述映射表用于表示界面元素与Html片段的对应关系；基于多个Html片段，得到所述界面描述文档对应的所述Html结构。

进一步地，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句，具体包括：接收目标前端框架的框架类型；根据所述框架类型，构造与所述框架类型对应的前端语句转换器，并对前端语句转换器接口进行定义；通过所述前端语句转换器接口，接收所述Html结构中的多个Html片段，遍历Html节点，以收集多个构造语句对象的上下文信息；根据每个构造语句对象的上下文信息，得到输出语句集合，以根据所述输出语句集合，得到所述目标前端框架的前端语句。

进一步地，对所述前端语句进行持久化操作，得到目标代码文件，具体包括：遍历输出所述语句集合中的前端语句，依次对所述语句集合中的前端语句进行序列化，得到多个目标代码语句；对所述多个目标代码语句进行语句拼接，得到目标代码文件。

进一步地，遍历输出所述语句集合中的前端语句，依次对所述语句集合中的前端语句进行序列化，得到多个目标代码语句，具体包括：对所述语句集合中的前端语句进行遍历，确定所述前端语句的语句属性，其中，所述语句属性包括修饰符属性和源代码属性；确定接收所述前端语句的字符串类型变量，并对接收所述前端语句的字符串类型变量进行定义；基于所述前端语句的修饰符属性，在所述字符串类型变量中追加修饰；根据所述前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句。

进一步地，根据所述前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句，具体包括：根据所述前端语句的源代码属性，读取代码开始位置对应的第一代码文本内容和代码结束位置对应的第二代码文本内容；获取第一代码文本内容的开始行和偏移量，并获取所述第二代码文本内容的开始行和开始列；根据所述开始行和所述偏移量，定位到读取所述第一代码文本内容的起始位置；根据所述第二代码文本内容的开始行和开始列，确定所述第二代码文本内容的终止字符；以所述第一代码文本内容的起始位置为起点，以所述终止字符为终点，对所述第一代码文本内容中的字符进行逐个读取，以输出多个字符，得到目标代码语句。

本说明书一个或多个实施例提供一种解释渲染和代码渲染的界面渲染设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将所述界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。

本说明书一个或多个实施例提供的一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：

确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将所述界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：通过上述技术方案，根据待渲染界面的界面元素，生成界面描述文档，转换为Html结构，并根据目标前端框架的框架类型将Html结构转换为目标前端框架对应的代码文件，将描述页面文档转换为目标框架源代码，可以满足客户对代码控制力的要求，在兼顾动态渲染能力的基础上，融合解释渲染和代码渲染的方式，满足动态渲染和编译后由代码渲染交替发展、相互共存的发展，可以适应多种前端框架，提高了界面渲染的通用性和稳定性。

附图说明

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

图1为本说明书实施例提供的一种解释渲染和代码渲染的界面渲染方法的流程示意图；

图2为本说明书实施例提供的一种解释渲染和代码渲染的界面渲染设备的结构示意图。

具体实施方式

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

低代码开发工具，一般通过建立可视化页面模型，进而解析模型绘制页面。解析模型绘制页面的过程中，往往依赖一个页面解析引擎，此引擎是一个高度封装的黑盒模块，对外界不透明，不能满足开发者需要高度控制页面代码的场景。此外，在低代码开发工具领域，各厂商一般采用JSON格式的文档描述页面，可以通过实现一个前端渲染引擎绘制页面，也可以直接将JSON格式的文档转换为目标前端框架的源代码。使用渲染引擎解析渲染页面具有很好的动态性，开发者可随时调整JSON格式的描述页面文档，实时调整最终页面效果。对于对代码安全要求高的客户，希望可以掌控所有代码，并在客户现场可以构建完整应用，以便于保证代码安全。

低代码开发工具往往采用生成渲染页面代码的方式，为开发者提供更高的控制代码的能力，然而直接生成渲染页面代码的方式，往往又会损失一部分动态渲染能力。将描述页面文档直接转换为目标框架源代码，进而构建前端页面，可以满足客户对代码控制力的要求。但是对低代码开发工具厂商来说，前端框架具有架构多样性和发展迅速的特点，往往只能绑定一种框架，在技术变革时面临巨大成本。在渲染前端页面领域，会面临动态渲染和编译后由代码渲染交替发展、相互共存的情况，只绑定一种前端框架，无法满足界面渲染的通用性和稳定性。

本说明书实施例提供一种解释渲染和代码渲染的界面渲染方法，需要说明的是，本说明书实施例中的执行主体可以是服务器，也可以是任意一种具备数据处理能力的设备。图1为本说明书实施例提供的一种解释渲染和代码渲染的界面渲染方法的流程示意图，如图1所示，主要包括如下步骤：

步骤S101，确定待渲染界面的多个界面元素，对多个界面元素分别进行定义，生成界面描述文档。

确定待渲染界面的多个界面元素，具体包括：在描述界面过程中，预先对界面元素进行分类，得到容器类元素和原子类元素，其中，该容器类元素的属性包括元素标识、元素类型和元素内容，该原子类元素的属性包括元素标识和元素类型；根据该容器类元素的属性以及该原子类元素的属性，将该待渲染界面的界面元素分为页面容器类元素、组件容器类元素和组件引用原子类元素。

在本说明书的一个实施例中，采用JSON格式文档描述待渲染界面，在描述待渲染界面的过程中，将界面概括为两类元素，容器类元素和原子元素。其中，容器类元素的属性如下表所示：

容器类元素的属性包括标识属性、类型属性以及内容属性，其中，标识属性的类型为字符串，用于标记元素的唯一标识；类型属性的类型为字符串，用于标记容器类元素的类型，以便于区分不同类型的容器；内容属性的类型为数组，在内容数组中可以包括容器类元素，也可以包括原子类元素，也就是说，在内容数组中可以包含多个元素，也可以不包含元素。

原子类元素的属性如下表所示：

原子类元素的属性包括标识属性和类型属性，标识属性和类型属性的类型均为字符串，标识属性用于标记元素的唯一标识，类型属性用于标记元素的类型，以便于区分不同类型的原子类元素。

容器类元素和原子类元素除以上必须属性外，可以根据具体元素类型，补充描述此类型元素的属性，例如：外观、尺寸、可见性状态、只读、必填、最大值、最小值等。

根据容器类元素的属性以及原子类元素的属性，按照页面的层级关系，将待渲染界面的界面元素分为页面容器类元素、组件容器类元素和组件引用原子类元素。

对该多个界面元素分别进行定义，生成界面描述文档，具体包括：对该界面元素中的页面容器类元素、组件容器类元素和组件引用原子类元素分别进行属性定义，得到多个界面元素属性；根据该多个界面元素属性进行元素组装，生成界面描述文档。

在本说明书的一个实施例中，在界面描述文档中，需要定义类型为页面容器类元素，页面容器类元素的属性描述如下表所示：

在界面描述文档中，需要定义类型为组件容器类元素。按照组件化思想组织描述页面文档，根据页面元素间耦合关系，将聚合度高的界面元素划分为一个组件，组件间可以存在嵌套关系，组件容器类元素的属性描述如下表所示：

在界面描述文档中，需要定义类型为组件引用的原子类元素，其标识对组件元素的引用，不会包含具体元素，组件引用原子类元素的属性描述如下表所示：

属性名	类型	说明
			标识	字符串	用来标记元素的唯一标识
类型	字符串	“组件引用”元素的类型值为“组件引用”
			组织标识	字符串	记录被引用组件的“标识”

根据以上多个界面元素属性进行元素组装，生成界面描述文档，界面描述文档的示例如下：

/>

步骤S102，通过Html转换器，将界面描述文档转换为Html结构。

通过Html转换器，将该界面描述文档转换为Html结构，具体包括：通过Html转换器，读取该界面描述文档；在该界面描述文档中，以页面容器类元素开始，遍历每个界面元素，以读取界面元素的元素类型，其中，该元素类型包括容器类元素和原子类元素；根据每个界面元素的元素类型，在预先构建的映射表中，确定出与该元素类型对应的Html片段，其中，该映射表用于表示界面元素与Html片段的对应关系；基于多个Html片段，得到该界面描述文档对应的该Html结构。

在本说明书的一个实施例中，将描述界面文档转换为Html，包含界面文档转换Html转换器，转换步骤如下：首先，通过Html转换器读取描述界面文档，以页面容器类元素开始遍历每个界面元素，读取界面元素类型，根据界面元素类型在元素与Html映射表中查找对应的Html结构。

对于容器类元素的Html片段，在其内部包含一个占位符。转换器遍历容器类元素的内容数组，读取其内的子元素，当读取到容器类元素时，递归执行上述步骤；当读取到原子类元素时，读取元素类型，根据类型在元素与Html映射表中查找Html结构，并返回Html片段。重复上述步骤，获取所有界面元素的Html结构集合，汇总后替换占位符，返回转换后的Html内容。

在本说明书的一个实施例中，映射表用于表示界面元素与Html片段的对应关系，映射表的结果如下表所示：

键	值
		元素类型	容器类元素或者原子类元素属性中的类型
Html结构	Html片段，对于容器类元素，在Html片段中包含占位符

步骤S103，获取目标前端框架的框架类型，根据框架类型，将Html结构转换为目标前端框架的前端语句。

根据该框架类型，将该Html结构转换为该目标前端框架的前端语句，具体包括：接收目标前端框架的框架类型；根据该框架类型，构造与该框架类型对应的前端语句转换器，并对前端语句转换器接口进行定义；通过该前端语句转换器接口，接收该Html结构中的多个Html片段，遍历Html节点，以收集多个构造语句对象的上下文信息；根据每个构造语句对象的上下文信息，得到输出语句集合，以根据该输出语句集合，得到该目标前端框架的前端语句。

在本说明书的一个实施例中，将Html结构转换为目标前端框架前端框架语句。接收目标前端框架的框架类型；根据框架类型，构造与框架类型对应的前端语句转换器，并对前端语句转换器接口进行定义，通过前端语句转换器接口，可以将Html结构转换为目标前端框架的前端语句。

首先，转换器工厂接收目标前端框架类型，构造对于类型的前端语句转换器。转换器接口定义如下表所示：

在转换器接口定义中，包括遍历所有节点和输出语句两个方法，其中，遍历所有节点方法用于接收Html片段，可遍历所有Html节点收集构造语句对象的上下文信息；输出语句方法用于输出最终构造的语句集合。

在本说明书的一个实施例中，向转换器接口传入Html片段，并调用“遍历所有节点”方法，遍历Html节点收集构造语句的上下文信息。向转换器的“输出语句”方法传入“输出上下文”对象，并调用此方法向输出上下文中记录待输出语句。定义输出上下文的结构如下表所示：

定义输出语句的结构如下表所示：

步骤S104，对前端语句进行持久化操作，得到目标代码文件，以将目标代码文件输出为可执行脚本文件。

其中，该可执行脚本文件用于执行脚本绘制该待渲染界面。

对该前端语句进行持久化操作，得到目标代码文件，具体包括：遍历输出该语句集合中的前端语句，依次对该语句集合中的前端语句进行序列化，得到多个目标代码语句；对该多个目标代码语句进行语句拼接，得到目标代码文件。

在本说明书的一个实施例中，在语句集合中包括多个前端语句，遍历输出上下文对象中的输出语句集合，依次调用输出语句对象的序列化方法，获得目标代码语句。对多个目标代码语句进行语句拼接，得到目标代码文件，将目标代码文件，输出为可执行脚本文件，根据可执行脚本文件执行脚本绘制页面，实现待渲染界面的渲染。

遍历输出该语句集合中的前端语句，依次对该语句集合中的前端语句进行序列化，得到多个目标代码语句，具体包括：对该语句集合中的前端语句进行遍历，确定该前端语句的语句属性，其中，该语句属性包括修饰符属性和源代码属性；确定接收该前端语句的字符串类型变量，并对接收该前端语句的字符串类型变量进行定义；基于该前端语句的修饰符属性，在该字符串类型变量中追加修饰；根据该前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句。

在本说明书的一个实施例中，在输出语句的定义结构中，输出语句的语句属性包括修饰符属性和源代码属性，其中，修饰符属性的类型为数组，通过数组记录代码修饰符，如缺省、私有、静态以及输出变量；源代码属性的类型为源代码范围，记录具体由代码文本已经起始位置标识的代码片段。

在本说明书的一个实施例中，源代码属性的结构如下表所示：

属性	类型	说明
			代码开始位置	代码位置	记录代码文本内容及开始位置
代码结束位置	代码位置	记录代码文本内容及结束位置

源代码属性包括代码开始位置和代码结束位置，其类型均为代码位置，代码开始位置用于记录代码文本内容及开始位置，代码结束位置用于记录代码文本内容及结束位置。此外，代码位置的结构如下表所示：

属性	类型	说明
			代码文本内容	字符串	记录代码文本内容
代码文件路径	字符串	记录持久化代码文件时使用的输出路径
			偏移量	整数	记录标识代码位置的起始偏移量
行位置	整数	记录标识代码位置的起始行
			列位置	整数	记录标识代码位置的起始列

代码位置包括代码文本内容、代码文件路径、偏移量、行位置和列位置，代码文本内容用于记录代码文本内容，代码文件路径用于记录持久化代码文件时使用的输出路径，偏移量用于记录标识代码位置的起始偏移量，行位置用于记录标识代码位置的起始行，列位置用于记录标识代码位置的起始列。

首先，定义接收前端语句的字符串类型变量。其次，读取输出语句的“修饰符”属性，按照指定的修饰向接收前端语句的变量中追加，例如：私有、静态、输出等修饰符。之后，读取输出语句类型为“源代码范围”的“源代码”属性，调用其序列化方法，获得代码文本，并追加入接收变量。

根据该前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句，具体包括：根据该前端语句的源代码属性，读取代码开始位置对应的第一代码文本内容和代码结束位置对应的第二代码文本内容；获取第一代码文本内容的开始行和偏移量，并获取该第二代码文本内容的开始行和开始列；根据该开始行和该偏移量，定位到读取该第一代码文本内容的起始位置；根据该第二代码文本内容的开始行和开始列，确定该第二代码文本内容的终止字符；以该第一代码文本内容的起始位置为起点，以该终止字符为终点，对该第一代码文本内容中的字符进行逐个读取，以输出多个字符，得到目标代码语句。

在本说明书的一个实施例中，“源代码范围”的序列化过程如下：首先，读取“代码开始位置”中记录的“代码文本内容”。根据开始行和偏移量，定位到读取代码文本的起始位置。之后，逐个读取“代码文本内容”中的字符，到“代码结束位置”中记录的开始行和开始列表示的字符为止。最后，输出读取的所有字符，完成序列化过程。将语句描述转换为内存中可执行方法。

通过上述技术方案，根据待渲染界面的界面元素，生成界面描述文档，转换为Html结构，并根据目标前端框架的框架类型将Html结构转换为目标前端框架对应的代码文件，将描述页面文档转换为目标框架源代码，可以满足客户对代码控制力的要求，在兼顾动态渲染能力的基础上，融合解释渲染和代码渲染的方式，满足动态渲染和编译后由代码渲染交替发展、相互共存的发展，可以适应多种前端框架，提高了界面渲染的通用性和稳定性。

本说明书实施例还提供一种解释渲染和代码渲染的界面渲染设备，如图2所示，设备包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：

确定待渲染界面的多个界面元素，对该多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将该界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据该框架类型，将该Html结构转换为该目标前端框架的前端语句；对该前端语句进行持久化操作，得到目标代码文件，以将该目标代码文件输出为可执行脚本文件，其中，该可执行脚本文件用于执行脚本绘制该待渲染界面。

本说明书实施例还提供一种非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：

确定待渲染界面的多个界面元素，对该多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将该界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据该框架类型，将该Html结构转换为该目标前端框架的前端语句；对该前端语句进行持久化操作，得到目标代码文件，以将该目标代码文件输出为可执行脚本文件，其中，该可执行脚本文件用于执行脚本绘制该待渲染界面。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。

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

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

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

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

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅为本说明书的一个或多个实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书的一个或多个实施例可以有各种更改和变化。凡在本说明书的一个或多个实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。

Claims (10)

1.一种解释渲染和代码渲染的界面渲染方法，其特征在于，所述方法包括：

确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；

通过Html转换器，将所述界面描述文档转换为Html结构；

获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；

对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。

2.根据权利要求1所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，确定待渲染界面的多个界面元素，具体包括：

在描述界面过程中，预先对界面元素进行分类，得到容器类元素和原子类元素，其中，所述容器类元素的属性包括元素标识、元素类型和元素内容，所述原子类元素的属性包括元素标识和元素类型；

根据所述容器类元素的属性以及所述原子类元素的属性，将所述待渲染界面的界面元素分为页面容器类元素、组件容器类元素和组件引用原子类元素。

3.根据权利要求2所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，对所述多个界面元素分别进行定义，生成界面描述文档，具体包括：

对所述界面元素中的页面容器类元素、组件容器类元素和组件引用原子类元素分别进行属性定义，得到多个界面元素属性；

根据所述多个界面元素属性进行元素组装，生成界面描述文档。

4.根据权利要求1所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，通过Html转换器，将所述界面描述文档转换为Html结构，具体包括：

通过Html转换器，读取所述界面描述文档；

在所述界面描述文档中，以页面容器类元素开始，遍历每个界面元素，以读取界面元素的元素类型，其中，所述元素类型包括容器类元素和原子类元素；

根据每个界面元素的元素类型，在预先构建的映射表中，确定出与所述元素类型对应的Html片段，其中，所述映射表用于表示界面元素与Html片段的对应关系；

基于多个Html片段，得到所述界面描述文档对应的所述Html结构。

5.根据权利要求1所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句，具体包括：

接收目标前端框架的框架类型；

根据所述框架类型，构造与所述框架类型对应的前端语句转换器，并对前端语句转换器接口进行定义；

通过所述前端语句转换器接口，接收所述Html结构中的多个Html片段，遍历Html节点，以收集多个构造语句对象的上下文信息；

根据每个构造语句对象的上下文信息，得到输出语句集合，以根据所述输出语句集合，得到所述目标前端框架的前端语句。

6.根据权利要求1所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，对所述前端语句进行持久化操作，得到目标代码文件，具体包括：

遍历输出所述语句集合中的前端语句，依次对所述语句集合中的前端语句进行序列化，得到多个目标代码语句；

对所述多个目标代码语句进行语句拼接，得到目标代码文件。

7.根据权利要求6所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，遍历输出所述语句集合中的前端语句，依次对所述语句集合中的前端语句进行序列化，得到多个目标代码语句，具体包括：

对所述语句集合中的前端语句进行遍历，确定所述前端语句的语句属性，其中，所述语句属性包括修饰符属性和源代码属性；

确定接收所述前端语句的字符串类型变量，并对接收所述前端语句的字符串类型变量进行定义；

基于所述前端语句的修饰符属性，在所述字符串类型变量中追加修饰；

根据所述前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句。

8.根据权利要求7所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，根据所述前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句，具体包括：

根据所述前端语句的源代码属性，读取代码开始位置对应的第一代码文本内容和代码结束位置对应的第二代码文本内容；

获取第一代码文本内容的开始行和偏移量，并获取所述第二代码文本内容的开始行和开始列；

根据所述开始行和所述偏移量，定位到读取所述第一代码文本内容的起始位置；

根据所述第二代码文本内容的开始行和开始列，确定所述第二代码文本内容的终止字符；

以所述第一代码文本内容的起始位置为起点，以所述终止字符为终点，对所述第一代码文本内容中的字符进行逐个读取，以输出多个字符，得到目标代码语句。

9.一种解释渲染和代码渲染的界面渲染设备，其特征在于，所述设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；

通过Html转换器，将所述界面描述文档转换为Html结构；

获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；

对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。

10.一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：

确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；

通过Html转换器，将所述界面描述文档转换为Html结构；

获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；

对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。

Images