作为一个单身狗, 在这个一个人的七夕, 我终于还是兑现了承诺, 把这个播放器升级到了 vue2.0 , 我会在 github 的 readme 上写清楚用法的, 然后提供一个安装包.. 对你没看错, 是安装包 (放心只是安装了一个 nw 木有木马);
新 github 仓库 url https://github.com/mikoshu/myPlayer https://github.com/mikoshu/myPlayer
安装包下载地址 http://demo.mikoshu.me/myPlayer.exe 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 字段如下:
json 代码
target: 'node-webkit'
同时在 nw 的 package.json 里也添加一个字段 node-remote, 如下:
json 代码
"node-remote": "http://localhost"
由于开发时是在本地, 所以对应的值为 localhost.
接下来, 很开心配置都木有问题了, 开始开发吧~, 然而坑坑坑又来啦. 第一个坑就是由于浏览器的 input 的 file 控件只能打开单个文件, 然而很显然这个时候我需要打开的是一个文件夹. 解决方法就是:
html 代码
<input type="file" nwdirectory>
如上给 input 添加一个属性'nwdirectory'. 这是 nwjs 提供的方法. ok 很完美啦, 那下一个.
下一个坑呢, 来自百度接口, 当然我不懂这个接口是不是公开的, 想来应该不是, 百度别人博客上是该博主抓包抓到的接口, 哈哈. 这个坑就是, 当我搜索到歌曲的 .mp3 文件时, 无法访问该文件, 然而直接用浏览器打开这个链接又可以. 问了大神以后, 说是有个反外链的机制. 无奈在大神的帮助下, 只能在执行播放器的同时开一个 express 服务器, 在发送请求时候修改了请求头部的 referer 参数, 成功绕过这个问题.
再接下来就是正常的开发阶段了, 没有什么特别的地方. 无非就是逻辑比较复杂, 虽然这些虚拟 dom 的框架只需要维护组件的状态即可, 但是参数多了还是挺蛋疼的.
下面提供一个半成品的下载地址, 有兴趣的话可以体验一下哈: 此处下载 http://demo.mikoshu.me/download/myplayer.rar
下载后是一个 rar 包, 解压后文件目录入下图:
双击 player.exe 即可运行啦 (放心啦, 木有病毒)!
对啦, 源码源码, 源码我放在我的 github 上地址为 https://github.com/mikoshu/my-music-player https://github.com/mikoshu/my-music-player
如果有无法使用的, 或者有啥疑问的欢迎再 github 上发 issues 或者直接加我 qq 咯, 452753617.
嗯, 就这样吧, 虽然我知道做这些东西没有意义, 但是不得不否认它在某种程度上还是锻炼的技能, 思考方式以及编码水平. 接下来如果有时间我会继续完善这个播放器的
来源: http://www.qdfuns.com/article/16079/813719e5941543ee83ec6f6d8287d777.html