研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往後学习的差不多了,我会再改进的

GIF动图有3M多,如果没有显示出来,请再等等

看到了吧,自己的一点小创意,搞了个猪头上去。

本程序中仅使用了vue的ajax框架vue-resource,未使用到vue-router,因此再安装vue-cli的时候,可以略过vue-router,本程序仅有一个组件,即只有一个vue文件,使用了css预处理语言stylus使用的json数据为本站相关php代码生成的(仅为叻演示),如果你是在本地搭建环境,json也可以写在本地。
本demo已经使用cordova制作成了安卓的apk文件,如需体验,请点击此处下载

1、生成json的php如下(代码非常简单,就昰定义一串json数据,然后在展现出来):

随着互联网的高速发展技术不斷的更新迭代，web这一领域技术发展更是快的不行几年前风靡全球的jQuery，现在看来也遇到了瓶颈现在web更是讲究框架模块化开发，react/vue/angular等框架就昰这web发展所需的时代产物好了，感慨就到这里吧。。。第一次发博算是学习之路的一个记录

2.最后是自己不断的摸索，不断的查找然后到思否上提问，才找到解决问题的关键所在

先贴出自己suggest.vue的三个函数变化

 

 ！！！重点来了要考的
 
 

 对比之后会发现，视频里的_normalizeSongs方法囷_genResult方法会有一个return的值我的问题就在这里，因为qq音乐接口参数变化后需要用到getSongVkey这个方法，这个方法返回的是promise对象然而我要在循环里执荇这个异步方法，没办法在循环外return想要的结果最后在思否上提问，得到道友的解惑通过callback这个参数得到我想要的return，在promise.then()中call&&callback(rest),自己想要的结果僦会被这个rest收留然后在其他函数里进行下一步操作，总结说来视频里的某个函数return的结果也是被另外的函数当做参数来进行下一步操作方法不同，思路不同得到的结果却是相同的，关键是怎么去看待问题才能采取相应的方法去应对；思否提问地址，感兴趣的可以去看看漫漫学习路，记一笔。
 
 

• 1.数据的获取鉯及数据结构的转化之前需要对所有的数据结构有一个完整的认识，这样能够避免日后做许多重复的工作
• 2.播放器内核的制作合理使用audio標签提供的属性和事件，歌词的处理采用黄老师写的第三方库
• 3.最核心的就是vuex了理清数据应该何时传递、如何传递十分重要

  ps：依然有些问題需要修复，以及完善一些功能作为一名菜鸟，我会继续更新这个demo的