用Claude code 2小时给对象做了个数字衣橱起因换季的时候，我对象开始翻衣柜。翻了半小时，翻出来一件她完全忘

起因

换季的时候，我对象开始翻衣柜。

翻了半小时，翻出来一件她完全忘记自己有的毛衣，翻出来两件几乎一模一样的白T，还有一条"找不到"找了三个月、其实一直在最底层的裤子。

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

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

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

为什么选微信小程序

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

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

做了什么功能

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

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

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

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

1. TabBar 页面不能用 navigateTo 传参

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

问题来了：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.pendingFilter
  if (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%;
}