云程低代码平台对微前端框架的支持
2020-12-20 23:55:55
云程低代码平台对微前端框架的支持
云程低代码平台全面支持微前端框架，并基于micro-app技术方案完成了微前端基座的改造，能够高效接入和管理微前端子应用。以下是云程低代码平台对微前端框架支持的详细阐述：
一、微前端框架选型
云程低代码平台在微前端框架的选型上，经过对iframe、single-spa、qiankun、micro-app等相关技术的深入对比研究，最终选择了micro-app作为技术方案。micro-app借鉴了Web Components的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，实现了微前端的组件化渲染。这一方案具有接入成本低、无需修改子应用渲染逻辑和webpack配置等优势，是目前市面上接入微前端成本最低的方案。
二、微前端基座改造
基于micro-app技术方案，云程低代码平台完成了微前端基座的改造，具备以下功能：
- 微前端入口：平台添加了微前端入口，可以接入微前端子应用，也可以独立运行，为微前端应用的接入提供了便捷通道。
- 第三方应用接入：平台支持接入基于Vue、React等主流框架开发的第三方应用，增强了平台的兼容性和扩展性。
- 菜单管理：平台支持在菜单管理中注册子应用信息，将应用挂接到平台菜单中，方便用户通过菜单快速访问子应用。
- 主子应用数据通信：平台支持主子应用之间的数据通信，实现了不同应用之间的信息共享和交互。
三、微前端子应用接入流程
云程低代码平台提供了完善的微前端子应用接入流程，包括跨域访问设置、单点登录集成、子应用配置路由、子应用注册到主应用菜单以及在主应用访问子应用等步骤。
跨域访问设置：微前端子应用需要设置允许跨域访问，以确保主应用能够加载子应用的资源。在开发环境和生产环境中，分别需要设置打包配置文件的devServer的headers属性和nginx配置。
单点登录集成：第三方的微前端子应用必须完成与平台的单点集成，以实现用户在不同应用之间的无缝切换。主子应用通过单点方式集成后，token信息存入localStorage中，子应用可以通过获取token来实现用户身份的验证和授权。
子应用配置路由：子应用需要提前准备好要接入主应用的路由地址，并且能正常访问。这些路由地址将在后续步骤中用于注册到主应用菜单和访问测试。
子应用注册到主应用菜单：在平台的菜单管理中，新增菜单并选择组件“微前端应用”。填写菜单路径（即子应用的路由地址）和子应用访问地址，完成子应用的注册。这样，用户就可以通过平台菜单快速访问子应用了。
在主应用访问子应用：给菜单授权后，刷新前台页面进行访问测试。用户可以通过点击菜单项来访问对应的微前端子应用，实现不同应用之间的快速切换和访问。
四、微前端应用实例展示
以下是云程低代码平台微前端应用接入后的实例展示：
在图中，用户可以通过平台菜单快速访问不同的微前端子应用，实现了不同应用之间的无缝集成和访问。同时，平台还支持主子应用之间的数据通信和单点登录等功能，提升了用户体验和系统的整体性能。
综上所述，云程低代码平台全面支持微前端框架，并提供了完善的微前端基座改造和子应用接入流程。通过选择micro-app作为技术方案，平台降低了微前端应用的接入成本，提高了系统的兼容性和扩展性。同时，平台还支持主子应用之间的数据通信和单点登录等功能，为用户提供了更加便捷和高效的应用访问体验。
热门标签
