耗时 10 天，独立开发了一款「情绪日记」微信小程序｜附全流程开发 + 避坑指南

​

作为一名后端程序员，每天和接口、逻辑、报错打交道，久了总觉得生活少了点“情绪出口”。

看着自己写的代码能支撑起复杂的业务，却没法好好记录自己的喜怒哀乐，索性花了10天，从0到1撸了一款「情绪时光轴」微信小程序——不用复杂操作，点一点表情、写一句碎碎念，就能把每天的心情、瞬间都妥帖收藏。

今天把完整开发教程和设计思路分享出来，新手也能跟着做，文末还有小程序核心功能截图，先上成品效果镇楼👇

一、项目初衷：做一款“懂自己”的轻量化工具

先说说为什么做这款小程序，也是很多开发者会有共鸣的点：

1. 市面上的情绪软件要么太重（全是心理测试、课程），要么太杂（社交属性过强），我只想「安静记录，简单复盘」；
2. 微信小程序天然适配碎片化场景，打开即用、无需下载，完美匹配“随手记心情”的需求；
3. 作为后端开发，想打通「后端接口+前端UI+云开发」全链路，练手的同时做一款自己能用的产品。

最终确定核心功能：心情快捷标记、时光轴归档、情绪数据分析、收藏语录、成就体系，全程用 uniapp + 微信云开发实现，无需搭建服务器，新手友好度拉满！

二、核心技术栈选型（新手必看，避坑第一步）

结合小程序开发特性和个人技术栈，最终选型如下，兼顾开发效率和后期维护：

技术方向	选型工具 / 框架
跨端开发	uniapp（Vue2）
后端服务	微信云开发
UI 组件	uView UI

三、全流程开发教程

阶段1：前期准备

1. 小程序账号注册与配置

1. 登录「微信公众平台」，注册小程序账号（个人账号即可开发，仅部分权限受限，如支付）；
2. 记下小程序的 AppID（开发设置中获取），不要用测试号，否则无法调用云开发；
3. 下载安装「微信开发者工具」，选择稳定版，用于后期预览、调试、上传。

2. 开发环境搭建

1. 安装Node.js（推荐20/22LTS版本，避免过高版本兼容问题），配置npm环境；
2. 安装HBuilder X（uniapp官方开发工具）；
3. 初始化uniapp项目：选择「微信小程序」模板，填入小程序AppID，勾选“云开发”选项。

阶段2：核心功能开发

按「前端页面→云开发配置→接口联调→功能优化」的顺序开发，避免前后端脱节，以下是核心模块的开发要点，附关键代码和设计思路。

模块1：首页 - 心情快捷标记

设计思路：参考成品截图，以“今日心情如何？”为核心，20+情绪表情分类展示，点击即可快速记录，支持“写下更多”补充碎碎念、上传图片。

开发步骤：

1. 搭建页面结构：使用uView的 grid 组件实现表情网格，button 组件做“写下更多”按钮；
2. 情绪数据定义：在 data 中定义情绪数组，包含「表情图标、情绪名称、情绪类型（正面/负面）」；
3. 点击事件处理：绑定 click 事件，点击表情后跳转至“详细记录页”，携带情绪名称参数；
4. 每日一句功能：调用云数据库的「语录表」，随机获取一条语录展示，支持收藏（点击星星图标，将语录ID存入用户收藏表）。

模块2：时光轴 - 记录归档与查询

设计思路：顶部日历选择日期，下方按时间倒序展示当日情绪记录，支持图片、文字、标签展示，点击可查看详情/编辑/删除。

开发步骤：

1. 日历组件：使用uView的 calendar 组件，开启“多选禁用”，默认选中今日，绑定日期选择事件；
2. 云数据库查询：创建云函数 getEmotionRecord，根据用户openid和选择的日期，查询「情绪记录表」；
3. 页面渲染：将查询结果按卡片形式渲染，使用 image 组件展示上传的图片，tag 组件展示标签（如“工作压力”“生活琐事”）；
4. 分页加载：当记录数超过10条，使用 onReachBottom 实现下拉加载，避免一次性渲染过多数据导致卡顿。

 模块3：分析页 - 情绪数据可视化

