Electron + Vue开发一款音乐播放器

不安分的猿人 3月前 ⋅ 198 阅读

一、桌面版音乐播放器

劳动节放假了,给大家分享一个轻松的开源项目,一个基于 Electron + Vue 开发的音乐软件。项目的一大特色就是多平台搜索歌曲,并支持下载功能(有些平台的vip歌曲也可以哦!)。

二、开发环境搭建

2.1 前提

  • 本地安装Node12.x+环境,Node.js是一个运行在服务端的JavaScript框架,主要用于创建快速的、可扩展的网络应用。
  • 本地已安装VSCode开发工具(其他工具也可以)。
  • 掌握Vue基础语法,因为Vue是目前最流行的前端框架之一。

2.2 本地构建

下载项目
项目地址: 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版音乐播放器是个不错的学习项目,你值得拥有!

                              不安分的猿人

                       孜孜不断的技术分享!


全部评论: 0

    我有话说: