分享你的 demo [ Share your demo ] #1777
Comments
|
地址：https://github.com/gongshun/qiankun-vue-demo 介绍：主子应用都是 vue 技术栈，在常规使用的基础上实现了：tab 标签页效果、应用之间的组件共享、依赖共享、子应用是 vite 构建 的等效果（代码在不同的分支） |
|
地址：https://github.com/gongshun/qiankun-vue-element-admin 介绍：主子项目都是 vue-element-admin 创建的，路由都是 history 模式 |
地址https://github.com/niexq/react-app-qiankun-main 简介🍔 基座
🍟 react子应用
🌮 vue子应用
|
|
地址：https://github.com/xtthaop/vue-qiankun-demo 介绍：主子应用都是 vue 技术栈，在常规使用的基础上实现了权限管理，详细请查看这里 |
|
地址：https://github.com/wl-ui/wl-mfe |
|
地址：https://github.com/zhaoshunchen/qiankun-nested-demo |
|
地址：https://github.com/8696/micro-web-demo |
|
https://github.com/GreenBoy0526/qiankun-demo 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();
}); |
|
主应用使用vite3+vue3，子应用使用vuecli +vue3 线上预览版本 http://vue.tuokecat.com/ |
|
非常简单的 Demo~ |
|
Demo还没有时间整理，说一下遇到的问题以及解决方案吧 下面说一下遇到的问题以及解决方案吧，首先说明一下解决方案只保证对我们这个项目有效，大家只供参考 问题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对象的修改 Lines 42 to 46 in d626baa 当加载子应用时会为子应用创建一个沙箱，如果已创建过就会还原子应用卸载时的window快照，有兴趣可以看下源码，不难理解 qiankun/src/sandbox/snapshotSandbox.ts Lines 40 to 53 in d626baa qiankun/src/sandbox/snapshotSandbox.ts Lines 8 to 16 in d626baa 问题就出在这里，当进入子应用并从子应用回来，window.setInterval会被还原为进入之前的对象，然后主应用脏检查就出问题了，原因尚未可知 qiankun/src/sandbox/snapshotSandbox.ts Lines 55 to 71 in d626baa 解决： 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中 Lines 392 to 402 in d626baa Lines 171 to 186 in d626baa Lines 35 to 43 in d626baa 为什么会出现呢？浏览器卡一点，或者页面渲染加入了过渡动画都可能导致这个问题 解决： // 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 |
|
地址：https://github.com/sh-winter/vite-plugin-qiankun ( 介绍：主子应用都是由 |
|
参考代码地址: https://github.com/kuaifengle/qiankun-vue3-tabsPage Vue3.0 + qiankun.js 实现多tab标签页的路由切换功能 |
|
地址：https://github.com/su4g/qiankun-angular13-Base 简介： |
|
地址：https://github.com/qq253498229/qiankun-ng13-docker 简介： 未使用single-spa，带Dockerfile以及docker-compose.yml 2023-04-20更新，升级到Angular15，原来的代码在ng13分支查看 |
|
地址：https://gitee.com/github-26497262/micro-fe 简介：主要介绍三方依赖提取的方案。 |
|
简介：支持页面缓存、页签操作 主应用：react18 子应用：react18、vue3、angular9 |
|
地址: https://github.com/xoptimal/qiankun-demo 简介
完成功能挂载, 通信, 样式隔离, 错误处理 |
大佬，写的很细，太贴心了， |
|
@savelifeme 最好能帮到你。 |
|
一个使用 qiankun 支持的微前端应用 demo
启动整个项目
端口
源代码：https://github.com/12redcircle/qiankun-angularjs-migrate-demo |
地址线上地址：https://maxlz1.github.io/micro-app-demos/qiankun-demo/vue3-main/ 简介主应用为 其中 功能列表
|
仓库地址是什么看看一看。 |
暂未开源，完善中 |
|
|
nuxtjs v2作为主应用接入qiankun的demo，附接入过程中的注意事项： |
|
@CurrrryChen 请问主应用使用nuxt算是SSR吗？（其实我就是想问qiankun的主应用现在到底支不支持SSR） |
|
|
|
|
@PandaSususu 我实现了他的代码，不需要付费哈 |
可以发个地址学习一下嘛 |
|
受qiankun启发，根据其原理做的可视化平台 |
|
仓库地址: https://github.com/sansui-orz/qiankun-admin 支持:
期待star~ |
|
主应用：https://github.com/Oct-17/single-spa-main.git |
and others
hi，大家好！尽管官方已经提供了
qiankun的 demo 和教程，但是覆盖面有限。比如说，qiankun 嵌套的使用、angular 作为主应用等，都没有可以参考的 demo。有不少的小伙伴，在不同的技术栈或者框架中使用 qiankun 时，遇到了很多棘手的问题。如果你有写过一些不同框架/技术栈的 demo ，希望可以分享出来，帮助他人快速上手，谢谢。直接在 issue 中回复 demo 的地址并附上简介即可。
PS：如果别人的 demo 有帮助到你，可以给他点个赞或者点个 star
注意： 请不要在 issue 回复无关内容，对 demo 有疑问请去 demo 仓库提问，无关的回复将会被定期清理。
Hi all! Although the demo and tutorial of
qiankunhave been provided, the scenarios covered are limited. For example, there are no demos that can be referenced for the use ofqiankunnesting and angular as the main application. There are many partners who have encountered many difficult problems when usingqiankunin 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.
The text was updated successfully, but these errors were encountered: