折腾 8 天,我把一个没人看的网页图库做成了微信小程序

前阵子我做了个网站,叫「悦目图库」。 说实话,刚上线的时候还挺有成就感。 毕竟从图片、搜索,到详情页、色卡、EXIF,前前后后折腾了挺久。上线以后我还特意盯了几天后台,想着多少应该会有点访问吧。 结果…… 没什么人。 每天打开后台基本都是同一个画面。 看一眼。 关掉。 过两天再看一眼。 还是那样。

image.png

后来有一天跟朋友吃宵夜,聊到这个事情。 他说了一句我之前一直没认真想过的话: “你自己找壁纸的时候,会打开浏览器搜官网吗?” 我一想,还真不会。 手机找壁纸,大部分时候就是看到喜欢的图,点进去,保存,顺手设成锁屏。 如果还得先打开浏览器、输入网址、再进网站,整个过程本身就有点多余。 我当时基本就想明白了。 不是图库这个东西没人需要。 可能只是我把它放错地方了。 所以回家以后,我就开始琢磨: 干脆做个微信小程序。 这次不折腾那么多虚的。 就做一个打开微信就能用的图库。 然后给自己定了个时间: 8 天。


第一天,先把备案交了

小程序最麻烦的地方之一,就是有些事情你急也没用。 代码可以熬夜写,备案不能。 所以第一天我基本没写多少代码,先把注册、认证、备案这些能提交的东西全部提交了。 个人认证的 30 块钱也交了。 这个钱我其实交得有点不情愿,但想让小程序正常进入微信的搜索和分享体系,该交还是得交。 类目也尽量选了一个不需要额外行业资质的摄影工具方向。 我以前网站已经有主体备案,所以这部分省了一些事情。 但小程序自己的管局备案还是等了整整 6 天。

image.png

提交完以后就没什么好等的了。 备案爱什么时候下来什么时候下来。 我先写我的。 这反而让我挺安心。 每天打开电脑的时候,知道备案还没下来,但手上的代码又一直在往前走。 等它真的通过的时候,项目也差不多能跑了。


这次后端,我想换个轻一点的

之前网站后端用的是 Java。 这次我是真不太想继续用了。 不是因为 Java 不好。 主要是这次服务器就一台 2G 内存的小机器。 以前做项目,总觉得各种东西都应该安排上。 这次反而开始算账了。 我就这么点机器,为什么还要给它增加没必要的负担? Rust 其实也考虑过。 但我只有 8 天。 最后还是 Go。 数据库用了 SQLite,备份交给 Litestream,Redis 放热点缓存,Meilisearch 做搜索,图片丢 COS,前面挂 EdgeOne。 最后画出来大概就是这么一套。

image.png

看起来东西不少,其实每个东西都只干一件事。 Go 跑业务。 SQLite 存数据。 Meilisearch 管搜索。 Redis 放缓存。 图片不往服务器里塞。 我自己挺喜欢这种结构的。 尤其是 Go。 这是我第一次拿它写完整后端,刚开始多少还有点不习惯。 以前 Java 里很多东西框架都给你安排好了。 Go 就比较直接。 很多东西你得自己决定。 但写了一两天以后,反而觉得这东西挺适合个人项目。 最后编译出来一个二进制文件,扔服务器上。 就完事。


一个人做,AI 确实能省不少时间

这次基本算是我一个人从头做到尾。 所以 AI 用得比较多。 但我没让一个模型从头写到尾。 那样后面自己反而更难收拾。 我的习惯是把不同的事情分开。 GPT-5.6-sol 主要帮我拆业务。 比如表怎么设计、接口怎么分、某个功能应该怎么落。 先把骨架搭起来。 DeepSeek-v4-pro 更多是拿来挑代码的问题。 尤其是并发、锁、缓存这些地方。 有时候一段代码自己看半天觉得挺正常,换个模型重新看一遍,还真能发现一些问题。 甚至有一次它顺手把我一个锁竞争的问题挑出来了。 我自己跑压测以后才确认确实存在。

image.png

当然,这东西肯定不能完全相信。 AI 写的代码有时候看着特别漂亮。 一跑。 不对。 还是得自己测。 所以这次我的感觉更像是: 以前一个人写代码,旁边是一张空白桌子。 现在旁边多了两个会说话的东西。 活确实能快不少。 但最后提交代码的人还是自己。


图片越来越多以后,我开始担心这台服务器

