处理应用间通信

YM

2024-05-13 d07a5a0265b38c8d52495e49ecae64ea4c6b3f60

处理应用间通信

 src/child.ts

@@ -1,26 +1,19 @@
import { registerMicroApps, start } from 'qiankun'
import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'
import { initGlobalState } from 'qiankun'
const initalState = {
  selectText: '',
  lineHeight: [],
  scribeList: [],
  notesList: []
}
const actions = initGlobalState(initalState)
import state from './qiankunState/state'

actions.onGlobalStateChange((initalState, prev) => {
  console.log(initalState, prev)
const actions = initGlobalState(state)

actions.onGlobalStateChange((state, prev) => {
  console.log("父层变化：",state, prev)
})
// setTimeout(()=>{
//   actions.setGlobalState({...initalState})
// },2000)
actions.offGlobalStateChange()
const microApps = [
  {

export const microApps = {
  book1: {
    // - 必选，微应用的名称，微应用之间必须确保唯一
    name: 'app-content',
    // - 必选，微应用的入口
    entry: '//182.92.203.7:3007/books/test/',
    entry: '//182.92.203.7:3007/books/book/1/',
    // entry: '//192.168.3.203:8080',
    // - 必选，微应用的容器节点的选择器或者 Element 实例
    container: '#container',
@@ -29,39 +22,38 @@
    //支持配置一个 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('子应用卸载后')
  }
}

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('/home')
//启动qiankun | 不可重复启动 | 如果子应用入口在app.vue里可以在这启动否则会报错找不到子应用结点
start({
  prefetch: false
})
export default actions;
// start()

 src/main.ts

@@ -39,30 +39,34 @@


// qiankun主应用与微应用通讯
import { initGlobalState, type MicroAppStateActions } from 'qiankun'
import state from './qiankunState/state'
// import { initGlobalState, type MicroAppStateActions } from 'qiankun'
// import state from './qiankunState/state'

state.bb = (data) => {
  console.log(data);
}
// state.bb = (data) => {
//   console.log(data);
// }

// 初始化 state
const actions: any = initGlobalState(state)
// 监听state变化
actions.onGlobalStateChange((state: any, prev: any) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log("父层change：",state, prev)
})
// 设置state的值
actions.setGlobalState(state)
// const actions: any = initGlobalState(state)

console.log(actions,"actions");
// 监听state变化
// actions.onGlobalStateChange((state: any, prev: any) => {
//   // state: 变更后的状态; prev 变更前的状态
//   console.log("父层change：",state, prev)
// })
// 设置state的值
// actions.setGlobalState(state)

// console.log(actions,"actions");

// app.provide('qiankunActions', actions)
// window.qiankunActions = actions

// 移除当前应用的状态监听，微应用 umount 时会默认调用
// actions.offGlobalStateChange()

const app = createApp(App)
app.provide('qiankunActions', actions)

app.provide('toolClass', toolClass)
app.provide('request', request)
app.use(router)

 src/qiankunState/state.ts

@@ -1,5 +1,6 @@
const state = {
  aa: 1
  state: 0,
  windowSelection: null
}



 src/views/home.vue

@@ -223,7 +223,7 @@
                    <div class="resourceImg">
                      <img :src="video" mode="" />
                    </div>
                    <div class="rName" v-if="searchText !=''" v-html="item.name"></div>
                    <div class="rName" v-if="searchText != ''" v-html="item.name"></div>
                    <div class="rName" v-else>{{ item.name }}</div>
                  </div>
                </el-col>
@@ -302,12 +302,7 @@
        <!-- 微应用盒子 -->
        <div class="pageBox-content" @scroll="pageScroll">
          <div class="content-box">
            <div
              id="container"
              @mousedown="handleMouseDown"
              @mousemove="handleMousemove"
              @mouseup="handleMouseUp"
            ></div>
            <div id="container" @mousedown="handleMouseDown" @mousemove="handleMousemove"></div>
            <!-- 画笔画布 -->
            <div class="canvas-box" v-show="canvasShow">
              <canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas>
@@ -643,7 +638,7 @@
  </el-dialog>
  <el-dialog title="百度百科" align-center v-model="baiduVisible" width="60%" class="myDialogs">
    <div class="wendabox">
      <iframe :src="'https://baike.baidu.com/item/'+ selectText" frameborder="0"></iframe>
      <iframe :src="'https://baike.baidu.com/item/' + selectText" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="AI智能问答" align-center v-model="wendaVisible" width="26%" class="myDialogs">
@@ -783,14 +778,17 @@
import { start } from 'qiankun'
import axios from 'axios'
import { fabric } from 'fabric'

import { loadMicroApp } from 'qiankun'
import { microApps } from '@/child.ts'
const canvasWith = ref(1000)
const canvasheight = ref(3000)
const screenWidth = ref(
  window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
)

let microApp = null // 微应用实例
onMounted(() => {
  console.log(1111);
  
  // canvasWith.value = window.innerWidth - 540
  // canvasheight.value = window.innerHeight - 110
  getNotesList() // 获取高亮
@@ -814,11 +812,18 @@
    })()
  }

  console.log(qiankunActions,"qiankunActions");
  
  qiankunActions.setGlobalState({
    cc: (data) => {
      console.log(data);
  // 加载微应用
  microApp = loadMicroApp(microApps.book1, {
    sandbox: {
      strictStyleIsolation: true,
      experimentalStyleIsolation: true
    }
  })

  window.qiankunActions.setGlobalState({
    state: 1, // 加载子应用
    windowSelection: (data) => { // 绑定子应用选择监听事件
      console.log(data, '子应用选择')
    }
  })
})
@@ -998,7 +1003,17 @@
}
//刷新当前页面
const reload = () => {
  location.reload()
  if (microApp) {
    microApp.unmount() // 卸载微应用
    microApp = loadMicroApp(microApps.book1, {
      sandbox: {
        strictStyleIsolation: true,
        experimentalStyleIsolation: true
      }
    })
  } else {
    location.reload()
  }
}

const selectResourceType = (type) => {
@@ -1463,22 +1478,22 @@
  }
}

const handleMouseUp = (e) => {
  if (move.value) {
    const txt = window.getSelection()?.toString()
    selectText.value = txt
    const node = window.getSelection()
    let html = node.anchorNode.parentNode.parentNode
    dialogToolData.chapter = html.firstChild.innerHTML
    if (txt) {
      showToolBox.value = true
      dialogToolData.top = e.y
      dialogToolData.left = e.x
    }
    isMouseDown.value = false
  }
  move.value = false
}
// const handleMouseUp = (e) => {
//   if (move.value) {
//     const txt = window.getSelection()?.toString()
//     selectText.value = txt
//     const node = window.getSelection()
//     let html = node.anchorNode.parentNode.parentNode
//     dialogToolData.chapter = html.firstChild.innerHTML
//     if (txt) {
//       showToolBox.value = true
//       dialogToolData.top = e.y
//       dialogToolData.left = e.x
//     }
//     isMouseDown.value = false
//   }
//   move.value = false
// }

const pageScroll = (e) => {
  showToolBox.value = false