【你踩的坑这里都有】微信小程序分包指南
文章目录
- 一 基础操作
- 二 路径重合问题
- 三 tabbar 必须在主包中
- 四 主包大小问题和公共资源读取问题
- 五 wepy子包跳转问题
一 基础操作
如果你的项目刚刚开始,恭喜你选择了一条最简单的路,如下为微信官方示例,将项目目录安排如下,并在 app.json subpackages
字段中做对应声明即可。
其中pages数组中的页面为主包中的页面,subpackages中的每一项对应一个分包。
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
{"pages":["pages/index","pages/logs"],"subpackages": [{"root": "packageA","pages": ["pages/cat","pages/dog"]}, {"root": "packageB","name": "pack2","pages": ["pages/apple","pages/banana"]}]
}
但在实际操作中,大部分人并不会在开发初始就合理规划目录,为分包做好准备。
而是在开发过程中,发现项目"超重"了,无法进行正常发布,才开始了解分包。
项目目录千奇百怪,照搬官方文档遇到各种问题。
这种情况下,你就更需要这篇文章了。
二 路径重合问题
上面讲到,首先pages数组中的页面为主包中的页面,subpackages中的每一项对应一个分包,可以得到,如果一个页面不能既在pages中又在subpackages中,否则报错。
但有时我们明明没有重复定义页面,还是爆了类似错误,比如下面的情况,我相信有些人的项目目录是这样的。
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── index
│ └── logs
└── utils
于是他们配置如下:
{"pages":["pages/index"],"subpackages": [{"root": "pages","pages": ["logs"]}]
}
然后喜提bug:
“pages/index” 不应该在 [subpackages] [0] 中
尽管pages/index并未在[subpackages] [0]处定义。
官方对此解释如下:
声明
subpackages
后,将按subpackages
配置路径进行打包,subpackages
配置路径外的目录将被打包到 app(主包) 中
subpackage
的根目录不能是另外一个subpackage
内的子目录
我的理解是,当你将分包的根路径设置为pages时,pages路径下的内容就属于该分包了,所以你再将pages/index页面划分给主包是不被允许的。
也就是说分包的分路径下不能包含其他包的内容。
而下面这种形式是允许的,因为它们没有互相包含。
{"pages":["pages/index"],"subpackages": [{"root": "pages/packageA","pages": ["logs"]}]
}
三 tabbar 必须在主包中
这条在官方文档中也有说明:
tabBar
页面必须在 app(主包)内
这条比较容易理解,tabBar
页面必须放在app.json中的外层pages中而不能放在subpackages(分包)中。否则报错:
“pages/index” 不应该在 [subpackages] [0] 中
四 主包大小问题和公共资源读取问题
辛苦分包完成,还是无法运行成功,原来是某一个包仍然"超重",这时可以使用开发者工具的代码依赖分析工具查看各包的大小情况。
这时我们可能会发现主包太大了,但是外层pages中并没有几个页面,这是为啥?
点开代码依赖分析工具发现主包中包含了大量的公共资源,比如公用组件,api这种,原因也在上面写到了:
声明
subpackages
后,将按subpackages
配置路径进行打包,subpackages
配置路径外的目录将被打包到 app(主包) 中
有小机灵鬼会想,我把这些公共资源单独放在一个包里不就可以了吗。一试,项目都起不来了。
子包可以使用主包的资源,但是主包不可以使用子包的资源,子包之间的资源也不通用。
所以公共资源一点要放在主包里。
如果主包太大了,只能将公共资源放在对应的子包中,而不能跨包调用哦。
五 wepy子包跳转问题
如果你使用的是wepy框架2.x一下,可能会存在wpx跳转到wpx页面跳转失败问题,这时将上面的subpackages改为subPackages即可。
【你踩的坑这里都有】微信小程序分包指南相关推荐
- 加入域时出现以下错误 登陆失败 该目标账户名称不正确_微信支付踩坑合集:微信小程序支付失败是什么原因?持续更新...
微信小程序开发的过程一定会遇到各种问题,最让人棘手的就是支付问题,因为没有支付做商城类似的小程序就没有办法完成最关键的一步.那么支付失败到底什么原因呢?一下子收集了几个错误类似,希望对你有帮助: No ...
- 微信小程序滴滴服务器报错,如何使用mpx框架(滴滴)给微信小程序分包
如何使用mpx框架(滴滴)给微信小程序分包 如何使用mpx框架(滴滴)给微信小程序分包 前提:使用mpx框架.核心包:@mpxjs/core.@mpxjs/webpack-plugin等 mpx开发文 ...
- 微信小程序,Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试?微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载 在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
- 微信小程序分包和预加载分包
前言 略 分包 配置方法:app.json 文件 {"pages": ["pages/index/index",...],"subpackages&q ...
- 【详讲】微信小程序分包流程步骤
[详讲]微信小程序分包流程步骤 本文基于微信小程序的官方文档,对分包的概念以及具体的操作流程进行讲解. 一.为什么要使用分包? 主要原因就是微信小程序规定了主包大小不能超过 2M ,但我们随着开发的更 ...
- 微信小程序 自动解决分包大小问题_微信小程序分包加载设置
设置分包加载 微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包? 小程序项目中,有多种角色(公共页面很少),设置分包加载方便管理 整个小程序压缩后代码 ...
- 微信小程序分包加载,分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
- 微信小程序入门指南pdf
下载地址:网盘下载 <知晓程序:微信小程序入门指南>是一本分析小程序生态.解读小程序产品设计与开发的入门图书.全书共 9 章,全面讲解了小程序的基本知识.大家如何看待小程序.小程序对行业的 ...
- 微信支付踩坑合集:微信小程序支付失败是什么原因?
微信小程序开发的过程一定会遇到各种问题,最让人棘手的就是支付问题,因为没有支付做商城类似的小程序就没有办法完成最关键的一步.那么支付失败到底什么原因呢?一下子收集了几个错误类似,希望对你有帮助: No ...
最新文章
- 使用 NOR Flash 中的supervivi 下载裸机程序到NandFlash
- Linux虚拟内存和进程虚拟地址空间简述
- C++ 类中特殊的成员变量(常变量、引用、静态)的初始化方法
- 程序开发基础学习四(boost::signal2 函数学习)
- linux链接 .o,Linux 链接概念 - osc_8ieji7o1的个人空间 - OSCHINA - 中文开源技术交流社区...
- 从数据到代码——通过代码生成机制实现强类型编程[上篇]
- 计算机图形学全代码,计算机图形学作业参考代码
- Windows8中pid为4的system进程占用80端口的解决办法
- IPSEC 003 ---- IPSEC携手IKE,珠联璧合显神威
- 虚拟网站禁用php,PHP虚拟主机建议禁用函数列表
- Swift人工智能实战:从基础理论到AI驱动的应用程序开发
- 微型计算机内存储容量的基本单位是,计算机中用来表示内存储器容量大小的基本单位是()。...
- yarn的安装及使用教程
- ionic4基础教程(案例和实战小demo)
- python自动输入饥荒控制台代码
- baidu patchrom项目 内存溢出解决方法
- JavaScript焦点处理(获取焦点focus()、失去焦点blur())
- qiime2-2022.8基于ubuntu的安装教程
- 低端电脑如何深度学习秘籍-使用mistGPU计算平台
- Android Studio 制作商品销售记录APP