零基础两小时用Claude Code为对象打造专属数字衣橱

起因

换季时节，对象开始翻衣柜。翻了半小时，翻出一件完全忘记存在的毛衣，两件几乎一模一样的白T，还有一条“失踪”了三个月、其实一直在最底层的裤子。

她说：要是有个 App 能把衣服都存进去就好了，找的时候搜一下，买之前也能看看自己有什么。

这个需求听起来很合理。正好最近对AI比较着迷，看能不能借助AI手搓一个出来。

目标很简单：拍照存档、分类管理、随时搜索。够用就好，不贪多。

为什么选微信小程序

技术选型花了大概五分钟。

原因很直接——她手机上用得最多的是微信，小程序不用安装、随开随用，分享起来也方便。更关键的是，微信有一套云开发能力（CloudBase），自带数据库、云存储、云函数，个人项目几乎零成本：不需要自己租服务器，不需要写后端接口，不需要操心运维。

做了什么功能

最终做出来的「衣库」有以下几个页面：

• 衣橱主页：按分类展示所有衣物，每类最多预览 6 张图，点击分类可以跳到该分类的全部衣物
• 搜索页：关键词搜索 + 多维筛选（分类、存放位置、季节、场景）
• 添加/编辑页：拍照上传、填写名称备注、选分类和存放位置、标记季节场景
• 详情页：大图预览、全部字段展示、编辑和删除
• 统计页：衣物总数、各分类占比
• 管理页：自定义分类和存放位置

功能规划遵循一个原则：解决她提出的那几个问题，其余的不加。避免做着做着变成了一个谁都不想用的过度设计品。

开发过程：几个值得记录的细节

1. TabBar 页面不能用 na vigateTo 传参

小程序的底部 TabBar 页面（首页、搜索、我的）是特殊的，必须用 wx.switchTab 切换，不能用普通的 wx.na vigateTo。

问题来了：switchTab 不支持 URL 参数。

在首页点击“上衣（13件）”这个分类，想跳到搜索页并自动过滤出上衣，但没法通过 URL 把 categoryId 传过去。

最后的做法是用 globalData 做中转：

// 首页点击分类onCategoryTap(e) {app.globalData.pendingFilter = { categoryId: id, categoryName: name }wx.switchTab({ url: '/pages/search/search' })}// 搜索页 onShow 读取并清除onShow() {const pending = app.globalData.pendingFilterif (pending) {app.globalData.pendingFilter = null// 应用筛选条件并触发搜索}}

有点 hack，但是能用，而且是微信文档推荐的做法。

2. 云数据库客户端查询有 20 条上限

这个坑藏得比较深。

微信云数据库的客户端查询，无论 .limit() 写多少，实际最多返回 20 条。代码里写了 .limit(100)，以为没问题，结果衣橱里录了 27 件衣服，首页只显示了 19 件，搜某个分类最多也只出来 20 件。

解决方案是把查询移到云函数里。云函数在服务端运行，单次最多可以取 1000 条，还可以分批并发拉取。同时加了本地缓存：有缓存时先渲染旧数据，云函数结果回来后再静默更新，加载体验顺滑很多。

// 云函数端可以突破 20 条限制，分批取全部数据const batchCount = Math.ceil(total / 100)const tasks = Array.from({ length: batchCount }, (_, i) =>collection.skip(i * 100).limit(100).get())const results = await Promise.all(tasks)

3. 图片等比正方形：padding-bottom 技巧

衣物预览图要裁成正方形显示，最开始用了 CSS 的 aspect-ratio: 1，在模拟器里好好的，在真机上某些系统版本会失效，图片被拉伸或者高度塌陷。

改用老但可靠的 padding-bottom 方案：

.img-wrap {width: 100%;position: relative;padding-bottom: 100%; /* 撑出正方形高度 */overflow: hidden;}.grid-img {position: absolute;top: 0; left: 0;width: 100%; height: 100%;}

原理是 padding 的百分比是相对父元素宽度计算的，所以 padding-bottom: 100% 等于让高度等于宽度，变成正方形。兼容性完美。

关于 AI 写代码这件事

这个项目没有从零手写每一行代码，而是全程配合 Claude Code（Anthropic 出的 AI 编程工具）来开发。

实际的分工是这样的：

AI 做的事：写模板代码、处理样式细节、实现具体功能逻辑、查找 API 用法。根据需求，快速出一版能跑的代码。

项目负责人需要做的事：确定要做什么、判断做出来对不对、在 AI 走偏的时候纠正方向。

举个例子：有一次让 AI 优化首页图片显示，它顺手把搜索页的结果布局也改了——从列表改成了网格。这个改动并非必要，发现之后让它改回去，并提醒"不确认就不要动没提到的地方"。

这种"超纲操作"偶尔会有，需要自己把关。但总体来说，有 AI 的情况下，一个功能从想法到可以调试，时间缩短了大概 70%。真正花时间最多的不是写代码，而是想清楚需求。

某种程度上，AI 把编程的门槛从"会不会写代码"变成了"想不想清楚需求"。

现在用起来怎么样

已经发布，开始投入使用了，前面提到的那几个小bug也顺手修了。后来又让CC做了一轮性能优化，重点是图片加载这块。

核心功能截图

衣橱主页

搜索页

我的

下一步：衣库管家

如果有个「衣库管家」的功能——接入大语言模型，做成一个懂你衣橱的 AI 智能体，那就更酷炫了。

设想中的能力：

• 穿搭建议：告诉它明天要去哪、什么场合，它从你的真实衣物里搭一套出来
• 购物参谋：看看你衣橱里缺什么，给出补充建议，而不是随机推荐
• 自然语言搜索：不用记分类名，直接说"那件去年买的蓝色外套"