解决什么缺口：从零搭建一个完整的播放类小程序
很多uni-app的学习者停留在“能写页面”的阶段，一旦涉及多组件交互、全局状态管理以及复杂的媒体控制逻辑，就会卡壳。这门课以一款音频小说App为实战对象，专门填补这一能力空白。它不教你 Hello World，而是直接带你完成一个具备首页、详情页、全局音频控制台的完整商业级小程序。你将会遇到几个典型的技术痛点：如何优雅地处理跨页面的媒体状态同步？如何在列表无限加载时保持播放进度不丢失？如何让音频播放器既悬浮在底部，又能根据页面状态灵活适配？这些正是传统教程较少深入讲解的“缝合”细节。通过这个项目，你能清晰看到从静态布局到动态数据流，再到复杂交互逻辑的完整闭环，解决“代码会写，但联不起来”的问题。前置基础与最佳学习路径
建议你已经掌握 Vue.js 的基础语法、uni-app 的基本目录结构以及简单的接口调用，否则直接上手可能会在状态管理部分感到吃力。课程的前半部分（项目初始化至主页列表开发）侧重于工程规范与组件封装，包括自定义 CSS 库、矢量图标库的引入，以及底部导航、搜索框、轮播图等高频组件的独立开发。这部分内容相对独立，适合快速过一遍以熟悉 uni-app 的样式隔离和组件通信机制。后半部分是核心难点，从音频组件样式入手，逐步引入 Vuex 进行全局状态管理，实现播放、暂停、切歌、进度条拖动等核心功能，最后扩展到详情页的列表切换与夜间模式。建议先看前16节打下前端基础，再集中精力攻克第22至36节的音频状态机逻辑，这是本课程的真正价值所在。学完能做什么与资料配合
完成本课程后，你将能够独立开发具有复杂业务逻辑的小程序应用，特别是涉及音频、视频播放等需要全局状态协调的场景。你将熟悉 Vuex 在实际项目中的最佳实践，理解如何设计可复用的 UI 组件库，并掌握上拉加载更多、下拉刷新等交互模式的实现细节。配套资料包中的视频是主要学习载体，建议边看边敲代码，不要只看不练。对于音频控制部分，务必亲手调试每一行状态变更代码，因为媒体对象的 API 调用有着严格的时序要求，略懂即止容易留下隐患。此外，可以参考课程中引入的自定义 CSS 和动画库，尝试将其迁移到自己的其他项目中，真正做到举一反三。课程目录
课程目录： 1.项目介绍(买前必看).mp4 29.56M 2.项目初始化.mp4 41.86M 3.引入自定义css库.mp4 33.18M 4.引入矢量图标库.mp4 40.39M 5.封装icon组件.mp4 22.37M 6.引入css动画库.mp4 12.12M 7.底部导航开发.mp4 25.00M 8.顶部搜索框组件开发.mp4 22.14M 9.轮播图组件开发.mp4 22.42M 10.应用自定义 css动画.mp4 40.61M 11.功能分类组件开发.mp4 39.16M 12.list头部组件开发.mp4 20.23M 13.推荐组件开发.mp4 42.85M 14.主页列表部分.mp4 56.53M 15.封装列表组件.mp4 53.61M 16.页面跳转.mp4 25.26M 17.开发页面title组件.mp4 21.81M 18.页面title组件补充.mp4 28.22M 19.上拉加载.mp4 192.33M 20.音频组件样式1.mp4 35.02M 21.音频组件样式2.mp4 23.59M 22.初始化Vuex.mp4 68.29M 23.音频初始化.mp4 44.78M 24.播放与暂停实现.mp4 39.10M 25.切歌实现.mp4 33.50M 26.音频信息显示实现.mp4 185.22M 27.进度条拖动实现.mp4 41.01M 28.音频功能优化.mp4 52.95M 29.详情页初始化.mp4 29.74M 30.详情页头部开发.mp4 33.19M 31.详情页按钮开发.mp4 108.11M 32.详情页歌曲详情开发.mp4 22.05M 33.详情页列表开发.mp4 43.61M 34.详情页列表与图标切换.mp4 213.75M 35.详情页列表选择播放.mp4 92.27M 36.详情页夜间模式.mp4 141.92M 37.详情页歌手简介详情.mp4 119.42M 38.图书详情页头部开发.mp4 34.44M 39.tab组件开发.mp4 112.86M 40.详情与目录开发.mp4 227.04M 41.设置头部开发.mp4 37.94M 42.设置底部开发.mp4 64.52M 43.文本部分开发.mp4 227.66M 44.预加载开发.mp4 154.64M 45.章节目录开发.mp4 69.99M 46.跳转到对应章节.mp4 29.27M 47.改变字体开发.mp4 33.35M 48.更多部分开发.mp4 40.07M 49.调节亮度开发.mp4 33.90M 50.主题切换开发.mp4 176.27M 51.阅读页补充.mp4 91.12M 52.解决主题重置问题.mp4 208.16M 53.分类页左侧开发.mp4 93.77M 54.分类页右侧开发.mp4 28.91M 55.左联动右开发.mp4 20.72M 56.右联动左开发.mp4 189.44M 57.收藏组件开发.mp4 67.24M 58.收藏页初始化.mp4 38.36M 59.取消收藏界面初始化.mp4 165.84M 60.取消收藏界面样式开发.mp4 20.83M 61.取消收藏功能.mp4 358.05M 62.用户页开发.mp4 36.03M 63.H5兼容-解决图标不显示.mp4 133.13M 64.H5兼容-解决首页样式.mp4 17.57M 65.H5兼容-解决页面头部样式.mp4 63.24M 66.H5兼容-兼容阅读页.mp4 111.74M 67.H5兼容-修复音频组件.mp4 50.04M 68.H5兼容-补充.mp4 173.94M 69.微信小程序兼容-调节样式1.mp4 16.18M 70.微信小程序兼容-调节样式2.mp4 15.71M 71.微信小程序兼容-音频修复.mp4 9.53M 72前后端交互-首页.mp4 33.49M 73.前后端交互-榜单.mp4 36.39M 74.前后端交互-阅读页.mp4 43.52M 75.前后端交互-音频.mp4 90.10M 76.前后端交互-音频补充.mp4 36.91M 77.前后端交互-图书详情页.mp4 34.37M 78.前后端交互-图片优化.mp4 13.24M 79.前后端交互-收藏数据联动.mp4 174.99M 80.修复主题bug.mp4 8.12M 81.修复音频时间置零.mp4 55.96M 82.app打包.mp4 55.26M 83.h5上线..mp4 48.13M 84.微信小程序上线.mp4 18.26M 完整源码 课程目录：1.项目介绍(买前必看).mp4 29.56M2.项目初始化.mp4 41.86M3.引入自定义css库.mp4 33.18M4.引入矢量图标库.mp4 40.39M5.封装icon组件.mp4 22.37M
