好看的课外书,我欲封天耳根小说,古风君子以泽

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)小程序教程：微信小程序分包加載

分包加載

微信客戶端 6.6.0，基礎(chǔ)庫 1.7.3 及以上版本開始支持。開發(fā)者工具請(qǐng)使用 1.01.1712150 及以上版本，可點(diǎn)此下載
。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、五臺(tái)網(wǎng)絡(luò)推廣、小程序開發(fā)、五臺(tái)網(wǎng)絡(luò)營銷、五臺(tái)企業(yè)策劃、五臺(tái)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供五臺(tái)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

某些情況下，開發(fā)者需要將小程序劃分成不同的子包，在構(gòu)建時(shí)打包成不同的分包，用戶在使用時(shí)按需進(jìn)行加載。

在構(gòu)建小程序分包項(xiàng)目時(shí)，構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包。每個(gè)使用分包小程序必定含有一個(gè)主包。所謂的主包，即放置默認(rèn)啟動(dòng)頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分。

在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁面，當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁面時(shí)，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成后再進(jìn)行展示。

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

整個(gè)小程序所有分包大小不超過 16M
單個(gè)分包/主包大小不能超過 2M

對(duì)小程序進(jìn)行分包，可以優(yōu)化小程序首次啟動(dòng)的下載時(shí)間，以及在多團(tuán)隊(duì)共同開發(fā)時(shí)可以更好的解耦協(xié)作。

具體使用方法請(qǐng)參考：

1、使用分包

配置方法

假設(shè)支持分包的小程序目錄結(jié)構(gòu)如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

開發(fā)者通過在 app.json subpackages 字段聲明項(xiàng)目分包結(jié)構(gòu)：

寫成 subPackages 也支持。

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

subpackages 中，每個(gè)分包的配置有以下幾項(xiàng)：

字段	類型	說明
root	String	分包根目錄
name	String	分包別名，分包預(yù)下載時(shí)可以使用
pages	StringArray	分包頁面路徑，相對(duì)與分包根目錄
independent	Boolean	分包是否是獨(dú)立分包

打包原則

聲明 subpackages 后，將按 subpackages 配置路徑進(jìn)行打包，subpackages 配置路徑外的目錄將被打包到 app（主包）中
app（主包）也可以有自己的 pages（即最外層的 pages 字段）
subpackage 的根目錄不能是另外一個(gè) subpackage 內(nèi)的子目錄
tabBar 頁面必須在 app（主包）內(nèi)

引用原則

packageA 無法 require packageB JS 文件，但可以 require app、自己 package 內(nèi)的 JS 文件
packageA 無法 import packageB 的 template，但可以 require app、自己 package 內(nèi)的 template
packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內(nèi)的資源

低版本兼容

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

示例項(xiàng)目

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

2、獨(dú)立分包

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

獨(dú)立分包是小程序中一種特殊類型的分包，可以獨(dú)立于主包和其他分包運(yùn)行。從獨(dú)立分包中頁面進(jìn)入小程序時(shí)，不需要下載主包。當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁面時(shí)，主包才會(huì)被下載。

開發(fā)者可以按需將某些具有一定功能獨(dú)立性的頁面配置到獨(dú)立分包中。當(dāng)小程序從普通的分包頁面啟動(dòng)時(shí)，需要首先下載主包；而獨(dú)立分包不依賴主包即可運(yùn)行，可以很大程度上提升分包頁面的啟動(dòng)速度。

一個(gè)小程序中可以有多個(gè)獨(dú)立分包。

小游戲不支持獨(dú)立分包。

配置方法

假設(shè)小程序目錄結(jié)構(gòu)如下：

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

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

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

限制

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

此外，使用獨(dú)立分包時(shí)要注意：

獨(dú)立分包中不能依賴主包和其他分包中的內(nèi)容，包括js文件、template、wxss、自定義組件、插件等。主包中的app.wxss對(duì)獨(dú)立分包無效，應(yīng)避免在獨(dú)立分包頁面中使用 app.wxss 中的樣式；
App 只能在主包內(nèi)定義，獨(dú)立分包中不能定義 App，會(huì)造成無法預(yù)期的行為；
獨(dú)立分包中暫時(shí)不支持使用插件。

注意事項(xiàng)

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

與普通分包不同，獨(dú)立分包運(yùn)行時(shí)，App 并不一定被注冊(cè)，因此 getApp() 也不一定可以獲得 App 對(duì)象：

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

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

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

示例代碼：

獨(dú)立分包中

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'}

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

當(dāng)從獨(dú)立分包啟動(dòng)小程序時(shí)，主包中 App 的 onLaunch 和首次 onShow 會(huì)在從獨(dú)立分包頁面首次進(jìn)入主包或其他普通分包頁面時(shí)調(diào)用。

由于獨(dú)立分包中無法定義 App，小程序生命周期的監(jiān)聽可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 監(jiān)聽。

低版本兼容

在低于6.7.2版本的微信中運(yùn)行時(shí)，獨(dú)立分包視為普通分包處理，不具備獨(dú)立運(yùn)行的特性。

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

3、分包預(yù)下載

基礎(chǔ)庫 2.3.0 開始支持，低版本需做兼容處理。開發(fā)者工具請(qǐng)使用 1.02.1808300 及以上版本，可點(diǎn)此下載。

開發(fā)者可以通過配置，在進(jìn)入小程序某個(gè)頁面時(shí)，由框架自動(dòng)預(yù)下載可能需要的分包，提升進(jìn)入后續(xù)分包頁面時(shí)的啟動(dòng)速度。對(duì)于獨(dú)立分包，也可以預(yù)下載主包。

分包預(yù)下載目前只支持通過配置方式使用，暫不支持通過調(diào)用API完成。

vConsole 里有preloadSubpackages開頭的日志信息，可以用來驗(yàn)證預(yù)下載的情況。

配置方法

預(yù)下載分包行為在進(jìn)入某個(gè)頁面時(shí)觸發(fā)，通過在 app.json 增加 preloadRule 配置來控制。

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

preloadRule 中，key 是頁面路徑，value 是進(jìn)入此頁面的預(yù)下載配置，每個(gè)配置有以下幾項(xiàng)：

字段	類型	必填	默認(rèn)值	說明
packages	StringArray	是	無	進(jìn)入頁面后預(yù)下載分包的 `root` 或 `name`。`__APP__` 表示主包。
network	String	否	wifi	在指定網(wǎng)絡(luò)下預(yù)下載，可選值為： `all`: 不限網(wǎng)絡(luò) `wifi`: 僅wifi下預(yù)下載

限制

同一個(gè)分包中的頁面享有共同的預(yù)下載大小限額 2M，限額會(huì)在工具中打包時(shí)校驗(yàn)。

如，頁面 A 和 B 都在同一個(gè)分包中，A 中預(yù)下載總大小 0.5M 的分包，B中最多只能預(yù)下載總大小 1.5M 的分包。

文章名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序分包加載
標(biāo)題網(wǎng)址：http://fisionsoft.com.cn/article/dhpcice.html

新聞中心

分包加載

1、使用分包

配置方法

打包原則

引用原則

低版本兼容

示例項(xiàng)目

2、獨(dú)立分包

配置方法

限制

注意事項(xiàng)

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

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

低版本兼容

3、分包預(yù)下載

配置方法

限制

其他資訊

1、使用分包

3、分包預(yù)下載