分享你的 demo [ Share your demo ]

[gongshun]

hi，大家好！尽管官方已经提供了 qiankun 的 demo 和教程，但是覆盖面有限。比如说，qiankun 嵌套的使用、angular 作为主应用等，都没有可以参考的 demo。有不少的小伙伴，在不同的技术栈或者框架中使用 qiankun 时，遇到了很多棘手的问题。

如果你有写过一些不同框架/技术栈的 demo ，希望可以分享出来，帮助他人快速上手，谢谢。直接在 issue 中回复 demo 的地址并附上简介即可。

PS：如果别人的 demo 有帮助到你，可以给他点个赞或者点个 star

注意： 请不要在 issue 回复无关内容，对 demo 有疑问请去 demo 仓库提问，无关的回复将会被定期清理。

---

Hi all! Although the demo and tutorial of qiankun have been provided, the scenarios covered are limited. For example, there are no demos that can be referenced for the use of qiankun nesting and angular as the main application. There are many partners who have encountered many difficult problems when using qiankun in different frameworks.

If you have written demos of different frameworks/technology stacks, I hope you can share them to help others get started quickly, thanks. Reply to the demo address in the issue and attach a brief introduction.

PS: If someone else’s demo is helpful to you, you can give him a like or a star.

Note: Please do not reply to irrelevant content in the issue. If you have any questions about the demo, please go to the demo warehouse to ask questions. Irrelevant replies will be cleaned up regularly.

[gongshun]

地址：https://github.com/gongshun/qiankun-vue-demo

介绍：主子应用都是 vue 技术栈，在常规使用的基础上实现了：tab 标签页效果、应用之间的组件共享、依赖共享、子应用是 vite 构建 的等效果（代码在不同的分支）

[gongshun]

地址：https://github.com/gongshun/qiankun-vue-element-admin

介绍：主子项目都是 vue-element-admin 创建的，路由都是 history 模式

[niexq]

地址

https://github.com/niexq/react-app-qiankun-main

简介

🍔 基座

• 使用create-react-app初始化项目;
• 安装"qiankun": "^2.4.0";
• 代码地址：react-app-qiankun-main;
• 独立仓库，独立部署，独立域名：https://qiankun.xiaoqiang.tech;

🍟 react子应用

• 使用create-react-app初始化项目;
• 安装"react-app-rewired": "^2.1.8"、"react-router-dom": "^5.2.0";
• 代码地址：react-app-qiankun-sub;
• 独立仓库，独立部署，独立域名：https://react.xiaoqiang.tech;

🌮 vue子应用

• 使用vue-cli初始化项目，对应"vue": "^3.0.0";
• 安装"vue-router": "^4.0.0-beta.11";
• 代码地址：vue-cli-qiankun-sub;
• 独立仓库，独立部署，独立域名：https://vue.xiaoqiang.tech;

[xtthaop]

地址：https://github.com/xtthaop/vue-qiankun-demo

介绍：主子应用都是 vue 技术栈，在常规使用的基础上实现了权限管理，详细请查看这里

[hql7]

地址：https://github.com/wl-ui/wl-mfe
介绍：qiankun2.x & vue3.x 版本
地址：https://github.com/hql7/wl-micro-frontends
介绍：qiankun1.x & vue2x 版本
地址：https://github.com/hql7/wl-cli
介绍：快速创建qiankun主应用、自应用结构脚手架

[zhaoshunchen]

地址：https://github.com/zhaoshunchen/qiankun-nested-demo
介绍：qiankun2.x & vue2.x 版本
业务场景：项目 A，内部注册项目 B，项目 B也使用了 qiankun，内部注册项目 C

[8696]

地址：https://github.com/8696/micro-web-demo
预览：http://micro.icode.link
主应用：react^17.0.2
子应用：react^17.0.2、vue^3.2.40、angular^15.2.0

[GreenBoy0526]

https://github.com/GreenBoy0526/qiankun-demo
主要是解决微应用路由切换后主应用切换路由报错问题，代码参考主应用的路由配置，主应用vite+vue3，子应用vue2

router.beforeEach((to, from, next) => {
  if (!window.history.state.current) window.history.state.current = to.fullPath;
  if (!window.history.state.back) window.history.state.back = from.fullPath;
  return next();
});

[aehyok]

主应用使用vite3+vue3，子应用使用vuecli +vue3

单纯vue3 qiankun的 demo文档说明

代码仓库地址

线上预览版本 http://vue.tuokecat.com/

[haixiangyan]

非常简单的 Demo~
主应用：React
子应用：React, Vue 有各自路由，欢迎 fork
普通业务的 Demo: https://github.com/haixiangyan/qiankun-bigass-app
企业微信侧边栏的 qiankun 模板：https://github.com/wecom-sidebar/wecom-sidebar-qiankun-tpl

[hairgc]

