微前端微应用实践微前端的概念由ThoughtWorks于2016年提出，借鉴了微服务的架构理念。核心是将一个庞大的前端应用拆分成多个独立且灵活的小应用，每个应用程序都可以独立开发、独立运行、独立部署，然后将这些小应用程序集成为一个完整的应用程序，或者将几个长期运行的互不相关的应用程序集成为一个应用程序。微前端不仅可以将多个项目集成为一个，还可以降低项目之间的耦合度，提高项目的可扩展性。相对于整个前端仓库，微前端架构下的前端仓库更趋向于更小、更灵活。项目转型背景因项目需要搭建大数据融合平台，主要功能模块包括用户管理、流程管理、大数据治理算子应用、基础组件等混合融合平台；公司目前拥有用户管理、流程管理等成品；基本的主要内容也与这些产品的功能一致，主框架只控制导航和头部信息；因此，希望能够以复用的方式更快地进行融合和接入。前端流行微服务框架对比参数singlespaqiankumicroapp开发成本高开发成本中等开发成本高维护成本中等技术栈无限技术栈无限技术栈无限技术栈易实现难实现简单原理监听url变化事件监听url变化eventsWebComponent经过比较，我觉得微应用好用，所有的功能都封装在一个类似WebComponent的组件中，这样在基础应用中嵌入一行代码就可以渲染出一个微前端应用.同时，微应用还提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完备的功能。子应用基本上不需要太多的项目改造，相对成本更低。对接说明引入主框架依赖包importmicroAppfrom'@micro-zoe/micro-app'主应用启动（可全局配置）microApp.start({plugins:{global:[{loader(code,url,options){//需要console.log('globalplugin')返回码}}],}}})//相关参数microApp.start({inline:true,//默认值为falsedestroy:true,//默认值为falsedisableScopcss:true,//默认值为falsedisableSandbox:true,//默认值为falseshadowDOM:true,//默认值为falsessr:true,//默认值为false})配置组件节点<微应用style="height:100%;"name='appnameUserCenter':url='url':data='microAppData'@created='handleCreate'@beforemount='handleBeforeMount'@mounted='handleMount'@unmount='handleUnmount'@error='handleError'@datachange='handleDataChange'>在创建的生命周期列表标签初始化之后，资源加载之前触发。beforemount在资源加载之后和渲??染开始之前触发。在挂载的子应用呈现后触发。卸载子应用程序卸载时触发。error当子应用渲染失败时触发。只有导致渲染终止的错误才会触发此生命周期。路由匹配设置（模糊匹配，提示主应用历史，微应用哈希模式，）{path:'/mainPanel',name:'mainPanel',component:mainPanel,children:[{path:'/mainPanel/dataCenter*',name:'dataCenter',component:()=>dataCenter},{path:'/mainPanel/userCenter*',name:'userCenter',component:()=>userCenter},]}主要微框架通信microMenu(appName,path,hash){if(!getActiveApps().includes(appName)){path='/mainPanel'+path+'/'//child-vite和child-react17子应用是hash路由，这里是hash值hash&&(path+=`/#${hash}`)//主应用跳转到this.$router.push(path)}else{letchildPath=null//child-vite和child-react17子应用都是hash路由，hash值就是它的页面地址，这里单独处理if(hash){childPath=hash}else{//path的取值形式为：/app-vue2/page2，其中/app-vue2为子应用的基本路由，/page2为页面地址，所以我们需要删除/app-vue2partchildPath=path.replace(/^\/app-[^/]+/,'')!childPath&&(childPath='/')//防止地址为空}//主应用控制子应用通过发送数据data来跳转microApp.setData(appName,{path:childPath})}}微框架及其路由跳转(function(){letapp=null;//创建vue实例constcreateVue=function(){app=newVue({el:"#app",router,store,render:(h)=>h(App),});};//与基础的数据交互consthandleMicroData=function(callBack){window.microApp.addDataListener((data)=>{callBack(data);});};//在微前端环境下，注册挂载和卸载方法if(window.__MICRO_APP_ENVIRONMENT__){let{token}=window.microApp.getData();token&&setToken(token);console.log("data-centertoken:",令牌);窗口[`微应用-${window.__MICRO_APP_NAME__}`]={//微前端挂载mount:()=>{createVue();handleMicroData((data)=>{//交互操作store.dispatch("settings/changeSetting",{key:"microFlag",value:true,});console.log("data-centeraddDataListener:",data);router.push(data.path);});},//微前端卸载unmount:()=>{app.$destroy();app.$el.innerHTML="";应用程序=空；console.log("微应用child-vue2已卸载");},};}else{//非微前端环境直接渲染createVue();}})();
