Hello Pets - 宠物服务平台小程序

一个围绕宠物用品/短期寄养/上门喂养/宠物周边/宠物日常分享等功能的小程序平台。

🚀 快速开始

# 安装依赖
npm install

# 启动开发
npm run dev:weapp

👉 详细说明请查看： QUICK_START.md

---

技术栈

• 框架: Taro 3.6 + React 18
• 语言: TypeScript
• 样式: SCSS
• 云开发: 微信云开发
• 构建工具: Webpack 5
• 调试工具: Logger + ErrorBoundary + DebugPanel

---

🛠️ 调试工具

本项目内置了完善的调试工具系统：

1. Logger 日志工具

import { logger, performance } from '@/utils/logger'

logger.info('用户登录', { userId: 123 })
performance.start('loadData')

2. DebugPanel 可视化面板

• 点击右侧 🐛 按钮打开
• 实时查看所有日志
• 一键导出调试信息

3. ErrorBoundary 错误边界

• 自动捕获组件错误
• 显示友好错误页面
• 开发环境显示详细堆栈

👉 详细说明请查看： DEBUG_GUIDE.md

---

功能模块

MVP 核心功能

1. 上门喂养

• 服务者列表展示
• 按距离、价格、评分筛选
• 在线预约下单
• 订单状态跟踪
• 实时消息沟通

2. 宠物社区

• 发布宠物动态
• 图片/视频分享
• 点赞评论互动
• 关注其他用户
• 推荐/关注/最新动态流

3. 用户系统

• 微信一键登录
• 用户信息管理
• 宠物档案管理
• 地址管理
• 订单管理

4. 支付系统

• 微信支付集成
• 订单支付
• 退款处理

项目结构

hello-pets/
├── cloudfunctions/          # 云函数
│   ├── login/              # 登录
│   ├── getPostList/        # 获取动态列表
│   ├── publishPost/        # 发布动态
│   ├── createOrder/        # 创建订单
│   └── ...
├── config/                  # 配置文件
│   ├── index.js            # 主配置
│   ├── dev.js              # 开发环境配置
│   └── prod.js             # 生产环境配置
├── src/
│   ├── assets/             # 静态资源
│   │   ├── icons/          # 图标
│   │   └── images/         # 图片
│   ├── components/         # 公共组件
│   ├── pages/              # 页面
│   │   ├── home/           # 首页
│   │   ├── community/      # 社区
│   │   ├── service/        # 服务
│   │   │   ├── feed/       # 上门喂养
│   │   │   └── board/      # 短期寄养
│   │   ├── messages/       # 消息
│   │   └── profile/        # 个人中心
│   ├── services/           # API服务
│   ├── styles/             # 全局样式
│   ├── utils/              # 工具函数
│   ├── app.ts              # 入口文件
│   ├── app.scss            # 全局样式
│   └── app.config.ts       # 应用配置
├── types/                   # TypeScript类型定义
├── .gitignore
├── package.json
├── project.config.json     # 小程序配置
├── tsconfig.json           # TypeScript配置
└── README.md

快速开始

安装依赖

npm install

开发

# 启动微信小程序开发
npm run dev:weapp

构建

# 构建微信小程序
npm run build:weapp

云开发配置

1. 在微信开发者工具中打开项目
2. 创建云开发环境
3. 在 project.config.json 中配置 env 字段
4. 上传云函数到云开发环境
5. 创建数据库集合（参考 DATABASE_DESIGN.md）

小程序配置

1. 在微信开发者工具中配置 AppID
2. 配置服务器域名
3. 开启云开发服务
4. 配置支付商户号

数据库设计

详细数据库设计请参考 DATABASE_DESIGN.md

主要集合：

• users - 用户表
• posts - 动态表
• orders - 订单表
• messages - 消息表
• comments - 评论表
• likes - 点赞表
• follows - 关注表
• reviews - 评价表
• addresses - 地址表
• favorites - 收藏表

开发规范

代码规范

• 使用 TypeScript 进行类型检查
• 组件使用函数式组件 + Hooks
• 样式使用 SCSS，遵循 BEM 命名规范
• 使用 ESLint 进行代码检查

Git 提交规范

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 重构代码
test: 测试相关
chore: 构建过程或辅助工具的变动

分支管理

• main - 主分支，用于生产环境
• develop - 开发分支
• feature/* - 功能分支
• bugfix/* - 修复分支
• hotfix/* - 紧急修复分支

部署流程

1. 测试环境验证
2. 代码审查
3. 合并到主分支
4. 执行构建
5. 上传到微信平台
6. 提交审核
7. 发布上线

待实现功能

• 宠物商城
• 宠物医疗咨询
• 宠物训练课程
• 宠物领养
• 积分系统
• 优惠券系统
• 会员体系

常见问题

⚠️ 已解决的问题

本项目已修复以下常见问题：

1. WXSS 通配符错误 ✅

   • 微信小程序不支持 * 选择器
   • 已改用具体组件名

2. React is not defined ✅

   • 所有 .tsx 文件已正确导入 React
   • 配置了自动检查脚本

3. 图片资源打包失败 ✅

   • 配置了自动复制 assets 目录
   • 提供了统一的图标管理

👉 详细说明请查看： FIXES_SUMMARY.md

---

📚 文档索引

文档	说明
TECH_GUIDE.md	技术指南（调试、样式、资源管理）
DEV_NOTES.md	开发笔记（工作总结、问题修复）
FEATURE.md	功能文档（各模块设计和开发报告）
DATABASE_DESIGN.md	数据库设计
QUICK_START.md	快速启动指南
宠物服务平台架构设计文档.md	完整架构设计
PROGRESS.md	开发进度

---

常见问题

Q: 如何添加新的页面？

在 src/pages 下创建新页面文件夹，然后在 app.config.ts 中注册页面路由。

Q: 如何调用云函数？

使用 src/utils/request.ts 中的 callCloudFunction 方法。

Q: 如何上传图片？

使用 src/utils/index.ts 中的 uploadImage 或 uploadImages 方法。

贡献指南

欢迎提交 Issue 和 Pull Request！

联系方式

如有问题，欢迎提 Issue。

许可证

MIT License