脚本宝典收集整理的这篇文章主要介绍了

Vue 实现网易云音乐 WebApp

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/musical_keyboard.png" class="emoji" alt="musical_keyboard" title="musical_keyboard"> 基于 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>(2.5) + vuex + vue-router + vue-ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a> +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐、<a href="http://www.js-code.com/tag/flex" title="浏览关于“flex”的文章" target="_blank" class="tag_link">flex</a> 布局适配常见移动端。</p> <p><strong>因为服务器的原因,所以可能多人访问的时候有些东西会加载不出来,如果可以的话一会再访问应该就没什么问题了,出现这样的问题,实在抱歉。</strong></p> <p><img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/yum.png" class="emoji" alt="yum" title="yum"> 项目演示地址:<a href="http://120.79.162.149:3002" rel="nofollow noreferrer" target="_blank">移动端音乐 WebApp</a>,或者可以扫描二维码访问:</p> <p><span class="img-wrap"><img data-src="/img/bVbazux?w=280&amp;h=280" src="/img/bVbazux?w=280&amp;h=280" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <ul> <li>推荐使用手机访问,电脑在 Chrome 调试模式下食用效果更佳,开启调试模式的手机模式后,如果不能滚动,刷新一下页面即可</li> </ul> <p><img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/satisfied.png" class="emoji" alt="satisfied" title="satisfied"> 源码地址:<a href="https://github.com/CaiJinyc/vue-music-webapp" rel="nofollow noreferrer" target="_blank">vue-music-webapp</a>,欢迎 star 和 fork 哦~</p> <blockquote><p>如果你觉得我做的不错的话,我就厚着脸皮求个 <strong>star</strong> &#x2b50;&#xfe0f; 哈,<strong>star</strong> 是对我最大的鼓励(老脸一红)</p></blockquote> <h2 id="articleHeader0">预览</h2> <p>图片虽然压缩过了,但是几张加载一起还是有 3MB 左右,所以请耐心等待一下啦<img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/joy.png" class="emoji" alt="joy" title="joy">。感觉不错的可以去上面 <img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/point_up.png" class="emoji" alt="point_up" title="point_up">的地址体验一下呦~</p> <h4>推荐、排行榜、歌手</h4> <p><span class="img-wrap"><img data-src="/img/bVbazrI?w=3031&amp;h=1758" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h4>歌单详情、个人中心</h4> <p><span class="img-wrap"><img data-src="/img/bVbazrU?w=3031&amp;h=1758" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h4>播放器、播放列表</h4> <p><span class="img-wrap"><img data-src="/img/bVbazr2?w=3031&amp;h=1758" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h4>搜索页面</h4> <p><span class="img-wrap"><img data-src="/img/bVbazr1?w=2044&amp;h=1758" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h2 id="articleHeader1">开发目的</h2> <p>通过学习开发一个 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 全家桶项目,让自己更熟练的使用 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 全家桶、模块化开发、ES6 等等知识,提高自己的技术能力。</p> <h2 id="articleHeader2">技术栈</h2> <p><strong>前端</strong></p> <ul> <li> <code>Vue</code>:用于构建用户界面的 MVVM 框架</li> <li> <code>vue-router</code>:为单页面应用提供的路由系统,使用了 <code>Lazy Loading Routes</code> 技术来实现异步加载优化性能</li> <li> <code>vuex</code>:Vue 集中状态管理,在多个组件共享某些状态时非常便捷</li> <li> <code>vue-lazyload</code>:实现图片懒加载,节省用户流量,优化页面加载速度</li> <li> <code>better-scroll</code>:解决移动端各种滚动场景需求的插件,使移动端滑动体验更加流畅</li> <li> <code>S<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a></code>:css 预编译处理器</li> <li> <code>ES6</code>:<a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a> 新一代语法,模块化、<a href="http://www.js-code.com/tag/%e8%a7%a3%e6%9e%84%e8%b5%8b%e5%80%bc" title="解构赋值" target="_blank">解构赋值</a>、<a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e、<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a> 等方法非常好用</li> </ul> <p><strong>后端</strong></p> <ul> <li> <code>Node.js</code>:利用 Express 搭建的本地测试服务器</li> <li> <code>vue-ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a></code>:用来请求后端 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a> 音乐数据</li> <li> <code>NeteaseCloudMusicApi</code>:网易云音乐 NodeJS 版 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>,提供音乐数据</li> </ul> <p><strong>其他工具</strong></p> <ul> <li> <code>vue-cli</code>:Vue 脚手架工具,快速初始化项目代码</li> <li> <code>eslint</code>:代码风格检查工具,帮助我们规范代码书写(一定要养成良好的代码规范)</li> <li> <code>iconfont</code> :阿里巴巴图标库,谁用谁知道</li> <li> <code>fastclick</code> :消除 click 移动游览器 300ms 的延</li> </ul> <h2 id="articleHeader3">实现功能</h2> <p>播放器内核、推荐页面、热榜页面、歌手页面、歌单详情、歌手详情、排行榜详情、搜索页面、播放列表、用户中心等等功能。</p> <h3 id="articleHeader4">推荐页面</h3> <p>推荐页分成三个部分,分别是 banner 轮播图、推荐歌单、推荐歌曲,数据都是使用 <code>axios</code> 请求 <a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a> 获取得到的,图片都使用 <code>vue-lazyload</code> 实现懒加载。</p> <p>轮播图:使用 <code>better-scroll</code> 实现,具体可以看这里 <a href="https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#" rel="nofollow noreferrer" target="_blank">Slide</a> 。<em>点击跳转方面只实现歌曲和歌单的跳转,因为暂时只实现了这两个功能。</em></p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>推荐歌单,推荐歌曲:使用 <code>vuex</code> 管理数据,方便组件之间的数据交互(播放器播放歌曲)。因为数据上还有播放数量,所以就顺便也加上去了。</p> <h3 id="articleHeader5">排行榜页面</h3> <p>同样是通过 API 获取到排行榜的数据,但是因为 API 获取到的是排行榜中所有歌曲的数据,所以难免在加载速度上有点慢,后期再看能不能优化一下,加载的慢毕竟太影响用户体验了,别的就没什么了。</p> <h3 id="articleHeader6">歌手页面</h3> <p>实现歌手列表的左右联动(这个需要理解理解),因为之前已经写过和这个有关的博客,所以就不多写了,具体可以看我之前的这个笔记 <img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/arrow_right.png" class="emoji" alt="arrow_right" title="arrow_right"> <a href="http://caijin.tech/blog/2018/04/23/2018-4-23-list-view/" rel="nofollow noreferrer" target="_blank">移动端字母索引导航</a> 。</p> <h3 id="articleHeader7">歌曲列表组件</h3> <p>用来显示歌曲列表,在很多的地方都进行了复用,例如:歌单详情页、排行榜详情页、歌手详情页、搜索结果、用户中心等等。</p> <h3 id="articleHeader8">歌单详情页</h3> <p>通过歌单的 ID 来获取歌单中的歌曲数据,然后还做了一些体验上面的交互,比如上滑显示状态栏然后将状态栏标题变为歌单名,具体可以尝试一下就知道了。</p> <p>然后就是复用 歌曲列表组建 来显示歌曲。</p> <h3 id="articleHeader9">排行榜详情、歌手详情</h3> <p>和歌单详情基本上没有什么区别,除了 UI 界面方面有细微的改动(根据不同的内容作出不同的优化)。</p> <h3 id="articleHeader10">播放器</h3> <p>最最最重要的组件,毕竟是个音乐播放器,不能放歌那啥都是扯淡了。</p> <p>实现功能:顺序播放、单曲循环、随机播放、收藏等。</p> <p>播放、暂停使用 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5 的 audio 实现。</p> <p>数据、播放状态、播放历史、习惯歌曲等方面使用了 <code>vuex</code> 来进行管理,因为数据太多,组件直接传递的话是会死人的,所以还是老老实实的用 <code>vuex</code> 吧,数据之前的传递真的很方便。</p> <p>图标使用 <code>iconfont</code> 阿里巴巴图标库,中间的唱片旋转动画使用了 <code>animation</code> 实现。</p> <p>歌词部分获取到网易的歌词数据,然后使用 第三方库 <a href="https://github.com/ustbhuangyi/lyric-parser" rel="nofollow noreferrer" target="_blank"><code>lyric-parser</code></a> 进行处理。实现显示歌词、拖动进度条歌词同步滚动、歌词跟随歌曲进度高亮。</p> <p>通过 <code>localstorage</code> 存储喜欢歌曲、播放历史数据。</p> <h4>audio 标签在移动端不能够自动播放的问题</h4> <p>电脑端是没有这个问题的,这个问题真的是让我很头大,最后是用了很鬼畜的方法解决了(使用 <code>addEventListener</code> 监听 touchend 事件,然后在回调函数中让 audio 播放一次,具体看 App.vue 文件,注释有写)。</p> <h3 id="articleHeader11">播放列表</h3> <p>显示和管理当前播放歌曲,可以用来删除列表中的歌曲、以及选择播放歌曲。</p> <h3 id="articleHeader12">搜索功能</h3> <p>实现功能:搜索歌手、歌单、歌曲、热门搜索、数据节流、上拉刷新、保存搜索记录。</p> <p>通过关键字请求 API 获取搜索数据,显示歌手、歌单、歌曲。</p> <p>实现了上刷新,因为搜索可以设置请求数据的条数,所以可以用来实现上刷新的功能。</p> <p>通过节流函数实现数据节流,通过 <code>localstorage</code> 存储搜索数据。</p> <h3 id="articleHeader13">用户中心</h3> <p>将在本地存储的数据显示出来,方便用户使用,后期准备添加更多功能。</p> <h2 id="articleHeader14">TODO</h2> <ol> <li>优化排行榜加载速度</li> <li>优化重复代码</li> <li>增加歌曲评论</li> <li>增加 MV、电台 功能</li> <li>emm,更多功能容我再想想哈</li> </ol> <h2 id="articleHeader15">感谢</h2> <ul> <li>感谢 <a href="https://github.com/Binaryify" rel="nofollow noreferrer" target="_blank">Binaryify</a> 对接口文档 <a href="https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi" rel="nofollow noreferrer" target="_blank">NeteaseCloudMusicApi</a> 的不断维护与更新。</li> <li>感谢 <a href="https://github.com/ustbhuangyi" rel="nofollow noreferrer" target="_blank">ustbhuangyi</a> 老师的 <a href="http://coding.imooc.com/class/107.html" rel="nofollow noreferrer" target="_blank">Vue 实战教程</a> ,让我学习到很多 vue 的知识。</li> </ul> <h2 id="articleHeader16">最后</h2> <p>最后的最后当然是厚着脸皮的再求个 star 啦,如果觉得我的项目还不错的话 <img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/clap.png" class="emoji" alt="clap" title="clap">,就给个 star <img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/star.png" class="emoji" alt="star" title="star"> 鼓励一下吧~</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue 实现网易云音乐 WebApp

全部内容,希望文章能够帮你解决

Vue 实现网易云音乐 WebApp

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过