微前端-qiankun上手

---

前言：为什么选择qiankun

为什么要使用乾坤？

• 与传统的iframe相比优势如何
• 与传统的html条状相比优势如何
• 如何体现乾坤的优势

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、乾坤实现原理

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

npm i qiankun

---

1.主程序

注册子应用

import {createApp,start} from "vue"
import {registerMicroApps} from "qiankun"
import App from "./app.vue"
createApp(App).mount("#app")

//...其他代码

//注册微应用
registerMicroApps([
	{
		entry:"//localhost://8081",
		name:"micro-1",
		container:"#micro-1",
		activeRule:"/micro-1"
	}
	...//其他子应用
])

start() //启动qiankun

手动加载子应用

如果需要子应用不是通过activeRule进行跳转，可以使用loadMicroApp()

import {loadMicroApp} from "qiankun"
//...其他代码
loadMicroApp({
	entry:"//localhost:8082",
	container:"#micro-2"
	name:"micro-2"
})

2.微应用

(1). 配置webpack打包输出

除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，为微应用需要做一些配置

vue.config.js

const {packageName} from "./package.json"
module.exports={
	//...其他代码
	configureWebpack:{
		output:{
			library:`${packageName}-[name]`,
			target:'umd',
			jsonpFunction:`webpackJsonp_${packageName}`
		}
	}
}

(2). 抛出生命周期

main.js

bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap

export function bootstrap(){
	//...进行一些初始化操作，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
}

---

mount当微应用挂载到主应用上时触发，可以通过props参数与主应用进行数据交互

export function mount(props){}

---

unmount当离开微应用时触发

export function unmount(props){}

---

update当微应用被loadMicroApp调起时触发

export function update(props){}

(3). 引入publicPath配置

为什么要引入此配置:主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。

---

新增public-path.js文件

//public-path.js
if(window.__POWERED_BY_QIANKUN__){
	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

---

修改history router的base

//router.js

//vue-router2.0
new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'history',
    routes,
  });

api

1 主应用api

registerMicroApps:注册微应用

import {registerMicroApps} from "qiangkun"
//注册子应用
registerMicroApps(apps,lifeCycles)

//全局微应用生命周期
const lifeCycles={
	beforeLoad(app){},
	beforeLoad:[(app)=>{},(app)=>{}],//可以是多个方法，顺序调用
	beforeMount(app){},
	afterMount(app){},
	beforeUnmount(app){},
	afterUnmount(app){},
}

---

start:启动微服务

import {start} from "qiankun"
start(options);

options

prefetch- 可选，是否开启预加载，默认为 true。

• 配置为 true 则会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源
• 配置为 ‘all’ 则主应用 start 后即开始预加载所有微应用静态资源
• 配置为 string[] 则会在第一个微应用 mounted 后开始加载数组内的微应用资源
• 配置为 function 则可完全自定义应用的资源加载时机 (首屏应用及次屏应用)

sandbox 是否开启沙箱，默认为 true

• 默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。

---

setDefaultMountApp:设置默认挂载的微应用

import {setDefaultMountApp} from "qiankun"

setDefaultMountApp(appLink);

const appLink="//localhost:8001" //entry 为//localhost:8001的微应用

runAfterFirstMounted

---

手动加载微应用

loadMicroApp

import {loadMicroApp} from "qiangkun"

prefetchApps

2 微应用api

---

3 数据交互

initGlobalState

//主应用
import {initGlobalState} from "qiankun"
const defaultState={};//初始数据
const actions:MicroAppStateActions=initGlobalState({defaultState})

//按一级属性设置全局状态，微应用中只能修改已存在的一级属性
actions.setGlobalState({property:'changed'})

actions.onGlobalStateChange((state,prev)=>{
	//通过setGlobalState 使 globalState 发生改变时触发
})

//移除当前应用的状态监听，微应用 umount 时会默认调用
actions.offGlobalStateChange()

微应用通过mount update unmount 等生命周期钩子中的props对象，可以访问到setGlobalState等方法，实现主、微应用的数据通讯

4 异常捕获

addGlobalUncaughtErrorHandler
removeGlobalUncaughtErrorHandler

import { addGlobalUncaughtErrorHandler,removeGlobalUncaughtErrorHandler  } from 'qiankun';

//新增全局异常捕获
addGlobalUncaughtErrorHandler((event) => console.log(event));
//移除全局异常捕获
removeGlobalUncaughtErrorHandler(handler);