微信小程序分包

分包介绍

一般的，一个微信小程序要求是不超出2M大小，使用分包可以超出这个限制，比如当我们的小程序有比较多的静态资源，比如图片什么的时候，功能比较多的时候

使用分包可以帮助我们解决这个问题

分包

注意点：

1. 分包分为主包和分包，主包放置默认启动页面,TabBar页面；公共资源，公共js脚本
2. 分包由开发者进行划分
3. 小程序启动时，只下载加载主包内容
4. 当用户进入分包的页面的时候，才下载分包进行加载
5. 主包，分包都不能超出2M
6. 整个程序的主包+分包不能超出12M
7. （如果把主包设置的比较小，那么按照启动只加载主包的原理，那么启动速度会快一些）

使用分包

我们一般创建一个小程序，会把页面与相关的文件写在pages目录下

分包的目录结构中，也就是多了分包的包目录

分包配置

有了分包的目录后，要在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中，分包的关键字段是subpackages，是一个json数组，内部元素配置了分包的root，和分包包含的pages

还可以配置的别的相关字段：

打包和引用

先来看一下官方的demo：

目录结构如下

app.json中配置如下：

再看官网的原则，需要注意的点：

1. tabbar页面必须在主包中
2. 分包的root不能和别的路径重复
3. 分包只能引用和使用自己和主包的资源，不能访问另一个分包的资源
   

独立分包

按照官网的介绍，理解的是，其他和普通分包一样，特点是：

1. 普通分包的下载是需要在主包下载之后的；但是独立分包可以不依赖于主包自己加载，当用户进入主包页面的时候，再下载主包
2. 普通分包可以访问主包和自己的资源；独立分包不能访问主包的资源（它自己需要自己的资源是完整的，才能独立运行）
3. app.js只能定义在主包中，独立主包中不能定义app.js
4. 独立分包暂时不支持使用插件

getApp()

一般的，程序加载后getApp才能获取值；独立分包独立运行时，主包未加载，就可能获取不到app

微信提供的解决方式是，先给一个假的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'}

生命周期

独立分包运行的时候，不会调用主包的 onLaunch 和 onShow 方法；当从独立分包跳转到主包或者普通分包的时候，才会执行

由于独立分包中无法定义 App，小程序生命周期的监听可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 监听。