webpack+vue+nwjs仿网易云播放器

作为一个单身狗，在这个一个人的七夕，我终于还是兑现了承诺，把这个播放器升级到了 vue2.0 ，我会在github的readme上写清楚用法的，然后提供一个安装包..对你没看错，是安装包（放心只是安装了一个nw木有木马）；

新github仓库url   https://github.com/mikoshu/myPlayer
安装包下载地址  http://demo.mikoshu.me/myPlayer.exe

前段时间逛贴吧，看到有个大神在linux上用nwjs撸了个音乐播放器，那我想着我也做做看吧，正好最近一些mvvm框架也挺火的，于是在纠结于是用ng，react还是vue。最后选择了vue，为什么呢？因为…….因为我英语不好啊！只有vue才有比较完整的中文文档嘛！哈哈哈哈！！

回到正文，这个播放器外观完全借鉴网易云，请勿吐槽。具体实现的功能有：

1.本地音乐导入，可导入本地文件夹内歌曲，并且播放。

2.再线搜索音乐，调用百度音乐api，可以搜索下载音乐。

3.创建喜欢列表，搜索到的音乐可以添加至喜欢列表。

接下来说说遇到的坑：

首先，由于是webpack+vue的项目，所以很自然的会用到vue-loader，由于第一次用对什么都不熟，也着实做了一番百度谷歌，才配置好。那么接下来的问题是，nwjs本身是支持在html文件里直接写node代码的，那么此时html或者js文件里的require则会被webpack解析，这样会和nw产生冲突，怎么办呢，后来查询资料以及在大神的帮助下解决问题，就是在webpack的配置文件下必须添加一个target字段如下：

target: 'node-webkit'

同时在nw的package.json里也添加一个字段node-remote，如下：

"node-remote": "http://localhost"

由于开发时是在本地，所以对应的值为localhost。

接下来，很开心配置都木有问题了，开始开发吧~，然而坑坑坑又来啦。第一个坑就是由于浏览器的input的file控件只能打开单个文件，然而很显然这个时候我需要打开的是一个文件夹。解决方法就是：

<input type="file" nwdirectory >

如上给input添加一个属性‘nwdirectory’。这是nwjs提供的方法。ok很完美啦，那下一个。

下一个坑呢，来自百度接口，当然我不懂这个接口是不是公开的，想来应该不是，百度别人博客上是该博主抓包抓到的接口，哈哈。这个坑就是，当我搜索到歌曲的 .mp3 文件时，无法访问该文件，然而直接用浏览器打开这个链接又可以。问了大神以后，说是有个反外链的机制。无奈在大神的帮助下，只能在执行播放器的同时开一个express服务器，在发送请求时候修改了请求头部的 referer 参数，成功绕过这个问题。

再接下来就是正常的开发阶段了，没有什么特别的地方。无非就是逻辑比较复杂，虽然这些虚拟dom的框架只需要维护组件的状态即可，但是参数多了还是挺蛋疼的。

下面提供一个半成品的下载地址，有兴趣的话可以体验一下哈： 此处下载 

下载后是一个rar包，解压后文件目录入下图：

双击 player.exe 即可运行啦（放心啦，木有病毒）！

对啦，源码源码， 源码我放在我的github上地址为 https://github.com/mikoshu/my-music-player

如果有无法使用的，或者有啥疑问的欢迎再github上发issues 或者直接加我qq咯，452753617。

嗯，就这样吧，虽然我知道做这些东西没有意义，但是不得不否认它在某种程度上还是锻炼的技能，思考方式以及编码水平。接下来如果有时间我会继续完善这个播放器的~