Demo还没有时间整理，说一下遇到的问题以及解决方案吧
主应用: Angular10
子应用: Vue2
项目概况：主应用本身有自己的业务代码和页面，使用的是@angular/router,，hash路由，子应用会在特定路由加载使用的是registerMicroApps（为啥不用loadMicroApp？因为子应用的卸载时机不太好把握）

下面说一下遇到的问题以及解决方案吧，首先说明一下解决方案只保证对我们这个项目有效，大家只供参考

问题1：

问题描述：主应用页面使用浏览器返回功能（history.back()）失效（即使还从未加载过子应用），页面url会变，但是页面不会渲染，只有下次Angular脏检查才会渲染新页面渲染（可以通过调用一下window.dispatchEvent(new Event('resize'))验证下）

浏览器：Chrome/IE11

问题定位：qiankun依赖的single-spa一开始就会拦截篡改原生的window.addEventListener，源码片段如下：

  // https://github.com/single-spa/single-spa/blob/bcea338aff9231bacf9926ffc7b70dfe83e9f6eb/src/navigation/navigation-events.js#L147
  window.addEventListener = function (eventName, fn) {
    if (typeof fn === "function") {
      if (
        routingEventsListeningTo.indexOf(eventName) >= 0 &&
        !find(capturedEventListeners[eventName], (listener) => listener === fn)
      ) {
        capturedEventListeners[eventName].push(fn);
        return;
      }
    }

    return originalAddEventListener.apply(this, arguments);
  };

而且上述代码会在Angular Zone注册各种监听事件之前执行，导致Angular Zone注册的hashchange事件会被拦截，虽然single-spa会在url改变时调用一下所有注册的回调，但是不知为何Zone并不会响应浏览器的返回事件了

解决：

方案1：自己在全局注册一下hashchange事件(比如app.component.ts)，然后手动触发一下Angular脏检查

fromEvent(window, 'hashchange')
    .pipe(
        takeUntil(this.complete$),
        tap(()=>{
            const evt = document.createEvent('HTMLEvents');
            evt.initEvent('resize', false, false);
            window.dispatchEvent(evt)
        })
    )

方案2：让主应用的各种注册事件在single-spa拦截window.addEventListener前执行，修改single-spa源码

