Web前端最全网易云音乐移动端项目实战(分解中)，2024年最新面试题参考答案

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

color: #e6e6e6;

}

.play {

margin-right: 0.1rem;

font-size: 0.64rem;

}

.menu {

font-size: 0.7rem;

}

}

}

}

playMusics.vue

1.基本布局

2.z-index属性

3.跑码灯marquee使用

4.从子组件@click="$emit('back')修改父组件数据@back="showpage=!showpage"

5.在行内样式直接引用变量:src="playdetail.al.picUrl"

//文本中引用 style=“{backgroundImage=url(”“)}”

:style=“{backgroundImage:url(${playdetail.al.picUrl})}”

<svg class=“icon” aria-hidden=“true” @click=“$emit(‘back’)”>

{{playdetail.al.name}}

<svg v-if=“isPause” class=“icon play” aria-hidden=“true” @click=“playEvent”>

<svg v-else class=“icon play” aria-hidden=“true” @click=“playEvent”>

import { createStore } from ‘vuex’

export default createStore({

state: {

playlist:[{

id:138164304,

name:“不会再爱你了3.0”,

al:{

id:138164304,

name:“不会再爱你了3.0”,

pic:109951166868365440,

picUrl:“http://p4.music.126.net/ajXo6RG2aM8I5yYJuPmUrQ==/109951166868365438.jpg”

}}],

playlistindex:0

},

mutations: {

changeplaylist:function(state,value){

state.playlist = value;

},

setPlayindex:function(state,indexvalue){

state.playlistindex = indexvalue

}

},

actions: {//异步获取数据然后修改对应方法

},

modules: {

}

})

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

mutations:

1、通过提交commit改变数据

2、只是一个单纯的函数

3、不要使用异步操作，异步操作会导致变量不能追踪。也就是说，用action中的函数调用mutations中的函数，进行异步操作state中的数据

五、获取歌词内容解析

1.找到获取歌词的api，ajax请求数据，获取对应id值的歌词详情

2.对歌词进行正则匹配，传递到store库中

播放全部

(共{{playlist.tracks.length}}首)

+收藏({{playlist.subscribedCount}})

{{i+1}}

{{item.name}}

{{item}}

{{item.al.name}}

store下的index.js

import { createStore } from “vuex”;

export default createStore({

state: {

playlist: [

{

id: 138164304,

name: “不会再爱你了3.0”,

al: {

id: 138164304,

name: “不会再爱你了3.0”,

pic: 109951166868365440,

picUrl:

“http://p4.music.126.net/ajXo6RG2aM8I5yYJuPmUrQ==/109951166868365438.jpg”

}

}

],

playlistindex: 0,

lyric: “”

},

getters: {

lyricContentFn: function(state) {

//split 把一个字符串分割成字符串数组

//slice 方法选取基于索引的元素的子集

let arr = state.lyric.split(/\n/igs).map((item, i) => {

var min = item.slice(1, 3);

var sec = item.slice(4, 6);

var mil = item.slice(8, 10);

var text = item.slice(11, item.length);

var time = parseInt(mil) + parseInt(sec)*1000 + parseInt(min)100060;

return {

time,

min,

mil,

sec,

lyric:text,

item

};

});

console.log(arr);

return arr;

}

},

mutations: {

changeplaylist: function(state, value) {

state.playlist = value;

},

setPlayindex: function(state, indexvalue) {

state.playlistindex = indexvalue;

},

setLyric(state, value) {

state.lyric = value;

}

},

actions: {

//异步获取数据然后修改对应方法

async reLyric(content, playload) {

content.commit(“setLyric”, playload);

}

},

modules: {}

});

playMusics.vue

<svg class=“icon” aria-hidden=“true” @click=“$emit(‘back’)”>

{{playdetail.al.name}}

{{item.lyric}}

<svg v-if=“isPause” class=“icon play” aria-hidden=“true” @click=“playEvent”>

<svg v-else class=“icon play” aria-hidden=“true” @click=“playEvent”>

api下的index.js

import axios from ‘axios’;

//获取轮播图API

/*

0: pc

1: android

2: iphone

3: ipad

*/

let localhostUrl = ‘http://localhost:3000’

export async function ff(type = 2) {

return await axios.get(${localhostUrl}/banner?type=${type});

}

//获取推荐歌单默认十条数据

export function getMusicList(limit = 10){

return axios.get(${localhostUrl}/personalized?limit=${limit})

}

//获取歌单的详情

export async function getMusicContent(id){

return await axios.get(${localhostUrl}/playlist/detail?id=${id})

}

//获取歌词的内容

export async function getLyric(id){

return await axios.get(${localhostUrl}/lyric?id=${id})

}

网速有点慢emmmm

六、歌词根据时间滚动

