人工精选uni-app 制作网易云音乐APP 视频教程
用 uni-app 做一个仿网易云音乐的 App，是前端练手项目里比较经典的一类选题：页面结构清晰、组件复用度高，又刚好能把跨端开发里最常遇到的列表渲染、状态管理、接口请求都串一遍。如果你已经会一点 Vue，想找个能写进简历的完整项目，这份视频教程值得花时间；如果你完全没碰过前端，建议先补 Vue
会员可免费下载本篇月会员可免费领取。
开通会员 ›会员 · 按档位
游客按标价购买，不享受上表折扣。
支付成功后自动发放网盘链接，链接失效可找客服免费补
用 uni-app 做一个仿网易云音乐的 App，是前端练手项目里比较经典的一类选题：页面结构清晰、组件复用度高，又刚好能把跨端开发里最常遇到的列表渲染、状态管理、接口请求都串一遍。如果你已经会一点 Vue，想找个能写进简历的完整项目，这份视频教程值得花时间；如果你完全没碰过前端，建议先补 Vue 基础再回来，否则跟到中后段会吃力。
它解决的是哪个工作场景
真实业务里，用 uni-app 的团队多数在做小程序 + App 双端交付，需求方要的往往就是「一套代码，两端能跑」。这门课选网易云音乐作为载体，覆盖的正是这类项目里绕不开的部分：底部导航、推荐页与歌单页的布局、滚动列表与图片懒加载、播放器状态在多个页面间同步。学完你对「一个页面从接口取数到渲染上屏」的完整链路会有实感，而不是停留在单个组件的语法层面。
需要提前说清楚的是：课程不涉及音频播放的底层实现，也不深挖跨端差异的兼容细节，它更像一个前端视角的界面与交互项目，把重点放在页面组织和数据流转上。
学完能独立做什么
- 照着接口文档搭建出带推荐、歌单、播放等主要页面的多端应用骨架，并跑通页面跳转与返回逻辑。
- 用组件化的方式拆分可复用的列表项、卡片和导航，而不是把所有结构堆在一个页面里。
- 处理常见的接口请求与数据渲染，理解列表循环、条件渲染、事件绑定这些标签层能力的实际用法。
- 把项目整理成可展示的作品，在面试里讲清楚每一块为什么这么拆。
资料结构和怎么用
教程按章节推进，第四章集中讲 uni-app 标签与小程序 API，这部分是承上启下的关键：前面建立的页面结构，从这里开始真正和平台能力对接。配套的章节笔记适合课后快速回看，尤其是标签属性和 API 调用方式这类容易记混的内容，看笔记比重新拖进度条快得多。
建议的节奏是：每看完两到三节就停下来，脱离视频自己把当节内容敲一遍，敲不出来的地方再回看。全部跟完后，不要满足于复现老师的代码，试着换一套自己的配色和页面顺序重做一次，这个过程里暴露的问题才是真正学到的东西。想再进一步，可以把接口换成公开的音乐数据源，或加上搜索与收藏这类课程没覆盖的功能。
适合什么基础的人
比较合适的是已经写过 Vue 组件、了解基本的 HTML 与 CSS 布局，但没做过完整跨端项目的人；也适合做过一段时间小程序、想转到 uni-app 技术栈的开发者。如果连组件通信、生命周期这些概念都还很陌生，先补基础，直接用这个项目入门容易卡在环境配置和目录结构上。
反过来，如果你已经独立做过两个以上完整前端项目，这门课能给你的增量主要在小程序 API 的实际调用和项目组织思路，价值有限，可以只挑标签与 API 那一章快速过一遍。
第四章 uni-app标签以及微信小程序API
课程推荐
《uni-app 制作网易云音乐APP 视频教程》第四章 uni-app标签以及微信小程序API【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。
视频目录（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
同类课程
和你正在看的这门一个方向
软考考证希赛李阿妹老师.软考中级软件设计师
永久有效 · 网盘发货
软考考证雅思备考必备｜剑雅1-19真题合集 +独家解析+听力原声（高清PDF+音频）
永久有效 · 网盘发货
软考考证薛大龙软考【高项】2026年5月
永久有效 · 网盘发货
软考考证超级面试官 ：让你看人不走眼的管理必修课 2.5万人次学过【完结】
永久有效 · 网盘发货
软考考证兄弟连出品细说PHP 第二版（DVD）
永久有效 · 网盘发货
软考考证软考中级网络工程师
永久有效 · 网盘发货