微搭低代碼「分模塊混合開發」能力介紹

微搭低代碼已上線 「分模塊混合開發」 能力。

用戶可以在可視化編輯應用的基礎上，通過代碼開發並部署應用的方式享受更加完整的一站式開發體驗。

下文將詳細介紹分模塊混合開發的使用場景和使用方法。

應用場景

應用場景1：多團隊合作開發

當開發一個大型項目時，往往並非一個主開發團隊可以單獨開發完成的，大型項目的協作場景決定了需要 多團隊協同開發的模式。而多團隊協同開發一個項目時就會遇到各種各樣的問題，如果處理不好，會造成開發效率低、進度延後等問題，是項目的一大風險點。

應用場景2：低代碼開發與傳統編碼結合開發

一部分微搭用戶並非從零開始開發，則會遇到存量應用遷移的問題。有時因爲時間原因，難以把應用所有內容都進行低碼化遷移。

解決方案：分模塊混合開發

針對以上痛點，我們可以利用分模塊混合開發來解決。
騰訊雲微搭低代碼在可視化編輯應用的基礎上，提供了一種通過代碼開發並部署應用的方式。它具有以下優點：

• 一個應用可拆分爲主模塊和多個子模塊，分模塊進行開發；
• 模塊間各自解耦、相對獨立；
• 每個模塊支持 【低代碼開發】和【上傳代碼包】 兩種開發模式；
• 開發完成後，由微搭平臺完成合並打包發佈，整個過程方便省事。

基本概念：

• 應用主模塊：每個應用程序必定含有唯一一個應用主模塊。與子模塊相比，主模塊具有應用級配置。
• 應用子模塊：每個應用可含有 N 個子模塊，而如何進行拆分則是根據開發者的配置進行劃分。
• 低代碼開發模式：通過微搭低代碼進行可視化開發。
• 上傳代碼包模式：允許用戶上傳傳統開發模式的代碼包。

注意：目前僅支持對小程序進行混合開發。開始體驗混合開發

使用方法

使用分模塊混合開發需要先明確主子關係，每個模塊低碼模式認爲是低代碼編輯應用，代碼包認爲是原生小程序應用。

• 代碼包作爲主模塊：需保證內容爲完整的小程序項目代碼，項目結構滿足下方系統限制的要求，在 app.js 的 onLaunch 函數中掛載 weda app 對象（添加代碼，this.app = wedaApp）,掛載完成後，子包和其他模塊可以通過const { app } = getApp() 的方式獲取到 weda app 對象。
• 代碼包作爲子模塊：需保證內容爲獨立的小程序應用目錄，即 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 等應用級別文件，其內容會與低碼生成的主模塊配置進行合併。
• 應用級別的低代碼、變量管理，只能在主應用中完成，低碼編輯類子模塊可在編輯器中查看，但無法進行定義聲明以及增刪改編輯。