0到1手把手打造H5版网易云音乐

2023-10-08 21:11:17

想要打造一款H5版网易云音乐，首先要明确需求，分析市场，制定开发计划。明确了这些基本信息后，接下来就是技术选型和实现。这里，我们选择了Vue3.0、Vue-router4.0、Vuex4.0、Typescript和Vite2.0等技术栈，可以帮助我们快速构建出H5版网易云音乐。

1. 搭建项目骨架

使用Vue-CLI脚手架创建项目，安装必要的依赖库。项目目录结构如下：

├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   ├── router
│   ├── store
│   ├── style
│   ├── utils
│   ├── views
├── .gitignore
├── .prettierrc
├── README.md
├── tsconfig.json
└── vite.config.ts

2. 设计页面布局

接下来，设计页面布局，可以参考网易云音乐的官网设计，也可以根据自己的喜好进行设计。这里，我们采用的是常见的顶部导航栏+侧边栏+主内容区的布局。

3. 开发功能模块

接下来，就是开发功能模块了。主要包括音乐播放、歌单管理、电台、搜索等功能。

音乐播放：

// 播放音乐
const playMusic = (music) => {
  const audio = new Audio(music.url);
  audio.play();
  // 更新当前播放歌曲信息
  this.currentMusic = music;
};

歌单管理：

// 创建歌单
const createPlaylist = (playlist) => {
  this.playlists.push(playlist);
  // 保存歌单到本地存储
  localStorage.setItem("playlists", JSON.stringify(this.playlists));
};

// 删除歌单
const deletePlaylist = (playlist) => {
  const index = this.playlists.indexOf(playlist);
  if (index > -1) {
    this.playlists.splice(index, 1);
    // 保存歌单到本地存储
    localStorage.setItem("playlists", JSON.stringify(this.playlists));
  }
};

电台：

// 创建电台
const createRadio = (radio) => {
  this.radios.push(radio);
  // 保存电台到本地存储
  localStorage.setItem("radios", JSON.stringify(this.radios));
};

// 删除电台
const deleteRadio = (radio) => {
  const index = this.radios.indexOf(radio);
  if (index > -1) {
    this.radios.splice(index, 1);
    // 保存电台到本地存储
    localStorage.setItem("radios", JSON.stringify(this.radios));
  }
};

搜索：

// 搜索歌曲
const searchMusic = (keyword) => {
  const results = this.songs.filter((song) => {
    return song.name.includes(keyword) || song.artist.includes(keyword);
  });
  this.searchResults = results;
};