安裝Node.js

在使用Electron進(jìn)行開發(fā)之前，需要安裝 Node.js。 官方建議使用最新的LTS版本。
檢查 Node.js 是否正確安裝：

# 查看node版本
node -v
# 查看npm版本
npm -v

注意
開發(fā)者需要在開發(fā)環(huán)境安裝 Node.js 才能編寫 Electron 項(xiàng)目，但是 Electron 應(yīng)用程序 不使用系統(tǒng)本地的 Node.js 環(huán)境來運(yùn)行它的代碼。
Electron 應(yīng)用程序 使用它內(nèi)置的 Node.js 運(yùn)行時(shí)。 這意味著 終端用戶 不需要安裝 Node.js 環(huán)境也可以運(yùn)行Electron 應(yīng)用程序。

安裝Electron

Electron 應(yīng)用程序遵循與其他 Node.js 項(xiàng)目相同的結(jié)構(gòu)。

首先創(chuàng)建一個(gè)文件夾my-electron-app并在vscode 編譯器中打開文件夾。

初始化 npm 包：

npm init

init 初始化命令會(huì)提示開發(fā)者在項(xiàng)目初始化配置中設(shè)置一些值，有幾條規(guī)則需要遵循：

• entry point 應(yīng)為 main.js。
• author 與 description 可為任意值，但對(duì)于應(yīng)用打包是必填項(xiàng)。

生成的 package.json 文件應(yīng)該像這樣：

{"name": "my-electron-app","version": "1.0.0","description": "一個(gè)測(cè)試用的electron項(xiàng)目","main": "main.js","author": "zhangSan", "license": "ISC"
}

在項(xiàng)目中安裝electron：

npm install --save-dev electron# 可以簡寫
npm i electron -D

注意 ：electron是開發(fā)依賴。

electron依賴非常難下載，總是下載到中途就失敗了。

查看官方文檔：

在運(yùn)行 npm install electron 時(shí)，有些用戶會(huì)偶爾遇到安裝問題。
在大多數(shù)情況下，這些錯(cuò)誤都是由網(wǎng)絡(luò)問題導(dǎo)致，而不是因?yàn)?electron npm 包的問題。 如 ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 等錯(cuò)誤都是此類網(wǎng)絡(luò)問題的標(biāo)志。 最佳的解決方法是嘗試切換網(wǎng)絡(luò)，或是稍后再嘗試安裝。

fine，意思是網(wǎng)絡(luò)問題咯，千M網(wǎng)下載不下來也是離譜啊…

解決方案

1. 如果通過 npm 安裝失敗，你也可以嘗試通過從 electron/electron/release 直接下載 Electron

2. 如果安裝失敗并報(bào)錯(cuò)EACCESS，可能需要修復(fù)npm權(quán)限。

3. 如果上述報(bào)錯(cuò)持續(xù)出現(xiàn)，unsafe-perm 標(biāo)志可能需要被設(shè)置為 true:

npm install electron --unsafe-perm=true

4. 在較慢的網(wǎng)絡(luò)上, 最好使用 --verbose 標(biāo)志來顯示下載進(jìn)度:

npm install --verbose electron

5. 如果需要強(qiáng)制重新下載文件, 并且 SHASUM 文件將 force_no_cache 環(huán)境變量設(shè)置為 true。

我直接使用了第3點(diǎn)和第4點(diǎn)：

npm install electron -D --unsafe-perm=true --verbose

歷時(shí)半個(gè)小時(shí)，這個(gè)依賴終于下載成功了！ 感天動(dòng)地！！

在 package.json 配置文件中的scripts字段下增加一條start命令：

{"scripts": {"start": "electron ."}
}

package.json 文件應(yīng)該像這樣：

{"name": "my-electron-app","version": "1.0.0","description": "一個(gè)測(cè)試用的electron項(xiàng)目","main": "main.js","scripts": {"start": "electron ."},"author": "zhangSan","license": "ISC","devDependencies": {"electron": "^32.1.2"}
}

執(zhí)行start命令能在開發(fā)模式下打開應(yīng)用：

npm start

執(zhí)行命令直接就報(bào)錯(cuò)了：
沒有找到模塊main.js，請(qǐng)確認(rèn) package.json 中的 main 入口是合法的。

運(yùn)行主進(jìn)程

任何 Electron 應(yīng)用程序的入口都是 main 文件。 這個(gè)文件控制了主進(jìn)程，它運(yùn)行在一個(gè)完整的Node.js環(huán)境中，負(fù)責(zé)控制應(yīng)用的生命周期，顯示原生界面，執(zhí)行特殊操作并管理渲染器進(jìn)程。

