From d07a5a0265b38c8d52495e49ecae64ea4c6b3f60 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 13 五月 2024 14:52:47 +0800
Subject: [PATCH] 处理应用间通信
---
src/qiankunState/state.ts | 3
src/child.ts | 86 +++++++++-----------
src/views/home.vue | 79 +++++++++++--------
src/main.ts | 34 ++++---
4 files changed, 107 insertions(+), 95 deletions(-)
diff --git a/src/child.ts b/src/child.ts
index 485662e..e80be34 100644
--- a/src/child.ts
+++ b/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 }
- }
-]
-// 涔惧潳鎻愪緵鐨勫瓙搴旂敤鐢熷懡鍛ㄦ湡閽╁瓙 鍙敤浜庡姞杞絣oading
-const mount = {
- beforeLoad: () => {
- //寮�濮嬪姞杞絣oading
- console.log('瀛愬簲鐢ㄥ姞杞藉墠')
- },
- beforeMount: () => {
- console.log('瀛愬簲鐢ㄦ寕杞藉墠')
- },
- afterMount: () => {
- //缁撴潫鍔犺浇loading
- console.log('瀛愬簲鐢ㄦ寕杞藉悗')
- },
- beforeUnmount: () => {
- console.log('瀛愬簲鐢ㄥ嵏杞藉墠')
- },
- afterUnmount: () => {
- console.log('瀛愬簲鐢ㄥ嵏杞藉悗')
}
}
+
+window.qiankunActions = actions
+
+export default actions
+
+// actions.offGlobalStateChange()
+
+// 涔惧潳鎻愪緵鐨勫瓙搴旂敤鐢熷懡鍛ㄦ湡閽╁瓙 鍙敤浜庡姞杞絣oading
+// const mount = {
+// beforeLoad: () => {
+// //寮�濮嬪姞杞絣oading
+// 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()
diff --git a/src/main.ts b/src/main.ts
index 929354a..8aeabc8 100644
--- a/src/main.ts
+++ b/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)
diff --git a/src/qiankunState/state.ts b/src/qiankunState/state.ts
index 8f7e4ee..6646904 100644
--- a/src/qiankunState/state.ts
+++ b/src/qiankunState/state.ts
@@ -1,5 +1,6 @@
const state = {
- aa: 1
+ state: 0,
+ windowSelection: null
}
diff --git a/src/views/home.vue b/src/views/home.vue
index 402f91a..107f69d 100644
--- a/src/views/home.vue
+++ b/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
--
Gitblit v1.9.1