微前端microApp实际
微前端的概念是由ThoughtWorks在2016年提出的，它借鉴了微服务的架构理念，外围在于将一个宏大的前端利用拆分成多个独立灵便的小型利用，每个利用都能够独立开发、独立运行、独立部署，再将这些小型利用交融为一个残缺的利用，或者将本来运行已久、没有关联的几个利用交融为一个利用。微前端既能够将多个我的项目交融为一，又能够缩小我的项目之间的耦合，晋升我的项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库偏向于更小更灵便。
我的项目革新背景
因我的项目须要要做一个大数据交融平台，次要功能模块包含用户治理、流程治理、大数据治理算子利用，根底组件等混合形成的交融平台；公司目前曾经存在用户治理、流程治理等成品；根本主内容也是和这些产品的性能统一，主框架只是管制着导航和头部信息；因而心愿可能抱着复用的形式，更快的进行交融接入。
前端风行的微服务框架比对
| 参数 | singlespa | qianku | microapp |
|---|---|---|---|
| 开发成本 | 开发成本高 | 开发成本中 | 开发成本高 |
| 保护老本 | 中 | 中 | 中 |
| 技术栈 | 不限技术栈 | 不限技术栈 | 不限技术栈 |
| 实现难易 | 实现难 | 实现中 | 实现简略 |
| 原理 | 监听 url change 事件 | 监听 url change 事件 | WebComponent |
通过比照，目前感觉micro-app应用简略，将所有性能都封装到一个类WebComponent组件中，从而实现在基座利用中嵌入一行代码即可渲染一个微前端利用。同时micro-app还提供了js沙箱、款式隔离、元素隔离、预加载、数据通信、动态资源补全等一系列欠缺的性能。子利用根本不须要过多的进行我的项目革新，绝对应用老本更低
对接阐明
- 主框架依赖包引入
import microApp from '@micro-zoe/micro-app'- 主利用启动（并能够进行全局配置）
microApp.start({
plugins: {
global: [{
loader(code, url, options) { // 必填
console.log('全局插件')
return code
}
}],
}
}
})
//相干参数
microApp.start({
inline: true, // 默认值false
destroy: true, // 默认值false
disableScopecss: true, // 默认值false
disableSandbox: true, // 默认值false
shadowDOM: true, // 默认值false
ssr: true, // 默认值false
})
- 配置组件节点
<micro-app
style="height: 100%;"
name='appnameUserCenter'
:url='url'
:data='microAppData'
@created='handleCreate'
@beforemount='handleBeforeMount'
@mounted='handleMount'
@unmount='handleUnmount'
@error='handleError'
@datachange='handleDataChange'
></micro-app>生命周期列表
- created
<micro-app>标签初始化后，加载资源前触发。 - beforemount
加载资源实现后，开始渲染之前触发。 - mounted
子利用渲染完结后触发。 - unmount
子利用卸载时触发。 - error
子利用渲染出错时触发，只有会导致渲染终止的谬误才会触发此生命周期。
- 路由匹配设置（含糊匹配，倡议主利用history，微利用hash模式，）
{
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 {
let childPath = null
// child-vite 和 child-react17子利用是hash路由，hash值就是它的页面地址，这里独自解决
if (hash) {
childPath = hash
} else {
// path的值模式如：/app-vue2/page2，这里/app-vue2是子利用的根底路由，/page2才是页面地址，所以咱们须要将/app-vue2局部删除
childPath = path.replace(/^\/app-[^/]+/, '')
!childPath && (childPath = '/') // 避免地址为空
}
// 主利用通过下发data数据管制子利用跳转
microApp.setData(appName, { path: childPath })
}
}- 微框架及其路由跳转
(function () {
let app = null;
//创立vue实例
const createVue = function () {
app = new Vue({
el: "#app",
router,
store,
render: (h) => h(App),
});
};
// 与基座进行数据交互
const handleMicroData = function (callBack) {
window.microApp.addDataListener((data) => {
callBack(data);
});
};
// 微前端环境下，注册mount和unmount办法
if (window.__MICRO_APP_ENVIRONMENT__) {
let {token} = window.microApp.getData();
token && setToken(token);
console.log("data-center token:", token);
window[`micro-app-${window.__MICRO_APP_NAME__}`] = {
//微前端挂载
mount: () => {
createVue();
handleMicroData((data) => {
//交互操作
store.dispatch("settings/changeSetting", {
key: "microFlag",
value: true,
});
console.log("data-center addDataListener:", data);
router.push(data.path);
});
},
//微前端卸载
unmount: () => {
app.$destroy();
app.$el.innerHTML = "";
app = null;
console.log("微利用child-vue2卸载了");
},
};
} else {
// 非微前端环境间接渲染
createVue();
}
})();
发表回复