執(zhí)行 npm start 期間，Electron 將依據(jù)應(yīng)用中 package.json配置下main字段中配置的值查找此文件。

在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名為 main.js 的空文件。

再次執(zhí)行 npm start ，不再報(bào)錯(cuò)，應(yīng)用成功啟動(dòng)。但是，它不會(huì)做任何事，開發(fā)者也看不到啟動(dòng)的應(yīng)用窗口，因?yàn)?main.js 是空白文件，沒有添加任何代碼！

在 main.js 中編寫代碼，創(chuàng)建?個(gè)基本窗?：

// main.js運(yùn)?在應(yīng)?的主進(jìn)程上，?法訪問Web相關(guān)API
// main.js主要負(fù)責(zé)：控制?命周期、顯示界?、控制渲染進(jìn)程等其他操作。
// 從electron中引入app、BrowserWindow
// app模塊: 控制應(yīng)用程序的事件生命周期。
// BrowserWindow模塊: 創(chuàng)建和管理應(yīng)用程序 窗口
const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500, // 窗口寬度height: 300  // 窗口高度})
}
// 在 Electron 中，只有在 app 模塊的 ready 事件被激發(fā)后才能創(chuàng)建瀏覽器窗口。 
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好以后，創(chuàng)建窗口createWindow()
})

注意
可以通過使用 app.whenReady() API來監(jiān)聽 app 模塊的 ready 事件：

app.whenReady().then(() => {createWindow()
})

再次執(zhí)行 npm start ，應(yīng)用啟動(dòng)成功，并且能看到應(yīng)用窗口：

下圖是應(yīng)用自帶的菜單：

如果不要菜單，需要在創(chuàng)建窗口時(shí)配置：autoHideMenuBar: true

修改 main.js，在窗口中展示一個(gè)遠(yuǎn)程頁面：

const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500,height: 300,autoHideMenuBar: true})// 展示一個(gè)遠(yuǎn)程頁面win.loadURL('https://lol.qq.com/main.shtml')// 可以在這里添加窗口的其他配置和事件處理
}
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好的時(shí)候，創(chuàng)建窗口createWindow()
})

執(zhí)行npm start，查看效果：

關(guān)于BrowserWindow的更多配置項(xiàng)，請(qǐng)參考官網(wǎng)：BrowserWindow實(shí)例屬性

加載本地頁面

在Electron中，各個(gè)窗口顯示的內(nèi)容可以是本地HTML文件，也可以是一個(gè)遠(yuǎn)程url。

創(chuàng)建 pages/index.html 編寫內(nèi)容：：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/><title>Hello Electron!</title></head><body><h1>Hello Electron!</h1></body>
</html>

修改 mian.js 加載本地??:

// 加載?個(gè)本地??
win.loadFile('./pages/index.html')

執(zhí)行npm start，查看效果：

可以通過快捷鍵ctrl+shift+i，打開控制臺(tái)：

CSP配置說明

語法：

Content-Security-Policy: <policy-directive>; <policy-directive>

這是一個(gè)用于設(shè)置網(wǎng)頁內(nèi)容安全策略（Content Security Policy，簡稱 CSP）的 HTML 標(biāo)簽：

<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
/>

上述配置的說明：

• default-src 'self'
  • default-src ：配置加載策略，適?于所有未在其它指令中明確指定的資源類型。
  • self ：僅允許從同源的資源加載，禁?從不受信任的外部來源加載，提?安全性。
• style-src 'self' 'unsafe-inline'
  • style-src ：指定樣式表（CSS）的加載策略。
  • self ：僅允許從同源的資源加載，禁?從不受信任的外部來源加載，提?安全性。
  • unsafe-inline ：允許在HTML?檔內(nèi)使?內(nèi)聯(lián)樣式。
• img-src 'self' data:
  • img-src ：指定圖像資源的加載策略。
  • self ：表示僅允許從同源加載圖像。
  • data: ：允許使? data: URI 來嵌?圖像。這種URI模式允許將圖像數(shù)據(jù)直接嵌
    ?到HTML或CSS中，?不是通過外部鏈接引?。

HTTP 響應(yīng)頭 Content-Security-Policy 允許站點(diǎn)管理者控制用戶代理能夠?yàn)橹付ǖ捻撁婕虞d哪些資源。除了少數(shù)例外情況，設(shè)置的政策主要涉及指定服務(wù)器的源和腳本結(jié)束點(diǎn)。

