Electron 是一個(gè)能讓你使用 JavaScript, HTML 和 CSS 來創(chuàng)建桌面應(yīng)用程序的框架。 這些應(yīng)用程序可以打包后在 macOS、Windows 和 Linux 上直接運(yùn)行，或者通過 Mac App Store 或微軟商店進(jìn)行分發(fā)。
安裝之前要保證安裝了最新的node和npm。
可以通過 node -v，npm -v檢查Node.js 和 npm 的版本信息。
安裝 Electron
> npm init -y
初始化項(xiàng)目package.json的時(shí)候npm init -y 默認(rèn)把名字設(shè)置為electron，這邊需要修改下name的值，否則后續(xù)安裝會報(bào)錯(cuò)：Refusing to install package with name "electron" under a package
author?和?description?字段對于打包來說是必要的，空值的話后續(xù)安裝會報(bào)錯(cuò)，所以也給它加上非空的值。
繼續(xù)安裝
> npm i --save-dev electron
創(chuàng)建主腳本文件main.js
主腳本指定了運(yùn)行主進(jìn)程的 Electron 應(yīng)用程序的入口。通常，在主進(jìn)程中運(yùn)行的腳本控制應(yīng)用程序的生命周期、顯示圖形用戶界面及其元素、執(zhí)行本機(jī)操作系統(tǒng)交互以及在網(wǎng)頁中創(chuàng)建渲染進(jìn)程。 Electron 應(yīng)用程序只能有一個(gè)主進(jìn)程。
main.js
const?{?app,?BrowserWindow?}?=?require('electron')?//為了管理應(yīng)用程序的生命周期事件以及創(chuàng)建和控制瀏覽器窗口
const?path?=?require('path')?//為操作文件路徑
function?createWindow?()?{?//創(chuàng)建一個(gè)帶有預(yù)加載腳本的新的瀏覽器窗口，并加載index.html文件進(jìn)入該窗口
??const?win?=?new?BrowserWindow({
????width:?800,
????height:?600,
????webPreferences:?{
??????preload:?path.join(__dirname,?'preload.js')
????}
??})
??win.loadFile('index.html')
}
app.whenReady().then(()?=>?{?
??createWindow()
??app.on('activate',?()?=>?{?//添加一個(gè)新的偵聽器
????if?(BrowserWindow.getAllWindows().length?===?0)?{?//只有當(dāng)應(yīng)用程序激活后沒有可見窗口時(shí)，才能創(chuàng)建新的瀏覽器窗口
??????createWindow()
????}
??})
})
app.on('window-all-closed',?()?=>?{?//添加一個(gè)新的偵聽器
??if?(process.platform?!==?'darwin')?{?//當(dāng)應(yīng)用程序不再有任何打開窗口時(shí)試圖退出。?由于操作系統(tǒng)的?窗口管理行為?，此監(jiān)聽器在?macOS?上是禁止操作的。
????app.quit()
??}
})
創(chuàng)建網(wǎng)頁index.html
index.html
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Hello?World!</title>
????<meta?http-equiv="Content-Security-Policy"?content="script-src?'self'?'unsafe-inline';"?/>
</head>
<body?style="background:?white;">
????<h1>Hello?World!</h1>
????<p>
????????We?are?using?Node.js?<span?id="node-version"></span>,
????????Chromium?<span?id="chrome-version"></span>,
????????and?Electron?<span?id="electron-version"></span>.
????</p>
</body>
</html>
定義預(yù)加載腳本preload.js
預(yù)加載腳本就像是Node.js和網(wǎng)頁之間的橋梁，它允許你將特定的 API 和行為暴露到你的網(wǎng)頁上，而不是不安全地把整個(gè) Node.js 的 API暴露。
preload.js
window.addEventListener('DOMContentLoaded',?()?=>?{
??const?replaceText?=?(selector,?text)?=>?{
????const?element?=?document.getElementById(selector)
????if?(element)?element.innerText?=?text
??}
??for?(const?type?of?['chrome',?'node',?'electron'])?{
????replaceText(`${type}-version`,?process.versions[type])
??}
})
修改?package.json?文件的main為main.js；
修改 package.json?文件的scripts為 scripts：{"start":?"electron?."}，npm start?命令將用 ?Electron?來運(yùn)行主腳本；
運(yùn)行程序:
npm start
運(yùn)行成功后打開的界面如下：
使用?Electron Forge?來打包并分發(fā)應(yīng)用程序
導(dǎo)入 Electron Forge
npm install --save-dev @electron-forge/cli
npx electron-forge import
創(chuàng)建一個(gè)分發(fā)版本
npm run make
Electron-forge 會創(chuàng)建?out?文件夾在項(xiàng)目目錄下，如下：
make下找到exe的文件即為安裝包，如下：
