题库组件优化

闫增涛

2024-07-01 34f53c3ca69833ddf0649700d26da9ed91c5f1c3

 src/child.ts

@@ -1,47 +1,95 @@
import { registerMicroApps,setDefaultMountApp} from "qiankun";
const microApps = [
  {
import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'
import { initGlobalState } from 'qiankun'
import state from './qiankunState/state'

const actions = initGlobalState(state)

// actions.onGlobalStateChange((state, prev) => {
//   console.log("父层变化：",state, prev)
//   // window.qiankunState = state;
// })

export const microApps = {
  childHealth: {
    // - 必选，微应用的名称，微应用之间必须确保唯一
    name: "vue-app", 
    name: 'app-content',
    // - 必选，微应用的入口
    entry: 'http://192.168.3.196:8080/',
    entry: '//jsek.bnuic.com/books/book/childHealth',
    // - 必选，微应用的容器节点的选择器或者 Element 实例
    container: "#container",
    container: '#container',
    // - 必选，微应用的激活规则
    //支持直接配置字符串或字符串数组，如 activeRule: '/app1' 或 activeRule: ['/app1', '/app2']，当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。
    //支持配置一个 active function 函数或一组 active function。函数会传入当前 location 作为参数，函数返回 true 时表明当前微应用会被激活。如 location => location.pathname.startsWith('/app1')。
    activeRule: "#/app-content",   //匹配所有以/subPath开头的为子应用
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
    //loader - (loading: boolean) => void - 可选，loading 状态发生变化时会调用的方法。
    //可选，主应用需要传递给微应用的数据。
    props: {
      _parent_base: '/app-content/',
      msg:'这是主应用传给子应用的消息'
    },
  },
];
// 乾坤提供的子应用生命周期钩子  可用于加载loading
const mount={
    beforeLoad: () => {
      //开始加载loading
      console.log('子应用加载前')
    },
    beforeMount: () => {
      console.log('子应用挂载前')
    },
    afterMount: () => {
      //结束加载loading
      console.log('子应用挂载后')
    },
    beforeUnmount: () => {
      console.log('子应用卸载前')
    },
    afterUnmount: () => {
      console.log('子应用卸载后')
    },
  artAndDance: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/artAndDance',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  },
  english: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/english',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  },
  lifeCare: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/lifeCare',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  },
  sportsAndHealth: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/sportsAndHealth',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  },
  mathBook: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/mathBook',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  },
  artAndDrama: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/artAndDrama',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  }
}

window.qiankunActions = actions

export default actions

// actions.offGlobalStateChange()

// 乾坤提供的子应用生命周期钩子  可用于加载loading
// const mount = {
//   beforeLoad: () => {
//     //开始加载loading
//     console.log('子应用加载前')
//   },
//   beforeMount: () => {
//     console.log('子应用挂载前')
//   },
//   afterMount: () => {
//     //结束加载loading
//     console.log('子应用挂载后')
//   },
//   beforeUnmount: () => {
//     console.log('子应用卸载前')
//   },
//   afterUnmount: () => {
//     console.log('子应用卸载后')
//   }
// }
//注册子应用
registerMicroApps(microApps,mount);
// registerMicroApps(microApps, mount)
//设置默认启动子应用
setDefaultMountApp('/subPath');
// setDefaultMountApp('/home')
//启动qiankun | 不可重复启动 | 如果子应用入口在app.vue里可以在这启动否则会报错找不到子应用结点
//start()
// start()