【詳講】微信小程序分包流程步驟

本文基于微信小程序的官方文檔，對分包的概念以及具體的操作流程進(jìn)行講解。

一、為什么要使用分包？

主要原因就是微信小程序規(guī)定了主包大小不能超過 2M ，但我們隨著開發(fā)的更新迭代，一個小程序往往是大于 2M 的。于是小程序提供了分包的解決方法，將一個完整的的小程序，在打包時分成不同功能或需求的分包，在用戶使用時再加載對應(yīng)的分包。

主包：使用分包后必須有一個主包，用于存放 TabBar 頁面，以及一些公共的資源文件和JS腳本。

分包：從主包上拆分而來的文件，個人建議的的拆分方式：先根據(jù) TabBar 頁面拆分大的模塊，再拆分每個 TabBar內(nèi)具體的小功能模塊，這樣拆分管理起來也更加清晰明了。

目前小程序分包大小有以下限制：

• 整個小程序所有分包大小不超過 20M
• 單個分包/主包大小不能超過 2M

二、使用分包

1、基本配置

我們先看看官方給出的目錄結(jié)構(gòu)和 app.josn 的配置：

• 目錄結(jié)構(gòu)

  ├── app.js
  ├── app.json---------分包配置文件
  ├── app.wxss
  ├── packageA---------分包A
  │   └── pages
  │       ├── cat
  │       └── dog
  ├── packageB---------分包B
  │   └── pages
  │       ├── apple
  │       └── banana
  ├── pages------------主包
  │   ├── index
  │   └── logs
  └── utils
  

• app.json 配置

  {
    "pages":[
      "pages/index",
      "pages/logs"
    ],
    "subpackages": [
      {
        "root": "packageA",
        "pages": [
          "pages/cat",
          "pages/dog"
        ]
      }, {
        "root": "packageB",
        "name": "pack2",
        "pages": [
          "pages/apple",
          "pages/banana"
        ]
      }
    ]
  }
  

  app.json 參數(shù)說明：

  • pages：主包 List ，默認(rèn)以一個路徑為主頁，放置 TabBar 的頁面，放在根目錄下的 pages 文件夾內(nèi)。

  • subpackages：分包 List ，官方的分包是默認(rèn)放在根目錄下的，實際上可以根據(jù)自身需要配置路徑，下文將根據(jù)官方的 demo 展示。

    字段	類型	說明
    root	String	分包根目錄，默認(rèn)是從根目錄開始
    name	String	分包別名，分包預(yù)下載 時可以使用
    pages	StringArray	分包頁面路徑，相對于分包根目錄
    independent	Boolean	分包是否是 獨立分包

2、demo 案例分析

下載 小程序示例（分包加載版）源碼

為了看起來更清晰，我刪除了部分重復(fù)文件，但保留了 demo 本身的目錄結(jié)構(gòu)。看 demo 不難看出無論是分包還是主包，都是放在 page 這個文件夾下面的，這說明分包所在位置并沒有嚴(yán)格的要求，可以根據(jù)自身的需求配置路徑放置。

此外我們還需要注意到，主包和分包的默認(rèn)路徑是從根目錄開始的，分包的路徑是以 root 內(nèi)的設(shè)置的路徑為起始。

3、打包原則

• 聲明 subpackages 后，將按 subpackages 配置路徑進(jìn)行打包，subpackages 配置路徑外的目錄將被打包到主包中。也就是沒指定分包的文件都會被打包到主包。
• 主包也可以有自己的 pages，即最外層的 pages 字段。
• subpackage 的根目錄不能是另外一個 subpackage 內(nèi)的子目錄。也就是不能在分包內(nèi)放置另外一個另外一個分包，兩者必須是平級的關(guān)系。
• tabBar 頁面必須在主包內(nèi)。

4、引用原則

省流：除了分包異步化可以請求不同包的 JS 文件，其他情況下的分包都只能訪問自身的和主包的文件。

• packageA 無法 require packageB JS 文件，但可以 require 主包、packageA 內(nèi)的 JS 文件；使用 分包異步化 時不受此條限制。
• packageA 無法 import packageB 的 template，但可以 require 主包、packageA 內(nèi)的 template。
• packageA 無法使用 packageB 的資源，但可以使用主包、packageA 內(nèi)的資源。

5、低版本兼容

由微信后臺編譯來處理舊版本客戶端的兼容，后臺會編譯兩份代碼包，一份是分包后代碼，另外一份是整包的兼容代碼。 新客戶端用分包，老客戶端還是用的整包，完整包會把各個 subpackage 里面的路徑放到 pages 中。

三、獨立分包

