320 lines
6.1 KiB
Markdown
320 lines
6.1 KiB
Markdown
# 陪读服务平台 - 小程序/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. 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
2. 运行到微信小程序
|
||
```bash
|
||
npm run dev:mp-weixin
|
||
```
|
||
|
||
3. 运行到 App
|
||
```bash
|
||
npm run dev:app
|
||
```
|
||
|
||
4. 运行到 H5
|
||
```bash
|
||
npm run dev:h5
|
||
```
|
||
|
||
## 配置说明
|
||
|
||
### API 地址配置
|
||
|
||
编辑 `utils/request.js`:
|
||
|
||
```javascript
|
||
const baseURL = process.env.NODE_ENV === 'development'
|
||
? 'http://192.168.1.50:8080/api'
|
||
: 'https://api.peidu.com/api'
|
||
```
|
||
|
||
### 微信小程序配置
|
||
|
||
1. 在微信公众平台配置服务器域名
|
||
2. 配置支付相关参数
|
||
3. 配置用户隐私保护指引
|
||
|
||
编辑 `manifest.json`:
|
||
|
||
```json
|
||
{
|
||
"mp-weixin": {
|
||
"appid": "your_appid",
|
||
"setting": {
|
||
"urlCheck": false
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 核心功能
|
||
|
||
### 用户端功能
|
||
|
||
#### 1. 首页
|
||
- 轮播图展示
|
||
- 服务分类导航
|
||
- 推荐教师
|
||
- 热门服务
|
||
|
||
#### 2. 服务浏览
|
||
- 服务列表（支持筛选）
|
||
- 服务详情
|
||
- 教师信息
|
||
- 用户评价
|
||
|
||
#### 3. 预约下单
|
||
- 选择学生
|
||
- 选择时间
|
||
- 选择优惠券
|
||
- 在线支付
|
||
|
||
#### 4. 订单管理
|
||
- 订单列表（待支付、待服务、已完成）
|
||
- 订单详情
|
||
- 取消订单
|
||
- 申请退款
|
||
- 订单评价
|
||
|
||
#### 5. 个人中心
|
||
- 个人信息
|
||
- 学生管理
|
||
- 我的订单
|
||
- 我的优惠券
|
||
- 学习记录
|
||
- 设置
|
||
|
||
### 教师端功能
|
||
|
||
#### 1. 教师中心
|
||
- 收益概览
|
||
- 订单统计
|
||
- 待处理订单
|
||
|
||
#### 2. 订单管理
|
||
- 订单列表
|
||
- 订单详情
|
||
- 扫码核销
|
||
- 填写学习记录
|
||
|
||
#### 3. 时间管理
|
||
- 设置可预约时间
|
||
- 查看预约情况
|
||
|
||
#### 4. 收益管理
|
||
- 收益明细
|
||
- 提现申请
|
||
- 提现记录
|
||
|
||
## 页面路由
|
||
|
||
主要页面路由配置在 `pages.json`:
|
||
|
||
```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 构建
|
||
```bash
|
||
npm run build:mp-weixin
|
||
```
|
||
|
||
2. 使用微信开发者工具打开 `dist/dev/mp-weixin` 或 `dist/build/mp-weixin`
|
||
|
||
3. 上传代码到微信公众平台
|
||
|
||
4. 提交审核
|
||
|
||
### App
|
||
|
||
1. 配置证书和打包信息
|
||
|
||
2. 云打包或本地打包
|
||
```bash
|
||
npm run build:app
|
||
```
|
||
|
||
3. 生成安装包
|
||
|
||
## 常见问题
|
||
|
||
### 微信小程序真机预览白屏
|
||
检查服务器域名是否配置，API 地址是否正确
|
||
|
||
### 支付失败
|
||
检查支付配置，商户号是否正确
|
||
|
||
### 图片不显示
|
||
检查图片路径，确保使用正确的域名
|
||
|
||
### 请求超时
|
||
检查网络连接，后端服务是否正常
|
||
|
||
## 性能优化
|
||
|
||
- 图片懒加载
|
||
- 分包加载
|
||
- 请求缓存
|
||
- 防抖节流
|
||
|
||
## 测试
|
||
|
||
### 微信小程序测试
|
||
- 真机调试
|
||
- 体验版测试
|
||
- 不同机型适配
|
||
|
||
### App 测试
|
||
- iOS 真机测试
|
||
- Android 真机测试
|
||
- 不同系统版本测试
|
||
|
||
## 联系方式
|
||
|
||
如有问题，请联系开发团队
|