Electron系列教程——第四篇：播放器的样子

Electron系列教程——第四篇：播放器的样子

一、楔子

终于要开始写播放器了。今天的任务是：

1，开启一个漂亮的界面
2，播放一首好听的歌曲

二、目录

三、正文

---

　　上篇我们知道了渲染进程，知道了在该进程中会使用Chromium 来显示 web 页面。因此这一小节，就来写一个漂亮的web页面。

1，挑选Audio组件

　　这里使用：boulevardjs，地址http://boulevardjs.com/download。看起来非常漂亮。

2，项目结构变化

　　还记得第二篇，我们的项目结构吗？

greeting/
├── package.json
├── main.js
└── index.html

　　现在稍微变更下，music-player目录下，新建一个文件夹名为app，存放源码，其下放置一个目录——从boulevardjs包中解压出来的example，直接放进去：

 music-player/
├── package.json
├── main.js
└── app
　　　└── example

3，运行音乐客户端

　　先在命令行运行：electron，然后将music-player这个文件夹，拖拽进去。然后，你看到的应该和下面类似，点击播放按钮试试看。
　　如果您看不到下面这张图的样子，或者样子不一样，请继续把文章看下去。

4，调整了的细节

　　1，main.js中有两处需要改动
　　　　A-窗体大小修改：width: 980, height:590
　　　　B-index.html的位置变更了（这里不调整，显示的界面是一片空白，且控制台报错）
　　
　　2，example中样式微调
　　　　A-index.html中body的样式清除
　　　　B-boulevard-container的margin样式0px auto
　　　　C-jquery.js使用本地的（木有科学上网的情况）

5，总结

　　经过简单的几个步骤，我们的音乐播放器就诞生了，不得不说，非常漂亮。因为我们咱在前人的肩膀上。尽管界面看起来还不错，但是有个丑丑的工具栏，突兀在那里，大煞风景。

　　如何去掉这个蹩脚工具栏呢？甚或说，如何让我们的音乐播放器更加美观呢？我们下篇讲解。

对了，源码在这里：地址，密码：8gmz
我现在还不知道，附件如何上传，请见谅。