# Petto **Repository Path**: percey/petto ## Basic Information - **Project Name**: Petto - **Description**: 你的虚拟电子宠物Petto - **Primary Language**: 微信 - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-05 - **Last Updated**: 2026-03-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🐾 Petto — 虚拟电子宠物微信小程序 ## 📖 项目简介 **Petto** 是一款基于微信小程序云开发的虚拟电子宠物平台，为用户提供个性化、智能化的数字陪伴体验。 用户可以在「我的 Petto」页面与宠物进行喂食、互动、语音/文字对话，体验拟人化的陪伴感。项目集成了**AI智能对话**、**多种小游戏**、**论坛社区**、**消息系统**、**积分商城**和**个人主页**等模块，构建集娱乐、社交与个性化于一体的虚拟宠物世界。 --- ## ✨ 核心功能 ### � 我的 Pettoo（核心模块） - **智能对话**：集成通义千问AI，支持文字和语音对话，智能回复 - **语音交互**：集成百度语音识别和合成，真实语音通话体验 - **宠物互动**：点击宠物、喂食、陪玩，实时更新心情值和饥饿值 - **气泡提示**：可爱的临时气泡显示对话内容 - **宠物设置**：自定义宠物名称、性别及性格等 - **状态管理**：优化的宠物饥饿和心情变化机制（每5分钟饥饿+1） - **离线计算**：离线期间自动计算状态变化，返回应用时自动更新 - **背景选择**：6种精美背景可供选择 ### ✨ 宠物捏脸系统 - **五大自定义分类**：身体、花纹、眼睛、鼻子、嘴巴 - **6种身体类型**：Cobby、Foreign、Oriental、Semi-Cobby、Semi-Foreign、Substantial - **实时预览**：选择后立即查看效果 - **本地保存**：自动保存配置，下次打开自动加载 - **一键重置**：支持恢复默认外观 ### 👔 宠物衣橱系统 - **服装分类**：帽子、领结、眼镜、配饰等多种类别 - **拖拽装扮**：拖动服装到宠物身上即可装扮 - **已穿标识**：已穿戴的服装显示"已穿"标签 - **自动替换**：同类别服装自动替换 - **保存装扮**：一键保存当前装扮配置 ### 🎮 小游戏中心 - **翻牌记忆游戏**：3个关卡（4x4、4x6、6x6），经典记忆配对游戏 - **三消游戏（2048）**：经典2048游戏，支持触摸滑动操作 - **游戏记录**：记录游戏成绩和历史 - **积分奖励**：游戏获得积分，可在商城兑换物品 - **云端同步**：游戏成绩保存到云端 ### 🛒 积分商城 - **积分系统**：通过游戏和互动获得积分 - **商品分类**：食物（8种）和玩具（7种） - **数量选择**：支持批量购买和喂食 - **即时反馈**：购买后立即应用到宠物状态 - **免费商品**：提供基础免费物品（清水、小饼干） ### 💬 论坛社区 - **发布动态**：分享宠物日常和养宠经验 - **互动交流**：点赞、评论、关注 - **分类浏览**：推荐、喂养、照料、互动、成长、日常 - **个人动态**：查看自己发布的所有帖子 - **图片支持**：支持上传和展示图片 - **搜索功能**：按标题、作者、内容搜索 ### 📨 消息系统 - **分类管理**：点赞、关注、评论消息分类显示 - **系统通知**：接收各类互动通知 - **群组功能**：支持群聊和群管理 - **实时更新**：消息实时推送和更新 - **快捷入口**：便捷的消息访问入口 ### 👤 个人主页 - **用户信息**：展示头像、昵称、个性签名 - **宠物档案**：查看宠物信息和互动记录 - **游戏统计**：展示游戏成绩和积分记录 - **个性化设置**：编辑个人资料 - **意见反馈**：用户反馈和建议收集 --- ## 🛠️ 技术架构 ### 前端技术 - **框架**：微信小程序原生框架（WXML + WXSS + JavaScript） - **渲染引擎**：Skyline 渲染引擎 + Glass-Easel 组件框架 - **UI 组件**：自定义导航栏、消息头部、空状态组件、猫咪渲染器 - **动画**：CSS3 动画 + 微信小程序动画 API - **状态管理**：页面级数据管理 + 本地存储 - **响应式设计**：适配不同屏幕尺寸和安全区域 ### 云开发后端 - **云函数**：用户登录、宠物管理、社区互动、聊天、游戏数据 - **云数据库**：用户数据、宠物信息、社区内容、聊天记录 - **云存储**：用户头像、宠物图片、动态图片 - **云调用**：微信登录、消息推送 ### AI 与语音服务 - **AI 对话**：通义千问 API（支持降级到模拟模式） - **语音识别**：百度语音识别 API（每天 5000 次免费） - **语音合成**：百度语音合成 API（每天 5000 次免费） - **Token 管理**：自动获取和缓存 Access Token（30天有效期） - **兼容性处理**：支持新旧版本百度API ### 数据存储 - **本地存储**：wx.setStorageSync / wx.getStorageSync - **配置持久化**：宠物装扮、捏脸配置自动保存 - **云端同步**：用户数据、社区内容云端存储 - **图片管理**：智能图片池管理，支持本地和远程图片 ### 游戏引擎 - **Canvas API**：用于游戏渲染 - **触摸事件**：处理用户交互 - **动画系统**：游戏动效和过渡 - **积分同步**：游戏积分实时同步 --- ## 📁 项目结构 ``` Petto/ ├── pages/ # 页面目录（18个主要页面） │ ├── pet/ # 宠物主页（核心） │ ├── customize/ # 宠物捏脸 │ ├── wardrobe/ # 宠物衣橱 │ ├── game/ # 游戏中心 │ ├── flipcardgame/ # 翻牌记忆游戏 │ ├── match3-game/ # 三消游戏（2048） │ ├── points-store/ # 积分商城 │ ├── community/ # 论坛社区 │ ├── create-post/ # 发布动态 │ ├── post-detail/ # 动态详情 │ ├── my-posts/ # 我的动态 │ ├── message/ # 消息系统 │ │ ├── like/ # 点赞消息 │ │ ├── follow/ # 关注消息 │ │ ├── comment/ # 评论消息 │ │ ├── chat/ # 私聊 │ │ ├── group-chat/ # 群聊 │ │ └── group-setting/ # 群设置 │ ├── profile/ # 个人主页 │ ├── edit-profile/ # 编辑资料 │ ├── feedback/ # 意见反馈 │ ├── game-records/ # 游戏记录 │ ├── login/ # 登录页面 │ └── loading/ # 统一加载页面 ├── components/ # 组件目录（4个主要组件） │ ├── navigation-bar/ # 自定义导航栏 │ ├── message-header/ # 消息页面头部 │ ├── empty-state/ # 空状态组件 │ └── cat-renderer/ # 猫咪渲染器（核心） ├── cloudfunctions/ # 云函数目录（5个主要模块） │ ├── login/ # 用户登录认证 │ ├── pet/ # 宠物管理 │ ├── community/ # 社区功能 │ ├── chat/ # 聊天功能 │ └── game/ # 游戏数据 ├── cloudbase/ # 云开发配置 ├── utils/ # 工具函数库 │ ├── aiService.js # AI 和语音服务（核心） │ ├── qwenConfig.js # 通义千问配置 │ ├── baiduConfig.js # 百度语音配置 │ ├── catTemplate.js # 猫咪模板系统 │ ├── imagePool.js # 图片池管理 │ ├── pointsSync.js # 积分同步 │ ├── systemMessage.js # 系统消息 │ ├── cloudApi.js # 云API封装 │ ├── loadingNavigator.js # 导航工具 │ ├── mockVoiceService.js # 模拟语音服务 │ └── compatibleBaiduASR.js # 百度ASR兼容层 ├── assets/ # 静态资源 │ ├── pet_idle.png # 宠物图片 │ ├── wardrobe/ # 服装资源 │ ├── customize/ # 捏脸资源 │ ├── loading/ # 加载动画资源 │ ├── tabbar/ # 底部导航图标 │ ├── pet-backgrounds/ # 宠物背景图片（6张） │ ├── flipcards1/ # 翻牌游戏图片（3个关卡） │ └── icon/ # 通用图标 ├── images/ # 图片资源 │ ├── pokemon/ # 社区图片（1-5.png） │ ├── empty-games.svg # 空状态图标 │ └── empty-posts.svg # 空状态图标 ├── styles/ # 公共样式 │ └── message-common.wxss # 消息页面通用样式 ├── app.js # 小程序入口 ├── app.json # 全局配置 ├── app.wxss # 全局样式 ├── project.config.json # 项目配置 └── README.md # 项目说明 ``` --- ## 🚀 快速开始 ### 1. 环境准备 - 安装[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) - 注册[微信小程序账号](https://mp.weixin.qq.com/) ### 2. 克隆项目 ```bash git clone https://github.com/yourusername/petto-miniapp.git cd petto-miniapp ``` ### 3. 配置云开发环境 1. 在微信开发者工具中开通云开发 2. 创建云开发环境 3. 部署云函数： ```bash # 在微信开发者工具中右键各个云函数文件夹 # 选择"上传并部署：云端安装依赖" ``` ### 4. 配置AI服务（可选） 如需启用真实AI对话功能： 1. 注册[阿里云](https://www.aliyun.com/)账号 2. 开通通义千问服务，获取 API Key 3. 编辑 `utils/qwenConfig.js`： ```javascript const QWEN_CONFIG = { API_KEY: '你的API_KEY', // 其他配置保持默认 }; ``` 4. 在小程序后台添加服务器域名： - `https://dashscope.aliyuncs.com` ### 5. 配置百度语音（可选） 如需启用真实语音功能： 1. 注册[百度智能云](https://cloud.baidu.com/)账号 2. 创建语音应用，获取 API Key 和 Secret Key 3. 编辑 `utils/baiduConfig.js`： ```javascript const BAIDU_VOICE_CONFIG = { API_KEY: '你的API_KEY', SECRET_KEY: '你的SECRET_KEY', // 其他字段自动管理 }; ``` 4. 在小程序后台添加服务器域名： - `https://vop.baidu.com` - `https://tsn.baidu.com` - `https://aip.baidubce.com` ### 6. 导入项目 1. 打开微信开发者工具 2. 选择"导入项目" 3. 选择项目目录 4. 填入 AppID（测试号或正式 AppID） 5. 点击"导入" ### 7. 运行项目 - 点击"编译"按钮 - 在模拟器或真机上预览 --- ## 🎯 功能特色 ### 1. 智能语音对话 - 支持语音识别和语音合成 - AI 智能回复，保持可爱宠物口吻 - 根据关键词智能匹配回复 - 语音和文字无缝切换 - 兼容新旧版本百度API ### 2. 个性化定制 - 捏脸系统：自定义宠物外观 - 衣橱系统：丰富的服装搭配 - 拖拽装扮：直观的交互体验 ### 3. 丰富的互动 - 点击宠物：增加心情值 - 喂食：降低饥饿值，支持批量喂食 - 陪玩：提升心情值 - 对话：AI 智能回复 - 优化的状态变化：更合理的饥饿和心情机制 ### 4. 多样化游戏 - 翻牌记忆：3个关卡，锻炼记忆力 - 三消游戏：经典2048玩法 - 积分奖励：游戏获得积分 - 成绩记录：完整的游戏统计 ### 5. 积分商城 - 积分获取：游戏和互动获得积分 - 商品兑换：丰富的宠物用品 - 批量操作：支持数量选择和批量喂食 - 即时反馈：购买后立即生效 ### 6. 社交互动 - 论坛社区：分享宠物日常 - 消息系统：分类管理各种通知 - 个人主页：展示个性 - 意见反馈：用户建议收集 ### 7. 优化体验 - 统一加载页面：支持随机背景切换 - 响应式设计：适配各种屏幕 - 安全区域适配：完美支持刘海屏 - 性能优化：减少冗余资源，提升加载速度 --- ## 🎮 游戏功能详解 ### 翻牌记忆游戏 - **3个关卡**： - 关卡1：4x4 = 16张卡片（8对） - 关卡2：4x6 = 24张卡片（12对） - 关卡3：6x6 = 36张卡片（18对） - **计分系统**：基础分数 + 时间奖励 + 关卡奖励 - 步数惩罚 - **云端保存**：游戏成绩、耗时、步数保存到云端 - **积分奖励**：完成游戏获得积分 ### 三消游戏（2048） - **4x4网格**：经典2048游戏玩法 - **触摸滑动**：支持上下左右四个方向滑动 - **动画效果**：新方块生成、合并动画 - **最高分记录**：本地保存最高分 - **云端同步**：游戏成绩保存到云端 --- ## 🐾 宠物状态系统 ### 状态变化机制 - **饥饿值**：每5分钟增加1点（离线时也会增加） - **心情值**： - 饥饿值>70时：心情下降更快 - 饥饿值40-70时：心情缓慢下降 - 饥饿值<40时：心情缓慢恢复 - **交互效果**： - 点击宠物：心情+3 - 喂食：饥饿-5~35，心情+1~10 - 陪玩：心情+15，饥饿+2 ### 离线计算 - 记录上次更新时间 - 离线期间自动计算状态变化 - 返回应用时自动更新状态 --- ## 💬 社交功能详解 ### 社区系统 - **分类浏览**：推荐、喂养、照料、互动、成长、日常 - **点赞收藏**：本地存储 + 云端同步 - **用户帖子**：支持发布、编辑、删除 - **系统帖子**：使用Pokemon图片库 - **搜索功能**：按标题、作者、内容搜索 ### 消息系统 - **系统消息**：来自宠物的对话 - **社交通知**：点赞、关注、评论 - **群消息**：群聊消息管理 - **推荐关注**：推荐用户列表 --- ## 🔐 登录与认证 ### 登录流程 1. 微信授权登录 2. 获取用户信息（头像、昵称） 3. 调用云函数创建用户记录 4. 保存openid和用户信息到本地存储 5. 自动登录机制（下次打开自动登录） ### 数据持久化 - 用户信息：userInfo - OpenID：openid - UnionID：unionid（可选） - 宠物状态：petStatus - 宠物配置：catCustomization - 装扮配置：savedOutfit - 积分：userPoints --- ## 📊 数据流向 ### 本地存储数据 ``` userInfo # 用户信息 openid # 微信openid petStatus # 宠物状态（心情、饥饿） catCustomization # 宠物捏脸配置 savedOutfit # 宠物装扮配置 petSettings # 宠物设置（名称、性别、语音） userPoints # 用户积分 likedPosts # 点赞的帖子ID favoritedPosts # 收藏的帖子ID socialNotifications # 社交通知 groupMessages # 群消息 recommendations # 推荐用户 ``` ### 云端数据 ``` 用户表：用户信息、积分、等级 宠物表：宠物配置、状态历史 社区表：帖子、评论、点赞记录 聊天表：聊天记录、消息历史 游戏表：游戏成绩、排行榜 ``` --- ## 🚀 核心技术亮点 ### 1. 模块化设计 - 页面独立，职责清晰 - 组件复用，提高开发效率 - 工具函数封装，便于维护 - 云函数分离，后端逻辑清晰 ### 2. 用户体验优化 - 流畅的动画效果 - 直观的交互反馈 - 可爱的视觉设计 - 响应式布局 - Skyline渲染引擎优化性能 - 安全区域完美适配 ### 3. 性能优化 - Token自动缓存（30天有效期） - 本地数据持久化 - 按需加载资源 - 异步处理耗时操作 - 云端数据同步 - 资源清理：移除未使用的文件和代码 ### 4. 错误处理 - 完善的错误提示 - 降级处理机制（AI对话、语音服务） - 日志记录便于调试 - 网络异常处理 - 兼容性处理 ### 5. 代码质量 - 统一的代码风格 - 模块化架构 - 组件复用 - 清理冗余代码 - 优化项目结构 --- ## 💰 成本说明 ### 当前配置（基础免费） - **AI 对话**：通义千问API（按使用量计费，有免费额度） - **语音识别**：百度免费额度（每天 5000 次） - **语音合成**：百度免费额度（每天 5000 次） - **云开发**：微信云开发免费额度 - **基础使用成本**：¥0-5/天（取决于用户量） ### 如需升级 - **AI对话超出免费额度**：¥0.008-0.014/1000 tokens - **语音服务超出免费额度**：¥0.004/次 - **云开发超出免费额度**：按实际使用量计费 --- ## 📈 项目优化记录 ### 最近更新（2024年12月） - ✅ **资源清理**：删除了1000+个未使用的图片文件，显著减少项目体积 - ✅ **代码优化**：移除了重复的loading页面，统一为一个支持随机背景的页面 - ✅ **界面优化**：修复了消息页面和积分商店的滚动问题 - ✅ **体验改进**：优化了宠物饥饿值变化机制，降低了变化频率 - ✅ **安全区域适配**：完善了各页面对刘海屏等设备的适配 - ✅ **组件复用**：统一了消息子页面的头部组件 - ✅ **文档更新**：删除了开发过程中的临时文档文件 ### 性能提升 - 项目体积减少约60%（主要是图片资源优化） - 页面加载速度提升 - 内存使用优化 - 代码可维护性提升 --- ## 🚧 开发计划 ### 近期计划 - [x] 优化宠物状态变化机制 - [x] 统一loading页面，支持随机背景 - [x] 清理未使用的资源和代码 - [x] 优化消息系统界面和交互 - [ ] 添加更多宠物品种和外观选项 - [ ] 丰富服装和配饰种类 ### 中期计划 - [ ] 实现宠物PK对战功能 - [ ] 添加更多小游戏类型 - [ ] 开发宠物社交广场 - [ ] 实现数据云端备份恢复 - [ ] 添加宠物心情和健康系统 ### 长期计划 - [ ] 多宠物养成系统 - [ ] AR互动功能 - [ ] 宠物NFT系统 - [ ] 社区活动和比赛 - [ ] 跨平台数据同步 --- ## 🤝 贡献指南 欢迎提交 Issue 和 Pull Request！ ### 开发规范 1. 代码风格：遵循 ESLint 规范 2. 提交信息：使用语义化提交信息 3. 分支管理：功能分支开发，主分支稳定 4. 资源管理：及时清理未使用的资源文件 ### 提交流程 1. Fork 本仓库 2. 创建功能分支：`git checkout -b feature/AmazingFeature` 3. 提交更改：`git commit -m 'Add some AmazingFeature'` 4. 推送分支：`git push origin feature/AmazingFeature` 5. 提交 Pull Request --- ## 📄 开源协议 本项目采用 MIT 协议开源。 --- ## 📞 联系方式 - **项目地址**：[GitHub](https://github.com/yourusername/petto-miniapp) - **问题反馈**：[Issues](https://github.com/yourusername/petto-miniapp/issues) - **技术文档**：[docs/](./docs/) --- ## 🙏 致谢 感谢以下开源项目和服务： - 微信小程序开发平台 - 微信云开发服务 - 阿里云通义千问AI服务 - 百度智能云语音服务 - 所有贡献者和用户 --- **让 Petto 成为你最贴心的数字伙伴！** 🐾✨