Skip to content
当前页

qiankun入门

类似于后端的微服务,避免前端变成巨石应用,又有点类似于vue-router这种路由插件,官方的说法是类似于一个jquery,只需要调用几个API就可以完成微前端改造,内部基于single-spa实现css和js隔离,和iframe有什么区别?

qiankun官网

2023微前端技术方案选型

入门Demo

创建主应用

  1. 创建index.html,创建main.js
  2. 在main.js里面引入qiankun,并定义路由
  3. 在index.html里面引入main.js,并写好几个菜单切换按钮,每个菜单的导航路径就是上面的路由,可以直接用history.push进行路由切换

创建purehtml子应用

  1. 创建html, js
  2. js里面给global.purehtml对象添加生命周期函数,一般在mount函数里面进行子页面初始化

然后就可以启动主应用和子应用,然后浏览器访问主应用了,可以用vscode的live server启动应用

single-spa入门

single-spa官网

微前端框架 之 single-spa 从入门到精通

single-spa通过注册子应用,和vue-router一样通过监听hashchange、popstate事件及重写pushState和replaceState实现监听地址栏变动功能,同时加载子应用

single-spa的源码数量并不大,第三方文章中有对其做一个简单实现

核心功能如下

js
// 基座应用需要注册子应用,启用
import { registerApplication, start } from 'single-spa'

// 注册应用
registerApplication({
  // 子应用名称
  name: 'app1',
  // 子应用加载函数,需自己实现加载js的逻辑,或者使用es6的import(),
  // 需要返回一个promise且返回值需要导出bootstarp、mount、unmount函数,子应用可以在mount函数中初始化
  // 提供了window.singleSpaNavigate用于子应用判断自己是否处于微应用状态
  app: loadApp('http://localhost:8081', 'app1'),
  // 当路由满足条件时(返回true),激活(挂载)子应用
  activeWhen: (location) => location.pathname.startsWith('/app1'),
  // 传递给子应用的对象
  customProps: {},
})

// 开启微服务功能、内部只是把启用标志打开而已
start()


// 子应用需导出生命周期函数
export function bootstrap() {}
export function mount() { /**可以在这里初始化子应用 **/ }
export function unmount() {}

// 官方提供了single-spa-vue,用于子应用简化生命周期函数的编写,比如不需要写vue应用的卸载逻辑了
// 基于vue3
import singleSpaVue from 'single-spa-vue'
import {createApp, h} from 'vue'
const vueLifecycle = singleSpaVue({
  createApp,
  appOptions: {
    render: () => h(App),
  },
  handleInstance: (app) => {
    app.use(router)
    app.mount('#mircoApp')
  },
})
export const bootstrap = vueLifecycle.bootstrap
export const mount = vueLifecycle.mount
export const unmount = vueLifecycle.unmount
  1. 创建主应用html, js
  2. 创建子应用js

single-spa和qiankun的对比

前端微服务:single-spa与qiankun的区别

qiankun是基于single-spa开发的,qiankun实现的额外功能有

  1. 自动加载子应用,不像single-spa需要自己写加载逻辑
  2. 隔离子应用的js和css
  3. qiankun可以加载html entry,而single-spa只能加载js entry