177 lines
4.9 KiB
Markdown
177 lines
4.9 KiB
Markdown
# 🎉🎉🎉 课程播放器路由问题彻底解决！
|
||
|
||
## 📅 时间
|
||
2026-01-23
|
||
|
||
## 🐛 问题根源
|
||
|
||
### 错误信息
|
||
```
|
||
navigateTo:fail page "user-package/pages/course/player?id=106&purchaseId=29" is not found
|
||
```
|
||
|
||
### 真正的原因
|
||
项目使用了 **双层目录结构**：
|
||
- **开发目录**: `peidu/uniapp/src/` （真正的源代码）
|
||
- **根目录**: `peidu/uniapp/` （旧的或编译输出）
|
||
|
||
**关键发现**：
|
||
1. ✅ 页面文件存在于 `src/user-package/pages/course/player.vue`
|
||
2. ❌ 但 `src/pages.json` 中没有注册 `player` 页面
|
||
3. ❌ 之前修改了根目录的 `pages.json`，但那不是实际使用的配置文件
|
||
|
||
## ✅ 正确的修复方案
|
||
|
||
### 修改 `src/pages.json`（真正的配置文件）
|
||
|
||
在 `user-package` 分包的 `pages/course/my-courses` 后面添加了3个缺失的页面：
|
||
|
||
```json
|
||
{
|
||
"path": "pages/course/player",
|
||
"style": {
|
||
"navigationBarTitleText": "课程学习"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/growth/list",
|
||
"style": {
|
||
"navigationBarTitleText": "成长记录",
|
||
"enablePullDownRefresh": true
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/growth/detail",
|
||
"style": {
|
||
"navigationBarTitleText": "记录详情"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📊 项目目录结构说明
|
||
|
||
### 双层结构
|
||
```
|
||
peidu/uniapp/
|
||
├── src/ ← 真正的源代码目录
|
||
│ ├── pages.json ← 真正的配置文件 ✅
|
||
│ ├── user-package/
|
||
│ │ └── pages/
|
||
│ │ ├── course/
|
||
│ │ │ ├── my-courses.vue
|
||
│ │ │ └── player.vue ← 页面文件在这里
|
||
│ │ ├── growth/
|
||
│ │ │ ├── list.vue
|
||
│ │ │ └── detail.vue
|
||
│ │ └── review/
|
||
│ │ ├── list.vue
|
||
│ │ └── submit.vue
|
||
│ └── ...
|
||
├── pages.json ← 旧的配置文件 ❌
|
||
├── user-package/ ← 旧的或编译输出目录
|
||
└── ...
|
||
```
|
||
|
||
### 为什么会有两个 pages.json？
|
||
- `src/pages.json` - **实际使用的配置文件**（开发时）
|
||
- `pages.json` - 可能是旧版本或编译输出
|
||
|
||
## 📋 修复的页面列表
|
||
|
||
| 页面 | 路径 | 功能 | 状态 |
|
||
|------|------|------|------|
|
||
| 课程播放器 | `pages/course/player` | 播放课程视频 | ✅ 已添加到 src/pages.json |
|
||
| 成长记录列表 | `pages/growth/list` | 显示学生成长记录 | ✅ 已添加到 src/pages.json |
|
||
| 成长记录详情 | `pages/growth/detail` | 查看单条成长记录详情 | ✅ 已添加到 src/pages.json |
|
||
|
||
**注意**：`pages/review/list` 和 `pages/review/submit` 已经在 `src/pages.json` 中存在，无需添加。
|
||
|
||
## 🎯 跳转路径
|
||
|
||
### 正确的跳转方式
|
||
```javascript
|
||
// 从我的课程跳转到播放器
|
||
uni.navigateTo({
|
||
url: `/user-package/pages/course/player?id=${courseId}&purchaseId=${purchaseId}`
|
||
})
|
||
|
||
// 从成长记录列表跳转到详情
|
||
uni.navigateTo({
|
||
url: `/user-package/pages/growth/detail?id=${recordId}`
|
||
})
|
||
|
||
// 从订单详情跳转到提交评价
|
||
uni.navigateTo({
|
||
url: `/user-package/pages/review/submit?orderId=${orderId}`
|
||
})
|
||
```
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 1. 重新编译项目 ⚠️ 重要！
|
||
```bash
|
||
# 在微信开发者工具中
|
||
1. 点击"编译" → "重新编译"
|
||
2. 或者关闭项目后重新打开
|
||
```
|
||
|
||
### 2. 测试课程播放器跳转
|
||
1. 进入"我的课程"页面
|
||
2. 点击任意课程的"查看课程"按钮
|
||
3. ✅ 应该成功跳转到课程播放器页面
|
||
4. ✅ 页面显示课程视频和学习记录
|
||
|
||
### 3. 测试成长记录跳转
|
||
1. 进入"成长记录"列表页面
|
||
2. 点击任意记录
|
||
3. ✅ 应该成功跳转到记录详情页面
|
||
4. ✅ 页面显示完整的成长记录内容
|
||
|
||
## 📁 修改的文件
|
||
|
||
### 正确修改的文件
|
||
- ✅ `peidu/uniapp/src/pages.json` - 添加了3个页面配置
|
||
|
||
### 错误修改的文件（已回滚）
|
||
- ❌ `peidu/uniapp/pages.json` - 这个文件不是实际使用的配置
|
||
|
||
## ⚠️ 重要提示
|
||
|
||
### 1. 始终修改 src 目录下的文件
|
||
- 开发时应该修改 `src/` 目录下的文件
|
||
- 根目录的文件可能是编译输出或旧版本
|
||
|
||
### 2. 修改后必须重新编译
|
||
- 修改 `pages.json` 后必须重新编译项目
|
||
- 在微信开发者工具中点击"重新编译"
|
||
|
||
### 3. 分包路径规则
|
||
- 分包配置在 `subPackages` 数组中
|
||
- `root` 指定分包根目录（相对于 src 目录）
|
||
- 分包内的页面路径是相对于 `root` 的相对路径
|
||
- 跳转时使用完整路径：`/分包root/页面路径`
|
||
|
||
### 4. 页面文件位置
|
||
```
|
||
src/user-package/pages/course/player.vue
|
||
↓
|
||
pages.json 中配置为: "pages/course/player"
|
||
↓
|
||
跳转时使用: "/user-package/pages/course/player"
|
||
```
|
||
|
||
## 🎉 修复完成
|
||
|
||
所有缺失的页面配置已正确添加到 `src/pages.json` 中！
|
||
|
||
### 下一步操作
|
||
1. ✅ **重新编译小程序**（最重要！）
|
||
2. ✅ 测试所有页面跳转功能
|
||
3. ✅ 确认页面显示正常
|
||
|
||
---
|
||
|
||
**修复时间**: 2026-01-23
|
||
**修复状态**: ✅ 完成
|
||
**关键文件**: `peidu/uniapp/src/pages.json`
|