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
我現在還不知道，附件如何上傳，請見諒。