qiankun.js基本用法

Vue3+TS版qiankun子应用

1.1 文件夹src下增加public-path.ts文件；内容：

1.2 修改main.ts

1.2.1 修改src/main.ts文件引入public-path.js

1.2.2 修改src/main.ts的启动程序，并导出qiankun对象生命周期

1. 接入统一门户，需在mount方法中增加 w.rmLoading && w.rmLoading(); 关闭移除loading；
2. 

1.2.3 文件夹src下增加 useCurrentInstance.ts 文件；内容：

1.2.4 修改src/App.vue文件（按项目实际代码参照下图调整）；内容：

Vue2的qiankun子应用接入

1、src文件夹下增加文件

1)  public-path.js

设置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

const { name } = require("../package"); if (window.__POWERED_BY_QIANKUN__) {   // eslint-disable-next-line no-undef   let qiankunPath = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;   // 子系统包名   let childrenPackage = name;   const isContain = new RegExp(childrenPackage, "gi");   // 部署父子系统为同级目录需要校验，加载地址是否包含子系统包名[不包含需进行增加]   if (!isContain.test(qiankunPath)) {     // 生产环境才进行重新赋值     if (process.env.NODE_ENV === "production") {       const array = qiankunPath.split("/");       let splitStr = "";       if (array[array.length - 1] !== "/") {         splitStr = "/";       }       qiankunPath = [qiankunPath, splitStr, `${childrenPackage}/`].join("");     }   }   __webpack_public_path__ = qiankunPath; }

2) 增加\common\config\index.js

设置

let tmpIp = "10.201.200.205:8080"; let htTmpIp = "10.201.200.205:9600"; // 开发环境 if (window.location.host == "10.201.210.81:8888") {   tmpIp = "10.201.210.81:8088";   htTmpIp = "10.201.210.205:9600"; } // 测试环境 if (window.location.host == "10.201.220.63:9100") {   tmpIp = "10.201.220.65:8080";   htTmpIp = "10.201.220.65:9600"; } // 验收环境 // if (window.location.hostname == '10.201.200.???') tmpIp = '10.201.200.205';    const config = {   microName: "content", // 当前当微服务的名称   key: "fh23r89rhe2ur87riwr3e2", // des秘钥   modaltobody: false, // 统一弹窗模式   toFatherIp: tmpIp,   toFatherHtIp: htTmpIp,   host: "" };    export default config;

2、修改main.js配置

1) 引入文件：

设置

import "./public-path";

2) 修改new Vue启动配置

设置

1 2 3 4 5 6 7 8 9 10 11 12 13 14

let instance = null; function render(props = {}) {   const { container } = props;   instance = new Vue({     router,     store,     render: (h) => h(App)   }).$mount(container ? container.querySelector("#app") : "#app"); }    // 独立运行时 if (!window.__POWERED_BY_QIANKUN__) {   render(); }

3) 增加暴露对外方法

设置

export async function bootstrap() {   // console.log("[vue] vue app bootstraped"); } export async function mount(props) {   // console.log("[vue] props from main framework", props);   const getStyle = window.getComputedStyle;   // @ts-ignore   window.getComputedStyle = (element, property) => {     if (!element || element.nodeType === 9) return {};     return getStyle(element, property);   };   // console.log(window.getComputedStyle);   Vue.prototype.parentProps = props;   render(props); } export async function unmount() {   instance.$destroy();   instance.$el.innerHTML = "";   instance = null; }

4) 增加 findAllrouter方法

设置

const findAllrouter = (a, tf) => {   const _children = a.children;   if (_children) {     for (var index = 0; index <= _children.length - 1; index++) {       const item = _children[index];       const itemChildren = item.children;       if (itemChildren) {         if (tf.indexOf(item.path) != -1) {           return true;         }         if (findAllrouter(item)) {           return true;         }       } else {         if (tf.indexOf(item.path) != -1) {           return true;         }       }     }   } };

5) 修改 router.beforeEach

设置

// 每次路由跳转前工作 router.beforeEach((to, from, next) => {   let tf = to.fullPath;   // 设置允许子应用切换路由的条件，   // 1、必须当前即将打开的页面是当前子系统   // 2、当前存在该路由的，不然就报错   if (window.qiankunMicroName == config.microName) {     // 只取name=home的数据     let tmpArray = Array.from(router.options.routes).filter(item => {       return item.name == "home";     });     let tmp = findAllrouter(tmpArray[0], tf);     if (tmp) {       next();     }   } else if (!window.qiankunMicroName) {     next();   } });

3、修改App.vue

1) 在export default 前增加findAllrouter方法

设置

const findAllrouter = (a, tabId) => {   if (a.children) {     for (var index = 0; index <= a.children.length - 1; index++) {       if (a.children[index].children) {         if (a.children[index].componentName == tabId) {           return a.children[index].name         }         if (findAllrouter(a.children[index])) {           return a.children[index].name         }       } else {         if (a.children[index].componentName == tabId) {           return a.children[index].name         }       }     }   } }

2)  在 methods 中增加 init 方法

设置

init() {      if (window.__POWERED_BY_QIANKUN__) {        this.parentProps.onGlobalStateChange((state) => {          console.log('__POWERED_BY_QIANKUN__', state)          // 目的是为了解决上次遗留的不保存组件，不然一直会有一个组件不能被保存状态；          // this.CHANGE_EXCLUDECP()          const stateName = 'micro-' + this.config.microName          const mainPushInfo = state[stateName]          console.log('mainPushInfo-----', mainPushInfo)          // 用户登录信息/其他信息          if (mainPushInfo.loginInfo) {            this.SET_LOGININFO({              resList: mainPushInfo.loginInfo.resList,              token: mainPushInfo.loginInfo.token,              userInfo: mainPushInfo.loginInfo.userInfo            })          }          // 当前路由          if (mainPushInfo.nowRouteInfo) {            const nowRouteInfo = mainPushInfo.nowRouteInfo            if (nowRouteInfo.params) {              this.config.host = nowRouteInfo.params.host || ''            }          }          // 需要关闭的菜单          if (state[stateName].excludeCp) {            const excludeCpArr = state[stateName].excludeCp.split('/')            const tabId = excludeCpArr[excludeCpArr.length - 1]            let tmpArr = Array.from(router.options.routes).filter((item) => {              return item.name == 'home'            })            let tmp = findAllrouter(tmpArr[0], tabId)            // this.CHANGE_EXCLUDECP([tmp])          }        }, true)      }    }

3)  在 mounted 执行 init

4、写缓存数据

设置

import config from "@/common/config";    // 设置store时的名字 const setStoreName = (name) => {   if (window.__POWERED_BY_QIANKUN__) {     return config.microName ? `${config.microName}-${name}` : name;   } else {     return name;   } };     // window.sessionStorage.setItem(setStoreName(name), `content`);