NIO Micro Module

开发

<script src="http://localhost:9091/static/js/bundle.js"></script>

旧应用使用

<script src="https://cdn.nio.com/micro-module.js"></script>

// 初始化
// 拉取最新配置
// https://cdn-app-test.nio.com/nio-micro-module/应用名称/config.json?v=hash
// {"模块1":"v1","模块2":"v1"}
window.NIOMicroModule.init({
  name: "应用名称",
  env: "应用环境 test、prod"
},(mountInfo)=>{
  // 这里将返回信息给微模块
  // 微模块问宿主模块要信息
  // 这里开发者自定义
  return {
    router
  }
});

// 使用，加载地址
// https://cdn-app-test.nio.com/nio-micro-module/应用名称/模块名称/20220520.225315.1515/<资源地址(js|css|img)>
window.NIOMicroModule.mount({
  type: "模块名称",
  props: {
    // 模块接受的props
  }
});

微模块开发

// props: mount提供的
// callback: 初始化的回调函数,执行可以获取到宿主环境的内容
export default (props, callback, container) => {
  // react 应用
  return react.render(<App />,container)

  // vue 应用
  return vue.mount(App,container);
}

// 卸载微应用

// vue3
document.querySelector('#nio-micro-container-应用名称').__vue_app__.unmount();

// react18
const fn = (fib) => {
  if(fib && !fib.return){
    const key = Object.keys(fib).find(item=>item.startsWith("__reactFiber"));
    fib = fib[key];        
  }
  while(fib){
      if(fib.elementType && fib.elementType.displayName === "micro_root"){
          fib.elementType.unmount();
          return;
      }else{
          fib = fib.return
      }
  }
}
fn(document.querySelector('#nio-micro-container-应用名称'));