diff --git a/components/AudioControl使用文档.md b/components/AudioControl使用文档.md deleted file mode 100644 index 4b2ed0d..0000000 --- a/components/AudioControl使用文档.md +++ /dev/null @@ -1,155 +0,0 @@ -# AudioControl 音频控制组件使用文档 - -## 组件功能 -- 在父组件右上角显示音频控制图标 -- 点击图标播放指定音频，同时暂停背景音乐 -- 再次点击暂停音频，恢复背景音乐 -- 音频播放结束后自动恢复背景音乐 - -## 组件属性 (Props) - -| 属性名 | 类型 | 必填 | 默认值 | 说明 | -|--------|------|------|--------|------| -| audioSrc | String | 是 | - | 音频文件路径 | -| visible | Boolean | 否 | true | 是否显示组件 | - -## 使用方法 - -### 1. 在父组件中引入和注册组件 - -```vue - - - - - -``` - -### 2. 使用项目中的showImg方法（推荐） - -如果你的音频文件也存储在项目服务器上，可以使用项目的showImg方法： - -```vue - -``` - -### 3. 动态控制音频源 - -你可以根据不同的页面或条件播放不同的音频： - -```vue - -``` - -## 样式说明 - -组件默认定位在父组件的右上角（top: 30rpx, right: 30rpx），如果需要调整位置，可以在父组件中覆盖样式： - -```vue - -``` - -## 注意事项 - -1. **父组件样式**：确保父组件设置了 `position: relative`，这样AudioControl组件才能正确定位 -2. **音频格式**：建议使用 mp3 格式的音频文件，兼容性最好 -3. **音频路径**：确保音频文件路径正确且可访问 -4. **背景音乐**：组件会自动处理与MusicControl组件的交互，无需额外配置 - -## 图标说明 - -- 🔊：音频未播放状态 -- 🎧：音频播放中状态，带有脉动动画效果 - -## 事件处理 - -组件内部已处理所有音频播放逻辑，包括： -- 播放音频时自动暂停背景音乐 -- 暂停音频时自动恢复背景音乐 -- 音频播放结束时自动恢复背景音乐 -- 组件销毁时自动清理资源 - -## 示例场景 - -适用于以下场景： -- 章节页面播放对应的音频解说 -- 展示页面播放介绍音频 -- 互动页面播放提示音频 -- 任何需要临时播放音频并暂停背景音乐的场景 \ No newline at end of file diff --git a/components/DynamicIsland - 副本.vue b/components/DynamicIsland - 副本.vue deleted file mode 100644 index 9c2e2ff..0000000 --- a/components/DynamicIsland - 副本.vue +++ /dev/null @@ -1,795 +0,0 @@ - - - - - \ No newline at end of file diff --git a/components/SwipeToNext使用文档.md b/components/SwipeToNext使用文档.md deleted file mode 100644 index beb649f..0000000 --- a/components/SwipeToNext使用文档.md +++ /dev/null @@ -1,293 +0,0 @@ -# SwipeToNext 组件使用文档 - -## 组件介绍 - -`SwipeToNext` 是一个通用的触底跳转组件，封装了手势检测、延迟防抖、提示文字等功能，可以在任何需要滑动跳转的页面中使用。 - -## 组件特性 - -- ✅ 手势滑动检测 -- ✅ 防误触发机制（延迟允许跳转） -- ✅ 可配置的滑动阈值 -- ✅ 自定义提示文字 -- ✅ 支持事件监听 -- ✅ 完全可配置的参数 - -## 使用方法 - -### 1. 引入组件 - -```vue - -``` - -### 2. 基础使用 - -```vue - - - -``` - -### 3. 完整配置使用 - -```vue - -``` - -## Props 参数 - -| 参数名 | 类型 | 默认值 | 必填 | 说明 | -|--------|------|--------|------|------| -| `isLastSlide` | Boolean | `false` | ✅ | 是否在最后一页/最后一个状态 | -| `targetPath` | String | - | ✅ | 跳转的目标路径 | -| `showTip` | Boolean | `true` | ❌ | 是否显示提示文字 | -| `tipText` | String | `'继续向上滑动进入下一章节'` | ❌ | 提示文字内容 | -| `swipeThreshold` | Number | `80` | ❌ | 滑动阈值（像素） | -| `delayTime` | Number | `500` | ❌ | 延迟允许跳转的时间（毫秒） | -| `enableDelay` | Boolean | `true` | ❌ | 是否启用延迟机制 | -| `alwaysEnable` | Boolean | `false` | ❌ | 是否总是启用跳转（忽略isLastSlide状态） | - -## Events 事件 - -| 事件名 | 参数 | 说明 | -|--------|------|------| -| `swipe-to-next` | `targetPath` | 触发跳转时的回调事件 | - -## 使用场景示例 - -### 场景1：图片轮播页面 - -```vue - - - -``` - -### 场景2：文章阅读页面 - -```vue - - - -``` - -### 场景4：单张图片或总是启用触底跳转 - -```vue - - - -``` - -```vue - - - -``` - -## 特殊情况处理 - -### 单张图片问题 - -当只有一张图片时，传统的 `isLastSlide` 逻辑不适用。这时可以使用 `alwaysEnable` 参数： - -```vue - - - - -``` - -### 参数优先级 - -当 `alwaysEnable="true"` 时： -- 忽略 `isLastSlide` 的值 -- 总是显示提示文字 -- 总是允许触底跳转 -- 建议设置 `enableDelay="false"` 以获得更好的响应速度 - - - -1. **确保正确设置 `isLastSlide`**：这是控制是否允许跳转的关键属性 -2. **路径格式**：`targetPath` 需要是有效的 uni-app 路由路径 -3. **性能考虑**：如果不需要延迟机制，可以设置 `enableDelay: false` 来提高响应速度 -4. **样式覆盖**：组件内的提示文字样式可以通过全局样式覆盖 -5. **事件监听**：建议监听 `swipe-to-next` 事件进行数据统计或其他操作 - -## 自定义样式 - -如果需要自定义提示文字的样式，可以在页面中添加： - -```scss -// 覆盖组件样式 -.swipe-to-next .bottom-tip { - bottom: 200rpx !important; // 调整位置 - background: rgba(255, 255, 255, 0.9) !important; // 改变背景色 - - text { - color: #333 !important; // 改变文字颜色 - font-size: 32rpx !important; // 改变字体大小 - } -} -``` - -这个组件极大地简化了触底跳转功能的实现，让你可以专注于业务逻辑而不用重复编写相同的手势检测代码。 \ No newline at end of file diff --git a/components/跨页面音频控制解决方案.md b/components/跨页面音频控制解决方案.md deleted file mode 100644 index a32147a..0000000 --- a/components/跨页面音频控制解决方案.md +++ /dev/null @@ -1,225 +0,0 @@ -# 跨页面音频控制解决方案 - -## 进一步优化：解决跨页面状态同步问题 - -### 问题描述 -在跨页面场景下，当音频正在播放时跳转到新页面，新页面的MusicControl组件不知道有音频在播放，点击背景音乐按钮时会直接播放背景音乐，导致音频和背景音乐同时播放。 - -### 解决方案 - -#### 1. MusicControl组件增强检测 -```javascript -// 在mounted生命周期中添加全局音频状态检测 -mounted() { - this.syncMusicState(); - this.checkGlobalAudioState(); // 新增：检查全局音频状态 - - // 定时器也要检查全局音频状态 - this.timer = setInterval(() => { - this.syncMusicState(); - this.checkGlobalAudioState(); - }, 1000); -} - -// 新增方法：检查全局音频状态 -checkGlobalAudioState() { - const app = getApp(); - if (app && app.globalData && app.globalData.currentAudio) { - const globalAudio = app.globalData.currentAudio; - this.isAudioPlaying = !globalAudio.paused; - } else { - this.isAudioPlaying = false; - } -} -``` - -#### 2. 全局音频管理工具优化 -```javascript -// 在音频状态变化时发送全局事件 -pauseCurrentAudio() { - const audio = this.getCurrentAudio(); - if (audio && !audio.paused) { - audio.pause(); - this.notifyAudioStateChange(false); // 通知状态变化 - return true; - } - return false; -} - -// 新增：通知音频状态变化 -notifyAudioStateChange(isPlaying) { - if (typeof uni !== 'undefined') { - uni.$emit('audioPlaying', isPlaying); - } -} -``` - -### 修复后的交互流程 -```mermaid -graph TD -A[跨页面跳转] --> B[MusicControl组件加载] -B --> C[检查全局音频状态] -C --> D{有音频在播放?} -D -->|是| E[设置isAudioPlaying=true] -D -->|否| F[设置isAudioPlaying=false] -E --> G[点击背景音乐按钮] -F --> G -G --> H{检查isAudioPlaying} -H -->|有音频| I[先暂停音频再播放背景音乐] -H -->|无音频| J[直接播放背景音乐] -``` - -## 问题描述 - -AudioControl组件在页面跳转时会出现以下问题： -1. 组件状态重置，图标显示不正确 -2. 音频实例丢失连接，但音频可能仍在播放 -3. 无法在其他页面控制正在播放的音频 - -## 解决方案 - -### 1. 全局音频实例管理 - -在`App.vue`的`globalData`中添加`currentAudio`属性，用于保存当前的音频实例： - -```javascript -globalData: { - // ... 其他属性 - currentAudio: null // 全局音频实例 -} -``` - -### 2. AudioControl组件优化 - -#### 状态同步机制 -- 组件挂载时检查全局音频状态 -- 复用已存在的音频实例（如果URL匹配） -- 组件销毁时不销毁全局音频实例 - -#### 核心方法改进 -```javascript -// 检查全局音频状态 -checkGlobalAudioState() { - const app = getApp(); - if (app && app.globalData && app.globalData.currentAudio) { - const globalAudio = app.globalData.currentAudio; - if (globalAudio.src === this.audioSrc) { - this.isAudioPlaying = !globalAudio.paused; - } - } -} - -// 初始化音频时复用全局实例 -initAudio() { - const app = getApp(); - if (app && app.globalData && app.globalData.currentAudio) { - if (app.globalData.currentAudio.src === this.audioSrc) { - // 复用现有实例 - this.audioContext = app.globalData.currentAudio; - this.isAudioPlaying = !this.audioContext.paused; - return; - } - } - // 创建新实例... -} -``` - -### 3. 全局音频管理工具 - -创建了`utils/globalAudioManager.js`工具类，提供统一的音频控制接口： - -```javascript -// 在任何页面或组件中使用 -uni.$globalAudio.pauseCurrentAudio(); // 暂停当前音频 -uni.$globalAudio.playCurrentAudio(); // 播放当前音频 -uni.$globalAudio.isAudioPlaying(); // 检查播放状态 -uni.$globalAudio.getCurrentAudioSrc(); // 获取当前音频源 -``` - -## 使用示例 - -### 在页面中控制音频 - -```vue - - - -``` - -### 在其他页面检查音频状态 - -```javascript -// 在任何页面的onShow生命周期中 -onShow() { - // 检查是否有音频在播放 - if (uni.$globalAudio.isAudioPlaying()) { - console.log('有音频正在播放:', uni.$globalAudio.getCurrentAudioSrc()); - } -} -``` - -## 技术优势 - -### ✅ **状态持久化** -- 音频实例在页面跳转时不会丢失 -- 组件状态能够正确同步全局音频状态 - -### ✅ **跨页面控制** -- 在任何页面都可以控制当前播放的音频 -- 提供统一的音频管理接口 - -### ✅ **资源优化** -- 避免创建多个音频实例 -- 自动清理无用的音频资源 - -### ✅ **用户体验** -- 页面跳转时音频播放不中断 -- 图标状态显示正确 -- 音频控制逻辑一致 - -## 注意事项 - -1. **页面生命周期**：音频实例与页面生命周期解耦，需要手动管理 -2. **内存管理**：确保在应用退出时正确清理音频资源 -3. **状态同步**：多个AudioControl组件需要监听相同的全局状态 -4. **错误处理**：增强错误处理机制，确保音频异常时的状态恢复 - -## 兼容性 - -- ✅ uni-app -- ✅ 小程序环境 -- ✅ H5环境 -- ✅ APP环境 \ No newline at end of file diff --git a/components/音频背景音乐交互说明.md b/components/音频背景音乐交互说明.md deleted file mode 100644 index c77ad71..0000000 --- a/components/音频背景音乐交互说明.md +++ /dev/null @@ -1,144 +0,0 @@ -# 音频与背景音乐交互功能说明 - -## Bug修复记录 - -### 问题描述 -当音频播放时点击背景音乐按钮，背景音乐暂停音频并开始播放。此时再点击关闭背景音乐，图标显示关闭状态但背景音乐仍在播放。 - -### 问题原因 -1. 点击背景音乐按钮时会发送事件暂停音频 -2. 音频暂停时会调用restoreBackgroundMusic恢复背景音乐 -3. 然后MusicControl再执行自己的切换逻辑 -4. 导致背景音乐被恢复后又被操作，状态混乱 - -### 解决方案 -1. **MusicControl组件优化**： - - 检测是否有音频在播放 - - 如有音频，先暂停音频，延迟执行背景音乐切换 - - 如无音频，直接切换背景音乐状态 - -2. **AudioControl组件优化**： - - 在handleBackgroundMusicToggle中只暂停音频 - - 不自动恢复背景音乐，让MusicControl自己控制 - -### 修复后的交互流程 -```mermaid -graph TD -A[点击背景音乐按钮] --> B{是否有音频播放?} -B -->|是| C[发送暂停音频事件] -C --> D[AudioControl暂停音频\n不恢复背景音乐] -D --> E[延迟100ms后切换背景音乐] -B -->|否| F[直接切换背景音乐状态] -``` - -## 实现的功能 - -### 🎵 **背景音乐控制音频** -当点击背景音乐控制按钮时： -- 如果有音频正在播放，会自动暂停音频 -- 然后正常切换背景音乐的播放/暂停状态 - -### 🎧 **音频控制背景音乐** -当点击音频控制按钮时： -- 播放音频时自动暂停背景音乐 -- 暂停音频时自动恢复背景音乐 -- 音频播放结束时自动恢复背景音乐 - -## 技术实现 - -### 事件通信机制 -使用uni-app的全局事件机制实现组件间通信： - -```javascript -// AudioControl组件发送事件 -uni.$emit('audioPlaying', true/false); - -// MusicControl组件发送事件 -uni.$emit('backgroundMusicToggle'); - -// 组件监听事件 -uni.$on('eventName', this.handlerFunction); -``` - -### 交互流程 - -#### 点击背景音乐按钮： -```mermaid -graph TD -A[点击背景音乐按钮] --> B[发送backgroundMusicToggle事件] -B --> C[AudioControl收到事件] -C --> D{音频是否在播放?} -D -->|是| E[暂停音频] -D -->|否| F[继续背景音乐操作] -E --> G[恢复背景音乐] -F --> H[切换背景音乐状态] -``` - -#### 点击音频按钮： -```mermaid -graph TD -A[点击音频按钮] --> B{当前音频状态?} -B -->|未播放| C[暂停背景音乐] -C --> D[播放音频] -D --> E[发送audioPlaying:true事件] -B -->|正在播放| F[暂停音频] -F --> G[恢复背景音乐] -G --> H[发送audioPlaying:false事件] -``` - -## 使用方法 - -在页面中同时使用两个组件： - -```vue - - - -``` - -## 优势特点 - -### ✅ **智能交互** -- 两个组件能够智能感知对方的状态 -- 避免同时播放音频和背景音乐造成的冲突 -- 提供良好的用户体验 - -### ✅ **解耦设计** -- 组件间通过事件通信，保持松耦合 -- 每个组件都能独立工作 -- 易于维护和扩展 - -### ✅ **状态同步** -- 实时同步音频和背景音乐的播放状态 -- 确保状态的一致性和准确性 - -## 注意事项 - -1. **事件监听清理**：组件销毁时会自动清理事件监听，避免内存泄漏 -2. **状态管理**：两个组件都维护各自的状态，通过事件保持同步 -3. **错误处理**：包含完善的错误处理机制，确保功能稳定运行 \ No newline at end of file