页面渲染方法和装置制造方法及图纸

技术编号:37768631 阅读:13 留言:0更新日期:2023-06-06 13:31
本申请提出了一种页面渲染方法和装置,其中,该方法包括:在对主应用的页面中待渲染表单组件的各个表单项进行渲染时,对各个表单项是由主应用定义还是主应用对应的子应用来定义进行判断,并在表单项为主应用所对应的子应用定义的表单项的情况下,根据主应用的微前端框架中子应用的表单项的渲染数据,对表单项进行渲染;在表单项为主应用定义的表单项的情况下,根据主应用的微前端框架中表单项的渲染数据,对表单项进行渲染。由此,实现了对主应用的页面中由主应用定义的表单项以及子应用定义的表单项进行渲染,使得所渲染出的主应用的页面中即包含主应用所定义的表单项又包含子应用所定义的表单项。用所定义的表单项。用所定义的表单项。

【技术实现步骤摘要】
页面渲染方法和装置


[0001]本申请涉及互联网
,尤其涉及一种页面渲染方法和装置。

技术介绍

[0002]随着浏览器web应用的不断丰富,应用场景复杂度也随之提高。在平台级web应用中,存在应用A的待渲染web页面中可能引用应用B的组件来组装表单内容并交互的场景。
[0003]相关技术中,通常是采用iframe框架的方式在应用A的页面中引用应用B的表单组件,并基于iframe框架的方式对应用A的页面中所引用的应用B的表单组件进行渲染。然而,在对基于该iframe框架的方式来实现的应用A的页面进行渲染的过程中,在渲染该页面上的所引用的应用B的表单组件时,该页面的iframe高度需要根据所应用B的表单组件进行动态调整,在该页面上渲染出所引用的应用B的表单组件处理复杂度比较高,并且所渲染出的表单效果不佳。

技术实现思路

