微信小程序可开发分包详细讲解，分包解决讲解你好！

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序可开发分包详细讲解微信小程序可开发分包详细讲解，分包解决讲解你好！，分包解决讲解你好！

你好！ 我很高兴您能成为我一生中**个博客的读者。 我希望我写的东西可以帮助您以实际的方式解决您的问题。 想到这里，我的心里充满了喜悦。 好了，废话不多说，这篇博客包含了一些计算机知识以及微信小程序的详细分包教程。 制作的初衷是为了让像我这样想学习微信小程序孩子找到适合自己的讲解。 话不多说，让我们直接进入正题。

！ 注意标题，您可以快速找到您需要的内容。

原因

这也是我学习微信小程序开发过程中遇到的**个头疼的问题。 当你费尽心思设计出自己想要的页面时，只有点击“真机测试”时才发现，根本没有！ ！ ！ 笑死了。 。 。

如果你看到这里，很不幸你也遇到了和我一样的问题，但是对于一个没有很好基础的纯新手来说，有没有前端说服老师呢？

于是我在网上浏览了各种资料，包括看微信开发文档，但我只是感觉很模糊，这到底是一个什么样的规则，这是一个什么样的文档。投诉之后，你还是需要解决问题。 你不能刚开始就放弃。

因为随着页面变得越来越复杂，功能越来越多，代码量必然会增加。 可以说，每个人只要做小程序就应该会遇到。 专业点是提高包之间的内聚性，减少耦合，这也是软件开发结构化设计的基本思想，高内聚低耦合。

补充一个知识点，想要了解更多的宝宝们可以等待我下一个主题的讲解。

那么原因可以总结为：

整个小程序所有子包大小不超过8M

单个子包/主包大小不能超过2M

必须控制模块之间的耦合微信小程序如何开发，做到“高内聚、低耦合”

什么是高内聚、低耦合？ %E9%AB%98%E5%86%85%E8%81%9A%E4%BD%8E%E8%80%A6%E5%90%88/?fr=

解决

查阅资料后，可能的原因是上传小程序有大小限制，但又无法删除，于是就有了替代方案，“分包”

这里有一个新概念：“分包”

刚才提到的限制可以通过分包来实现，一个包的大小可以大致控制在2MB，即。

开始分包

在开始分包之前，让我向您展示一下我原来的目录结构。

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

看了官方文档，我们大致知道它的分包是在同级目录下的。 当然也可以在pages主目录下，与index同级。

然后开始分包。 至于犯错的过程，我就不细说了。 如果你有兴趣，可以自己尝试一下。

构建小程序分包项目时，构建会输出一个或多个功能分包。 每个分包的小程序都必须包含一个主包。 所谓主包就是默认的启动页/页面放置的地方，以及一些所有分包都需要使用公共资源/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确定其为独立分包
    } //上面提到，该包独立于主包加载
  ]
}

详细可以参考博主的图片。 我觉得说的很详细了。

从截图中可以看到，根目录下已经创建了一个名为（该文件夹下的文件将被打包到该子包中）的子包。

然后在这个包中创建一个页面（一般情况下，新创建的页面必须在pages中声明，现在包中的页面不需要在pages中声明，只需要在我们声明的子包中的pages中声明即可） ，它是相对于 root.path 的路径）。

分包——预加载

分包预加载后，我们进入该包所在页面后就可以顺利运行了。 这就是分包预加载的优点。 当然，它不能被滥用。

注意：

黑板又来了

独立分包是分包的一种。 对普通分包的所有限制对于独立分包同样有效。 独立分包中的插件和自定义组件的处理方式与普通分包相同。

独立分包不能依赖主包和其他子包中的内容，包括js文件、wxss、自定义组件、插件等。主包中的app.wxss对于独立分包无效。 应避免在独立分包页面中使用app.wxss中的样式； App只能定义在主包中，不能在独立分包中定义App，这样会导致意想不到的结果。 行为; 独立分包暂时不支持使用插件。踩陷阱

这是给看过这篇文章的人的补充。 下面列出了高级用法，请向下滚动。

如果分包成功，请注意分包目录不能包含以下目录。

相信这是很多新手遇到分包问题后走的**条奇怪的路，哈哈哈。

我把高级方法放在下面了。 如果以后有用的话我会回去学习补充。

关于高级使用

1) 关于()

与普通分包不同，独立分包运行时，App不一定是注册的，所以()不一定能获取到App对象：

当用户从独立分包页面启动小程序时，主包不存在，App也不存在。 此时调用()就得到了。 当用户进入普通子包或主包中的页面时，会下载主包并注册App。

当用户从普通的子包或者主包中的页面跳转到独立的子包页面时，主包已经存在。 这时候调用()就可以获取到真正的App了。

由于这个限制，开发无法通过App对象实现小程序其他部分的独立分包和全局变量共享。

为了满足独立分包中的这一需求，基础库版本2.2.4开始支持[]参数，当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之和。

由于独立分包中无法定义App，因此可以使用wx.、wx.来完成小程序生命周期的监控。 App上的其他事件可以使用wx.、wx.

非常感谢您阅读本文。 这是我的**个博客。 如果有任何问题，请给我您的建议。 你们的支持是我继续创作的动力。

惊人的！ ！ ！

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等