图库做到后面,图片已经超过 7000 张了。 这时候我开始认真考虑一个问题: 这些图片到底放哪? 一张原图十几二十 MB 很正常。 如果全部放服务器,本身倒不是完全放不下。 但以后真有人开始下载,最先出问题的估计不是硬盘,而是带宽。 而且我这台服务器才 2G。 让它跑业务还行。 让它一天到晚给别人搬几 MB 的壁纸,我总觉得有点委屈它。 所以最后很简单。 图片不放服务器。 原图和缩略图处理完直接进 COS。 用户请求图片的时候走 EdgeOne。 业务服务器只负责接口。

image.png

这里我其实折腾了一阵压缩参数。 原图有些十几 MB,甚至二三十 MB。 全部批量转成 WebP。 体积基本能砍掉 75% 左右。 最后手机端常用的图片基本控制在 1~2MB。 但压得太狠也不行。 壁纸这种东西,一旦出现明显涂抹感,用户一眼就能看出来。 所以我拿了一批不同类型的图片反复试。 最后选了一个自己觉得比较舒服的平衡点。


7000 多张图,版权这件事我不敢随便

其实图片数量不是最让我头疼的。 版权才是。 网上找图太容易了。 但真的把一个图库放出去以后,你不能指望“别人也这么干,所以应该没事”。 所以我一开始就给自己定了死规则: 只收 CC0(Creative Commons Zero)和 Public Domain(公共领域)的图。 摄影图库开放区、博物馆公有领域开放获取项目。 能确认授权的才收录进来。

image.png

Creative Commons CC0 1.0 官方协议

然后就是自动化处理 一张图进来以后,会经过一遍脚本流程: EXIF 拍摄参数解析出来。 主要颜色算出来。 5 阶色卡提取出来。 缩略图生成。 Meilisearch 拼音分词字段处理。 最后入库。 所以你现在在详情页看到的相机型号、焦段、光圈,还有下面那几个颜色,其实都不是后来人工补进去的。 图片进来的时候就已经处理好了。

QQ_1787709217905.png


真正耗时间的,反而是小程序界面

后端跑起来以后,我本来以为剩下的事情会很快。 结果完全不是。 页面才是最折腾人的。 因为网页上的东西搬到手机以后,经常会突然变得很奇怪。 尤其是图库。 如果最后还是规规矩矩的两列、三列图片,我自己看着都觉得没意思。 所以这次我想做一点空间感。 三张图不完全对齐。 中间的突出一点。 旁边的往后退一点。 再加一点透视。

QQ_1787709392737.png

这里我没有重新去 Figma 里一点一点画。 一个人做项目,时间实在不太够。 我更喜欢先用 GPT Image 出几张视觉方向。 同一个页面一次看几种方案。 觉得哪一块有意思,就留下。 然后再自己落到小程序里。

QQ_1787709645566.png

后面真正磨时间的,其实就是一些很小的东西。 3D 角度。 阴影。 图片之间的距离。 小屏幕下会不会挤。 这些东西没有什么“技术难点”。 就是改。 看。 再改。


有个地方,我最后没办法偷懒

详情页背景会跟着当前图片的颜色变。 图片偏蓝,后面就有一点蓝色的环境光。 图片偏暖,后面稍微暖一点。 不需要用户注意到。 就是让整个页面别那么死。

image.png

还有创作工作台。 这个东西一开始我真想直接套 CSS filter。 看起来挺像那么回事。 结果保存到相册一看: 没变。 因为 CSS 只是屏幕上的效果,真正导出来的还是原图。 最后只能自己用 Canvas 2D 做。 曝光、对比度、冷暖、颗粒这些效果真正写进图片像素里。

image.png

这块写起来挺烦。 但做好以后确实挺有意思。 至少不会出现“屏幕上是这个样子,保存下来又是另一个样子”。


然后我第一次拿真机测试,白屏了

开发者工具里一直都没问题。 所以我第一次扫体验版二维码的时候,其实还挺有信心。 结果: 白屏。 什么都没有。

image.png

最后查出来是合法域名。 开发者工具之前开了“不校验合法域名”,所以本地看着什么都正常。 真机就不行。 API、COS、CDN,相关域名一个都得配。 这个问题解决以后,图片才重新出来。 第一次做小程序,这种东西基本躲不过。


分享按钮也折腾了一下

后来准备测试分享。 右上角一点。 “转发给朋友”灰的。 “分享到朋友圈”也是灰的。

image.png

