独立分包

# 独立分包

基础库 3.60.2 及以上版本开始支持。开发者工具请使用 2.2.9 及以上版本,可点此下载

  • 独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。

  • 开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度。

  • 一个小程序中可以有多个独立分包。

小游戏不支持独立分包。

# 配置方法

假设小程序目录结构如下:

├── app.js
├── app.json
├── app.css
├── moduleA
│   └── pages
│       ├── history
│       └── search
├── moduleB
│   └── pages
│       ├── counter
│       └── goods
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在app.jsonsubPackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{
  "pages": [
      "pages/index",
      "pages/logs"
   ],
  "subPackages": [
    {
      "root": "moduleA",
      "pages": [
          "pages/history",
          "pages/search"
       ]
    },
    {
      "root": "moduleB",
      "pages": [
          "pages/counter",
          "pages/goods"
       ],
      "independent": true
    }
  ]
}

限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中自定义组件的处理方式同普通分包。

此外,使用独立分包时要注意:

  • 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、template、css、自定义组件等。主包中的app.css对独立分包无效,应避免在独立分包页面中使用app.css中的样式;
  • App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为。

注意事项

(1)关于 getApp

与普通分包不同,独立分包运行时,App并不一定被注册,因此getApp也不一定可以获得App对象:

  • 当用户从独立分包页面启动小程序时,主包是不存在的,那么App也不存在,此时调用getApp获取到的是undefined。 当用户进入普通分包或主包内页面时,主包才会被下载,App才会被注册;
  • 当用户是从普通分包或主包内页面跳转到独立分包页面时,主包已经存在,此时调用 getApp 可以获取到真正的 App 实例。
    由于这一限制,开发者无法通过App方法实现独立分包和小程序其它部分的全局变量共享。

为了在独立分包中满足这一需求,基础库3.60.2版本开始getApp支持[allowDefault]参数,在App未定义时返回一个默认实现。当主包加载,App被注册时,默认实现中定义的属性会被覆盖合并到真正的App中。

代码示例

  • 独立分包中
const app = getApp({allowDefault: true}); // {}
app.data = 456;
app.global = {};
  • app.js 中
App({
    data: 123,
    from: 'swan'
});

console.log(getApp()); // {global: {}, data: 456, from: 'swan'}

(2)关于 App 生命周期

当从独立分包启动小程序时,主包中 App 的onLaunch和首次onShow会在从独立分包页面首次进入主包或其他普通分包页面时调用;
由于独立分包中无法定义 App,小程序生命周期的监听可以使用swan.onAppShowswan.onAppHide完成。App 上的其它事件可以使用swan.onErrorswan.onPageNotFound监听。

低版本兼容:

  • 在低于3.60.2的基础库版本运行时,独立分包视为普通分包处理,不具备独立运行的特性;
  • 在兼容模式下,主包中的 app.css 可能会对独立分包中的页面产生影响,因此应避免在独立分包页面中使用 app.css 中的样式。