feat: 完成见素起名小程序核心功能

- 实现 AI 起名功能(Kimi API 接入)
- 添加用户收藏功能(MySQL 数据库)
- 实现海报生成与分享
- 添加音效和触觉反馈
- 配置生产环境部署(WAR 包 + Nginx)
- 支持多种起名模式(经典、诗词、自然、现代)
- 实现分批加载优化体验
This commit is contained in:
王鹏
2026-04-17 15:34:51 +08:00
parent 1a749cdf71
commit be1f5722ab
136 changed files with 3322 additions and 420 deletions

56
step5_dev.md Normal file
View File

@@ -0,0 +1,56 @@
见素起名:阶段 5 - 收藏、分享与沉浸式交互开发手册
1. 收藏持久化:心动名单 (Persistence)
目前卡片页的“♥”操作仅为视觉反馈,我们需要将其数据化。
第一步:后端/云端数据表设计
- [ ] 数据库表结构:创建 user_favorites 表。
- openid: 用户唯一标识。
- name: 名字。
- origin: 出处。
- description: 解析文案。
- mode: 生成模式。
- create_time: 收藏时间。
- [ ] API 实现:
第二步:收藏页 (profile) 构建
- [ ] 页面布局:在 miniprogram/pages/profile 实现极致留白的瀑布流列表。
- [ ] 交互逻辑:点击收藏的名字,通过 半屏组件 (Half-screen Dialog) 重新展示那段“散文诗”解析。
---
2. 视觉升级:水墨风名片生成 (Poster Engine)
让用户能够一键生成极具高级感的名字画卷。
第三步:利用 snapshot 导出海报 (Canvas)
使用微信小程序最新的 snapshot 组件(替代传统 Canvas能更完美地保留宋体字感。
- [ ] 海报模版设计:
- 大字竖排:居中展示名字。
- 出处小字:横排或竖排在名字侧方。
- 印章效果:右下角添加红色的“见素”朱文印章。
- 二维码:左下角附带小程序码,引导二次传播。
- [ ] 导出逻辑:实现 onSavePoster 函数,将 WXML 节点直接转换为图片并保存至用户相册。
---
3. 细节打磨:多维感官反馈 (Immersive Experience)
通过听觉和触觉的结合,强化“见素”的品牌仪式感。
第四步:空灵音效引入 (Audio)
- [ ] 水滴声 (Ink Drop):在 home.js 的 startGenerate 中,当水墨动画启动时,调用 wx.createInnerAudioContext
播放一个短促、清脆的水滴落水声。
- [ ] 翻页声 (Paper Rustle):在 index.js 切换卡片时,播放微弱的纸张摩擦声。
第五步:触觉阻尼感 (Haptic)
- [ ] 震动反馈:
- 点击“♥”收藏时,触发 wx.vibrateShort({type: 'medium'})。
- 切换卡片或模式时,触发 wx.vibrateShort({type: 'light'}),模拟物理按键的阻尼感。
---
✅ 阶段 5 验收标准
1. 闭环测试:右滑收藏一个名字 $\rightarrow$ 在“我的心动名单”中能即时看到 $\rightarrow$ 点击能重新查看解析。
2. 海报质量:生成的图片中,名字是否保持了思源宋体的质感?印章位置是否优雅?
3. 感官一致性:音效是否轻盈不刺耳?震动反馈是否与视觉动画同步?
---
文档生成完成。这一阶段的实施将极大提升小程序的用户留存率与社交传播能力。