企业官网建设流程全解析

昨天发了第一篇开发记录，讲了为什么做这个极简收纳小程序。今天进入开发第二天，主要干了三件事：让 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. 在页面的最外层容器上动态绑定主题类名（如 `class="theme-peach"`）。
1. 在 `app.js` 中维护全局主题状态，切换时更新状态并写入 `wx.setStorageSync`。

js

```
// 切换主题的核心逻辑
setTheme(theme) {
this.setData({ theme });
wx.setStorageSync('theme', theme);
}
```

这样组件样式不用动，后续如果想加新主题，只需要新增一套 CSS 变量即可，成本极低。

## 三、一些细节打磨

除了主题，今天还把“我的”页面完善了一下。从截图能看到，我加上了**数据隐私说明**的醒目提示——因为我的坚持是**数据完全本地化存储**，不依赖云端，让用户知道他们的物品清单绝对安全。同时加了客服入口，方便收集反馈。

底部的悬浮 `+` 按钮也做了主题适配，确保在任何主题下都能快速添加物品。

## 四、第二天的感受

第一天是“能不能做出来”，第二天是“做出来能不能用”。修 BUG 和调 UI 这两件事都很琐碎，但恰恰是决定产品体验的部分。AI 在修 BUG 和生成样式代码上帮了大忙，但审美判断、交互取舍这些还是得自己来。

明天计划把细节体验再打磨一下，最近正好也在打扫房间，发现好多小玩意，这么多年没用到，这次正好记录一下

如果你也在用 AI 辅助开发小程序，欢迎评论区交流踩坑经验。