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