微信小程序踩坑实录
大家好(๑╹◡╹)ﾉ”，我是萍雨
这篇文章来聊一聊微信小程序开发的一些问题和我踩的坑以及解决方案
关于前面的部分大家可以点击下面的链接直达
『 Lovart + Nano Banana Pro + Seeddream 的独立开发 UI 公式 』 https://www.codefather.cn/post/2016908868998717442
『 用 Vibe Coding 做完一个小程序之后，聊一聊 』 https://www.codefather.cn/post/2016922810902962177
首先先说一下，这是我第一次做微信小程序，做小程序的原因是参加了挑战杯的比赛，之前也没有看过任何和微信小程序开发相关的任何教程，所以一些教程当中可能提到的坑，我大概率踩了
1. 要不要选择云开发
关于这个点，可以问自己一个简单的问题：
做的这个小程序需要用到音频，视频或者五张以上的图片吗？
如果需要的话，那还是选择云开发吧，我最初就不知道没有选择云开发而踩了坑
因为微信小程序对于主包的大小限制为 2MB，也意味着主包当中几乎就只有代码，随便有一个音频，视频或者图片基本都会超过这个 2MB 的限制，我在微信开放社区看到不少人子啊吐槽这个限制的，应该是有不少人踩了和我一样的坑
即在最开始的时候，把各种非代码的文件都存储在本地路径当中，最后发现主包的大小远远超过了 2MB（比如我自己在基本做完这个小程序时发现主包大小大概是 157MB......到最后主包的大小被我压缩到了 0.67MB，关于压缩主包文件的方法我后面会说）
2. 如何解决主包过大的问题
微信开发者工具会提醒我们主包过大，但如果我们想要知道主包到底有多大，主包当中的哪些文件过大我们应该去哪里看呢？答案是代码依赖分析
微信开发者工具右上角 -> 详情 -> 基本信息 -> 代码依赖分析
这里展示主包当中具体组成，还可以导出 json 格式的文件，给 AI 分析以及如何处理
解决主包过大的问题/压缩主包大小的主要方式就是将主包当中的非代码文件都放在云开发的存储当中，如果在最开始做小程序的时候没有选择云开发的话，是没有 "云开发" 这个选项的
需要在小程序的官网去获取一个正式的 AppID，填写到 src\manifest.json 当中的 "appid :" 才会在微信开发者工具当中出现 "云开发" 选项
关于如何获取一个正式的 AppID 这里就不展开了，问一下 AI 就很容易知道怎么做了
在有了 "云开发" 找到 "存储"，和阿里云，腾讯云的对象存储是类似的，存储权限如果需要 "所有用户可读，仅创建者可读写" 是需要开会员的，会员是一个月 19.9，不过我觉得用阿里云，腾讯云这些存储也是可以的，主要目的就是让视频，音频，图片等非代码文件不在主包当中
3. 如何把两百多个非代码文件从本地转换到云
如果你也很不幸的很我一样，把最开始的时候把非代码资源存储在本地，代码当中也是访问的本地路径，再将这些文件导入文件将原来的本地路径替换云存储的路径（非代码文件比较少的情况下）
如果更不幸的，你有二百多个非代码文件都是用的本地路径访问，没错还是我，那么可以按照下面的步骤操作
具体的步骤，我直接把 Gemini 输出的摘过来了，对于需要注意的地方我会进行加粗：
📦 第一步：云端镜像 (Upload) —— 保持结构一致
这一步是“省力”的关键！
打开 云开发控制台 -> 存储。
新建一个文件夹，命名为 images (这里需要注意的是仿照本地路径，只要结构对得上，代码就能批量改)
打开这个 images 文件夹。
【关键操作】：
▼text复制代码在你电脑上打开 src/static/images 文件夹。 全选 里面的所有内容（包括 daily, index, wiki 这些子文件夹）。 直接拖拽 到云开发控制台的 images 文件夹里。
✂️ 第二步：一键替换 (Replace) —— 30秒搞定
不用一个个找，我们用 Trae / VS Code 的核武器
- 准备好你的“云端前缀”
去云存储里随便点一张图（比如 images/index/logo.png）。
复制它的 下载地址 (HTTPS)。
提取出 前缀部分 (即 /images/ 之前的所有内容)。
假设你的前缀是： https://636c-cloud1-8gizllp3a0666dde-1400097024.tcb.qcloud.la (请以你实际复制的为准)
这里多解释一下，找到下载路径，比如下面这个的下载地址是
前缀就是文件夹之前的内容，比如我的这个文件夹叫做 audio，/audio 之前的内容即为前缀
- 启动全局替换
在 Trae 中按下快捷键 Ctrl + Shift + H (全局替换)
查找内容 (第一行) 输入：/static/images/
替换为 (第二行) 输入：https://你的云环境域名/images/
▼text复制代码举例：https://636c-cloud1-8gizllp3a0666dde-1400097024.tcb.qcloud.la/images/
点击【全部替换】(Replace All) (那个不仅是单纯的图标，通常是两个矩形重叠的图标)。
💥 轰！
这一下点击，代码里所有 200 多个 /static/images/... 瞬间全部变成了云链接。因为文件名没变，路径结构没变，所以绝对不会错！
🧹 第三步：清理现场 (Delete) —— 必须做！
如果只改代码不删文件，体积还是减不下来！
回到电脑文件夹 src/static/images
保留 tabbar 文件夹（底部的 5 个小图标建议留本地，体验更好）。
删除 其他所有已经上传的文件夹（daily, index, market, theater, wiki, workshop 等）
虽然已经替换成云存储的文件路径，但之前的本地路径依然存在，依然占据着空间，务必记得删除，在删除之前如果觉得不放心的话，可以再做一个备份，就 CV 一下的事情
回顾一下其实踩坑的地方不是很多hh，这次就分享这么多吧，希望大家不要踩我踩过坑了~
