乾坤微服务的使用

最新推荐文章于 2025-04-24 17:20:03 发布

原创

最新推荐文章于 2025-04-24 17:20:03 发布

· 1.7k 阅读

10 ·

版权

文章标签：

#微服务 #前端 #乾坤

前言：

在这里整理下用乾坤来开发微服务的一些资料。

使用好处：

使用乾坤可以实现什么效果呢？众所周知，前端的框架五花八门，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: '', // 被叫号人员