uni-app 制作网易云音乐APP 视频教程

软考考证

课程简介

《uni-app 制作网易云音乐APP 视频教程》第四章 uni-app标签以及微信小程序API【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或

已有 0 人浏览发布 2026-09-15 更新 2026-09-15

副标题先放这儿：这门课真正值钱的地方，不在最后那个能播歌的成品，而在第四章把 uni-app 的标签体系和微信小程序 API 讲透了。很多人冲着"仿网易云"四个字进来，结果卡在 list 渲染和页面栈上，就是因为跳过了这一章。

课纲含金量：别被"仿网易云"带偏

"仿一个知名 APP"这类选题在教程市场里泛滥，判断标准只有一个——拆出来的是通用能力，还是只够临摹一个壳子。这门课的骨架搭在 uni-app 的跨端思路上：一套代码如何映射到小程序、H5、App 三端，组件标签和原生小程序写法之间的差异在哪。第四章单独成章讲标签与微信小程序 API，说明作者没打算只教你把页面画出来，而是想让你理解运行时约束——哪些能力是小程序环境给的，哪些是 uni-app 封装的语法糖。这个区分搞清楚了，后面接任何跨端项目都不会慌。

相对薄弱的是工程化部分，视频形式讲配置和构建链路天生吃亏，基本靠边做边补。如果你的目标是把 Vue 和前端工程化一并吃下，得自己额外找补。

哪几章值得反复看

按投入产出比排个序：

第四章，精看两遍以上。标签体系是后面所有页面结构的地基，小程序 API 那部分建议暂停后自己手敲一遍调用，别只跟着敲。
数据请求与状态处理相关章节，重点看它怎么组织接口层。仿音乐类项目绕不开列表、详情、播放器状态同步，这里的写法可以直接迁移到别的项目。
播放器与全局状态那几节，值得逐帧暂停。音频这类持续状态和页面切换的组合，是最容易写出 bug 的地方，也是面试里能聊出深度的点。
可作为速览的：纯样式还原、静态页面搭建类小节。看个思路即可，不必逐节跟做，否则时间成本太高。

配套资料包拆开用，别整包吞

配套的章节笔记不要当"看完再翻"的复习材料，用法应该反过来——每学完一节先看笔记的提纲，确认自己能不能复述关键结论，不能就回看视频对应片段。目录结构可以当自学路线图用，学之前扫一遍，标记出与你现有技能重叠的部分直接跳过，把时间压到第四章和状态管理上。至于源码和素材，建议第一遍全程自己敲，第二遍再对照修正，直接抄会失去踩坑的记忆点。

学完能落到什么程度

诚实讲，一个仿网易云的成品写进作品集，本身说服力有限，招聘方看的是你能不能讲清楚跨端适配的取舍、接口分层的理由、播放器状态为什么这么设计。所以学完之后做两件事：一是把项目里某个模块用另一套思路重写一遍，二是准备一段三分钟的技术叙述，说清楚你踩过的最大的坑。这两样比成品截图管用得多。

适合的人：有 Vue 基础、想摸跨端开发、需要一个完整项目练手的。不适合的人：完全没有前端基础，指望从零到就业的——先补 JavaScript 和 Vue，再回来。

第四章 uni-app标签以及微信小程序API

课程推荐

视频目录（84 节）

* 课时1：导学.mp4

* 课时2：什么是uni-app.mp4

* 课时3：如何使用Hbuilder.mp4

* 课时4：微信支付宝小程序开发工具调试.mp4

* 课时5：hello world实现及多端调试（微信、支付宝）.mp4

* 课时6：MVC与MVVM思想.mp4

* 课时7：MVVM模式与数据的双向绑定.mp4

* 课时8：uni-app项目结构.mp4

* 课时9：uni-app路由配置.mp4

* 课时10：Vue路由配置.mp4

* 课时11：px与rpx的使用.mp4

* 课时12：uni-app生命周期函数.mp4

* 课时13：Vue生命周期函数.mp4

* 课时14：本章小结.mp4

* 课时15：v-bind指令实现数据绑定.mp4

* 课时16：v-show与v-if的基本使用.mp4

* 课时17：v-for实现列表渲染.mp4

* 课时18：列表渲染中的key值.mp4

* 课时19：index和id作为key值的区别.mp4

* 课时20：事件处理.mp4

* 课时21：条件编译.mp4

* 课时22：本章小结.mp4

* 课时23：view标签的使用及其属性.mp4

* 课时24：微信小程序scroll-view标签的使用.mp4

* 课时25：swiper标签的使用.mp4

* 课时26：icon图标标签的使用.mp4

* 课时27：text标签的使用及其属性.mp4

* 课时28：progress标签的使用.mp4

* 课时29：button标签的使用.mp4

* 课时30：checkbox-group标签的使用.mp4

* 课时31：input标签的使用.mp4

* 课时32：slider标签的使用.mp4

* 课时33：switch标签的使用.mp4

* 课时34：微信小程序navigatorAPI的使用.mp4

* 课时35：audio标签的使用.mp4

* 课时36：video标签的使用.mp4

* 课时37：map标签的使用.mp4

* 课时38：微信小程序canvasAPI的使用.mp4

* 课时39：本章小结.mp4

* 课时40：传统布局与flex弹性布局.mp4

* 课时41：flex容器属性.mp4

* 课时42：flex项目属性.mp4

* 课时43：flex实例演示.mp4

* 课时44：本章小结.mp4

* 课时45：git代码管理.mp4

* 课时46：创建git仓库.mp4

* 课时47：主页面底部导航栏.mp4

* 课时48：uni.request动态获取轮播图数据.mp4

* 课时49：轮播图区域开发.mp4

* 课时50：Vue中获取轮播数据.mp4

* 课时51：uni.request获取歌单数据.mp4

* 课时52：歌单区域开发.mp4

* 课时53：uni.request获取歌曲数据.mp4

* 课时54：歌曲区域开发.mp4

* 课时55：git上传代码.mp4

* 课时56：本章小结.mp4

* 课时57：uni.request获取排行页面数据.mp4

* 课时58：排行页面开发.mp4

* 课时59：git上传代码.mp4

* 课时60：本章小结.mp4

* 课时61：uni.request获取歌手数据.mp4

* 课时62：歌手页面开发.mp4

* 课时63：jsonp原理介绍+基础封装.mp4

* 课时64：vue中使用jsonp获取歌手数据.mp4

* 课时65：git上传代码.mp4

* 课时66：本章小结.mp4

* 课时67：uni.request获取歌手详情页数据.mp4

* 课时68：歌手详情页面开发.mp4

* 课时69：git上传代码.mp4

* 课时70：本章小结.mp4

* 课时71：排行详情页面数据获取.mp4

* 课时72：排行详情页面开发.mp4

* 课时73：git上传代码.mp4

* 课时74：本章小结.mp4

* 课时75：uni.request获取歌单详情页面数据.mp4

* 课时76：歌单详情页面开发.mp4

* 课时77：git上传代码.mp4

* 课时78：本章小结.mp4

* 课时79：uni.request获取播放器数据.mp4

* 课时80：播放器组件开发.mp4

* 课时81：audio组件的使用.mp4

* 课时82：uni.createInnerAudioContext的使用.mp4

* 课时83：基础组件的使用.mp4

* 课时84：本章小结.mp4