混合开发模式

微搭在可视化编辑应用的基础上，支持通过代码开发并部署应用的方式，以方便对原有模式开发的应用进行迁移融合。依据应用类型不同，分为 WEB 与小程序两种方式。

WEB 微应用融合

微搭支持创建微应用页面，引入通过代码方式原生开发的页面。原理上采用了微前端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。

小程序分包融合

一个微搭应用可以有一个主模块和多个子模块共同构成，子模块会以小程序分包子包的模式，与主模块共同组成完整的小程序应用，每个主/子模块都可以为低码编辑类型或代码包类型，低码编辑类型指通过微搭平台使用可视化编辑的方式生成的模块，代码包类型则允许用户上传传统开发模式的代码包。

混合开发模式需要明确主子关系，每个模块低码模式认为是低代码编辑应用，代码包认为是原生小程序应用。

当代码包作为主模块时，需保证内容为完整的小程序项目代码，项目结构满足下方系统限制的要求，代码无需进行修改。

当代码包作为子模块时，需保证内容为独立的小程序应用目录，即 miniprogramRoot 目录。整体项目会放置到 /packages/${subapp.name} 路径，因此原有文件引用以及路由跳转中使用绝对路径的部分可能需要进行修正，包内文件的相对路径关系不会改变。整体而言，此处要求最终改造完的代码包为小程序子包模式的代码包，并增加一个app.json 在其中声明包中的页面列表。例如：子包 sub 中的 app.json 内容为

{
  "pages": [
    "pages/index/index",
    "pages/checkbox/index",
    "pages/switch/index",
    "pages/slider/index"
  ]
}

则最终在生成的完整小程序app.json 中会添加配置

{
  "subpackages": [
    {
      "root": "packages/sub",
      "pages": [
        "pages/index/index",
        "pages/checkbox/index",
        "pages/switch/index",
        "pages/slider/index"
      ]
    }
  ]
}

当使用低码编辑的主/子模块时，系统会自动生成相关的代码，无需过度关心引用关系，只需关系应用本身的业务逻辑，当前页面跳转时跳转到主包的页面，还是子包的页面即可。

主子模块交互

微搭应用状态分全局状态与页面级状态，全局状态整个应用共享，页面级状态每个页面独立，因此当主子模块之间需要进行数据交互时，应当使用全局状态进行代理存储。在低代码中，可以通过获取 app 对象，对其上的全局变量获取/赋值，在代码包类型的模块中，可以使用 const { app } = getApp() 的方式获取到 app 对象，从而获取/赋值变量，以及使用数据源等方法。

主模块页面路径为 /pages/${page.id}/index，子模块页面路径为 /packages/${subapp.name}/pages/${page.id}/index，在处理路由跳转时需要明确对应的模板地址。

限制

每个应用包涵 1 个主模块以及不超过 5 个子模块，当主子模块中至少包涵一个低码编辑类型的模块时，可以在微搭平台上进行混合构建。
主模块为代码包类型时，其为完整的小程序应用，解压后根目录需包涵 project.config.json 文件，其中声明小程序应用根目录（miniprogramRoot），若未声明则默认为根目录，根目录下包涵 app.json、app.js、app.wxss 等应用级别文件，同时 packages、common、app、materials、lowcode 为保留目录，当与低码模块共同生成应用时会在此目录下生成低码所需的文件。
子模块为代码包类型时，其须为独立的小程序应用目录，即 miniprogramRoot。解压后根目录包涵 app.json 等应用级别文件，其内容会与低码生成的主模块配置进行合并。
应用级别的低代码、变量管理，只能在主应用中完成，低码编辑类子模块可在编辑器中查看，但无法进行定义声明以及增删改编辑。

混合开发模式

WEB 微应用融合​

接入​

小程序分包融合​

主子模块交互​

限制​

WEB 微应用融合

接入

小程序分包融合

主子模块交互

限制