仿网易云Project (vue-CLI+一些很常用的插件+项目技术点分享)

效果图

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;
      }
    }