本教程为小白教程,主管操作,具体原理讲解欢迎评论区补充。
微信小程序分包原因:
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