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