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.本地音乐导入,可导入本地文件夹内歌曲,并且播放。

play1.png

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

play2.png

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

play3.png

接下来说说遇到的坑:

首先,由于是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包,解压后文件目录入下图:

play4.jpg

双击 player.exe 即可运行啦(放心啦,木有病毒)!

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

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

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

4 条评论在 “webpack+vue+nwjs仿网易云播放器”

  1. 你好,怎样配置好让vue+webpack的工程,在npm run dev的时候,可以正常引用到node的一些modules,进行开发调试
    因为nwjs引用了一个node-printer的模块,需要用到fs,child_process等,但是vue+webpack在npm run dev的时候,报找不到fs和child_process这个几个node自带的模块,求助 : (

发表评论

电子邮件地址不会被公开。 必填项已用*标注