window.addEventListener = function (eventName, fn) {
    if (typeof fn === "function") {
      if (
        routingEventsListeningTo.indexOf(eventName) >= 0 &&
        !find(capturedEventListeners[eventName], (listener) => listener === fn) &&
        isStarted() // 加一个这个判断，isStarted是源码里面提供的方法，判断微服务是否启动
      ) {
        capturedEventListeners[eventName].push(fn);
        return;
      }
    }

问题2：

问题描述：子应用记载过一次之后，返回主应用的页面，Zone脏检查就出问题了，进入主应用某些页面本应该触发的某些事件就会莫名其妙的不触发，比如：某个页面使用了ng-zorro的nz-table组件，本来组件初始化就会触发的nzQueryParams并没有被触发

浏览器：IE11

问题定位：IE不支持Proxy，qiankun会使用SnapshotSandbox沙箱来隔离父子应用对于window对象的修改

qiankun/src/sandbox/index.ts

Lines 42 to 46 in d626baa

	if (window.Proxy) {
	sandbox = useLooseSandbox ? new LegacySandbox(appName, globalContext) : new ProxySandbox(appName, globalContext);
	} else {
	sandbox = new SnapshotSandbox(appName);
	}

当加载子应用时会为子应用创建一个沙箱，如果已创建过就会还原子应用卸载时的window快照，有兴趣可以看下源码，不难理解

qiankun/src/sandbox/snapshotSandbox.ts

Lines 40 to 53 in d626baa

	active() {
	// 记录当前快照
	this.windowSnapshot = {} as Window;
	iter(window, (prop) => {
	this.windowSnapshot[prop] = window[prop];
	});
	// 恢复之前的变更
	Object.keys(this.modifyPropsMap).forEach((p: any) => {
	window[p] = this.modifyPropsMap[p];
	});
	this.sandboxRunning = true;
	}

qiankun/src/sandbox/snapshotSandbox.ts

Lines 8 to 16 in d626baa

	function iter(obj: typeof window, callbackFn: (prop: any) => void) {
	// eslint-disable-next-line guard-for-in, no-restricted-syntax
	for (const prop in obj) {
	// patch for clearInterval for compatible reason, see #1490
	if (obj.hasOwnProperty(prop) || prop === 'clearInterval') {
	callbackFn(prop);
	}
	}
	}

问题就出在这里，当进入子应用并从子应用回来，window.setInterval会被还原为进入之前的对象，然后主应用脏检查就出问题了，原因尚未可知

qiankun/src/sandbox/snapshotSandbox.ts

Lines 55 to 71 in d626baa

	inactive() {
	this.modifyPropsMap = {};
	iter(window, (prop) => {
	if (window[prop] !== this.windowSnapshot[prop]) {
	// 记录变更，恢复环境
	this.modifyPropsMap[prop] = window[prop];
	window[prop] = this.windowSnapshot[prop];
	}
	});
	if (process.env.NODE_ENV === 'development') {
	console.info(`[qiankun:sandbox] ${this.name} origin window restore...`, Object.keys(this.modifyPropsMap));
	}
	this.sandboxRunning = false;
	}

解决：
不记录Zone快照

function iter(obj: typeof window, callbackFn: (prop: any) => void) {
  for (const prop in obj) {
    // 修改点在这里
    if ((obj.hasOwnProperty(prop) || prop === 'clearInterval') && prop !== 'setInterval') {
      callbackFn(prop);
    }
  }
}

问题3：

问题描述：Target container with #xxx not existed while xxx mounting!，第二次进入子应用偶现这个错误（快速使用浏览器返回进入子应用可复现），因为是在特定路由加载子应用，子应用挂载时，容器还不存在

浏览器：Chrome/IE

问题定位：出现这个问题不难理解，就是子应用挂载时指定的容器还未渲染在DOM中

qiankun/src/loader.ts

Lines 392 to 402 in d626baa

	async () => {
	const useNewContainer = remountContainer !== initialContainer;
	if (useNewContainer || !appWrapperElement) {
	// element will be destroyed after unmounted, we need to recreate it if it not exist
	// or we try to remount into a new container
	appWrapperElement = createElement(appContent, strictStyleIsolation, scopedCSS, appInstanceId);
	syncAppWrapperElement2Sandbox(appWrapperElement);
	}
	render({ element: appWrapperElement, loading: true, container: remountContainer }, 'mounting');
	},

qiankun/src/loader.ts

Lines 171 to 186 in d626baa

	if (phase !== 'unmounted') {
	const errorMsg = (() => {
	switch (phase) {
	case 'loading':
	case 'mounting':
	return `Target container with ${container} not existed while ${appInstanceId} ${phase}!`;
	case 'mounted':
	return `Target container with ${container} not existed after ${appInstanceId} ${phase}!`;
	default:
	return `Target container with ${container} not existed while ${appInstanceId} rendering!`;
	}
	})();
	assertElementExist(containerElement, errorMsg);
	}

qiankun/src/loader.ts

Lines 35 to 43 in d626baa

	function assertElementExist(element: Element | null | undefined, msg?: string) {
	if (!element) {
	if (msg) {
	throw new QiankunError(msg);
	}
	throw new QiankunError('element not existed!');
	}
	}

为什么会出现呢？浏览器卡一点，或者页面渲染加入了过渡动画都可能导致这个问题

解决：
删除过渡动画有可能解决，但是有些过渡动画确实能够提升用户体验，直接去掉不太可取, 我采用如下方案：修改qiankun loader源码（这里也希望qiankun API能够支持获取容器的最大重试次数）

// https://github.com/umijs/qiankun/blob/d626baaa342a4ce74a3b944f4cedc40c1bf661b7/src/loader.ts#L393
async () => {
  const useNewContainer = remountContainer !== initialContainer;
  if (useNewContainer || !appWrapperElement) {
    // element will be destroyed after unmounted, we need to recreate it if it not exist
    // or we try to remount into a new container
    appWrapperElement = createElement(appContent, strictStyleIsolation, scopedCSS, appName);
    syncAppWrapperElement2Sandbox(appWrapperElement);
  }

  // 修改点：加入以下代码片段，留下充足的时间等待容器加载（每300ms重试一次，最多重试15次）
  if (!getContainer(initialContainer!)) {
    await new Promise((resolve) => {
      let count = 0;
      const timer = setInterval(() => {
        if (getContainer(initialContainer!) || count > 15) {
          clearInterval(timer);
          resolve({});
        }
        count++;
      }, 300);
    });
  }

  render({ element: appWrapperElement, loading: true, container: remountContainer }, 'mounting');
}

举一反三：其他各个阶段的Target container with #xxx not existed ，也可参考类似思路解决

附

修改了node_modules源码，如何让其他小伙伴也能够一起用，推荐 patch-package

[sh-winter]

地址：https://github.com/sh-winter/vite-plugin-qiankun (demo 在 example 目录下)

介绍：主子应用都是由 vite 构建的，子应用使用了 vue3，支持开发环境😉

[kuaifengle]

参考代码地址: https://github.com/kuaifengle/qiankun-vue3-tabsPage
网页演示网址: https://kuaifengle.github.io/qiankun-vue3-tabsPage-demo

Vue3.0 + qiankun.js 实现多tab标签页的路由切换功能
主子应用都是vue3.0写的, 目前自己的公司也在用,后续会持续更新.
通过修改主应用的路由 后利用子应用的updata方法来 执行子页面$root的方法
监听用initialState的变化来执行对微页面内部的路由跳转
用keep-alive来缓存主应用和微应用的页面

[su4g]

地址：https://github.com/su4g/qiankun-angular13-Base

简介：
主应用 - Angular13
子应用 - Angular13