千里之行，始于足下。 除夕快乐

微前端

什么是微前端

微前端服务，简单来说就是多个应用项目，直接共享一些资源。

微前端优点

微前端服务，可以独立运行，独立开发，独立部署。它就是一个独立的应用。那为啥不用npm包呢？首先npm包是依赖解析器构建的单元。npm包更新流程相对来说比较繁琐，先更新包，再去相应的应用中一个个更新版本号。

qianku打开方式

qiankun核心设计理念就是简单，解耦与技术栈无关。由于历史原因，我们项目在接入过程中使用两种接入方式，一种是直接使用qiankun接入，另一种是使用@umijs/plugin-qiankun接入。

qiankun

主应用

主应用安装qiankun

npm i qiankun -S

主应用注册子组件

 import {registerMicroApps,  start } from 'qiankun';

//注册
registerMicroApps([
    {
        name: 'subApp',  //子应用项目名
        entry: '//localhost:7000', // url
        container: '#subapp', //挂载的节点
        activeRule: '/',  
    }
]);

主应用加载子应用

//自动启动 
start({
    prefetch: 'all',
    strictStyleIsolation: true, //开启严格的样式隔离模式
})


//手动加载子应用
 this.microApp = loadMicroApp({
            name: 'subApp',
            entry: '//localhost:7000',
            container: '#root',
            props: {
                list: [7, 8, 9, 10]
            }
  })

主子应用通信

通过initGlobalState定义全局通信方法，调用onGlobalStateChange， setGlobalState等进行数据更改。

@umijs/plugin-qiankun

安装 @umijs/plugin-qiankun

npm i @umijs/plugin-qiankun -D

.umirc.ts配置修改

  qiankun: { // 构建起配置子应用
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'subApp',   // 子应用name
          entry: '//localhost:7000',  // html entry,
        }
      sandbox: true,    //是否启用沙箱
      prefetch: 'all'   //是否启用预加载
    }
  }

加载子应用

加载子应用三种方式，具体如下：

// 通过路由方式
// 1.配置路由
  routes: [
    { path: '/subApp', microApp: 'subApp'}, //路由绑定方式
  ]
// 2.跳转
  history.push({
      pathname: '/subApp'
})
  

//3.通过组件化方式
import {MicroApp} from 'umi';

<MicroApp name="subApp"    
          isFull={isFull}
          isFullChange={changeFull} />

主子应用通信

主应用下发数据，子应用接收数据，通过useModel.

// 主应用下发数据
// 主应用 app.st，下发数据

export function useQiankunStateForSlave() {
  const [masterCount, setMasterCount] = useState(TestStore.count);
  TestStore.setCount(masterCount)
  return {
    masterCount,
    setMasterCount
  }
}

// 主应用修改通信数据
import { useModel} from 'umi';

const { masterCount, setMasterCount }=useModel('@@qiankunStateForSlave')

setMasterCount( 修改的值 )

// 子应用接收数据
  const masterProps = useModel('@@qiankunStateFromMaster');
  
  masterProps.isFullChange()
  
  // 主应用下发的数据都包含在内  
  console.log(masterProps)

参考链接

github.com/cherishing/…

qiankun.umijs.org/zh/guide