我一开始还以为是权限。 后来才发现微信这里需要自己把分享菜单打开。 wx.showShareMenu()。 然后页面里还要分别实现 onShareAppMessage()onShareTimeline()。 少一个,对应的分享方式就不亮。

image.png

这个问题其实不复杂。 但如果不知道原因,就挺容易在那里盯着一个灰色按钮发呆。


第 7 天,先让别人替我找 Bug

主要功能差不多以后,我没马上提交审核。 先做了体验版。 二维码扔给朋友。 让他们随便用。 结果很快就找到几个问题。 小屏幕顶部有点挤。 折叠屏图片比例不太对。 某个页面返回以后滚动位置没恢复。 这些东西我自己在电脑上都没感觉。 别人拿手机一用,全出来了。 所以又改了一轮。 然后才提交。


第 8 天,上线

审核比我想象中快。 第二天下午通过。 点发布。 然后就没什么仪式感了。 小程序真的上线以后,手机里多了一个「悦目图库」。 就这么简单。

QQ_1787710623524.png

我又去看了一眼服务器。 2G 内存。 跑了 8 天。 CPU 常态大概 3%。 总内存 683MB / 1.9G。 Go 大概 60MB。 Meilisearch 84MB。 Redis 5.8MB。 Nginx 不到 20MB。

image.png

几个接口也顺手压了一下。 首页瀑布流 P50 44ms,P95 69ms。 热门 P50 58ms,P95 138ms。 随机探图 P50 88ms。 专辑大图列表因为数据和图片多一些,P50 在 280ms 左右。 目前这台小机器还挺轻松。 当然,现在的访问量离“把服务器跑满”还差得远。 所以这些数字更多就是记录一下当前状态。 以后真有人多起来,再看它能不能继续这么轻松。


现在它终于不只是一个网址了

从最开始做网站,到后来发现根本没人看,再到重新做成小程序。 其实也没什么特别大的故事。 就是觉得原来的方式可能不太对。 那就换一个。 然后这 8 天里一直改。 改页面。 改接口。 改图片。 踩微信的坑。 再改。 现在至少想找壁纸的时候,不需要再去浏览器里输入那个网址了。 打开微信。 搜一下「悦目图库」。 就能进去。

image.png

如果你刚好也想看看这个小程序现在做成什么样了,可以直接扫下面这个码。

image.png

我也挺想看看,这次把它放到用户真正会出现的地方以后,后台还会不会继续这么安静。 至少这次,答案应该很快就能知道了。

0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
鹿梦
作者分享
用了好久各种在线图片工具,实在受不了了,要么手机打开界面乱得没法用,一堆弹窗广告,关键处理图片还得全部上传到别人服务器,工作截图、证件照根本不敢传。 索性抽空自己写了个工具 PixKit,全部功能免费放出来了,代码也开源。 网址:https://pictkit.com GitHub:https://github.com/humenglover/pictkit 说下我自己做的几个核心点: 1. 所有图片只在浏览器本地处理,不会上传到任何服务器,打开开发者工具看网络请求就能验证,完全不用担心隐私泄露。 ​ 2. 专门适配了手机,平时出门只用手机也能压缩、裁剪、生成二维码,按钮尺寸都是按触屏做的,直接调取相册很方便。 ​ 3. 没有任何付费套路,不用注册登录,23个工具全部开放使用,没做功能分层收费。 ​ 4. 支持PWA离线使用,第一次加载完,断网也能正常用,还能添加到手机桌面,当成简易APP。 里面工具挺全的,图片压缩、格式转换、加水印、清除EXIF信息、拼图、二维码生成识别、表情包制作这些全都有,日常修图需求基本全覆盖。 做这个的初衷就是想要一个干净、无追踪、电脑手机通用的图片工具箱,不搞花里胡哨的付费套路。 大家有空可以试试,有bug或者想要新增什么功能,直接评论或者去GitHub提issues,我后面慢慢更新优化。
8
悦目图库全量开源!重新做了一个我理想中的图片社区
12
我的云图库项目终于可以继续啦
20
悦目图库所有代码开源啦
53
🌟 终于把云图库这个项目告一段落啦!这次给PC端和移动端分别用了Ant Design和Vant做了两套UI,加了邮箱注册、每日签到、评论点赞、实时聊天等社交属性,还用ES做了一个聚合搜索。 体验地址: https://lumenglover.com 最新域名:https://yuemutuku.com 还有些bug没来得及改,准备开启新赛道了! 💪 收获满满。
133
下载 APP