效果图
gif
gif
gif
GitHub 地址即项目搭建本地说明
需要使用网易云的接口 所以先克隆接口
https://github.com/Binaryify/NeteaseCloudMusicApi
NPM install 下载全部依赖包
node App.JS node 启动项目
仿网易云 Project 地址
https://github.com/LanHai1/palyer
NPM run serve 开启服务 < 根据终端提示开启网页即可 >
/* 项目中有很详细的注视 供参考 */
项目总结
使用到的插件有
axios < 接口资源请求 >
iscroll < 滚动插件 >
vue 在 methods 方法中调用 filters 里的过滤器的方法
this.$options.filters. 过滤器名字
VUE 父组件调用子组件中的方法
父组件里面需要给子组件设置 ref
再通过父组件的方法中使用 this.$refs.(ref 的值).(子组件的方法名)()
VUE 全局导入包
- /*mian.JS 导入 axios*/
- import axios from "axios";
- /* 全局配置 axios*/
- Vue.prototype.$axios = axios;
- /* 组件中直接 this.$axios 使用即可 */
根据回车切割成数组
string.split(/\n/)
按空格和换行切割
string.split(/[\s\n]/)
删除字符串的最后一个字符
string.substr(0, str.length - 1)
将时间戳转换为日期时间
- translateDate: function(current_date) {
- let date = new Date(current_date);
- let datetime =
- date.getFullYear() +
- "-" +
- (date.getMonth() + 1>= 10
- ? date.getMonth() + 1
- : "0" + (date.getMonth() + 1)) +
- "-" +
- (date.getDate() <10 ? "0" + date.getDate() : date.getDate()) +
- " " +
- (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
- ":" +
- (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
- return datetime;
- }
视频或音频
- var audio = document.getElementById("bgMusic");
- // 播放 (继续播放)
- audio.play();
- // 暂停
- audio.pause();
- // 停止
- audio.pause();
- audio.currentTime = 0;
- // 重新播放
- audio.currentTime = 0;
- audio.play();
文本溢出隐藏 省略号显示
- /* 需要为这个元素设置宽度 */
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
时长处理 (歌曲)
- formatTime(time) {
- // 分钟
- const minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
- // 秒
- const seconds =
- Math.ceil((time % (1000 * 60)) / 1000) == 10
- ? Math.ceil((time % (1000 * 60)) / 1000)
- : Math.ceil((time % (1000 * 60)) / 1000)> 10
- ? Math.ceil((time % (1000 * 60)) / 1000)
- : "0" + Math.ceil((time % (1000 * 60)) / 1000);
- return minutes + ":" + seconds;
- }
多个歌手名数据拼接处理
- formatSinger(singer) {
- let allSinger = "";
- singer.forEach(val => {
- allSinger += val.name + "/";
- });
- // 删除字符串的最后一个字符
- return allSinger.substr(0, allSinger.length - 1);
- }
解析 LRC 歌词
- formatLyric(val) {
- // 从尾部查找
- if (val.lastIndexOf("]") != "-1") {
- // 返回索引位置到字符串的结尾
- return val.slice(val.lastIndexOf("]") + 1);
- } else {
- return val;
- }
- }
来源: http://www.jianshu.com/p/90978a0f2cd5