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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平