预览效果
一、开始前来点前奏
话说iframe是最好的微服务解决方案，不过它有一些无法解决的致命弱点，即使可以解决的问题体验上也不是很好，所以今天这篇文章就来学习一下使用蚂蚁开源的qiankun来解决一些场景的问题。
使用qiankun之前，个人在项目中也确实遇到了一些问题，这里我把个人在项目中使用iframe遇到的问题与qiankun做了一个对比，请看以下表格：
question
二、技术栈
- 主应用：react hooks + webpack5
- 微应用：vue2/vue3 + webpack4 (目前针对webpack5的微应用还没研究过)
三、主应用实现
-
项目结构
项目结构 这里在App.tsx中定义了两个路由，
/- Home、/login- Loginconfig.ts中导出一些配置，这里导出一个prefix，也就是basename（vue中叫base）
-
Login组件中什么功能也没有，这里用来做切换路由演示；Home组件注册微应用，监听主/微应用状态变化
Login 微应用在Home组件中注册，这里单独抽了一个registerApp.ts，请看代码
import {
registerMicroApps, start, initGlobalState, MicroAppStateActions
} from 'qiankun';
import { prefix } from './config';
export interface AppItem {
name: string
entry: string
container: string
activeRule: string
}
export type { MicroAppStateActions };
// 注册微应用
const registerApp = (apps: AppItem[]) => {
registerMicroApps(apps);
// 启动
start({ prefetch: true });
};
const initialState = { closeLoading: false };
// 全局方法
const globalActions: MicroAppStateActions = initGlobalState(initialState);
interface ILItem {
name: string
entry: string
}
// 微应用list
const appList: ILItem[] = [
{ name: 'app1', entry: '//192.168.1.6:2001' },
{ name: 'vue3', entry: '//192.168.1.6:2002' }
];
const microApps = appList?.map(({ name, entry }) => ({
name,
entry,
container: '#microApp',
activeRule: `${prefix}/${name}`,
props: { prefix: `${prefix}/${name}`, entry }
})) ?? [];
export { globalActions, microApps };
export default registerApp;
- registerMicroApps - 注册微应用api
- start - 启动
- initGlobalState - 初始化全局参数（主应用与微应用的共享参数），返回的是一个函数
- MicroAppStateActions - 共享参数的type
- 导出registerApp、globalActions、microApps备用
- microApps
- 建议name属性与微应用的打包打出属性名相同，避免混乱
- entry: 原则上只需要配置子应用的IP + 端口（域名），不过在咱们真实生产或测试环境中，一个服务器（同一个IP）可能会配置N+个项目，如：
子应用是用过http://192.168.1.6:2001/xxx来访问首页（这里xxx表示子应用部署的目录），***此时咱们需要把entry: '//192.168.1.6:2001'改成entry: '//192.168.1.6:2001/xxx/index.html'***，否则fetch请求不到js、css等静态资源，微应用也就不能加载成功，entry不用加http(s)，跟随主应用协议 - container：子应用要挂载到的dom id
- 微应用加载主要是匹配activeRule来激活，如果主应用不是部署到服务器根目录需要把config中的prefix传给子应用，所以子应用在注册路由时的base参数应设置为props.prefix
- props: 子应用可在生命周期中拿到（以下会在子应用demo中演示）
-
在Home组件倒入registerApp，待加载完成后注册微应用
register
- 注意：这里建议在 'componentDidMount' 后注册微应用，以防止找不到dom
-
此例中做一屏展示，header部分高度为49px，且header会一直显示在页面上，所以main部分的高度需要减去49px
header -
div[id^="__qiankun"]是个什么鬼？
id="__qiankun_xxx"- qinkun会自动在main中插入一个由他定义且有参数的div
- 这里需要给这个div也设置一个高度，否则微应用内容不够会撑不满高度，当然在您的项目中视情况而定
四、微应用实现
- 在src目录下新建
public-path.js，并在main.js中引入
public-path.js - main.js中需要导出
bootstrap , mount, unmount三个生命周期钩子，不管有没有用，按照要求导出就对了
- bootstrap 初始化
- mount 挂载
- unmount 卸载
- 为了使微应用可以独立运行，这里获取qiankun的全局变量
const isQK = window.__POWERED_BY_QIANKUN__，如果不是在qiankun环境下运行，获取到的isQK值为false - 设置vue实例和路由，这里建议把路由按照如下示例来写，在微应用卸载的时候将实例和路由有销毁，以便更好的垃圾回收
- vue2🌰
import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import App from './views/App';
Vue.use(VueRouter);
// qiankun window全局变量
const isQK = window.__POWERED_BY_QIANKUN__;
// 路由
let instance = null, // vue实例
router = null; // 路由
// vue挂载函数
const render = (props = {}) => {
router = new VueRouter({
mode: 'history',
base: isQK ? props.prefix : '/',
routes
});
const { container } = props;
instance = new Vue({
router,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app');
};
// 独立运行
if (!isQK) render();
/* 微应用运行 start */
export async function bootstrap(props) {
// console.log('[vue] apm app bootstraped');
// 微应用初始化 - 这里可以获取主应用传来的base前缀
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
// 微应用挂载
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
// console.log('===子应用====', state, prev);
});
setTimeout(() => {
// 例子 - 关闭局部loading
props.setGlobalState({ closeLoading: true });
}, 3000);
render(props);
}
export async function unmount() {
// 微应用卸载
instance.$destroy(); // 销毁vue实例
instance.$el.innerHTML = ''; // 将实例的dom设置为空
instance = null; // 清空实例
router = null; // 清空路由
}
/* 微应用运行 end */
- vue3🌰
import './public-path';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App';
import routes from './routes';
// qiankun window全局变量
const isQK = window.__POWERED_BY_QIANKUN__;
let app = null,
router = null;
const render = (props = {}) => {
const { container } = props;
router = createRouter({
history: createWebHistory(isQK ? props.prefix : '/'),
routes
});
app = createApp(App);
app.use(router);
app.mount(container ? container.querySelector('#vue3') : '#vue3');
};
// 独立运行
if (!isQK) render();
// 初始化
export async function bootstrap() {
console.log('%c ', 'color: green;', 'vue3.0 app bootstraped');
}
// 挂载
export async function mount(props) {
setTimeout(() => {
// 例子 - 关闭局部loading
props.setGlobalState({ closeLoading: true });
console.log('-------关闭局部loading---------');
}, 3000);
render(props);
console.log('app=======', app);
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
// console.log('===子应用====', state, prev);
console.log('===子应用====', state);
});
}
// 销毁
export async function unmount() {
app.unmount();
app._container.innerHTML = '';
app = null;
router = null;
}
- 主应用与微应用通信
-
主应用可以通过初始化时props把值传递给子应用
props - 主应用也可以通过
globalActions.setGlobalState函数设置全局参数
globalActions.setGlobalState - 当主应用调用 globalActions.setGlobalState 后，子应用怎么接收呢？就是以上示例中的
props.onGlobalStateChange方法，该方法接收一个函数，函数有两个参数：第一个（state）为变更后的状态，第二（prev）个为变更前的状态
props.onGlobalStateChange
- 微应用与主应用通信
- 微应用调用
props.setGlobalState - 主应用在
globalActions.onGlobalStateChange中监听微应用发送的参数
props.setGlobalState - 微应用可以把mount接收到的props保存到Store中
五、使用qiankun遇到的坑及注意问题
- 跨域问题
- 微应用不是部署在根目录问题
- css中引入的font问题
- 静态资源使用相对路径问题
- 微应用内容不够，高度问题（本🌰）
六、总结
如果站在巨人的高度纵观全局，微应用就是一个组件（这个我身边一个大佬一句话描述的），微应用提供一些方法给主应用，供主应用调用，如果您写过组件（npm包）会更好的理解这点。
期望不就得将来，新一代iframe面世就不用瞎折腾这些问题了。
