混合开发模式

微应用#

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

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

接入#

接入需要提供一个可访问的 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>

在 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），微前端应用拥有 bootstrap、mount、unmout 三个生命周期，在微前端页面加载/卸载时会被调用，如示例代码，在加载时会修改更新 dom，显示 Hello, page mount render。

与微搭应用交互#

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