HbuilderX微信小程序uniapp分包小白教程&趟坑【伸手党福利】【干货】

本教程为小白教程，主管操作，具体原理讲解欢迎评论区补充。

微信小程序分包原因：
1、多人开发
2、引入了大型js
3、单项目多模块需要分包
官方资料：
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
https://uniapp.dcloud.io/collocation/pages?id=subpackages
https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

重要：

分包基础教程：【我就是看着官网教程和他的教程做的】
https://blog.csdn.net/weixin_39921131/article/details/112267612
次级教程
https://blog.csdn.net/weixin_39918588/article/details/112327359

开始讲解：第一步：创建分包文件夹page2并创建index.vue文件

第二步：pages.json

在pages[]后面输入

// 分包开始
	"subPackages": [{
		"root": "page2",
		"pages": [
			

			{
				"path": "index",
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}

			}
		]
	}],
	"preloadRule": {
		"pages/index/index": {
			"network": "all",
			"packages": ["__APP__"]
		},
		"page2/index": {
			"network": "all",
			"packages": ["page2"]
		}
	},
	// 分包结束

其内容为：创建分包page2并指向page2文件夹，其分包的主页为page2/index

manifest.json下》源码视图

在"mp-weixin" : {内添加

		"optimization": {
		    "subPackages": true
		  },
		  "runmode" : "liberate" // 开启分包优化后，必须配置资源释放模式

这一段在新版的hbuilder当中貌似没有也行，我忘了添加也照样跑起来了。

第四步：编译运行小程序

在详情》基本信息》本地代码
中
看到主包和page2字样即为成功。

步骤五：（选做）static分包

https://ask.dcloud.net.cn/question/68773

---

综合教程

https://blog.csdn.net/weixin_45811884/article/details/108789618
https://www.cnblogs.com/jsccc520/p/13930358.html

超综合教程（带static）

https://blog.csdn.net/weixin_45077178/article/details/103581172

---

遇到报错趟坑

1、uniapp 在分包subPackages 不应该在分包 appJSON["subPackages"][0] 中
原因：目录写错，地址：pages.json、router/index.js等
改正方法：按照官方给出的，分包就要分目录，不要图省事。
https://ask.dcloud.net.cn/question/76575
2、thirdScriptError Cannot read property ‘$mp‘ of undefined
原因：使用了this.$route进行了跳转导致，实际原因不明，貌似没有影响程序本身的运行

改正方法：调整版本的基础库

https://blog.csdn.net/weixin_43459866/article/details/109953919

3、小程序编译时, 提示: 80051,scource size 8290KB exceed max limit 2MB
提示为微信小程序主包大于2MB，微信小程序每个包不能超过2MB，包括本地图片。
出现此提示时候需要分包。
https://blog.csdn.net/weixin_44852765/article/details/112280631