59 lines
3.5 KiB
Markdown
59 lines
3.5 KiB
Markdown
|
既然**后端多模式架构、前端极简重构、并行生成加速、以及多样性去重逻辑**都已经落地，你的小程序已经具备了非常扎实的核心体验。
|
|||
|
|
|
|||
|
|
接下来的**阶段 4**，我们需要从“单次起名工具”向**“用户留存与品牌沉淀”**转型。目前用户看到好名字只能“心动”，但无法“行动”。
|
|||
|
|
|
|||
|
|
以下是为你规划的下一阶段开发需求：
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 阶段 4：情感联结与数字化沉淀
|
|||
|
|
|
|||
|
|
## 🎯 阶段目标
|
|||
|
|
建立用户的“心动名单”，并提供可分享的、具备仪式感的名字画卷（海报），完成从“搜索”到“收藏”再到“传播”的闭环。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 4.1 收藏夹功能：心动名单 (`My Hearts`)
|
|||
|
|
目前卡片页右滑（♥）只是一个动效，我们需要将其数据持久化。
|
|||
|
|
|
|||
|
|
* **需求详情**：
|
|||
|
|
1. **本地/云端存储**：用户点击 ♥ 时，将 `NameCard` 对象保存到 `wx.cloud.database`（推荐，省去后端存表麻烦）或通过接口存入数据库。
|
|||
|
|
2. **个人中心页**：新建 `pages/profile/profile`，采用极致留白的瀑布流或列表，展示用户收藏的所有名字。
|
|||
|
|
3. **二次查看**：点击收藏的名字，依然能通过弹窗或半屏组件查看那段“散文诗”般的描述。
|
|||
|
|
* **技术点**：实现微信授权登录（静默登录），确保收藏数据与 OpenID 绑定。
|
|||
|
|
|
|||
|
|
## 4.2 视觉升级：水墨风名片生成 (`Poster Engine`)
|
|||
|
|
用户起到了好名字，会有强烈的分享欲。我们需要把当前的卡片页转变为一张精美的海报。
|
|||
|
|
|
|||
|
|
* **需求详情**：
|
|||
|
|
1. **Canvas 绘图引擎**：在卡片页增加“保存海报”功能。
|
|||
|
|
2. **动态合成**：将名字（大字竖排）、出处（小字）、寓意（散文诗排版）以及“见素”的 Logo 合成为一张 9:16 的图片。
|
|||
|
|
3. **印章动效**：在海报右下角或名字处，模拟一个红色的“见素”朱文印章效果。
|
|||
|
|
* **技术点**：使用 `snapshot` 组件（微信小程序新特性，比 Canvas 2D 更好用）直接将 WXML 节点转为图片，保留宋体字感。
|
|||
|
|
|
|||
|
|
## 4.3 细节打磨：音效与触感 (Audio & Haptic)
|
|||
|
|
为了配合“水墨”视觉，加入听觉和触觉的多维交互。
|
|||
|
|
|
|||
|
|
* **需求详情**：
|
|||
|
|
1. **水滴声**：在首页点击“求名”触发墨滴动画时，播放一个极短、空灵的水滴声（注意控制音量和采样率）。
|
|||
|
|
2. **翻页触感**：在卡片左右切换时，配合 `wx.vibrateShort({type: 'light'})`，模拟纸张翻动的轻微阻力感。
|
|||
|
|
3. **背景白噪音（可选）**：卡片页提供一个极其细微的古琴或风声背景音开关，增强“沉思”感。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🛠️ 下一阶段任务分解 (Work Breakdown Structure)
|
|||
|
|
|
|||
|
|
| 模块 | 任务描述 | 难度 |
|
|||
|
|
| :--- | :--- | :--- |
|
|||
|
|
| **持久化** | 实现 ♥ 收藏接口，建立 `user_favorites` 数据库表 | ⭐⭐ |
|
|||
|
|
| **收藏页** | 编写 `profile` 页面，实现名字列表展示与取消收藏 | ⭐⭐ |
|
|||
|
|
| **海报生成** | 使用 `snapshot` 导出高清名字画卷，支持保存到相册 | ⭐⭐⭐ |
|
|||
|
|
| **多维交互** | 引入 `InnerAudioContext` 播放仪式感音效，优化震动反馈 | ⭐ |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 💡 为什么这是下一阶段的核心？
|
|||
|
|
1. **留存**：有了“收藏夹”，用户才会反复回来查看，而不是起完名就走。
|
|||
|
|
2. **传播**：一张好看的海报（带小程序码）是最低成本的获客方式。
|
|||
|
|
3. **深度**：音效与触感将“见素”从一个工具，提升为一种**解压式的审美体验**。
|