[0004]本申请提出一种页面渲染方法和装置。
[0005]本申请一方面实施例提出一种页面渲染方法,所述方法包括:获取主应用的页面中的待渲染表单组件,其中,所述待渲染表单组件包括多个表单项,其中,所述多个表单项包括:由所述主应用定义的部分表单项以及由所述主应用对应的子应用定义的部分表单项;对所述多个表单项进行遍历;针对遍历到的每个表单项,在所述表单项为所述主应用所对应的子应用定义的表单项的情况下,根据所述主应用的微前端框架中所述子应用的所述表单项的渲染数据,对所述表单项进行渲染;在所述表单项为所述主应用定义的表单项的情况下,根据所述主应用的微前端框架中所述表单项的渲染数据,对所述表单项进行渲染。
[0006]本申请实施例的页面渲染方法,在对主应用的页面中待渲染表单组件的各个表单项进行渲染时,对各个表单项是由主应用定义还是主应用对应的子应用来定义进行判断,并在表单项为主应用所对应的子应用定义的表单项的情况下,根据主应用的微前端框架中子应用的表单项的渲染数据,对表单项进行渲染;在表单项为主应用定义的表单项的情况下,根据主应用的微前端框架中表单项的渲染数据,对表单项进行渲染。由此,实现了对主应用的页面中由主应用定义的表单项以及子应用定义的表单项进行渲染,使得所渲染出的主应用的页面中即包含主应用所定义的表单项又包含子应用所定义的表单项。
[0007]本申请另一方面实施例提出一种页面渲染装置,所述装置包括:获取模块,用于获取主应用的页面中的待渲染表单组件,其中,所述待渲染表单组件包括多个表单项,其中,所述多个表单项包括:由所述主应用定义的部分表单项以及由所述主应用对应的子应用定义的部分表单项;遍历模块,用于对所述多个表单项进行遍历;第一渲染模块,用于针对遍历到的每个表单项,在所述表单项为所述主应用所对应的子应用定义的表单项的情况下,根据所述主应用的微前端框架中所述子应用的所述表单项的渲染数据,对所述表单项进行渲染;第二渲染模块,用于在所述表单项为所述主应用定义的表单项的情况下,根据所述主
应用的微前端框架中所述表单项的渲染数据,对所述表单项进行渲染。
[0008]本申请实施例的页面渲染装置,在对主应用的页面中待渲染表单组件的各个表单项进行渲染时,对各个表单项是由主应用定义还是主应用对应的子应用来定义进行判断,并在表单项为主应用所对应的子应用定义的表单项的情况下,根据主应用的微前端框架中子应用的表单项的渲染数据,对表单项进行渲染;在表单项为主应用定义的表单项的情况下,根据主应用的微前端框架中表单项的渲染数据,对表单项进行渲染。由此,实现了对主应用的页面中由主应用定义的表单项以及子应用定义的表单项进行渲染,使得所渲染出的主应用的页面中即包含主应用所定义的表单项又包含子应用所定义的表单项。
[0009]本申请另一方面实施例提出了一种电子设备,包括:存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现本申请实施例的页面渲染方法。
[0010]本申请另一方面实施例提出了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现本申请实施例的页面渲染方法。
[0011]本申请另一方面实施例提出了一种计算机程序产品,包括计算机程序,所述计算机程序被处理器执行时实现本申请实施例的页面渲染方法。
附图说明
[0012]附图用于更好地理解本方案,不构成对本申请的限定。其中:
[0013]图1是根据本申请一个实施例的页面渲染方法的流程示意图;
[0014]图2是根据本申请另一个实施例的页面渲染方法的流程示意图;
[0015]图3是根据本申请另一个实施例的页面渲染方法的流程示意图;
[0016]图4是本申请所示意出的主应用、子应用以及主应用的页面三者之间的交互示例图;
[0017]图5是根据本申请一个实施例的页面渲染装置的结构示意图;
[0018]图6是根据本申请一个实施例的电子设备的框图。
具体实施方式
[0019]下面详细描述本专利技术的实施例,实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,旨在用于解释本专利技术,而不能理解为对本专利技术的限制。
[0020]为了提高前端web应用的页面的开发效率,相关技术中,提出了基于微前端框架对应用的页面进行开发,具体而言,可基于微前端框架对应用A的页面中引用应用B的表单项以及应用A自定义表单项进行开发,对于基于微前端框架所开发的页面而言,如何对基于微服务框架所开发的页面中的表单组件进行渲染是目前亟需解决的技术问题。
[0021]为此,本申请提出了一种页面渲染方法,该方法在对主应用的页面中待渲染表单组件的各个表单项进行渲染时,对各个表单项是由主应用定义还是主应用对应的子应用来定义进行判断,并在表单项为主应用所对应的子应用定义的表单项的情况下,根据主应用的微前端框架中子应用的表单项的渲染数据,对表单项进行渲染;在表单项为主应用定义的表单项的情况下,根据主应用的微前端框架中表单项的渲染数据,对表单项进行渲染。由
此,实现了对主应用的页面中由主应用定义的表单项以及子应用定义的表单项进行渲染,使得所渲染出的主应用的页面中即包含主应用所定义的表单项又包含子应用所定义的表单项。
[0022]其中,微前端框架是一种类似于微服务的框架,其借鉴了微服务的架构理念,将一个庞大的前端应用拆分为多个独立灵活的小型应用,每个小型应用都可以独立开发、独立运行、独立部署,再将这些小型应用联合为一个完整的应用。
[0023]下面参考附图描述本申请实施例的页面渲染、装置、电子设备和存储介质。
[0024]图1是根据本申请一个实施例的页面渲染方法的流程示意图。其中,需要说明的是,本实施例提供的页面渲染方法由页面渲染装置执行,本实施例中的页面渲染装置可以由软件和/或者硬件的方式实现,该页面渲染装置可以为电子设备,或者可以配置在电子设备中。
[0025]其中,本示例实施例中的电子设备可以包括终端设备、服务器等,本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法,其特征在于,所述方法包括:获取主应用的页面中的待渲染表单组件,其中,所述待渲染表单组件包括多个表单项,其中,所述多个表单项包括:由所述主应用定义的部分表单项以及由所述主应用对应的子应用定义的部分表单项;对所述多个表单项进行遍历;针对遍历到的每个表单项,在所述表单项为所述主应用所对应的子应用定义的表单项的情况下,根据所述主应用的微前端框架中所述子应用的所述表单项的渲染数据,对所述表单项进行渲染;在所述表单项为所述主应用定义的表单项的情况下,根据所述主应用的微前端框架中所述表单项的渲染数据,对所述表单项进行渲染。2.如权利要求1所述的方法,其特征在于,所述根据所述主应用的微前端框架中所述子应用的所述表单项的渲染数据,对所述表单项进行渲染,包括:从所述主应用的微前端框架中获取所述子应用的子应用资源;从所述子应用资源中获取所述表单项的渲染数据;根据所述表单项的渲染数据对所述表单项进行渲染。3.如权利要求2所述的方法,其特征在于,所述从所述主应用的微前端框架中获取所述子应用的子应用资源,包括:从所述主应用的微前端框架中获取所述子应用的路由信息;根据所述路由信息,从所述微前端框架中获取所述子应用的子应用资源。4.如权利要求1所述的方法,其特征在于,所述根据所述主应用的微前端框架中所述表单项的渲染数据,对所述表单项进行渲染,包括:从所述主应用的微前端框架中获取所述表单项对应的回调函数;通过所述回调函数从所述微前端框架中获取所述表单项的渲染数据;根据所述表单项的渲染数据,对所述表单项进行渲染。5.如权利要求1所述的方法,其特征在于,所述根据所述主应用的微前端框架中所述表单项的渲染数据,对所述表单项进行渲染,包括:从所述主应用的微前端框架中获取所述主应用的主应用资源;从所述主应用资源中获取所述表单项的渲染数据;根据所述表...

【专利技术属性】
技术研发人员:陈兵
申请(专利权)人:京东科技信息技术有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1