版本支持：微信客戶端 6.7.2，基礎(chǔ)庫 2.3.0 及以上版本開始支持。開發(fā)者工具請使用 1.02.1808300 及以上版本，可 點此下載。

獨立分包顧名思義就是可以獨立于主包和其他分包運行的一種特殊分包。從獨立分包頁面進(jìn)入小程序時無需下載主包，當(dāng)用戶進(jìn)入普通分包或主包頁面的時候才會下載主包資源。

我們在開發(fā)時，可以選擇一些從公眾號進(jìn)入的頁面，或是調(diào)用webview的頁面配置到我們的獨立分包。因為不用下載主包，可以很大程度上提高獨立分包頁面的啟動速度。

一個小程序中可以有多個獨立分包。

1、開啟獨立分包

開發(fā)者通過在app.json的subpackages字段中對應(yīng)的分包配置項中定義independent字段聲明對應(yīng)分包為獨立分包。

{
  "root": "moduleB",
  "pages": [
    "pages/pear",
    "pages/pineapple"
  ],
  "independent": true
}

2、限制

獨立分包屬于分包的一種。普通分包的所有限制都對獨立分包有效。獨立分包中插件、自定義組件的處理方式同普通分包。

此外，使用獨立分包時要注意：

• 除了使用 分包異步化 的 js 文件、自定義組件、插件外，獨立分包不依賴主包和其他分包內(nèi)的內(nèi)容。
• 主包中的 app.wxss 對獨立分包無效，應(yīng)避免在獨立分包頁面中使用 app.wxss 中的樣式，全局樣式不生效。
• App 只能在主包內(nèi)定義，獨立分包中不能定義 App，會造成無法預(yù)期的行為。
• 獨立分包中暫時不支持使用插件。

3、注意事項

（1）關(guān)于 getApp()

獨立分包運行時，App 并不一定被注冊，因此 getApp() 也不一定可以獲得 App 對象：

• 當(dāng)用戶從獨立分包頁面啟動小程序時，主包不存在，因此App也不存在，此時調(diào)用 getApp() 獲取到的是 undefined。 當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁面時，主包才會被下載，App 才會被注冊。
• 當(dāng)用戶是從普通分包或主包內(nèi)頁面跳轉(zhuǎn)到獨立分包頁面時，主包已經(jīng)存在，此時調(diào)用 getApp() 可以獲取到真正的 App。

由于這一限制，開發(fā)者無法通過 App 對象實現(xiàn)獨立分包和小程序其他部分的全局變量共享。

為了在獨立分包中滿足這一需求，基礎(chǔ)庫 2.2.4 版本開始 getApp 支持 [allowDefault] 參數(shù)，在 App 未定義時返回一個默認(rèn)實現(xiàn)。當(dāng)主包加載，App 被注冊時，默認(rèn)實現(xiàn)中定義的屬性會被覆蓋合并到真正的 App 中。

示例代碼：

• 獨立分包中

const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}

• app.js 中

App({
  data: 123,
  other: 'hello'
})
console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

作為獨立分包不依賴主包的情況下，默認(rèn)獨立分包為傳參方，使用 getApp({allowDefault: true}) 方法后若打開主包，則會更新至 App 中。主包打開后便可以使用 getApp() 獲取數(shù)據(jù)。

（2）關(guān)于 App 生命周期

從獨立分包啟動小程序時不會觸發(fā)主包中的 App 的onLaunch 和首次 onShow ，直到用戶第一次從獨立分包的頁面進(jìn)入主包或其他分包頁面的時候才會調(diào)用。

由于獨立分包中無法定義 App，所以無法使用正常頁面中的 onLoad 或是 onShow 等生命周期。獨立分包想要實現(xiàn)小程序生命周期的監(jiān)聽可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 監(jiān)聽。

4、低版本兼容

在低于 6.7.2 版本的微信中運行時，獨立分包視為普通分包處理，不具備獨立運行的特性。

??注意：在兼容模式下，主包中的 app.wxss 可能會對獨立分包中的頁面產(chǎn)生影響，因此應(yīng)避免在獨立分包頁面中使用 app.wxss 中的樣式。

ase/app/app-event/wx.onPageNotFound.html) 監(jiān)聽。

4、低版本兼容

在低于 6.7.2 版本的微信中運行時，獨立分包視為普通分包處理，不具備獨立運行的特性。

??注意：在兼容模式下，主包中的 app.wxss 可能會對獨立分包中的頁面產(chǎn)生影響，因此應(yīng)避免在獨立分包頁面中使用 app.wxss 中的樣式。

簡單來說就是別樣式重名??。文章來源地址http://www.zghlxwxcb.cn/news/detail-447509.html

到了這里，關(guān)于【詳講】微信小程序分包流程步驟的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！