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

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

【技术实现步骤摘要】
一种解释渲染和代码渲染的界面渲染方法、设备及介质


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

技术介绍

[0002]低代码开发工具，一般通过建立可视化页面模型，进而解析模型绘制页面。解析模型绘制页面的过程中，往往依赖一个页面解析引擎，此引擎是一个高度封装的黑盒模块，对外界不透明，不能满足开发者需要高度控制页面代码的场景。此外，在低代码开发工具领域，各厂商一般采用JSON格式的文档描述页面，可以通过实现一个前端渲染引擎绘制页面，也可以直接将JSON格式的文档转换为目标前端框架的源代码。使用渲染引擎解析渲染页面具有很好的动态性，开发者可随时调整JSON格式的描述页面文档，实时调整最终页面效果。对于对代码安全要求高的客户，希望可以掌控所有代码，并在客户现场可以构建完整应用，以便于保证代码安全。
[0003]低代码开发工具往往采用生成渲染页面代码的方式，为开发者提供更高的控制代码的能力，然而直接生成渲染页面代码的方式，往往又会损失一部分动态渲染能力。将描述页面文档直接转换为目标框架源代码，进而构建前端页面，可以满足客户对代码控制力的要求。但是对低代码开发工具厂商来说，前端框架具有架构多样性和发展迅速的特点，往往只能绑定一种框架，在技术变革时面临巨大成本。在渲染前端页面领域，会面临动态渲染和编译后由代码渲染交替发展、相互共存的情况，只绑定一种前端框架，无法满足界面渲染的通用性和稳定性。

技术实现思路

[0004]本说明书一个或多个实施例提供了一种解释渲染和代码渲染的界面渲染方法、设备及介质，用于解决如下技术问题：在渲染前端页面领域，会面临动态渲染和编译后由代码渲染交替发展、相互共存的情况，只绑定一种前端框架，无法满足界面渲染的通用性和稳定性。
[0005]本说明书一个或多个实施例采用下述技术方案：
[0006]本说明书一个或多个实施例提供一种解释渲染和代码渲染的界面渲染方法，其特征在于，所述方法包括：确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将所述界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。
[0007]进一步地，确定待渲染界面的多个界面元素，具体包括：在描述界面过程中，预先对界面元素进行分类，得到容器类元素和原子类元素，其中，所述容器类元素的属性包括元素标识、元素类型和元素内容，所述原子类元素的属性包括元素标识和元素类型；根据所述
容器类元素的属性以及所述原子类元素的属性，将所述待渲染界面的界面元素分为页面容器类元素、组件容器类元素和组件引用原子类元素。
[0008]进一步地，对所述多个界面元素分别进行定义，生成界面描述文档，具体包括：对所述界面元素中的页面容器类元素、组件容器类元素和组件引用原子类元素分别进行属性定义，得到多个界面元素属性；根据所述多个界面元素属性进行元素组装，生成界面描述文档。
[0009]进一步地，通过Html转换器，将所述界面描述文档转换为Html结构，具体包括：通过Html转换器，读取所述界面描述文档；在所述界面描述文档中，以页面容器类元素开始，遍历每个界面元素，以读取界面元素的元素类型，其中，所述元素类型包括容器类元素和原子类元素；根据每个界面元素的元素类型，在预先构建的映射表中，确定出与所述元素类型对应的Html片段，其中，所述映射表用于表示界面元素与Html片段的对应关系；基于多个Html片段，得到所述界面描述文档对应的所述Html结构。
[0010]进一步地，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句，具体包括：接收目标前端框架的框架类型；根据所述框架类型，构造与所述框架类型对应的前端语句转换器，并对前端语句转换器接口进行定义；通过所述前端语句转换器接口，接收所述Html结构中的多个Html片段，遍历Html节点，以收集多个构造语句对象的上下文信息；根据每个构造语句对象的上下文信息，得到输出语句集合，以根据所述输出语句集合，得到所述目标前端框架的前端语句。
[0011]进一步地，对所述前端语句进行持久化操作，得到目标代码文件，具体包括：遍历输出所述语句集合中的前端语句，依次对所述语句集合中的前端语句进行序列化，得到多个目标代码语句；对所述多个目标代码语句进行语句拼接，得到目标代码文件。
[0012]进一步地，遍历输出所述语句集合中的前端语句，依次对所述语句集合中的前端语句进行序列化，得到多个目标代码语句，具体包括：对所述语句集合中的前端语句进行遍历，确定所述前端语句的语句属性，其中，所述语句属性包括修饰符属性和源代码属性；确定接收所述前端语句的字符串类型变量，并对接收所述前端语句的字符串类型变量进行定义；基于所述前端语句的修饰符属性，在所述字符串类型变量中追加修饰；根据所述前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句。
[0013]进一步地，根据所述前端语句的源代码属性，调用对应的序列化方法，得到前端语句对应的目标代码语句，具体包括：根据所述前端语句的源代码属性，读取代码开始位置对应的第一代码文本内容和代码结束位置对应的第二代码文本内容；获取第一代码文本内容的开始行和偏移量，并获取所述第二代码文本内容的开始行和开始列；根据所述开始行和所述偏移量，定位到读取所述第一代码文本内容的起始位置；根据所述第二代码文本内容的开始行和开始列，确定所述第二代码文本内容的终止字符；以所述第一代码文本内容的起始位置为起点，以所述终止字符为终点，对所述第一代码文本内容中的字符进行逐个读取，以输出多个字符，得到目标代码语句。
[0014]本说明书一个或多个实施例提供一种解释渲染和代码渲染的界面渲染设备，包括：
[0015]至少一个处理器；以及，
[0016]与所述至少一个处理器通信连接的存储器；其中，
[0017]所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
[0018]确定待渲染界面的多个界面元素，对所述多个界面元素分别进行定义，生成界面描述文档；通过Html转换器，将所述界面描述文档转换为Html结构；获取目标前端框架的框架类型，根据所述框架类型，将所述Html结构转换为所述目标前端框架的前端语句；对所述前端语句进行持久化操作，得到目标代码文件，以将所述目标代码文件输出为可执行脚本文件，其中，所述可执行脚本文件用于执行脚本绘制所述待渲染界面。
[0019]本说明书一个或多个实施例提供的一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：
[0020]确定待渲染界面的多个界面元素，对所述多个界面元本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所述的一种解释渲染和代码渲染的界面渲染方法，其特征在于，对所述前端语句进行持久化操作，得到目标代码文件，具体包括：
遍历输出所述语句集合中的前端语句，依次对所述语句集合...

【专利技术属性】
技术研发人员：陈圣杰，
申请(专利权)人：浪潮通用软件有限公司，
类型：发明
国别省市：