引言
通过前面的内容，我们已经了解了 Electron 的基本框架和使用方法，下面我们将使用 Electron 来开发一个在线的 Audio Player。
并且从头开始介绍该程序的开发过程，程序主要包括一下功能：
- 在线歌单列表
- 歌单收藏
- 歌曲播放、收藏
- 歌词实时显示
- 其它基本功能
程序实现效果图如下：
开发工具
项目开发推荐 Visual Studio Code，带有命令行输入窗口比较方便，并且带有许多优秀的 html、css、js 等插件可以提高开发效率。
功能分区
我们将程序的主界面主要分为4个部分进行开发，分别为顶部的标题栏，左侧的导航栏，底部的播放状态，以及中间的内容。各部分的基本功能大致如下：
- 标题栏：包括程序图标，搜索框，程序关闭、最大化、最小化按钮等；
- 导航栏：包含各个内容页面的跳转按钮，发现音乐、我的歌单等；
- 播放栏：显示当前歌曲的播放状态，时间以及控制歌曲播放等功能；
- 内容窗：显示当前内容，可以是歌单列表详情，也可以是歌单集合；
在 index.html 的 body 中添加上面4个模块，各个模块的属性(位置，大小，颜色等)通过相应的 css 来表示，在项目文件夹中创建 assets 文件夹，所有在项目中需要的资源文件都放置在此，在此创建 main.css 来描述各个模块的属性。
index.html 修改后如下，注意在 head 内添加 css 链接，这样就可以使用其中定义的 css 类了：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/main.css">
</head>
<body>
<div class="top-frame"></div>
<div class="left-frame"></div>
<div class="main-frame"></div>
<div class="bottom-frame"></div>
</body>
</html>
各个模块的 css 类定义如下，都通过 absolute 进行定位，指定相应的宽高，因为窗口是自适应大小的，因此各模块的大小也需要自适应，对于可扩展的方向不能直接指定具体的数值。如标题栏 top-frame 宽度是可以拉伸的，需要使用百分比设置；
.top-frame{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 50px;
word-wrap:break-word;
background-color: #d10202;
-webkit-app-region: drag;
}
.left-frame{
position: absolute;
left: 0px;
top: 50px;
bottom: 50px;
width: 200px;
border-left: 1px solid #e0e0e0
}
.main-frame{
position: absolute;
top: 50px;
bottom: 50px;
left: 201px;
right: 0px;
overflow: auto;
-webkit-user-drag: none;
}
.bottom-frame{
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
background-color: #F6F6F8;
border-top: 1px solid #e0e0e0;
}
标题栏是需要可以拖动的，当按住标题栏时需要可以将窗口往任意方向进行拖动，因此 top-frame 中需要添加：-webkit-app-region: drag，表示该区域可以被拖动。下面启动程序看看效果：
这样程序的基本外观框架是不是就出来了；可以在标题栏位置进行拖动，也可以将程序窗口进行缩放。
调试
Electron 支持使用 DevTools 进行调试，具体打开方法为在 main.js 中创建窗口的时候添加 mainWindow.webContents.openDevTools() ，其中 mainWindow 为窗口对象，只要开启了这个程序运行时就会同时打开 DevTools，可以进行实时调试。
CSS 调试
项目中基本上不使用其它的框架或库，尽量使用最直接的代码或资源来实现。这里简单介绍一下 css 调试方法，当设置外观时，无法直接确认效果是怎样的，如果每改一次 css 启动一次程序看效果将会非常费时费力，这是不可接受的，DevTools 允许我们直接在程序运行时对 html 元素的 css 属性进行修改并实时展现出来，这就大大方便了程序的调试。当需要调整 css 属性时，可以在 DevTools 工具的 Element 中找到需要修改的元素，点击然后在右侧的style中直接进行修改，就可以看到修改后的程序外观显示了，示例如下：
css 调试对于调整元素位置外观等属性非常方便，后面会经常用到，可以多去尝试用用。
关于项目文件结构的说明
项目会用到不同的资源及相应的处理脚本文件等，为了方便统一管理，这里统一介绍项目的文件组织结构，后面新增的文件都按照此规则进行放置，后面文章提到的文件可以在这里找到相应的位置。
electron-player
│ index.html
│ main.js
│ package.json
└───asserts
│ │ icons.svg
│ │ main.css
│ │ top.css
│ │ nav.css
│ │ ......
└───main_process
│ │ win_event.js
└───render_process
│ │ nav_event.js
│ │ songlist_event.js
│ │ ......
└───script
│ │ song_api.js
│ │ util.js
│ │ ......
└───sections
│ │ nav.html
│ │ ......
└───userdata
│ │ user_data.js
│ │ ......
└───node_modules
│ │ ......
在 asserts 文件夹下存放项目需要的所有资源文件，包括图片，css 定义文件等；main_process 和render_process 分别为处理主进程和渲染进程的事件和交互的脚本文件；script 为一些公共的代码，包括一些网络和音乐播放的 api；sections 放置一些需要动态加载的 html 文件；userdata 为用户相关数据，包括数据库接口等；node_modules 为在当前目录下安装 electron 后自动生成的文件夹，其中包含了相关的模块，后面新安装的包也会在这个文件夹下。
网友评论