1.定义一个函数用于获取请求歌词对应的时间信息，并且找出当前所在歌词的播放时间点，以及当前歌词的内容项

2.在dom元素中循环出得到的数组输出对应的歌词，并且有条件是否当前给定activecolor：red样式。根据当前audio属性中有currentTime的值还有获取每一句歌词的播放事件点，以及播放前一个时间点做判断语句。让其发生样式的修改。

store下的index.js

import { createStore } from “vuex”;

export default createStore({

state: {

playlist: [

{

id: 138164304,

name: “不会再爱你了3.0”,

al: {

id: 138164304,

name: “不会再爱你了3.0”,

pic: 109951166868365440,

picUrl:

“http://p4.music.126.net/ajXo6RG2aM8I5yYJuPmUrQ==/109951166868365438.jpg”

}

}

],

playlistindex: 0,

lyric: “”,

currentTime: 0,

id:0

},

getters: {

lyricContentFn: function(state) {

//split 把一个字符串分割成字符串数组

//slice 方法选取基于索引的元素的子集

let arr = state.lyric.split(/\n/gis).map((item, i, arr) => {

var min = parseInt(item.slice(1, 3));

var sec = parseInt(item.slice(4, 6));

var mil = parseInt(item.slice(7, 10));

var time = mil + sec * 1000 + min * 1000 * 60;

return {

time,

min,

mil,

sec,

lyric: item.slice(10, item.length).replace(/[]]*/g, “”),

item

};

});

//实现拼接组合一个新的对象

arr.forEach((item, i) => {

if (i == 0) {

item.pre = 0;

} else {

item.pre = arr[i - 1].time;

}

});

return arr;

}

},

mutations: {

changeplaylist: function(state, value) {

state.playlist = value;

},

setPlayindex: function(state, indexvalue) {

state.playlistindex = indexvalue;

},

setLyric(state, value) {

state.lyric = value;

},

setCurrentTime(state, value) {

state.currentTime = value;

}

},

actions: {

//异步获取数据然后修改对应方法

reLyric(content, playload) {

content.commit(“setLyric”, playload);

}

},

modules: {

}

});

playMusics.vue

<svg class=“icon” aria-hidden=“true” @click=“$emit(‘back’)”>

{{playdetail.al.name}}

:class=“{active:(currentTime1000>=item.pre && currentTime1000<item.time)}”

v-for=“(item,i) in this.$store.getters.lyricContentFn”

:key=“i”

{{item.lyric}}

<svg v-if=“isPause” class=“icon play” aria-hidden=“true” @click=“playEvent”>

<svg v-else class=“icon play” aria-hidden=“true” @click=“playEvent”>

playcontrolor.vue

{{playlist[playlistindex].al.name}}

滑动可以切换上下首哦

<svg v-if=“isPause” class=“icon play” aria-hidden=“true” @click=“playEvent()”>

<svg v-else class=“icon play” aria-hidden=“true” @click=“playEvent()”>

<playMusics

@back=“showpage=!showpage”

:isPause=“isPause”

:playdetail=“playlist[playlistindex]”

v-show=“showpage”

:playEvent=“playEvent”

<audio

ref=“audio”

:src=“https://music.163.com/song/media/outer/url?id=${this.playlist[this.playlistindex].id}.mp3”

`

//感觉歌词的时间出现的值和当前获取aduio获当前时间不是对应的值，给他对应成下一句歌词时间还是不行的，我也很费解–

`

固定了一下歌词高度

playMusics.vue

<svg class=“icon” aria-hidden=“true” @click=“$emit(‘back’)”>

{{playdetail.al.name}}

:class=“{active:(currentTime1000>=item.pre && currentTime1000<item.time)}”

v-for=“(item,i) in this.$store.getters.lyricContentFn”

:key=“i”

{{item.lyric}}

<svg v-if=“isPause” class=“icon play” aria-hidden=“true” @click=“playEvent”>

<svg v-else class=“icon play” aria-hidden=“true” @click=“playEvent”>

七、上一首和下一首歌曲切换实现

1.触发事件修改歌曲列表中当前播放的index索引值加一或减一

playMusics.vue

<svg class=“icon” aria-hidden=“true” @click=“$emit(‘back’)”>

{{playdetail.al.name}}

:class=“{active:(currentTime1000>=item.pre && currentTime1000<item.time)}”

v-for=“(item,i) in this.$store.getters.lyricContentFn”

:key=“i”

{{item.lyric}}

<svg class=“icon rotatedicon” aria-hidden=“true” @click=“goPlay(-1)”>

<svg v-if=“isPause” class=“icon play” aria-hidden=“true” @click=“playEvent”>

<svg v-else class=“icon play” aria-hidden=“true” @click=“playEvent”>

<svg class=“icon trans” aria-hidden=“true” @click=“goPlay(1)”>