微信小程序开发-分包详细讲解

微信小程序可开发分包详细讲解

小程序上传限制，分包解决讲解

你好！很高兴你能够是我人生中第一篇博客的读者，希望我写的东西能够切身实际的去帮助你解决问题，想到这些，我心里就充满了喜悦，好了废话不多说，这篇博客包括了部分的计算机知识和微信小程序详细分包的教程，做它的初衷就是为了让和我一样想学习微信小程序的童孩能够找到一个适合自己的讲解，话不多说，我们直接切入正题。
！注意看标题，可以急速找到你们需要的内容。

原因

这也是我在学习微信小程序开发的过程中遇到的第一个让我头疼的问题，当你辛辛苦苦的设计出了你想要的页面，你点击“真机测试”时你才发现，根本不行！！！笑死。。。

如果看到这里很不幸你跟我遇到了一样的问题，但是对于一个没有很好的基础，纯小白的人来说，前端劝退师呀有木有。
于是我上网翻阅了各种资料，包括查看了微信开发者文档，但是我就是感觉模糊不已，这TM是个什么规矩，还有这是什么T**的文档。抱怨完了，还是要解决问题的，总不能才入门就放弃吧
因为随着页面的复杂化和功能的增加，代码量不可避免的增多了，可以说大家只要是做小程序也应该都能遇到，说专业点就是为了提高包之间的内聚性，降低耦合，这也是软件开发结构化设计的基本思想，高内聚，低耦合。
补充一个知识点，想深入了解的宝宝可以等我下一篇专题的讲解。

所以原因可以总结为:
整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M
模块化之间要控制耦合实现“高内聚，低耦合”

什么是高内聚，低耦合？https://baike.baidu.com/item/%E9%AB%98%E5%86%85%E8%81%9A%E4%BD%8E%E8%80%A6%E5%90%88/5227009?fr=aladdin

解决

通过查阅资料后大概原因是小程序上传有大小限制，但是咱么不可能删除对不对，所以就有了替代的解决方法，“分包”
这里有一个新的概念：“分包”
通过分包就可以实现刚才提到的限制，大致可以控制一个包的大小为2MB，也就是2048KB。

开始分包

在开始分包前先给你们看一下我的原目录结构

这里是微信官方文档的分包目录结构

看了官方文档后我们大概知道了它的分包处于同级目录，当然也可以处于pages那个主目录下面，也就是和index同级。
然后开始分包，至于错误踩坑的过程我就不细讲了，你要感兴趣可以自己去试试
在构建小程序分包项目时，构建会输出一个或多个功能的分包，其中每个分包小程序必定含有一个主包，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本，而分包则是根据开发者的配置进行划分
在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

根据微信官方文档的讲解，我们可以这样去设置我们的分包目录，下面内容直接可用

普通分包

"subpackages": [ //声明分包结构
    {
      "root": "pages/componentA/", //root指分包根目录
      "name": "pack2", //分包别名，一般情况可以不用
      "pages": [
        "pages/prepare1/prepare1", //分包页面路径即pages目录下的文件夹和文件
        "pages/prepare2/prepare2",//pages//文件夹名//prepare.wxml
        "pages/prepare3/prepare3",//这里千万别打后缀，他自己会识别，
        "pages/prepare4/prepare4" //这样写方便小白理解，懂的跳过
                                  
      ]
    }
  ],//敲小黑板了，记得用的时候把注释删了，因为是app.json文件，所以不能有注释

普通分包补充：
该分包是 /pages/ 主目录下的分包，所以可用于数据量小的分包。
分包后的效果

非主目录下分包

原理代码相同，修改根目录文件路径，小白看，懂的下滑

"root": "componentA"

最重要的来的

独立分包

先讲解一下
独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。
注意：一个小程序中可以有多个独立分包。

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",  //划分与主包同级
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true //这里是布尔值，所以true确定其为独立分包
    } //上面提到，该包独立于主包加载
  ]
}

具体可以以参照以为博主的图，我觉得讲的挺详细

通过截图可以看出来，根目录创建了一个名为shopping的分包（shopping这个文件夹里面的文件都会打包到分包里面去）

然后在shopping这个包里面创建了一个页面（一般新建的页面都要在pages里面声明，现在包里面的页面不需要在pages里面声明，只需要在我们声明的分包里面的pages里面声明，是相对root路径的路径）。

分包–预加载

当分包预加载以后，我们进入这个包所在的页面后就会流畅运行了，这也就是分包预加载的优点了，当然，也是不能滥用的。

注意：
小黑板又来了
独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

1. 独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
2. App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
3. 独立分包中暂时不支持使用插件。

踩坑

这里作为看到这里的小伙伴的补充，进阶使用放在下面，请下滑
如果你已经成功分包了，注意一点，分包目录不能含有 tabBar 下的的目录，


相信这个是很多新手遇到分包问题后的第一条怪路哈哈哈。

进阶使用的方法我放在了下面，后续如果有用到我回去研究和补充

关于进阶使用

1）关于 getApp()
与普通分包不同，独立分包运行时，App 并不一定被注册，因此 getApp() 也不一定可以获得 App 对象：

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

为了在独立分包中满足这一需求，基础库 2.2.4 版本开始 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，小程序生命周期的监听可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 监听。

很感谢你能够看到这里，这是我的第一篇博客，如果有什么地方出现了问题还请大家多多指教，你们的支持是我继续创作下去的动力
奥利给！！！