Electron實現音樂播放器 - #1

阿新 • • 發佈：2020-07-04

編寫簡單的頁面

初始化專案資料夾

建立一個資料夾，進入這個資料夾並通過如下命令初始化專案

npm init

package name：專案名稱，可自設
version：版本號，可自設
description：描述，可不填
entry point：入口檔案，這裡我們填main.js
test command：可不填
git repository：git倉庫，可不填
keywords：關鍵詞，可不填
author：作者，可自設
license：開源協議，可不填

輸入yes完成初始化，隨後會自動生成package.json檔案在資料夾內，這是我們專案的描述檔案

編寫簡單的`main.js`檔案

main.js

是我們專案的入口檔案（主檔案），而專案啟動時執行main.js的程序就是主程序，建立視窗、對渲染程序進行排程等等一系列操作都要依靠main.js來實現

在資料夾內建立main.js檔案並編輯它：

const electron = require('electron')//引入electron模組
const {app,BrowserWindows} = electron//從electron中引入我們需要的模組

let mainWindow;//宣告一個變數，作為主視窗
app.on('ready',function(){//當app準備好時執行
    mainWindow = new BrowserWindow({//將mainWindow定義為一個新的瀏覽器視窗
        //這一部分先空著，後面會向視窗新增引數
    })
})

第一、二行引入了我們所需要的模組，然後我們聲明瞭一個mainWindow變數，並在app準備好時將mainWindow定義為一個BrowserWindow物件，也就是一個瀏覽器視窗

執行和安裝依賴

我們可以通過如下命令來安裝electron模組：

cnpm install electron --save-dev

接著我們可以通過如下命令來執行我們的專案：

electron .

注意electron和.之間有一個空格！

效果圖：

我們會發現只是彈出了一個視窗，裡面並沒有什麼內容，這是因為我們並沒有指定它需要載入的內容

Hello,World!

我們可以通過loadURL函式來讓我們的應用程式視窗來通過連結載入一個網頁

const electron = require('electron')//引入electron模組
const {app,BrowserWindow} = electron//從electron中引入我們需要的模組

let mainWindow;//宣告一個變數，作為主視窗
app.on('ready',function(){//當app準備好時執行
    mainWindow = new BrowserWindow({//將mainWindow定義為一個新的瀏覽器視窗
        //這一部分先空著，後面會向視窗新增引數
    })
    mainWindow.loadURL("https://www.baidu.com");
})

效果圖：

但是很顯然，我們不能只滿足於載入現成的網頁，我們可以通過載入HTML檔案來達到自定義頁面的目的

建立一個HTML檔案，編寫一個簡單的例子：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello,World!</h1>
</body>
</html>

資料夾結構：

通過loadFile函式來載入HTML檔案：

const electron = require('electron')//引入electron模組
const {app,BrowserWindow} = electron//從electron中引入我們需要的模組

let mainWindow;//宣告一個變數，作為主視窗
app.on('ready',function(){//當app準備好時執行
    mainWindow = new BrowserWindow({//將mainWindow定義為一個新的瀏覽器視窗
        //這一部分先空著，後面會向視窗新增引數
    })
    mainWindow.loadFile("index.html");
})

效果圖：