设计思路：基于用户历史记录，自动生成「情绪维度雷达图」「情绪关键词云」「本周情绪小结」，让用户直观看到自己的情绪变化。

开发步骤：

1. 数据统计：创建云函数 analysisEmotion，统计近7天的情绪数据，计算正面/负面情绪占比、高频情绪关键词；
2. 图表渲染：使用uCharts绘制雷达图（情绪维度：愉悦度、焦虑度、疲惫度等），关键词云使用自定义组件实现；
3. 情绪洞察：根据统计结果，生成个性化洞察文案（如“整体情绪较均衡，偶尔波动很正常”），存入云数据库的「洞察文案表」，按需调用。

模块4：我的页 - 个人中心与成就体系

设计思路：展示用户基础数据、心绪集、成就徽章、收藏语录，支持编辑个人信息、退出登录，成就体系激励用户持续记录。

开发步骤：

1. 个人数据统计：调用云函数，统计用户「记录天数、连续天数、正面/负面情绪数量」；
2. 成就徽章：创建「成就表」，定义徽章获取条件（如“初笺：首次记录”“朝夕：连续记录7天”），每次记录后触发云函数，判断是否达成条件，更新用户成就；
3. 收藏语录：查询「用户收藏表」，展示用户收藏的语录，支持复制、取消收藏、置顶

阶段3：调试与优化

1. 本地调试：在HBuilder X中运行项目，选择「微信开发者工具」，在工具中开启“云开发”，创建云环境，初始化云数据库表；
2. 兼容性测试：在不同手机型号（安卓/苹果）、不同微信版本中测试，确保页面适配、功能正常；
3. 性能优化：压缩图片资源（使用WebP格式），分包加载（将“成就页”“收藏页”设为分包），减少首包体积（控制在2MB内）；
4. 埋点统计：接入微信小程序数据助手，添加自定义埋点（如“表情点击量”“记录完成率”），便于后期分析用户行为。

阶段4：上线准备与发布

1. 云开发配置：在微信开发者工具中，将云函数、云数据库规则发布（设置权限为“仅创建者可读写”）；
2. 小程序审核：在微信公众平台，填写小程序名称、简介、类目（选择“工具-生活服务”），上传小程序代码，提交审核（个人账号审核约1-3天）；
3. 上线发布：审核通过后，点击“发布”，小程序即可正式上线，分享给好友使用。 

四、开发避坑指南（踩过的坑，帮你省时间）

1. 云开发权限问题：云数据库表默认权限是“所有用户可读，创建者可写”，必须修改为「仅创建者可读写」，避免用户数据泄露；
2. 图片上传问题：微信小程序上传图片的临时路径有效期为24小时，需在云函数中调用 cloud.uploadFile，将临时路径转为永久文件路径，存入数据库；
3. 跨端兼容问题：uniapp开发时，避免使用浏览器专属API，使用uniapp内置API（如 uni.uploadFile 替代 fetch），确保小程序端正常运行；
4. 审核避坑：个人小程序不要涉及“医疗、金融、社交”等敏感类目，功能描述要贴合实际，避免夸大（如不要写“专业情绪分析”，改为“个人情绪记录复盘”）。 

五、最后想说的话

从后端程序员转型全栈，这款小程序不仅是练手项目，更是我对“自我关怀”的一次实践。

就像小程序里的那句收藏语录：“珍惜才配拥有”，记录情绪的过程，也是珍惜自己的过程。

目前小程序已经上线，自己用了快半个月，每天花1分钟记录，周末打开分析页，看着自己的情绪起伏，反而更能接纳那个“偶尔疲惫、偶尔困惑”的自己。

如果你也是程序员，想练手全栈开发，或者想做一款属于自己的轻量化工具，这款情绪记录小程序的方案完全可以复用；如果你只是需要一款简单的情绪记录工具，也可以去****微信搜索「日记拾光」****体验～

后续会继续迭代功能，比如添加“情绪日记导出”“好友情绪互助”，也欢迎各位开发者在评论区交流开发经验，一起优化！

​