關(guān)于 CSP 的詳細(xì)說明請(qǐng)參考：MDN-Content-Security-Policy、Electron Security

如果沒有配置CSP，控制臺(tái)會(huì)有?個(gè)安全警告：

管理窗口的生命周期

創(chuàng)建窗口

1. 通常在主進(jìn)程中創(chuàng)建窗口，可以使用 BrowserWindow 類來創(chuàng)建窗口實(shí)例。

const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500,height: 300,autoHideMenuBar: true})// 展示一個(gè)遠(yuǎn)程頁面win.loadURL('https://lol.qq.com/main.shtml')// 可以在這里添加窗口的其他配置和事件處理
}
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好的時(shí)候，創(chuàng)建窗口createWindow()
})

窗口的顯示與隱藏

1. win.show()：顯示窗口。通常在應(yīng)用啟動(dòng)后或在特定事件觸發(fā)時(shí)調(diào)用。
2. win.hide()：隱藏窗口。可以在需要隱藏窗口的情況下調(diào)用，比如最小化到系統(tǒng)托盤時(shí)。

窗口最小化、最大化、恢復(fù)

1. win.minimize()：將窗口最小化到任務(wù)欄或 Dock。
2. win.maximize()：最大化窗口。
3. win.unmaximize()：如果窗口處于最大化狀態(tài)，可以使用 win.unmaximize()恢復(fù)到原始大小。

窗口事件監(jiān)聽

1. closed 事件：

   • 當(dāng)窗口關(guān)閉時(shí)觸發(fā)。在這個(gè)事件處理函數(shù)中，可以進(jìn)行一些清理工作，比如釋放資源。
   • win.on('closed', () => { mainWindow = null; });

2. resize 事件：
   當(dāng)窗口大小改變時(shí)觸發(fā)?？梢栽谶@個(gè)事件處理函數(shù)中根據(jù)新的窗口大小調(diào)整應(yīng)用的布局或進(jìn)行其他相應(yīng)的處理。

3. move 事件：
   當(dāng)窗口位置改變時(shí)觸發(fā)?？梢杂糜谟涗洿翱谖恢没蜻M(jìn)行與窗口位置相關(guān)的操作。

關(guān)閉所有窗口時(shí)退出應(yīng)用 (Windows & Linux)

在Windows 和 Linux 系統(tǒng)：關(guān)閉所有窗口會(huì)完全退出應(yīng)用程序。

為了實(shí)現(xiàn)這一點(diǎn)，需要監(jiān)聽 app 模塊的 'window-all-closed' 事件。如果用戶不是在 macOS(darwin) 上運(yùn)行程序，則調(diào)用 app.quit()。

app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

如果沒有窗口打開則打開一個(gè)窗口 (macOS)

在 Linux 和 Windows 上，應(yīng)用根本不存在是否被激活的說法，應(yīng)用要么是有進(jìn)程，要么是沒進(jìn)程。

但是，在 macOS 上，應(yīng)用已經(jīng)不運(yùn)行了，但是應(yīng)用處于未激活狀態(tài)：應(yīng)用在沒有打開任何窗口的情況下也繼續(xù)運(yùn)行。
如果激活應(yīng)用，則檢查應(yīng)用是否 有窗口，沒有窗口就在激活應(yīng)用時(shí)會(huì)打開新的窗口。

監(jiān)聽 app 模塊的 activate 事件來實(shí)現(xiàn)：如果沒有任何瀏覽器窗口是打開的，則調(diào)用 createWindow() 方法。

// 當(dāng)app準(zhǔn)備好后，執(zhí)?createWindow創(chuàng)建窗?
app.on('ready', () => {createWindow();// 當(dāng)應(yīng)?被激活時(shí)app.on('activate', () => {// 如果當(dāng)前應(yīng)?沒有窗?，則創(chuàng)建?個(gè)新的窗?if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});

完整的 main.js 如下：

const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 500, // 窗口寬度height: 300, // 窗口高度autoHideMenuBar: true // 隱藏菜單欄});// 在窗口中加載一個(gè)遠(yuǎn)程頁面win.loadFile('./pages/index.html');
}
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好的時(shí)候，創(chuàng)建窗口createWindow();// 在Windows & Linux，應(yīng)用的所有窗口關(guān)閉時(shí)，退出應(yīng)用程序app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()})// 在macOS，當(dāng)應(yīng)?被激活時(shí)app.on('activate', () => {// 如果當(dāng)前應(yīng)?沒有窗?，則創(chuàng)建?個(gè)新的窗?if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});