|
|
@@ -5,15 +5,20 @@ import {ErrorComponent} from "../../components/error/Error.tsx";
|
|
|
import {useAppDispatch, useAppSelector} from "../../store";
|
|
|
import {LoadingText} from "../../components/loading";
|
|
|
import {settingsActions} from "../../store/slice/settings.ts";
|
|
|
-// import {startApp} from "wujie";
|
|
|
+import {loadMicroApp, addGlobalUncaughtErrorHandler, removeGlobalUncaughtErrorHandler} from 'qiankun'
|
|
|
+import type {MicroApp} from "qiankun";
|
|
|
|
|
|
// 腾讯无界： https://wujie-micro.github.io/doc/guide/start.html
|
|
|
+// https://qiankun.umijs.org/zh/guide/tutorial#%E4%B8%BB%E5%BA%94%E7%94%A8
|
|
|
export const MicroAppPage = () => {
|
|
|
|
|
|
+ const isMounted = useRef(false)
|
|
|
const params = useParams<{ id: string }>()
|
|
|
const [error, setError] = useState<any>()
|
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
|
|
+ const microApp = useRef<MicroApp>()
|
|
|
+
|
|
|
const routeMap = useAppSelector(state => state.user.routeMap)
|
|
|
const dispatch = useAppDispatch();
|
|
|
const domRef = useRef<HTMLDivElement>(null);
|
|
|
@@ -26,47 +31,48 @@ export const MicroAppPage = () => {
|
|
|
dispatch(settingsActions.setFullScreen(full))
|
|
|
}
|
|
|
|
|
|
- // const destroyRef = useRef<any>()
|
|
|
- // const onActivated = (e: any) => {
|
|
|
- // console.log('activated', e)
|
|
|
- // }
|
|
|
- //
|
|
|
- // const onLoadFail = (url: any, e: any) => {
|
|
|
- // setLoading(false)
|
|
|
- // console.log('load fail', url)
|
|
|
- // setError(e)
|
|
|
- // }
|
|
|
- // const afterMounted = () => {
|
|
|
- // console.log('afterMounted', app)
|
|
|
- // }
|
|
|
-
|
|
|
- // const handleStartApp = () => {
|
|
|
- // if (!domRef.current || !app) {
|
|
|
- // return
|
|
|
- // }
|
|
|
- // console.log('startApp', app.path)
|
|
|
- // startApp({
|
|
|
- // name: app.id,
|
|
|
- // url: app.path,
|
|
|
- // alive: true,
|
|
|
- // el: domRef.current,
|
|
|
- // beforeMount: () => setLoading(true),
|
|
|
- // afterMount: afterMounted,
|
|
|
- // loadError: onLoadFail,
|
|
|
- // activated: onActivated,
|
|
|
- // degrade: true,
|
|
|
- // sync: true,
|
|
|
- // }).then(func=>{
|
|
|
- // destroyRef.current = func
|
|
|
- // }).catch(err=>{
|
|
|
- // console.log('startApp error ',err)
|
|
|
- // })
|
|
|
- // }
|
|
|
+ useEffect(() => {
|
|
|
+ if (!domRef.current || !app) return;
|
|
|
+ console.log('app',app)
|
|
|
+ if (microApp.current){
|
|
|
+ console.log('MicroApp has init')
|
|
|
+ // return;
|
|
|
+ }
|
|
|
+ microApp.current = loadMicroApp({
|
|
|
+ name: app.id,
|
|
|
+ entry: app.path,
|
|
|
+ container: domRef.current,
|
|
|
+ props: {
|
|
|
+ root: `#micro-app-${app?.id}`
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ sandbox: false,
|
|
|
+ autoStart: true,
|
|
|
+ })
|
|
|
+ microApp.current.mountPromise.then(()=>{
|
|
|
+ console.log('MicroApp mounted')
|
|
|
+ }).catch(error=>{
|
|
|
+ setError(error)
|
|
|
+ console.log('mount error',error)
|
|
|
+ }).finally(()=>{
|
|
|
+ setLoading(false)
|
|
|
+ })
|
|
|
+ }, [app]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
+ isMounted.current = true;
|
|
|
setFullScreen(true)
|
|
|
+ const errorHandler = (error: any) => {
|
|
|
+ console.log('load micro app fail',error)
|
|
|
+ }
|
|
|
+ addGlobalUncaughtErrorHandler(errorHandler)
|
|
|
return ()=>{
|
|
|
+ isMounted.current = false
|
|
|
+ console.log('unload micro app',app?.id)
|
|
|
setFullScreen(false)
|
|
|
+ removeGlobalUncaughtErrorHandler(errorHandler)
|
|
|
+ microApp.current?.unmount()
|
|
|
+ microApp.current = undefined
|
|
|
}
|
|
|
}, []);
|
|
|
|
|
|
@@ -74,13 +80,14 @@ export const MicroAppPage = () => {
|
|
|
// handleStartApp()
|
|
|
// }, [domRef.current,app]);
|
|
|
|
|
|
- return (<div id={'micro_app_'+app?.id} className="micro-app">
|
|
|
+ return (<div className="micro-app">
|
|
|
<LoadingText loading={loading} text="加载中，请稍后..."/>
|
|
|
{error ?<ErrorComponent noRedirect={true} error={error}/>: null}
|
|
|
- <div className="micro-app-container" ref={domRef}>
|
|
|
- <iframe src={app?.path} style={{width:'100%',height:'100%'}}
|
|
|
- onLoad={() => setLoading(false)}
|
|
|
- onError={e=>setError(e)}/>
|
|
|
+ <div id={`micro-app-${app?.id}`} className="micro-app-container" ref={domRef}>
|
|
|
+ {/*<iframe src={app?.path} style={{width:'100%',height:'100%'}}*/}
|
|
|
+ {/* onLoad={() => setLoading(false)}*/}
|
|
|
+ {/* onError={e=>setError(e)}/>*/}
|
|
|
+ {/*<micro-app name='my-app' url='http://localhost:3000/'></micro-app>*/}
|
|
|
</div>
|
|
|
</div>)
|
|
|
}
|
