沉浸式情绪避风港

这份文档为你将“树洞”小程序从一个基础的社交工具，升级为一个“沉浸式情绪避风港”提供了全方位的技术指导。1. 项目需求说明文档 (PRD)1.1 项目定位一款以“心理疗愈”为核心的树洞社交小程序。通过 12 种主题色彩与感官交互（声、触、视），为用户提供一个安全、解压、去社交压力的私密空间。1.2 核心功能矩阵基础功能多主题系统： 预设 12 种情绪色调，支持全局实时切换。首页 (Home)： 瀑布流展示匿名心事，包含自定义分类 Tab 和底部工具栏。发布页 (Post)： 极简输入环境，支持匿名发布、图片上传及心情标签选择。我的 (Profile)： 个人心事回顾、收藏夹、以及情绪统计数据。悬浮发布按钮 (FAB)： 全局可拖动的交互入口，集成了“呼吸引导”功能。治愈系附加功能 (The Healing Six)碎纸机 (The Shredder)： 允许用户写下负能量后，通过粒子动画将其“物理销毁”而不发布。解忧盲盒 (Blind Box)： 投入一份烦恼，随机获得一份来自他人或系统的温暖安慰文案。情绪调色盘 (Mood Palette)： 每日心情打卡，将情绪转化为色彩，形成长期的“心情日历”。呼吸岛屿 (Breathing Island)： 长按悬浮按钮触发 4-7-8 呼吸引导，配合震动反馈缓解焦虑。雨落字里 (Rainy UI)： 沉浸式氛围模式，文字上方落下雨滴，产生动态溅射效果。潮汐白噪音 (Ambient Audio)： 每个主题色对应一种自然声（如海浪、篝火），营造冥想环境。2. 技术开发文档2.1 技术栈选型框架： 微信小程序原生框架 (WXML / WXSS / JavaScript)状态管理： MobX-miniprogram (用于全局同步 12 种主题色及音频状态)动画引擎： Canvas 2D (用于碎纸机和雨滴效果)触感反馈： wx.vibrateShort (用于呼吸引导和交互增强)2.2 全局主题配置文件 (theme.config.js)JavaScript// theme.config.js
export const THEME_MAP = {
'CALM_OCEAN': {
name: '静谧深海',
primary: '#1A5276',
bg: '#FBFCFC',
text: '#2E4053',
audio: 'https://cdn.example.com/audio/waves.mp3', // 潮汐白噪音
vibe: 'rainy', // 是否默认开启雨落模式
accent: '#5DADE2'
},
'SUNSET_GLOW': {
name: '日落余晖',
primary: '#E67E22',
bg: '#FEF5E7',
text: '#5D4037',
audio: 'https://cdn.example.com/audio/fire.mp3',
vibe: 'warm',
accent: '#F4D03F'
}
// 共计12种配置...
}
2.3 核心组件开发逻辑A. 呼吸岛屿 (可拖动 FAB 组件)功能： 既是发布入口，又是呼吸引导器。代码思路：使用 movable-view 实现自由拖动。监听 longpress 事件，启动 CSS Keyframes 动画（scale 1.0 1.2 0.9）。在动画各阶段触发 wx.vibrateShort({ type: 'light' })，模拟呼吸的心跳感。B. 碎纸机动画 (Canvas 粒子化)逻辑： 1. 获取 textarea 的文本内容。2. 点击粉碎时，在原位置覆盖 canvas。3. 将文本转化为图片数据，利用 getImageData 获取像素点。4. 对像素点施加向下的重力和随机的水平分力，模拟碎纸飘落。C. 雨落字里 (沉浸式背景)实现： 1. 顶层 canvas 负责绘制雨滴线段。2. 维护一个 rainDrops 数组，每帧更新坐标。3. 碰撞检测： 判断雨滴 坐标是否到达卡片容器顶部，若是，则在该处绘制一个小圆弧（水花溅射），并销毁该雨滴。2.4 页面布局结构规范首页 (pages/index/index)Top Bar: 自定义组件，支持 box-shadow 随主题色透明度变化。Content: scroll-view 配合 enable-back-to-top。Floating Area: movable-area 覆盖全屏，内部放置 Breathing Island 组件。我的 (pages/mine/mine)情绪调色盘区块: 采用网格布局 (Grid)，展示 30 天的心情色块。解忧入口: 模拟盲盒开启的弹性动画 (Spring Animation)。2.5 性能与优化建议音频常驻： 使用 wx.getBackgroundAudioManager() 或全局 InnerAudioContext 确保用户切换 Tab 页时，白噪音不会中断。渲染压力： 雨落效果在滑动列表时建议暂停渲染（监听 scroll 事件），停止滑动后再恢复，以保证帧率。内存管理： 12 种主题色的切换建议通过修改 page-meta 的 root-font-size 或全局变量，避免频繁的 setData 大对象。2.6 项目里程碑 (Roadmap)第一阶段： 基础框架搭建，实现 12 种主题色切换及自定义 Tab。第二阶段： 完成“呼吸岛屿”与“潮汐白噪音”的感官联动。第三阶段： 开发“碎纸机”与“雨落字里”的高级 Canvas 动画。第四阶段： 接入“解忧盲盒”逻辑与后端文案库。