机器数据分析平台

  • 机器数据分析平台 > 应用开发者文档 > APP开发手册 > XML 引用 > xml参考手册 >micro-application

    micro-application

    最近更新时间:2022-03-22 22:07:57

    micro-application {docsify-ignore-all}

    <micro-application> 元素支持用户开发一个完整的微前端应用作为App视图页面,
    子应用接入流程与 qiankun 一致。

    <custom-component> 的区别是 <custom-component> 通常作为一个组件,
    是视图页面的一部分,只支持单个 js 文件引入,而 <micro-application> 通常作为一个完整的视图页面应用来开发。

    属性

    属性 说明 required 默认值
    src 主 js 文件路径,其值是相对于 appserver/static/js 目录的路径。 true -

    子元素

    子元素 说明
    <dependencies> 在引入主 js 前所依赖的前置 js、css 等资源

    文件路径

    • js 引入当前 app 下的 appserver/static/js 文件
    • css 引入当前 app 下的 appserver/static/css 文件

    例子

    <micro-application src="main.js">
      <dependencies>
        <scripts>
          <source>vender.js</source>
          <source>common.js</source>
          <source>0.js</source>
          <source>1.js</source>
        </scripts>
        <styles>
          <source>main.css</source>
          <source>common.css</source>
        </styles>
      </dependencies>
    </micro-application>
    

    注意

    • 在主 js 文件中需要导出 bootstrapmountunmount 三个生命周期钩子,以供主应用在适当的时机调用。
    • 主 js 导出的模块需要挂载到 window 上,如果是 webpack 即需要把 output.target 设置为 window
    • 如果子应用对 js 进行分包,需要配置其它 js chunk 的加载路径,webpack 为 __webpack_public_path__
    • 子应用使用 webpack4 时需要配置 output.jsonpFunction 为唯一值
    • 使用 create-pandora-app 创建子应用时模版内会内置上述配置,无需额外配置
    以上内容是否对您有帮助?
  • Qvm free helper
    Close