uniapp开发小程序-分包(微信错误码:800051)

在使用uniapp开发小程序时,上传的时候因为文件过大,显示上传失败。

以下是开发过程中遇到的问题及解决方法:

1. 问题一:因为文件过大,显示上传失败

①尝试过把本地使用的图片压缩到最小;

②把图片转换为网络的,在小程序里只是引用;

③删除无用的代码;

发现这都不是成熟的方法,不能更大程度上的解决问题。所以想到了分包。

解决方法:分包

以下是使用UniApp分包功能的步骤:

1.假设支持分包的目录结构如下:

c 复制代码
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json

2.新建和pages并列的文件(pagesA、pagesB ...),则需要在pack.json中配置路径即可:

c 复制代码
{
	"pages": [ 
		{
			"path": "pages/home/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle": "custom" //自定义导航栏
			}
		},
		......
		
	],

	//分包:这里的 subPackages 表示分包加载配置,此配置为小程序的分包机制
	"subPackages": [{  
			"root": "pagesA",
			"pages": [
				{
					"path": "address/list",
					"style": {
						"navigationBarTitleText": "地址",
					}
				},
				......
			]
		},
		{
			"root": "pagesB",
			"pages": [
				// "page3",
				// "page4"
				......
			]
		}
	],
}

这里的 subPackages 表示分包加载配置,此配置为小程序的分包机制。

注意:使用分包后,分包内的页面的路径要统一,例如pagesA分包下的address/list 文件,

路径写作:'pagesA/address/list'

分割线
分割线

2.问题二:分包后运行到开发者工具,报错:文件已被配置忽略打包上传

报错信息:【微信小程序】获取文件失败 以下文件已被配置忽略打包上传,模拟器无法获取:xxxx.vue

解决方法:

使用HBuilderX开发的话:在unpackage目录下的dist中dev下的mp-weixin文件下的project.config.json里的setting字段中添加这两个字段:

c 复制代码
 "ignoreDevUnusedFiles": false, //关闭忽略隐藏未使用的文件
 "ignoreUploadUnusedFiles": false //忽略上传未使用的文件

增加了这两个字段后重新运行,就会发现警告消失了。

分割线
分割线

3.问题三:因为文件过大,显示上传失败

使用了分包之后报错:只改了几行代码,之前发布还是好的。使用了分包之后,还是大于2MB。

Error: 分包大小超过限制,main package source size 2369KB exceed max limit 2MB 20230810 13:42:16wx3917997e0a83fa64 1.06.2208010win32-x64

解决方法:

①检查HbuildrX的配置,勾选 "运行时压缩代码",如下图所示:

②检查微信开发者工具的配置,勾选下图中的几个选项,如下图所示:

最后,上传成功~

相关推荐
海上彼尚16 分钟前
【微信小程序】xxx该网站的安全证书存在问题,可选择 “继续”在浏览器中访问。
安全·微信小程序·小程序
郑州光合科技余经理24 分钟前
同城商城源码:商品库和订单库怎么随包交付
android·java·开发语言·后端·uni-app·php·ai编程
FX1317887KP_27 分钟前
KPF口语考试题目类型全梳理:KET、PET、FCE各级别考什么、怎么练
小程序·ket口语·pet口语·fce备考·剑桥英语
肖老师xy1 小时前
uniapp实现带展开收起按钮文本多行省略
uni-app
Liu.7741 小时前
uniapp swiper 常见问题及修复
前端·uni-app
Ai-_Man2 小时前
ChatGPT还是不可以导出左侧所有对话,只能点进去单条内容导出,方法不对吗?
开发语言·javascript·人工智能·chatgpt·小程序·ecmascript
Liu.7743 小时前
uniapp scroll-view 常见问题及修复
uni-app
andrsted4 小时前
练题簿在线免费刷题:个人备考,从练新题到模拟自测怎么用?
学习·微信小程序·小程序·学习方法·刷题
梦曦i5 小时前
Taro vs uni-app:技术路线与选型真相
uni-app·taro
多客:duokelijie5 小时前
婚恋交友小程序合规梳理:上线运营需要准备哪些资质与许可手续?
后端·mysql·微信小程序·前端框架·uni-app·php·持续部署