一种页面渲染方法及装置。该方法包括：浏览器基于用户在第一应用的页面上对第二应用的链接的触发操作，确定第二应用的路由地址，并发送至Web应用框架，其中第二应用是第一应用的子应用，第一应用是第二应用的主应用。框架接收第一路由地址，其中第一路由地址是第二应用的路由地址；通过沙箱拦截第一路由地址和第二路由地址，并根据第一路由地址和第二路由地址生成第三路由地址，第二路由地址是第一应用的页面对应的路由地址；然后根据第三路由地址，获取第二应用的页面资源，渲染第二应用的页面。实现在框架层防止主应用与子应用的路由冲突，进而防止子应用的页面无法渲染或渲染后页面数据不准确，保证子应用的页面渲染的准确性。性。性。
【技术实现步骤摘要】
一种页面渲染方法及装置
[0001]本申请涉及计算机
，尤其涉及一种页面渲染方法及装置。
技术介绍
[0002]基于微前端构建的页面集成系统，包括多个独立的Web应用，每个Web应用可以由一张SPA(single page web application，单页面应用)页面进行渲染。SPA页面由主应用和子应用集成的，其中主应用是构成SPA页面时首先加载的业务单元，子应用是在主应用中加载的业务单元，具有独立的路由地址，包含完整的业务实现且可以独立渲染，一个子应用可以被多个不同的主应用集成。
[0003]当页面集成系统的一个子应用被访问时，若该子应用无法知晓被哪个主应用集成，存在子应用和主应用的路由冲突情况，导致子应用的页面资源无法获取，进而无法渲染子应用的页面。因此，如何解决子应用和主应用的路由冲突，以及避免因路由冲突导致无法准确渲染页面，是目前亟待解决的技术问题。
技术实现思路
[0004]本申请实施例提供一种页面渲染方法及装置，用于避免子应用和主应用的路由冲突，保证子应用的页面渲染的准确性。
[0005]第一方面，本申请实施例提出了一种页面渲染方法，所述方法应用于Web应用框架。所述方法包括：Web应用框架接收第一路由地址，所述第一路由地址是浏览器响应于用户操作发送的，所述用户操作用于触发第一应用的页面上第二应用，所述第二应用是所述第一应用的子应用，所述第一路由地址是所述第二应用的路由地址；根据所述第一路由地址和第二路由地址生成第三路由地址，所述第二路由地址是所述第一应用的页面对应的路由地址；根据所述第三路由地址，获取所述第二应用的页面资源；根据所述第二应用的页面资源，渲染所述第二应用的页面。
[0006]基于上述方案，Web应用框架包括资源加载单元和沙箱单元；第一应用和第二应用，可以是Web应用，即第一应用为第一Web应用，第二应用为第二Web应用。浏览器在渲染第一Web应用的页面后，用户可以在第一Web应用的页面上触发第二Web应用的链接，浏览器通过第二Web应用的链接确定第二Web应用的路由地址，并将第二Web应用的路由地址发送至Web应用框架。其中，第二Web应用对应的路由地址不包括第一Web应用对应的路由地址。
[0007]Web应用框架在接收第一Web应用对应的路由地址之后，通过沙箱单元拦截第二Web应用的路由，然后根据第一Web应用对应的路由地址和第二Web应用对应的路由地址生成第三路由地址，进而根据第三路由地址获取第二Web应用的页面资源，而非根据第二Web应用对应的路由地址获取第二Web应用的页面资源，相当于确定子应用所集成的主应用，以此避免在子应用的路由变化影响到主应用的路由，实现在框架层防止主应用与子应用的路由冲突，进而防止子应用的页面无法渲染或渲染后页面数据不准确，保证子应用的页面渲染的准确性。
[0008]在一些实施例中，所述第三路由地址包括所述第一路由地址的域名和前缀，所述前缀为所述第二路由地址。
[0009]基于上述方案，Web应用框架通过在第一Web应用对应的路由地址后添加第二Web应用对应的路由地址的域名生成第三路由地址，实现第三路由地址既能表示出第二Web应用所集成的主应用为第一Web应用，又能实现根据第三路由地址路由至第二Web应用，防止主应用与子应用的路由冲突的同时，不影响对第二Web应用的页面资源获取及渲染。
[0010]在一些实施例中，还包括：Web应用框架将所述第三路由地址发送给所述浏览器，以使所述浏览器将所述第三路由地址显示在所述浏览器的地址栏。
[0011]基于上述方案，浏览器在渲染第二Web应用的页面时，将第三路由地址显示在浏览器的地址栏，体现出第二Web应用所集成的主应用，保证第二Web应用的页面中路由地址的完整性。
[0012]在一些实施例中，接收第一路由地址之前，Web应用框架还确定所述第一应用的至少两个子应用依赖的工具库资源，所述至少两个子应用中包括所述第二应用；确定所述至少两个子应用依赖的公共工具库资源，所述公共工具库资源是所述至少两个子应用依赖的工具库资源的交集；加载所述公共工具库资源。
[0013]基于上述方案，Web应用框架在获取第一Web应用的子应用的页面资源之前，通过扫描工具(比如cli工具)确定出至少两个子应用依赖的工具库资源(比如reaact库、lodash库、moment库)，然后确定并加载至少两个子应用依赖的公共工具库资源，避免在加载不同子应用时，重复的获取工具库资源，减少获取子应用的页面资源的数据量，降低获取子应用的页面资源的时间，提高子应用的页面渲染的效率。
[0014]在一些实施例中，接收第一路由地址之后，Web应用框架还加载所述第二应用依赖的第一工具库资源，所述第一工具库资源是所述第二应用依赖的工具库资源中除所述公共工具库资源以外的工具库资源。
[0015]基于上述方案，工具库资源用于数据处理，为了保证第二Web应用的页面渲染的准确性，Web应用框架还需要加载第二Web应用所依赖的全部工具库资源，即包括公共工具库资源和第一工具库资源。
[0016]在一些实施例中，接收第一路由地址之前，Web应用框架还确定所述第二应用依赖的第三应用，所述第三应用是所述第一应用的子应用；加载第一信息；所述第一信息是所述第二应用和所述第三应用使用的业务信息。
[0017]基于上述方案，用户触发第二Web应用的链接之前，Web应用框架预加载第二Web应用所需要的业务信息，解除第二Web应用和第三Web应用之间的强制加载顺序，降低子应用控制的复杂度。且在用户触发第二Web应用的链接之后，不需要在第三Web应用的业务数据加载完成后获取第二应用的页面资源，避免加载第二Web应用所需要的业务信息的等待时长，降低获取第二Web应用的页面资源的时间，提高页面渲染的效率。
[0018]在一些实施例中，根据所述第三路由地址，获取所述第二应用的页面资源，包括Web应用框架根据所述第三路由地址从网络侧获取第一数据；将所述第一数据和所述第一信息传递给所述第二应用；获取所述第二应用根据所述第一数据和所述第一信息生成的所述页面资源。
[0019]基于上述方案，Web应用框架在获取第一数据和第一信息之后，将第一数据和第一
信息传递给第二Web应用，由第二Web应用对第一数据和第一信息进行数据处理，保证第二Web应用独立运行，避免第二Web应用与其他子应用之间的技术栈耦合。
[0020]在一些实施例中，渲染所述第二应用的页面之后，Web应用框架还获取第四应用的页面资源，所述第四应用是所述第二应用的子应用；当所述第二应用的页面上所述第四应用的链接被触发时，根据所述第四应用的页面资源渲染所述第四应用的页面。
[0021]基于上述方案，第四Web应用依赖于第二Web应用的页面，通过预加载第四应用的页面资源，以使用户在第二Web应用的页面上触发第四Web应用的链接之后，直接根据第四应用的页面资源渲染第四应用的页面，降低页面渲染时长，提高页面渲染的效率。本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种页面渲染方法，其特征在于，所述方法包括：接收第一路由地址，所述第一路由地址是浏览器响应于用户操作发送的，所述用户操作用于触发第一应用的页面上第二应用，所述第二应用是所述第一应用的子应用，所述第一路由地址是所述第二应用的路由地址；根据所述第一路由地址和第二路由地址生成第三路由地址，所述第二路由地址是所述第一应用的页面对应的路由地址；根据所述第三路由地址，获取所述第二应用的页面资源；根据所述第二应用的页面资源，渲染所述第二应用的页面。2.根据权利要求1所述的方法，其特征在于，所述第三路由地址包括所述第一路由地址的域名和前缀，所述前缀为所述第二路由地址。3.根据权利要求1或2所述的方法，其特征在于，还包括：将所述第三路由地址发送给所述浏览器，以使所述浏览器将所述第三路由地址显示在所述浏览器的地址栏。4.根据权利要求1
‑
3任一项所述的方法，其特征在于，接收第一路由地址之前，还包括：确定所述第一应用的至少两个子应用依赖的工具库资源，所述至少两个子应用中包括所述第二应用；确定所述至少两个子应用依赖的公共工具库资源，所述公共工具库资源是所述至少两个子应用依赖的工具库资源的交集；加载所述公共工具库资源。5.根据权利要求4所述的方法，其特征在于，接收第一路由地址之后，还包括：加载所述第二应用依赖的第一工具库资源，所述第一工具库资源是所述第二应用依赖的工具库资源中除所述公共工具库资源以外的工具库资源。6.根据权利要求1
‑
3任一项所述的方法，其特征在于，接收第一路由地址之前，还包括：确定所述第二应用依赖的第三应用，所述第三应用是所述第一应用的子应用；加载第一信息；所述第一信息是所述第二应用和所述第三应用使用的业务信息。7.根据权利要求6所述的方法，其特征在于，根据所述第三路由地址，获取所述第二应用的页面资源，包括：根据所述第三路由地址从网络侧获取第一数据；将所述第一数据和所述第一信息传递给所述第二应用；获取所述第二应用根据所述第一数据和所述第一信息生成的所述页面资源。8.根据权利要求1
‑
7任一项所述的方法，其特征在于，渲染所述第二应用的页面之后，还包括：获取第四应用的页面资源，所述第四应用是所述第二应用的子应用；当所述第二应用的页面上所述第四应用的链接被触发时，根据所述第四应用的页面资源渲染所述第四应用的页面。9.一种装置，其特征在于，包括接收单元和处理单元；所述接收单元用于接收第一路由地址，所述第一路由地址是浏览器响应于用户操作发送的，所述用户操作用于触发第一应用的页面上第二应用，所述第二应用是所述第一应用的子应用，所述第一路由地址是所述第二应用的路由地址；
所述处理单元用于根据所述第一路由地址和第二路由地址生成第三路由地址，所述第二路由地址是所述第一应用的页面对应的路由地址；根据所述第三路由地址，获取所述第二应...
【专利技术属性】
技术研发人员：王志坚，秦丹涛，胡堃，
申请(专利权)人：深圳华为云计算技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。