micro-app使用
开发文档：MicroApp (micro-zoe.github.io) (opens new window)
# 子应用
# 1. 配置跨域
开发环境需要配置支持跨域
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
}
}
1
2
3
4
5
2
3
4
5
# 2. 判断应用是否在微前端环境中
使用 window.__MICRO_APP_ENVIRONMENT__ 判断
if (window.__MICRO_APP_ENVIRONMENT__) {
console.log('我在微前端环境中')
}
1
2
3
2
3
# 3. 数据通信
# 1. 直接获取数据
const data = window.microApp.getData() // 返回基座下发的data数据
1
2
2
# 2. 监听函数获取数据
// 监听函数
function dataListener (data) {
console.log('来自主应用的数据', data)
}
// 监听数据变化
window.microApp.addDataListener(dataListener)
// 监听数据变化，初始化时如果有数据则主动触发一次
window.microApp.addDataListener(dataListener, true)
// 解绑监听函数
window.microApp.removeDataListener(dataListener)
// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.microApp.clearDataListener()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 3. 消息通信机制
// dispatch只接受对象作为参数
window.microApp.dispatch({type: '子应用发送给主应用的数据'})
1
2
2
dispatch只接受对象作为参数，它发送的数据都会被缓存下来。
micro-app会遍历新旧值中的每个key判断值是否有变化，如果所有数据都相同则不会发送（注意：只会遍历第一层key），如果数据有变化则将新旧值进行合并后发送。
// 第一次发送数据，记入缓存值 {name: 'jack'}，然后发送
window.microApp.dispatch({name: 'jack'})
// 第二次发送数据，将新旧值合并为 {name: 'jack', age: 20}，记入缓存值，然后发送
window.microApp.dispatch({age: 20})
// 第三次发送数据，新旧值合并为 {name: 'jack', age: 20}，与缓存值相同，不再发送
window.microApp.dispatch({age: 20})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
dispatch是异步执行的，多个dispatch会在下一帧合并为一次执行
window.microApp.dispatch({name: 'jack'})
window.microApp.dispatch({age: 20})
// 上面的数据会在下一帧合并为对象{name: 'jack', age: 20}一次性发送给主应用
1
2
3
2
3
dispatch第二个参数为回调函数，它会在数据发送结束后执行
window.microApp.dispatch({city: 'HK'}, () => {
console.log('数据已经发送完成')
})
1
2
3
2
3
# 4. 发送重复消息
# 1. 手动清空
每次发送消息前先清空之前的通信数据
window.microApp.clearData()
window.microApp.dispatch({type: '子应用发送给主应用的数据'})
1
2
2
# 2. 强制发送 forceDispatch
// 强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
window.microApp.forceDispatch({name: 'jack'})
1
2
3
2
3
# 5. 消息格式
和Element-ui 消息提示Message状态类型保持一致
// 消息
window.microApp.dispatch({
type: 'info'，
message: "子应用发送给主应用的数据"
})
// 成功
window.microApp.dispatch({
type: 'success'，
message: "子应用发送给主应用的数据"
})
// 警告
window.microApp.dispatch({
type: 'warning'，
message: "子应用发送给主应用的数据"
})
// 错误
window.microApp.dispatch({
type: 'error'，
message: "子应用发送给主应用的数据"
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 6. 特殊情况消息传值
- 子系统token过期
window.microApp.dispatch({
type: 'error'，
code: 401
})
1
2
3
4
2
3
4
# 4. 子系统内部跳转
使用消息通信传值给主应用，主应用做跳转 adhibitionAddress 对应的值和应用池中配置的地址字段保持一致
window.microApp.forceDispatch({
adhibitionAddress: "/#/single-home"
});
1
2
3
2
3
# 主应用
# 1. 动态切换子系统
<micro-app
disable-scopecss
:name="name"
:url='url'
:default-page='defaultPage'
>
</micro-app>
1
2
3
4
5
6
7
2
3
4
5
6
7
- name 必须唯一
- url是子系统基地址+产品标识：
https://sdls.btzh.net/mdhj-pc - default-page是指定跳转页面，是应用的地址
- 如果子系统是hash路由：
default-page="/#/home" - 如果子系统是history路由：
default-page="/home"
<!-- 不带域名的地址 -->
<micro-app name='my-app' url='http://localhost:3000/' default-page='/page1'></micro-app>
<!-- 带域名的地址 -->
<micro-app name='my-app' url='http://localhost:3000/' default-page='http://localhost:3000/page1'></micro-app>
<!-- 带查询参数 -->
<micro-app name='my-app' url='http://localhost:3000/' default-page='/page1?id=9527'></micro-app>
<!-- 带hash -->
<micro-app name='my-app' url='http://localhost:3000/' default-page='/page1#hash'></micro-app>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 前台缓存命名规则
# localStorage（公共信息，不带子系统前缀）
- 用户信息：
localStorage.USERS - token:
localStorage.TOKEN - 地图配置：
localStorage.GIS_CONFIG - 字典信息：
localStorage.DICTIONARY_key(字典代码)
# sessionStorag（各个子系统信息，带子系统前缀）
# 需要注意的问题
# 1. rem问题
基座应用的html {font-size}会影响子系统
现在基座应用的设置是html {font-size: 100px;} 1rem = 100px
上次更新: 2024/01/18, 10:44:15