peixue-dev/peidu/uniapp/README.md

陪读服务平台 - 小程序/App端

技术栈

• uni-app
• Vue 3 + Composition API
• Pinia (状态管理)
• uni-ui (UI组件库)
• uView UI (可选)

支持平台

• 微信小程序
• App (iOS/Android)
• H5 (可选)

项目结构

uniapp/
├── api/                  # API接口
│   └── index.js
├── components/           # 公共组件
│   ├── service-card/     # 服务卡片
│   ├── teacher-card/     # 教师卡片
│   └── order-item/       # 订单项
├── pages/                # 页面
│   ├── index/            # 首页
│   ├── service/          # 服务相关
│   │   ├── list.vue      # 服务列表
│   │   └── detail.vue    # 服务详情
│   ├── teacher/          # 教师相关
│   │   ├── list.vue      # 教师列表
│   │   └── detail.vue    # 教师详情
│   ├── order/            # 订单相关
│   │   ├── create.vue    # 创建订单
│   │   ├── list.vue      # 订单列表
│   │   └── detail.vue    # 订单详情
│   ├── user/             # 用户中心
│   │   ├── index.vue     # 个人中心
│   │   ├── profile.vue   # 个人资料
│   │   ├── student.vue   # 学生管理
│   │   └── coupon.vue    # 优惠券
│   └── teacher-center/   # 教师中心
│       ├── index.vue     # 教师首页
│       ├── orders.vue    # 订单管理
│       ├── schedule.vue  # 时间管理
│       └── earnings.vue  # 收益管理
├── static/               # 静态资源
│   ├── images/
│   └── css/
│       └── common.scss
├── store/                # 状态管理
│   ├── user.js
│   └── app.js
├── utils/                # 工具函数
│   ├── request.js        # 请求封装
│   ├── auth.js           # 认证相关
│   └── util.js           # 通用工具
├── App.vue
├── main.js
├── manifest.json         # 应用配置
├── pages.json            # 页面配置
└── uni.scss              # 全局样式变量

环境要求

• HBuilderX 3.6+
• 微信开发者工具 (微信小程序)
• Node.js 16+ (使用 CLI 开发)

开发方式

方式一：HBuilderX

1. 使用 HBuilderX 打开项目
2. 运行 -> 运行到小程序模拟器 -> 微信开发者工具
3. 或运行到手机或模拟器

方式二：CLI

1. 安装依赖

npm install

2. 运行到微信小程序

npm run dev:mp-weixin

3. 运行到 App

npm run dev:app

4. 运行到 H5

npm run dev:h5

配置说明

API 地址配置

编辑 utils/request.js:

const baseURL = process.env.NODE_ENV === 'development' 
  ? 'http://192.168.1.50:8080/api'
  : 'https://api.peidu.com/api'

微信小程序配置

1. 在微信公众平台配置服务器域名
2. 配置支付相关参数
3. 配置用户隐私保护指引

编辑 manifest.json:

{
  "mp-weixin": {
    "appid": "your_appid",
    "setting": {
      "urlCheck": false
    }
  }
}

核心功能

用户端功能

1. 首页

• 轮播图展示
• 服务分类导航
• 推荐教师
• 热门服务

2. 服务浏览

• 服务列表（支持筛选）
• 服务详情
• 教师信息
• 用户评价

3. 预约下单

• 选择学生
• 选择时间
• 选择优惠券
• 在线支付

4. 订单管理

• 订单列表（待支付、待服务、已完成）
• 订单详情
• 取消订单
• 申请退款
• 订单评价

5. 个人中心

• 个人信息
• 学生管理
• 我的订单
• 我的优惠券
• 学习记录
• 设置

教师端功能

1. 教师中心

• 收益概览
• 订单统计
• 待处理订单

2. 订单管理

• 订单列表
• 订单详情
• 扫码核销
• 填写学习记录

3. 时间管理

• 设置可预约时间
• 查看预约情况

4. 收益管理

• 收益明细
• 提现申请
• 提现记录

页面路由

主要页面路由配置在 pages.json:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": { "navigationBarTitleText": "首页" }
    },
    {
      "path": "pages/service/list",
      "style": { "navigationBarTitleText": "服务列表" }
    },
    {
      "path": "pages/order/create",
      "style": { "navigationBarTitleText": "确认订单" }
    },
    {
      "path": "pages/user/index",
      "style": { "navigationBarTitleText": "个人中心" }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/service/list",
        "text": "服务"
      },
      {
        "pagePath": "pages/order/list",
        "text": "订单"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的"
      }
    ]
  }
}

开发规范

代码规范

• 使用 Composition API
• 组件使用 PascalCase 命名
• 页面使用 kebab-case 命名
• 必要的注释

样式规范

• 使用 rpx 单位
• 遵循设计稿尺寸（750rpx）
• 使用全局样式变量

API 调用规范

• 统一使用 api/index.js 中的方法
• 错误统一处理
• Loading 提示

构建发布

微信小程序

1. 使用 HBuilderX 或 CLI 构建

npm run build:mp-weixin

2. 使用微信开发者工具打开 dist/dev/mp-weixin 或 dist/build/mp-weixin

3. 上传代码到微信公众平台

4. 提交审核

App

1. 配置证书和打包信息

2. 云打包或本地打包

npm run build:app

3. 生成安装包

常见问题

微信小程序真机预览白屏

检查服务器域名是否配置，API 地址是否正确

支付失败

检查支付配置，商户号是否正确

图片不显示

检查图片路径，确保使用正确的域名

请求超时

检查网络连接，后端服务是否正常

性能优化

• 图片懒加载
• 分包加载
• 请求缓存
• 防抖节流

测试

微信小程序测试

• 真机调试
• 体验版测试
• 不同机型适配

App 测试

• iOS 真机测试
• Android 真机测试
• 不同系统版本测试

联系方式

如有问题，请联系开发团队