前言：
在这里整理下用乾坤来开发微服务的一些资料。
使用好处：
使用乾坤可以实现什么效果呢？众所周知，前端的框架五花八门，react/vue/angular等各领风骚，那么如果我们有需要把不同技术栈的项目整合起来，应该怎么去做呢？如果统一技术栈进行开发，工作量太大，成本也高，那还能怎么做呢？没错，这就是我们乾坤技术出来的由来，可以通过他把不同的项目进行一个融会贯通，让他们可以实现亲密的联系，又能各自发展。
乾坤的官网地址：点我
乾坤的逻辑流程：
如何去使用：
1、安装
yarn add qiankun
npm i qiankun -S 2、主应用的main.js
// (1)导入乾坤框架
import { registerMicroApps, start } from "qiankun";
// (2)注册乾坤子应用
registerMicroApps([
{
name:"sub-application01", //子应用名称
entry:"//localhost:8001", //子应用入库地址
container:"#container", //主应用容器
activeRule:"/sub-application01", //主应用路由匹配规则
props:{
token:"sub-application-001"
} //主应用传递参数
},
// {
// name:"sub-application02",
// entry:"//localhost:8002",
// container:"#container",
// activeRule:"/sub-application02",
// props:{
// token:"sub-application-002"
// }
// }
]);
//(3)开启乾坤
start();3、主应用的配置 initGlobalState(state)
- 参数
- state - Record<string, any> - 必选
- 用法定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法
import { initGlobalState } from 'qiankun';
// 跨应用共享状态
const initialState = {
hasCallPhone: false, // 是否拨打电话
outsidePhone: '', // 外部电话号码
isLocal: true, // 是否是本地号码
channelId: '', // 渠道
leadsId: '',
hasSendMsg: false, // 是否发送短信
maSend: {}, // MA的leadsId,channelId
hasSendEmail: false, // 是否发送邮件
contactHistory: false, // 是否展示联系历史
customerId: '', // 联系历史需要的id,
newDict: false, // 是否新增字典
addDictId: '', // 传入字典id
callDetails: false, // 是否展示通话详情
channelSessionId: '', // 通话详情需要的id
urgentObj: null, // 获取紧急程度
socketCallback: null,
taskList: [],
isCustomerEdit: false, // 是否可以编辑客户
trendsLayout: [], // 客户表单
dynamicFields: [], // 动态字段
fixedFieldsComponent: [], // 固定字段
operateType: '', // 操作方式，是新增还是编辑
callerName: '', // 主叫号人员名称
calledName: '', // 被叫号人员名称
roomNumber: '', // csp呼叫房间
softPhone: {
curOperate: '', // 呼叫状态
hasSipConnected: false, // 电话连接状态
mediaAvailabled: false, // 音频媒体
webrtcConfig: {}, // 初始化连接webrtc配置
},
imPageNoticeInfo: {}, // 内部聊天页面通知相关数据
iqcPageNoticeInfo: {}, // 内部支持页面通知相关数据
reconnectCallback: null, // 内部支持断网重连回调
reconnectImCallback: null, // IM
callVoiceCallback: null,
callVoiceInfo: {},
goConversation: false, // 通讯录跳转
};
const actions = initGlobalState(initialState);
export default actions;
4、主应用中手动加载微应用的方式：
import { loadMicroApp } from 'qiankun';
let leftMicroApp = null;
方法内部：
leftMicroApp = loadMicroApp({
name: 'crm_core',
entry: '//localhost:9011',
container: '#wrapper__right',
props: {
path: 'customerTabs',
},
});
//组件销毁，调用子应用的 unmount方法
destroyed() {
leftMicroApp.unmount()
},
5、子应用中
1、新建文件：public-path.ts/ public-path. js
/* eslint-disable camelcase */
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
2、main.ts/main.js
import './core/public-path'
// vue3中写法
const __qiankun__ = window.__POWERED_BY_QIANKUN__
__qiankun__ || render()
// vue2中写法
//创建子应用渲染函数
function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
mode: 'history',
routes,
});
instance = new Vue({
router,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
};
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
};3、打包配置，vue.config.js
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`,
filename: 'static/js/[hash:8].bundle.js'
},
},6、微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。
微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
生命周期钩子封装
/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
}
/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount(props) {
}
/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}个人项目中用法：
main.ts
import './core/public-path'
import { lifeCycle, render } from './core/life-cycle'
const { bootstrap, mount, unmount } = lifeCycle()
export { bootstrap, mount, unmount }
const __qiankun__ = window.__POWERED_BY_QIANKUN__
__qiankun__ || render()
life-cycle.ts
...
/**
* 微应用生命周期
*/
const lifeCycle = (): { [key: string]: (props?: qkProps) => Promise<void> } => {
return {
async bootstrap(props) {
console.log(`bootstrap props: ${props}`);
},
async mount(props) {
console.log(`mount props: ${props}`);
if (props) {
// 生成动态路由
const availRoutes = assyAvailRoutes(props.menuLists, 1, "", APP_NAME);
// 扁平化菜单树
const flatMenus = flatMenuTree(props.menuLists);
// 将菜单树、动态路由、扁平菜单树存入全局状态中
store.commit("user/SET_MENUS", { menuLists: props.menuLists, availRoutes, flatMenus });
// 将角色列表存入全局状态中
store.commit("user/SET_ROLES", props.roles);
store.commit("user/SET_USERINFO", props.userInfo);
const routes = selfRoutes.concat(availRoutes);
props.routes = routes;
store.commit("chat/SET_SINGLE_CONFIG_EVO", []);
// 如果开启内部聊天语音通话时获取有没有语音聊天权限
if (matchFuncConfig("INTERNALCHAT_SOFTPHONE_ACTIVE") && store.state.chat.singleConfigEvo.length === 0) {
getSingleMyConfigs();
}
// props.functions.sendOrder({
// message: {
// type: 'typing',
// sendUserId: '',
// groupType: ''
// }
// });
actions.setActions(props);
actions.setGlobalState({
socketCallback: (data: any, extraParams: any) => {
store.commit("chat/SET_SOCKET_MAINAPP_PARAMS", extraParams);
const { namespace } = extraParams;
// 接收到父应用分发的消息，进行处理
if (namespace === "im") {
if (data.type === spm.ON_PING) {
imDispatchMessage({ messageType: cmd.SOCKET_PING });
} else {
imDispatchMessage({
messageType: enumMsg[data.messageType],
message: data.message,
});
}
}
if (namespace === "iqc") {
if (data.type === spm.ON_PING) {
iqcDispatchMessage({ messageType: cmd.SOCKET_PING });
} else {
iqcDispatchMessage({
messageType: enumMsg[data.messageType],
message: data.message,
});
}
}
},
// 断网重连回调
reconnectCallback: () => {
store.commit("internal/SET_RECONNECTED_COUNT");
},
// 断网重连回调
reconnectImCallback: (networkStatus:string) => {
utilHelper.handleDisconnectOrOnreconnected(networkStatus)
console.log('##################执行reconnectImCallback',networkStatus);
},
});
}
await render(props);
},
async unmount() {
// 关闭所有的页面通知实例
const { pageNoticeInstances = {} } = store.state.chat;
const instanceKeys = Object.keys(pageNoticeInstances);
forEach(instanceKeys, (key) => {
const notifyInstance = pageNoticeInstances[key];
notifyInstance.close();
});
console.log("unmount props");
instance.unmount();
instance = null;
router = null;
},
async update(props) {
console.log(`update props: ${props}`);
},
};
};
async function render(props?: qkProps): Promise<void> {
let basePath = "";
// 如果是生产环境
if (process.env.NODE_DEV === "production") {
// 如果是子应用，使用二级域名前缀，反之使用带internalPortal三级域名
basePath = __qiankun__ ? `/${APP_NAME}` : `/internalPortal/${APP_KEY}/`;
} else {
// 如果非生产环境，并且不是子应用，
basePath = __qiankun__ ? `/${APP_NAME}` : "/";
}
// 初始化固定路由
let routes = selfRoutes;
if (__qiankun__) {
// 如果是微应用，则使用主应用传递的路由集合
if (props?.routes) routes = props?.routes;
} else if (store.state.user.accessToken) {
// 如果没有授权令牌
// 请求菜单树，非子应用时不控制权限
const response: AxiosResponse = await axiosSingle(getCompleteTree(), false);
if (response.data.length > 0) {
// 获取当前子应用相关的菜单
let menuLists = response.data[0].children.filter((item: IMenu) =>
includes(["conversation", "organization"], item.i18n)
);
// 递归生成菜单
menuLists = recurseTree(menuLists, "");
if (menuLists.length) {
// 生成动态路由
const availRoutes = assyAvailRoutes(menuLists, 1, "", APP_NAME);
// 扁平化菜单树
const flatMenus = flatMenuTree(menuLists);
// 将菜单树、动态路由、扁平菜单树存入全局状态中
store.commit("user/SET_MENUS", { menuLists, availRoutes, flatMenus });
// 叠加固定路由和动态路由
// routes = selfRoutes.concat(availRoutes)
selfRoutes[0].children = availRoutes;
routes = selfRoutes;
}
}
}
router = createRouter({
history: createMemoryHistory(basePath),
routes,
});
instance = createApp(App).use(router).use(store).use(i18n).use(plugin, { imports: [] });
// 全局注册El组件
components.forEach((item) => {
if (item) instance.use(item);
});
// 全量导入El图标
for (const key in Icons) {
if (Reflect.has(Icons, key)) {
instance.component(key, Icons[key]);
}
}
// 注册按钮授权指令
instance.use(authDirective);
// 注册按钮授权全局方法
instance.config.globalProperties.$vAuth = function (key: any) {
return directiveAuth(this, key);
};
instance.use(draggable);
instance.mount(props?.container ? props.container.querySelector("#appInternalChat") : "#appInternalChat");
// instance.use(VueVirtualScroller);
// instance.component('DynamicScroller', VueVirtualScroller.DynamicScroller)
// 前置路由守卫
router.beforeEach(async (to: any, from: any) => {
if (!__qiankun__) {
// 1 如果不是子应用
if (store.state.user.accessToken) {
if (!store.state.user.userInfo) {
const infoConfig = configRequest(`${GlobalConfig.API_HRMS_URL}/employee/current`, httpMethod.GET);
const response1 = await axiosSingle(infoConfig);
const userInfo = response1.data;
store.commit("user/SET_USERINFO", userInfo);
// 1.1 如果有授权令牌
if (to.path === "/login") {
// 1.1.1 如果访问页面为登录页，则跳转到首页
return "/";
} else if (to.matched.length) {
// 1.1.2 如果有匹配的路由，则进行跳转
return true;
} else {
// 1.1.3 如果找不到匹配路由，则跳转到未授权报错页面
// next({ path: '/403', replace: true })
return false;
}
}
} else if (to.path === "/login" && to.query.code) {
// 1.2 如果没有令牌并跳转到登录页，并有授权码
return true;
} else {
// 如果没有令牌并且没有授权码，则跳转到sso进行登录
signIn();
}
} else if (to.matched.length) {
// 2 如果是子应用，并且有匹配的路由，则进行跳转
return true;
} else {
// 3 如果没有匹配路由，则跳转到未授权报错页面
// next({ path: '/403', replace: true })
return false;
}
});
}
export { lifeCycle, render };
