81 lines
3.7 KiB
Markdown
81 lines
3.7 KiB
Markdown
|
见素起名：前端重构与适配详细开发手册
|
|||
|
|
|
|||
|
|
本手册涵盖 阶段 2：极简输入页 (home) 与 阶段 3：卡片展示页 (index) 的核心实现步骤。
|
|||
|
|
|
|||
|
|
🛠 开 发前置准备
|
|||
|
|
1. 字体加载：确保在 app.wxss 中已通过 @font-face 引入 思源宋体 (Noto Serif SC)，这是「见素」极简审美的基石。
|
|||
|
|
2. 全局变量：在 app.wxss 中定义好颜色变量：
|
|||
|
|
|
|||
|
|
1 :root {
|
|||
|
|
2 --jiansu-text: #1a1a1a; /* 墨色 */
|
|||
|
|
3 --jiansu-accent: #888888; /* 远山灰 */
|
|||
|
|
4 --jiansu-bg: #ffffff; /* 宣纸白 */
|
|||
|
|
5 }
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
阶段 2：前端极简输入页 (home) 重构
|
|||
|
|
|
|||
|
|
第一步：构建多模式选择器 (Structure)
|
|||
|
|
在 pages/home/home.wxml 中实现。
|
|||
|
|
- [ ] 创建模式容器 .mode-selector。
|
|||
|
|
- [ ] 使用 wx:for 渲染模式标签（宝宝、人设、拾遗）。
|
|||
|
|
- [ ] 底部设置微小动效点 .dot，仅在 active 状态下展示。
|
|||
|
|
|
|||
|
|
第二步：智能输入组逻辑 (Interaction)
|
|||
|
|
- [ ] 实现姓氏输入框 .surname-input 的显隐逻辑：仅在 activeMode === 'baby' 时展示。
|
|||
|
|
- [ ] 实现关键词输入框 .keyword-input，其 placeholder 需随模式动态变化。
|
|||
|
|
- [ ] 绑定输入事件 bindinput，实时同步数据到 Page.data。
|
|||
|
|
|
|||
|
|
第三步：水墨仪式感动效 (Animation)
|
|||
|
|
在 pages/home/home.wxss 中实现。
|
|||
|
|
- [ ] 设计按钮 .generate-btn：全黑背景、无圆角、加宽字间距。
|
|||
|
|
- [ ] 创建全屏遮罩 .ink-overlay。
|
|||
|
|
- [ ] 核心 CSS 动画：编写 @keyframes inkSpread。
|
|||
|
|
- 使用 clip-path: circle(0% at 50% 50%) 模拟墨滴中心。
|
|||
|
|
- 50% 时扩散至全屏，背景保持黑色。
|
|||
|
|
- 100% 时切回白色，配合页面平滑跳转。
|
|||
|
|
|
|||
|
|
第四步：跳转与数据组装 (Logic)
|
|||
|
|
在 pages/home/home.js 中实现。
|
|||
|
|
- [ ] 完善 startGenerate 函数：添加 keyword 非空校验。
|
|||
|
|
- [ ] 设置 isGenerating: true 触发水墨动画。
|
|||
|
|
- [ ] 使用 setTimeout 延迟 1000ms 执行 wx.navigateTo，确保仪式感完整。
|
|||
|
|
- [ ] 对 URL 参数进行 encodeURIComponent 转码。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
阶段 3：前端卡片页 (index) 适配
|
|||
|
|
|
|||
|
|
第五步：顶部状态信息流 (Header)
|
|||
|
|
在 pages/index/index.wxml 中实现。
|
|||
|
|
- [ ] 增加 .header-info 区域。
|
|||
|
|
- [ ] 动态显示“品牌名 · 模式 · 关键词”三个标签，中间用中点间隔。
|
|||
|
|
|
|||
|
|
第六步：卡片排版“散文诗”化 (Visual)
|
|||
|
|
在 pages/index/index.wxss 中实现。
|
|||
|
|
- [ ] 行间距调整：设置 .description 的 line-height: 1.8。
|
|||
|
|
- [ ] 对齐方式：使用 text-align: justify 提升阅读质感。
|
|||
|
|
- [ ] 换行处理：设置 white-space: pre-wrap，确保后端返回的诗句分行正确。
|
|||
|
|
|
|||
|
|
第七步：悬浮操作栏重构 (Action Bar)
|
|||
|
|
- [ ] 实现底部固定悬浮栏 .action-bar。
|
|||
|
|
- [ ] 设计圆形按钮 .circle-btn：利用 box-shadow 制造轻微的悬浮感。
|
|||
|
|
- [ ] 增加 active 缩放态，提供点击物理反馈。
|
|||
|
|
- [ ] 使用简单的 CSS 线条绘制“返回”图标。
|
|||
|
|
|
|||
|
|
第八步：多模式接口对接 (Network)
|
|||
|
|
在 pages/index/index.js 中实现。
|
|||
|
|
- [ ] 在 onLoad 中通过 options 接收 mode、keyword 和 surname。
|
|||
|
|
- [ ] 建立 modeMap 将模式 ID 映射为中文展示名称。
|
|||
|
|
- [ ] 修改 fetchNames 请求参数，确保与后端 API 增强后的参数一致。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
✅ 验收与调试清单
|
|||
|
|
1. 模式切换：从“宝宝”切到“人设”模式时，姓氏输入框是否自动消失？
|
|||
|
|
2. 水墨反馈：点击“求名”后，黑色水墨是否能平滑覆盖屏幕并进入加载态？
|
|||
|
|
3. 数据流转：从 home 输入的姓氏和关键词，是否在 index 顶部的状态栏正确显示？
|
|||
|
|
4. 审美校准：卡片背面的文字行高是否足够舒展？是否呈现出“见素”要求的文人气息？
|
|||
|
|
|
|||
|
|
---
|