56 lines
2.7 KiB
Markdown
56 lines
2.7 KiB
Markdown
|
见素起名：阶段 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. 感官一致性：音效是否轻盈不刺耳？震动反馈是否与视觉动画同步？
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
文档生成完成。这一阶段的实施将极大提升小程序的用户留存率与社交传播能力。
|