内容简介:这是一个基于该项目主要使用的一些工具有:github:
这是一个基于 Vue2.x
和 网易云音乐 API 制作的移动端 web app
项目;由于是出于练习和实验的目的,因此并非是网易云音乐 app
的 替代品 ,目前也没有涵盖全部的功能;
该项目主要使用的一些 工具 有:
-
webpack
和webpack-dev-server
-
vue
全家桶 - NeteaseCloudMusicApi 项目
-
axios
-
better-scroll
-
vue-lazyload
-
Iconfont
-
Muse-UI
github: github.com/xxf1996/vue…
线上地址: xiexuefeng.cc/app/music
使用须知
由于项目使用的 API
接口完全是基于 NeteaseCloudMusicApi
项目,因此需要事先启动该项目作为接口服务器(无论是本地还是云上);启动好后修改 src/index.js
文件中的 API
接口设置为实际使用的接口地址即可。
如何运行
安装依赖
npm i 复制代码
开发
npm start 复制代码
默认端口为 8080
;
打包发布
npm run build 复制代码
默认打包路径为 dist
;
功能说明
由于是针对移动端设计的 web app
,因此采用了 rem
布局来适应移动端不同分辨率的设备;设计稿是基于 375px
宽度的设备,仿照网易云音乐 app
的页面布局和设计。目前制作的功能界面有:
登录页面(伪)
为啥说是『伪』登录,因为这里只是获取用户的 uid
,此后获取到的数据都是一些 公开只读 的数据,而涉及到真正改变用户信息的操作(如收藏,点赞,评论等等)都不能使用;其实 NeteaseCloudMusicApi
项目提供了与网易云音乐 app
一样的手机或邮箱登录的接口,但是由于我的目的不是制作替代品,只是练习项目和试验一些功能,利用 uid
获取一些『只读』数据已经足够了(况且还涉及到用户密码和安全问题)。
那么如何查询自己的网易云音乐账户 ID
号呢?那就需要在网易云音乐 PC
网页端查看自己的个人主页,诸如 https://music.163.com/#/user/home?id=xxxxxxx
, id
后那串数字就是账户 ID
。
关于游客模式
游客模式实际上就是没有获取用户 uid
而已,因此有关『登录』用户的信息就无法查看(比如侧边栏信息和首页的用户歌单等),其他的数据基本上没有影响。
首页
侧边栏
首页顶部左边的图标,点击可弹出侧边栏查看用户信息,以及一些设置;
向左滑动或点击外侧可以收回;
查看更多歌单项
首页歌单区块默认最多显示两排( 2x3
, 6
个)歌单信息,点击栏目标题底部弹出全部信息:
歌单详情页
歌曲操作弹窗
带有 3
个竖排原点的图标,点击会出现一个关于歌曲操作的底部弹窗:
底部小播放器
点击歌单或专辑等页面的歌曲项后,底部会出现一个小播放器:
全屏播放
点击底部播放器会跳转到全屏播放页:
开启『显示频谱』选项后(默认关闭,因为有些浏览器对于 WebAuio API
支持不够),可以在封面看到实时的频谱图:
点击封面可以切换到全屏歌词页面:
当前播放列表
评论页面
专辑页面
歌手详情页面
用户详情页
搜索页
点击顶部菜单中的搜索图标即可进入搜索页面,在输入框中输入关键字,回车后即可获取搜索结果;目前只支持单曲类型。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- vue全家桶
- 升级vue全家桶过程记录
- SpringBootBucket 1.0.0 发布,SprintBoot全家桶
- 免费获取 JetBrains 全家桶正版 License 教程
- 使用React全家桶搭建一个后台管理系统
- Windows 10四月更新恢复预装“全家桶”遭吐槽
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
多任务下的数据结构与算法
周伟明 / 华中科技 / 2006-4 / 58.00元
本书和传统同类书籍的区别是除了介绍基本的数据结构容器如栈、队列、链表、树、二叉树、红黑树、AVL树和图之外,引进了多任务;还介绍了将任意数据结构容器变成支持多任务的方法;另外,还增加了复合数据结构和动态数据结构等新内容的介绍。在复合数据结构中不仅介绍了哈希链表、哈希红黑树、哈希AVL树等容器,还介绍了复合数据结构的通用设计方法;在动态数据结构中主要介绍了动态环形队列、动态等尺寸内存管理算法。在内存......一起来看看 《多任务下的数据结构与算法》 这本书的介绍吧!