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

wocacaca
wocacaca 发布于 2016-09-28 23:49:08 浏览:5079 类型:原创 - 教程 分类:类库框架 - 小demo 二维码: 作者原创 版权保护
好久没来这里了,大家伙还好咩~~~

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

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

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

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

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

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

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

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

接下来说说遇到的坑:

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

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

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

对啦,源码源码, 源码我放在我的github上地址为 https://github.com/mikoshu/my-music-player
如果有无法使用的,或者有啥疑问的欢迎再github上发issues 或者直接加我qq咯,452753617。

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

BTW:那啥,blog.mikoshu.me  我的博客啦,希望有空看看咯~
z
给个赞 25 人点赞
收藏 33 人收藏
评论 已有 20 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
13872401155
138724011552017-02-06 12:22:5320F
给你发私信了,关注下,亲!
举报 支持 (0) 回复 (0)
夏目贵志
夏目贵志2016-11-10 17:54:3419F
sdk和normal都要emoticon //@wocacaca:我也是翻墙用虚拟机下的...你要哪个版本 //@夏目贵志:楼主有nw.js的包吗  我下载不下来  文件都是损坏的emoticon
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2016-11-10 13:37:1018F
我也是翻墙用虚拟机下的...你要哪个版本 //@夏目贵志:楼主有nw.js的包吗  我下载不下来  文件都是损坏的emoticon
举报 支持 (0) 回复 (1)
夏目贵志
夏目贵志2016-11-09 16:58:0117F
楼主有nw.js的包吗  我下载不下来  文件都是损坏的emoticon
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-10-13 14:48:5216F
是999999999999 //@haihun:哎呀,简直是6666666666666
举报 支持 (0) 回复 (0)
haihun
haihun2016-10-13 01:31:1315F
哎呀,简直是6666666666666
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-10-08 10:13:2714F
哎呦~小公举 //@紫樱姐:哎哟 不错哦
举报 支持 (0) 回复 (0)
紫樱姐
紫樱姐2016-10-04 22:01:4413F
哎哟 不错哦
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-09-30 15:51:2612F
没啦,只是觉得好多东西都没到位,慢慢完善吧 //@皮皮鲁的长袜子:很不错啊,不要谦虚,比我好多了emoticon
举报 支持 (0) 回复 (0)
皮皮鲁的长袜子
皮皮鲁的长袜子2016-09-30 10:39:5011F
很不错啊,不要谦虚,比我好多了emoticon
举报 支持 (0) 回复 (1)
极乐网
极乐网2016-09-29 19:03:2010F
左上角的几个字比较夺目emoticon //@wocacaca:吼吼,谢谢支持,就是无聊时候玩玩 //@极乐网:效果挺好的~
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2016-09-29 18:57:119F
吼吼,谢谢支持,就是无聊时候玩玩 //@极乐网:效果挺好的~
举报 支持 (0) 回复 (1)
极乐网
极乐网2016-09-29 18:51:408F
效果挺好的~
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-09-29 15:46:247F
不幸苦哒~ //@晨羽Alison:辛苦啦~
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2016-09-29 11:11:536F
谢谢啦 //@兰心:不错哦
举报 支持 (0) 回复 (0)
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新