跳到主要内容

混合开发模式

微应用#

微搭支持创建微应用页面,引入通过代码方式原生开发的页面。原理上采用了微前端single-spa 的方式,引入 purehtml 页面,屏蔽具体的技术栈差异。

接入前需要保证 文档 以及 文档中的资源能够正常的通过浏览器 fetch api 加载(资源需要支持跨域加载),同时,文档中的图片,js 等资源建议使用带有 host 的完整路径(例如:https://a.com/js/main.js),若为相对路径需要保证最终应用托管的 host 下可以可以索引到对应资源(注意:是应用托管的 host 而非微应用文档托管的 host)。

接入#

  1. 接入需要提供一个可访问的 html 文档,文档中为需要额外声明script,并export 对应的 lifecycle:

    <!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Purehtml Example</title>  </head>  <body>    <div>Purehtml Example</div>  </body>  <script src="https://a.com/js/entry.js" entry></script></html>
  2. 在 entry js 中声明 lifecycle

    ((global) => {  // global.${pageid}  global["purehtml"] = {    /**     * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时 会直接调用 mount 钩子,不会再重复触发 bootstrap。     * 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。     */    bootstrap: () => {      console.log("purehtml bootstrap");      return Promise.resolve();    },    /**     * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法     */    mount: () => {      console.log("purehtml mount");      return render();    },    /**     * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例     */    unmount: () => {      console.log("purehtml unmount");      return Promise.resolve();    },  };})(window);
    const render = () => {  document.querySelector("#purehtml-container").innerHTML =    "Hello, page mount render";  return Promise.resolve();};

    entry 没有任何魔法,关键点在于需要在全局 window 上挂载注册微前端应用,其中 purehtml 为页面的 id(微搭应用中添加微前端页面时生成的页面 id),微前端应用拥有 bootstrapmountunmout 三个生命周期,在微前端页面加载/卸载时会被调用,如示例代码,在加载时会修改更新 dom,显示 Hello, page mount render

与微搭应用交互#

微前端应用可能需要和微搭应用产生数据或逻辑交互,例如进行页面跳转等,可以使用 window.app 获取到微搭的 app 对象,从而调用对应的系统方法,完成功能.