MorJS 小程序形態(tài)一體化 實(shí)現(xiàn)方案

為了幫助大家更好的理解一體化方案的邏輯，這里會(huì)通過一些示例性的代碼來解釋下一體化背后的實(shí)現(xiàn)思路，實(shí)際的實(shí)現(xiàn)代碼會(huì)復(fù)雜很多，有興趣的同學(xué)可以直接看 MorJS 源碼。

入口配置說明?

不同形態(tài)的入口文件可通過配置 compileType 來指定：

• miniprogram: 以小程序的方式編譯, 入口配置文件為 app.json
• plugin: 以插件的方式編譯, 入口配置文件為 plugin.json
• subpackage: 以分包的方式編譯, 入口配置文件為 subpackage.json

有關(guān) MorJS 配置文件說明可參見文檔：MorJS 基礎(chǔ) - 配置

入口文件配置示例如下：

/* 配置示例 */

// 小程序 app.json 配置示例
// 詳細(xì)配置可參見微信小程序或支付寶小程序 app.json 配置
{
  "pages": [
    "pages/todos/todos",
    "pages/add-todo/add-todo"
  ],
  // subpackages 或 subPackages 均可
  "subPackages": [
    {
      "root": "my",
      "pages": [
        "pages/profile/profile"
      ]
    }
  ]
}

// 小程序插件 plugin.json 配置示例
// 詳細(xì)配置可參見微信小程序或支付寶小程序 plugin.json 配置
{
  "publicComponents": {
    "list": "components/list/list"
  },
  "publicPages": {
    "hello-page": "pages/index/index"
  },
  "pages": [
    "pages/index/index",
    "pages/another/index"
  ],
  // 插件導(dǎo)出的模塊文件
  "main": "index.js"
}

// 小程序分包 subpackage.json 配置示例
// 配置方式同 app.json 中的 subpackages 的單個(gè)分包配置方式一致
{
  // type 字段為 mor 獨(dú)有, 用于標(biāo)識(shí)該分包為 "subpackage" 或 "main"
  // 區(qū)別是: 集成時(shí) "subpackage" 類型的分包會(huì)被自動(dòng)合并到 app.json 的 subpackages 字段中
  //              "main" 類型的分包會(huì)被自動(dòng)合并到 app.json 的 pages 字段中 (即: 合并至主包)
  "type": "subpackage",
  // root 字段將影響集成時(shí)分包產(chǎn)物合并至宿主小程序時(shí)的根目錄
  "root": "my",
  // 注意: 編譯分包以 pages 作為實(shí)際路徑進(jìn)行解析
  "pages": [
    "pages/profile/profile"
  ]
}

默認(rèn)情況下不同 compileType 對應(yīng)的入口配置文件會(huì)直接從 srcPath 和 srcPaths 所指定的源碼目錄中直接載入。

如需要定制入口配置文件的路徑可通過 customEntries 配置 來自定義。

差異抹平思路?

多形態(tài)下的 getApp 調(diào)用和 App 生命周期抹平?

通過在小程序插件和小程序分包模式下增加 app.js 入口文件的支持，并模擬 App 生命周期調(diào)用和為所有的頁面和組件注入 getApp 方法來實(shí)現(xiàn)，具體可參見下圖示例：

多形態(tài)下的全局樣式支持（如 app.acss 或 app.wxss）?

小程序編譯時(shí)通過自動(dòng)將全局樣式文件（app.acss 或 app.wxss 等）注入到每個(gè)頁面和組件的樣式文件中作為引用來實(shí)現(xiàn)對全局樣式的兼容，具體可參見下圖示例：

NPM 組件庫支持差異抹平?

基于 MorJS 本身提供的 bundle 模式，結(jié)合 多端組件庫規(guī)范 和 JS 依賴庫規(guī)范 來自動(dòng)在編譯的過程中，自動(dòng)將小程序、小程序插件、小程序分包的 JS 依賴統(tǒng)一打包并將使用到的組件庫自動(dòng)提取到 npm_components 文件夾來規(guī)避不同形態(tài)下的依賴問題以及不同小程序平臺(tái)本身的 NPM 支持差異問題，編譯流程如下：