跳到主要内容

混合开发模式

微搭在可视化编辑应用的基础上,支持了一种通过代码开发并部署应用的方式,以方便对原有模式开发的小程序进行平滑迁移。

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

使用方法#

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

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

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