劳动节放假了,给大家分享一个轻松的开源项目,一个基于 Electron + Vue 开发的音乐软件。项目的一大特色就是多平台搜索歌曲,并支持下载功能(有些平台的vip歌曲也可以哦!)。
VSCode
开发工具(其他工具也可以)。下载项目 项目地址: https://github.com/lyswhut/lx-music-desktop 直接下载项目源码包,如下图:
本地运行
解压下载的zip
源码包,使用VSCode
开发工具打开,如下图:
打开终端
(控制台),执行下面命令就可以本地运行:
#设置electron淘宝镜像下载地址
npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
npm i #安装依赖
npm run dev #开发模式
本地运行效果如下图:
控制台会输出如下内容:
本地打包 使用下面命令可进行打包:
npm run pack:dir #构建免安装版
npm run pack #构建安装包(Windows版)
npm run pack:mac #构建安装包(Mac版)
npm run pack:linux #构建安装包(Linux版)
提前声明,我是前端菜鸟,只是对前端比较感兴趣。这里以一个小功能慢慢学习此项目。
本地开发环境运行项目,会自动运行Google devtool
,熟悉谷歌调试工具的小伙伴应该知道它的强大。这里我介绍两个功能,元素定位,日志查看。
元素定位
操作如下图,这样就可查看对应Element
的信息
结合定位到的元素的信息,在源码中查找相关代码。
日志查看 操作如下图,开发环境下如果有日志输出,我们可以通过日志反向学习代码。
可以看到每一次搜索框输入一个字母都会组装一个请求,回车的时候才会发送搜索歌曲的请求连接,http://search.kuwo.cn/r.s?client=kt&all=taylor%20swift&pn=0&rn=30&uid=794762570&ver=kwplayer_ar_9.2.2.1&vipver=1&show_copyright_off=1&newver=1&ft=music&cluster=0&strategy=2012&encoding=utf8&rformat=json&vermerge=1&mobi=1&issubtitle=1
当然通过全局搜索---start---
我们就可以知道组装请求链接的那部分代码在哪里了。
当然,你也可以直接下载安装包,本地安装使用, 安装包下载地址:https://github.com/lyswhut/lx-music-desktop/releases 根据自己的需要下载相应的版本。
五一假期正好是个充电的时间。这款PC
版音乐播放器是个不错的学习项目,你值得拥有!