昨天发了第一篇开发记录讲了为什么做这个极简收纳小程序。今天进入开发第二天主要干了三件事让 AI 帮我修 BUG、重构了一部分交互、以及加上了三套可切换的主题 UI。## 一、让 AI 修 BUG比自己翻代码快第一天赶进度代码写得很糙第二天一跑就暴露了一堆问题。我直接把报错信息和相关代码片段丢给 AI让它定位并给出修改方案。几个典型问题**1. 本地存储读写时序问题**添加物品后立刻跳转列表页有时列表不刷新。原因是写入本地缓存是异步的页面跳转太快读的时候数据还没落盘。AI 给的方案是把写入和跳转串起来在写入成功的回调里再跳转同时列表页加一个 onShow 重新读取的逻辑兜底。**2. 重复添加与数据校验**物品名称为空也能保存连续点击保存按钮会插入多条重复数据。让 AI 帮忙加了非空校验和防抖处理。**3. 页面返回后的状态残留**从详情页返回列表页搜索关键词还留着但列表已经重置体验很割裂。统一了页面生命周期里的状态清理逻辑。这几个 BUG 单独看都不复杂但一个个手动排查很耗时间。把上下文喂给 AI、让它给出修改建议效率确实高不少。当然前提是你要能判断它给的方案对不对不能无脑复制。## 二、三套主题 UI把极简做出选择功能稳定之后我开始处理界面。极简不等于简陋用户对视觉是有偏好的所以做了三套可切换的主题在“我的”页面一键切换选择结果存入本地缓存。**主题一蜜桃奶油**默认主题粉白配色视觉上非常柔和甜美。信息层级用留白和字重区分配合粉色的圆角卡片适合喜欢温馨感的用户。**主题二桑叶嫩芽**绿色系主题嫩绿搭配治愈的图标有一种生机勃勃的感觉看着很护眼。绿色在家庭场景中也很契合“收纳、自然”的调性。**主题三薄荷马卡龙**蓝紫色调梦幻童话风格。深色/冷色系在小程序中其实挺考验对比度的这套主要处理了卡片阴影和文字灰阶的搭配确保不刺眼的同时保持高级感。### 主题切换的实现思路为了不引入笨重的 UI 框架我采用了 **CSS 变量 根节点 class 切换**的方案。1. 把主色调、背景色、卡片圆角、阴影等抽成 CSS 变量如 --theme-primary, --theme-bg。1. 在页面的最外层容器上动态绑定主题类名如 classtheme-peach。1. 在 app.js 中维护全局主题状态切换时更新状态并写入 wx.setStorageSync。js// 切换主题的核心逻辑setTheme(theme) {this.setData({ theme });wx.setStorageSync(theme, theme);}这样组件样式不用动后续如果想加新主题只需要新增一套 CSS 变量即可成本极低。## 三、一些细节打磨除了主题今天还把“我的”页面完善了一下。从截图能看到我加上了**数据隐私说明**的醒目提示——因为我的坚持是**数据完全本地化存储**不依赖云端让用户知道他们的物品清单绝对安全。同时加了客服入口方便收集反馈。底部的悬浮 按钮也做了主题适配确保在任何主题下都能快速添加物品。## 四、第二天的感受第一天是“能不能做出来”第二天是“做出来能不能用”。修 BUG 和调 UI 这两件事都很琐碎但恰恰是决定产品体验的部分。AI 在修 BUG 和生成样式代码上帮了大忙但审美判断、交互取舍这些还是得自己来。明天计划把细节体验再打磨一下最近正好也在打扫房间发现好多小玩意这么多年没用到这次正好记录一下如果你也在用 AI 辅助开发小程序欢迎评论区交流踩坑经验。