YM
2024-05-11 633ddfbd1a0a83f549553d8467241609037a5f78
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { registerMicroApps, start } from 'qiankun'
import { initGlobalState } from 'qiankun'
const initalState = {
  selectText: '',
  lineHeight: [],
  scribeList: [],
  notesList: []
}
const actions = initGlobalState(initalState)
 
actions.onGlobalStateChange((initalState, prev) => {
  console.log(initalState, prev)
})
// setTimeout(()=>{
//   actions.setGlobalState({...initalState})
// },2000)
actions.offGlobalStateChange()
const microApps = [
  {
    // - 必选,微应用的名称,微应用之间必须确保唯一
    name: 'app-content',
    // - 必选,微应用的入口
    entry: '//182.92.203.7:3007/books/test/',
    // entry: '//192.168.3.203:8080',
    // - 必选,微应用的容器节点的选择器或者 Element 实例
    container: '#container',
    // - 必选,微应用的激活规则
    //支持直接配置字符串或字符串数组,如 activeRule: '/app1' 或 activeRule: ['/app1', '/app2'],当配置为字符串时会直接跟 url 中的路径部分做前缀匹配,匹配成功表明当前应用会被激活。
    //支持配置一个 active function 函数或一组 active function。函数会传入当前 location 作为参数,函数返回 true 时表明当前微应用会被激活。如 location => location.pathname.startsWith('/app1')。
    activeRule: '/home', //匹配所有以/subPath开头的为子应用
    //loader - (loading: boolean) => void - 可选,loading 状态发生变化时会调用的方法。
    //可选,主应用需要传递给微应用的数据。
    props: {
      actions
    },
    sandbox: { strictStyleIsolation: true }
  }
]
// 乾坤提供的子应用生命周期钩子  可用于加载loading
const mount = {
  beforeLoad: () => {
    //开始加载loading
    console.log('子应用加载前')
  },
  beforeMount: () => {
    console.log('子应用挂载前')
  },
  afterMount: () => {
    //结束加载loading
    console.log('子应用挂载后')
  },
  beforeUnmount: () => {
    console.log('子应用卸载前')
  },
  afterUnmount: () => {
    console.log('子应用卸载后')
  }
}
//注册子应用
registerMicroApps(microApps, mount)
//设置默认启动子应用
// setDefaultMountApp('/home')
//启动qiankun | 不可重复启动 | 如果子应用入口在app.vue里可以在这启动否则会报错找不到子应用结点
start({
  prefetch: false
})
export default actions;