先判断：这套实战资料值不值得你花时间

市面上很多 uni-app 资料停留在“跑通 hello world”或讲 API 列表，照着敲完仍不知道怎么落地一个完整产品。这套资料的核心价值在于它只做一件事：带你从零敲出一个音频小说应用，同时跑通小程序、H5 和 App 端。如果你正卡在“学过 Vue 基础却写不出一个像样项目”“公司要同时上线多端但不知怎么排期”这类场景，它比零散文档管用。它解决的是多端同构项目里组件拆分、状态管理和页面联动的工程化问题，而不是陪你重新学 JavaScript。如果你只是想随便找个入门视频，这套节奏偏实战，可能会觉得略硬。

适合什么基础，建议先看哪几块

它不适合完全没写过 Vue 的人。你需要掌握模板语法、组件注册、基本指令，最好用过命令行工具。资料前半段会快速过项目初始化、引入全局样式和图标库，这部分别跳，它决定了多端样式是否一致。建议先重点看底部导航、首页列表组件封装和功能页跳转这几块，因为音频小说应用的核心交互骨架就在这里。状态管理部分要结合具体页面看，别单独背概念，看它如何在播放状态、阅读进度同步时被调用。音频播放和小说阅读器的具体实现细节要跟着源码对照，遇到样式不生效先排查作用域和端差异。

怎么配合练习，学完能独立做什么

别只盯着视频看，一定要在本地把项目跑起来。先在 H5 端验证逻辑，再切到小程序模拟器看兼容问题，最后处理 App 端差异。每看完一个组件封装，暂停一下，自己改掉样式和数据结构，看页面是否还能正常渲染。把资料里的接口替换成自己 mock 的数据，测试列表分页和跳转是否健壮。学完后你应该能独立搭建一个多端资讯或内容类应用，掌握自定义组件封装、全局状态规划和多端条件编译的基本套路。这套资料的价值不在某个炫技功能，而在于让你走通一次完整的工程化流程，知道真实项目里每一步该怎么决策。


本项目为uni-app 实战音频与小说阅读器app、小程序和H5开发，另外还会结合vuex管理项目状态。一次开发，同时搞定Android、小程序和H5端等。

课程目录

*   1 1/

  *   1 项目介绍.mp4

*   2 项目初始化/

  *   2 项目初始化.mp4

  *   3 引入自定义css库.mp4

  *   4 引入矢量图标库.mp4

  *   5 封装icon组件.mp4

  *   6 引入css动画库.mp4

*   3 底部导航开发/

  *   7 底部导航开发.mp4

*   4 首页开发/

  *   8 顶部搜索框组件开发.mp4

  *   9 轮播图组件开发.mp4

  *   10 应用自定义.mp4

  *   11 功能分类组件开发.mp4

  *   12 list头部组件开发.mp4

  *   13 推荐组件开发.mp4

  *   14 主页列表部分.mp4

  *   15 封装列表组件.mp4

*   5 功能页开发/

  *   16 页面跳转.mp4

  *   17 开发页面title组件.mp4

  *   18 页面title组件补充.mp4

  *   19 上拉加载.mp4

*   6 音频组件开发/

  *   20 音频组件样式1.mp4

  *   21 音频组件样式2.mp4

  *   22 初始化Vuex.mp4

  *   23 音频初始化.mp4

  *   24 播放与暂停实现.mp4

  *   25 切歌实现.mp4

  *   26 音频信息显示实现.mp4

  *   27 进度条拖动实现.mp4

  *   28 音频优化.mp4

*   7 音乐详情页开发/

  *   29 详情页初始化.mp4

  *   30 详情页头部开发.mp4

  *   31 详情页按钮开发.mp4

  *   32 详情页歌曲详情开发.mp4

  *   33 详情页列表开发.mp4

  *   34 详情页列表与图标切换.mp4

  *   35 详情页列表选择播放.mp4

  *   36 详情页夜间模式.mp4

  *   37 详情页歌手简介详情.mp4

*   8 图书详情页开发/

  *   38 图书详情页头部.mp4

  *   39 tab组件开发.mp4

  *   40 详情与目录开发.mp4

*   9 阅读页面开发/

  *   41 设置头部开发.mp4

  *   42 设置底部开发.mp4

  *   43 文本部分开发.mp4

  *   44 预加载开发.mp4

  *   45 章节目录开发.mp4

  *   46 跳转到对应章节.mp4

  *   47 改变字体开发.mp4

  *   48 更多部分开发.mp4

  *   49 调节亮度开发.mp4

  *   50 主题切换开发.mp4

  *   51 阅读页补充.mp4

  *   52 解决主题重置问题.mp4

*   10 分类页开发/

  *   53 分类页左侧开发.mp4

  *   54 分类页右侧开发.mp4

  *   55 左联动右开发.mp4

  *   56 右联动左开发.mp4

*   11 收藏页开发/

  *   57 收藏组件开发.mp4

  *   58 收藏页初始化.mp4

  *   59 取消收藏界面初始化.mp4

  *   60 取消收藏界面样式开发.mp4

  *   61 取消收藏功能.mp4

*   12 用户页开发/

  *   62 用户页开发.mp4

*   13 多端兼容/

  *   63 H5兼容-解决图标不显示.mp4

  *   64 H5兼容-解决首页样式.mp4

  *   65 H5兼容-解决页面头部样式.mp4

  *   66 H5兼容-兼容阅读页.mp4

  *   67 H5兼容-修复音频组件.mp4

  *   68 H5兼容-补充.mp4

  *   69 微信小程序兼容-调节样式1.mp4

  *   70 微信小程序兼容-调节样式2.mp4

  *   71 微信小程序兼容-音频修复.mp4

*   14 前后端交互/

  *   72 前后端交互-首页.mp4

  *   73 前后端交互-榜单.mp4

  *   74 前后端交互-阅读页.mp4

  *   75 前后端交互-音频.mp4

  *   76 前后端交互-音频补充.mp4

  *   77 前后端交互-图书详情页.mp4

  *   78 前后端交互-图片优化.mp4

  *   79 前后端交互-收藏数据联动.mp4

  *   80 修复主题bug.mp4

  *   81 修复音频时间置零.mp4

*   15 打包上线/

  *   82 app打包.mp4

  *   83 h5上线.mp4

  *   84 微信小程序上线.mp4