正版资源uni-app 制作网易云音乐APP 视频教程
《uni-app 制作网易云音乐APP 视频教程》第四章 uni-app标签以及微信小程序API【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或
这套资料的主题很明确：用 uni-app 把网易云音乐的主要界面和交互做出来。它不是泛泛讲跨端框架概念的科普内容，而是围绕一个具体产品形态推进——底部 tab 切页、首页推荐、歌单列表、播放页、搜索，这些都是真实项目里会反复出现的结构。第四章单独拎出 uni-app 标签体系与微信小程序 API，说明它把「基础视图层能力」和「平台侧能力」拆开讲，方便你按需查阅。
技术栈与它解决的问题
核心是 uni-app 的组件与标签写法，底层跑在 Vue 的响应式模型上。网易云音乐这类应用的特点是列表多、层级深、状态需要在多个页面间共享（比如当前播放歌曲、播放状态）。教程里用到的技术点大致落在几块：视图容器与基础组件、页面路由与 tabBar 配置、列表渲染与条件渲染、事件绑定与传参、以及微信小程序侧的 API 调用。第四章之所以单独成章，是因为标签和 API 这两块是日常写页面时查得最频繁的部分——标签决定布局怎么写，API 决定能拿到什么能力。把这两块理顺，后面做音乐播放、数据请求、本地存储时才不会卡在语法层面。
工程结构上的可复用点
做这类仿站项目，价值往往不在「像不像」，而在沉淀下来的可复用模块。比较典型的几个：
- 页面容器与布局骨架：tabBar 页面、二级页面的公共结构，抽出来后新页面直接套。
- 列表组件：歌单卡片、单曲行、歌手行，本质是同一套 props + 插槽模式，换数据即可。
- 数据请求层：把接口调用和页面解耦，统一处理加载态、错误态和返回结构，避免每个页面各写一遍。
- 播放状态的集中管理：当前歌曲、播放列表、播放/暂停状态放在一处，播放页和迷你播放条共用。
这些模块跟网易云音乐这个具体题材绑定不深，换个内容型 App 依然能用。第四章讲标签时如果顺手把这些结构记下来，比单纯记标签属性更有长期收益。
标签与小程序的边界
用 uni-app 写页面，绕不开「哪些是框架统一封装的，哪些是平台特有的」。视图层标签大多通用，但涉及原生能力时就得走平台 API，微信小程序这一侧尤其明显。教程把这块单列，实际是提醒你：跨端不是写一遍到处跑就能万事大吉，平台差异要提前有预期。理解标签的语义和渲染结果，再理解 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
