前言:作为一个曾经的校园项目负责人,曾经有一天老师找到我说想看我们项目的小程序,但是我们的小程序只在本地测试可见。于是他对我循循善诱了一些话,让我深刻了解到部署小程序的作用。在部署之路上,我遇到了一些问题,现在就分享给你...
需求
在我们使用uniapp进行开发微信小程序的时候,uniapp会对vue语法的代码进行转译
到微信小程序的相关格式。对于上传和发布微信小程序,微信对转译过后的上传代码具有要求如下图。
很不幸,在对小程序进行初次发布的时候,对2个条件的限制都有违背,但是很幸运,我也了解了怎么去解决这个缺陷。对于该问题,我在项目中用到的解决步骤
如下,但是我会对小程序分包优化进行详细描述:
- 图片资源cdn存储
- 小程序分包优化
- 微信开发者工具进行代码压缩
小程序分包优化
本次的小程序分包优化
是在项目开发完成
后进行项目优化
阶段的部署中去进行的,但是你阅读本文的时候是项目早期
,我推荐你一开始就进行分包。在完成分包管理后,个人觉得的分包对项目模块划分
意义很大,对后期的拓展
也挺友好的。如果你也是项目部署阶段进行,我建议你可以根据以下思路进行,防止错乱。
- 开始分包配置
- 新建文件夹开始分包
- 编写
pages.json
分包信息 - 测试项目是否
正常运行
(因为项目中一些nav跳转可以依赖某些路径)
开启分包配置
uniapp的开始分包配置是在manifest.json
的微信小程序
选项中中开启相关配置optimization
配置:
"optimization" : {
"subPackages" : true
}
新建文件夹进行分包
首先要明确小程序
中的主包
和分包
都存的是什么。在理想的分包情况下,主包
存的是tabBar
的页面,而分包
存的是具体的功能实现的页面。可以新建格式如page_service(业务)
的文件夹,并且直接对之前创建的页面从pages文件夹
拖拽过去,可以看到我的目录如下。
!编写pages.json的分包信息
这一步非常重要
,首先我们需要在pages.json
中新建subPackages
选项,选项接受的是数组
,其中的每一项都是我们进行的分包。
对象包含属性如图,root
是分包路径,pages
是子页面,其中path
是页面的路径,这里会自动将路径进行拼接,不需要手动添加其他内容。
!测试项目是否正常运行
在项目中我们可能拥有一些跳转的操作,由于此时发生了相关的路径改变
,我们需要对项目进行测试并对一些路径进行修改
。在我的项目中也出现了相关问题,这里给大家提个醒。
图片资源cdn存储
在项目中我们经常用到一些配图,日积月累静态文件就会显得很大。在一些项目中,其实对静态资源做了cdn存储后,包的体积就已经符合小程序发布的规范了,但是由于后续中功能拓展可能出现的包体积
问题,分包管理还是非常建议的。
微信开发者工具进行代码压缩
微信开发者工具其实对于调试来说确实是非常好的工具,个人体验是相当于另一种浏览器
。点击详情
就能看到相关的选项,按需对其进行勾选即可。
结果
经过上面的一些神操作,我的包从开始时候的不及格到现在的514B
并且成功发布。希望你也能体验上线的乐趣!
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天,点击查看活动详情