小程序开放平台

文档中心
起步
目录
配置小程序
小程序框架
小程序运行时
自定义组件
基础能力
存储
网络
分包
简介
普通分包
独立分包
分包预下载
服务端能力
数据预拉取
按需注入和用时注入
开放能力
性能优化
转发
事件回调
基础库
调试
数据分析
服务端调试

独立分包

开发
>
指南
>
基础能力
>
分包
>
独立分包
>
更新时间:2024-11-28 14:28:44

配置方法

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

├── app.js
├── app.json
├── app.css
├── packageA
│   └── pages
│       ├── pageOne
│       └── pageTwo
├── packageB
│   └── pages
│       ├── pageThree
│       └── pageFour
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在 app.json 的

subpackages
字段中对应的分包配置项中定义
independent
字段声明对应分包为独立分包。

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/pageOne",
        "pages/pageTwo"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/pageThree",
        "pages/pageFour"
      ],
      "independent": true
    }
  ]
}

限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中自定义组件的处理方式同普通分包。 此外,使用独立分包时要注意:

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

注意事项

(1)关于 getApp()

与普通分包不同,独立分包运行时,

App
并不一定被注册,因此
getApp()
也不一定可以获得
App
对象:

  • 当用户从独立分包页面启动小程序时,主包不存在,
    App
    也不存在,此时调用
    getApp()
    获取到的是
    undefined
    。 当用户进入普通分包或主包内页面时,主包才会被下载,
    App
    才会被注册。
  • 当用户是从普通分包或主包内页面跳转到独立分包页面时,主包已经存在,此时调用
    getApp()
    可以获取到真正的
    App
    。 由于这一限制,开发者无法通过
    App
    对象实现独立分包和小程序其他部分的全局变量共享。
  • 在独立分包中
    getApp
    支持
    allowDefault
    参数,在
    App
    未定义时返回一个默认实现。当主包加载,
    App
    被注册时,默认实现中定义的属性会被覆盖合并到真正的
    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'}

(2)关于
App
生命周期

当从独立分包启动小程序时,主包中

App
onLaunch
和首次
onShow
会在从独立分包页面首次进入主包或其他普通分包页面时调用。

由于独立分包中无法定义

App
,小程序生命周期的监听可以使用
xhs.onAppShow
xhs.onAppHide
完成。
App
上的其他事件可以使用
xhs.onError
xhs.onPageNotFound
监听。