一、electron的基本使用
創(chuàng)建一個 electron 項目
在使用Electron進行開發(fā)之前，您需要安裝 Node.js，最低工作版本為 14.x，低于 14 的版本在后面的打包過程中可能會報錯。
（注意，因為 Electron 將 Node.js 嵌入到其二進制文件中，所以在 electron 應用運行時的 Node.js 版本與你本地電腦中運行的 Node.js 版本無關(guān)。）
（雖然您需要在開發(fā)環(huán)境安裝 Node.js 才能編寫 Electron 項目，但是 Electron 不使用您系統(tǒng)的 Node.js 環(huán)境來運行它的代碼。 相反地，它使用 electron 內(nèi)置的 Node.js 運行時。 這意味著您的終端用戶不需要 Node.js 環(huán)境也可以運行您的應用。要查看您應用內(nèi)置的 Node.js 版本，您可以訪問主進程 (main process) 或預加載腳本 (preload script) 中的 process.versions 變量。 您也可以參考 electron/releases 倉庫中的版本列表。）
Electron 應用程序遵循與其他 Node.js 項目相同的結(jié)構(gòu)，首先創(chuàng)建一個初始 npm 項目：
mkdir my-electron-app && cd my-electron-app
npm init
設(shè)置entry point為 main.js，author 與 description 可為任意值，但對于應用打包是必填項。
在跑完案例所有步驟后最終完整的 package.json 文件應該類似如下：
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!(my test)",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
"author": "wenxuehai",
"license": "ISC",
"devDependencies": {
"@electron-forge/cli": "^6.0.5",
"@electron-forge/maker-deb": "^6.0.5",
"@electron-forge/maker-rpm": "^6.0.5",
"@electron-forge/maker-squirrel": "^6.0.5",
"@electron-forge/maker-zip": "^6.0.5",
"electron": "^23.0.0"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0"
}
}
然后，將 electron 包安裝到應用的開發(fā)依賴中。
npm install --save-dev electron
在 package.json配置文件中的scripts字段下增加一條start命令：
{
"scripts": {
"start": "electron ."
}
}
在項目根目錄下創(chuàng)建一個空白的 main.js 文件。任何 Electron 應用程序的入口都是 main 文件。 這個文件控制了主進程，它運行在一個完整的Node.js環(huán)境中，負責控制您應用的生命周期，顯示原生界面，執(zhí)行特殊操作并管理渲染器進程。
執(zhí)行 npm start命令運行 electron 應用，Electron 將依據(jù)應用中 package.json配置下main字段中找到對應的入口文件。
創(chuàng)建應用窗口和頁面
在為我們的應用創(chuàng)建窗口前，我們先創(chuàng)建加載進該窗口的內(nèi)容。 在Electron中，各個窗口顯示的內(nèi)容可以是本地HTML文件，也可以是一個遠程url。
demo 示例：創(chuàng)建一個 index.html 文件作為窗口頁面，main.js 文件作為入口文件，預加載腳本來編輯頁面內(nèi)容。
文件內(nèi)容分別如下，詳細解釋可參考官網(wǎng)：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start#運行主進程
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
我們正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
<!-- 您也可以此進程中運行其他文件 -->
<script src="./renderer.js"></script>
</body>
</html>
main.js 內(nèi)容：
// main.js
// electron 模塊可以用來控制應用的生命周期和創(chuàng)建原生瀏覽窗口
const { app, BrowserWindow } = require("electron");
const path = require("path");
const createWindow = () => {
// 創(chuàng)建瀏覽窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
// 加載 index.html
mainWindow.loadFile("index.html");
// 打開開發(fā)工具
// mainWindow.webContents.openDevTools()
};
// 這段程序?qū)?Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
// 在 macOS 系統(tǒng)內(nèi), 如果沒有已開啟的應用窗口
// 點擊托盤圖標時通常會重新創(chuàng)建一個新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 除了 macOS 外，當所有窗口都被關(guān)閉的時候退出程序。 因此, 通常
// 對應用程序和它們的菜單欄來說應該時刻保持激活狀態(tài),
// 直到用戶使用 Cmd + Q 明確退出
app.on("window-all-closed", () => {
if (process.platform !== "darwin") app.quit();
});
// 在當前文件中你可以引入所有的主進程代碼
// 也可以拆分成幾個文件，然后用 require 導入。
perload.js內(nèi)容：
// preload.js
// 所有的 Node.js API接口 都可以在 preload 進程中被調(diào)用.
// 它擁有與Chrome擴展一樣的沙盒。
window.addEventListener("DOMContentLoaded", () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
};
for (const dependency of ["chrome", "node", "electron"]) {
replaceText(`${dependency}-version`, process.versions[dependency]);
}
});
最后，執(zhí)行npm start，將打開一個 electron 應用，如下：
二、打包應用程序（window平臺）
Electron 的核心模塊中沒有捆綁任何用于打包或分發(fā)文件的工具。 如果您在開發(fā)模式下完成了一個 Electron 應用，可使用electron社區(qū)所支持的打包工具來生成特定于平臺的程序包，如生成 macOS 上的 Apple Disk Image (.dmg)、Windows 上的 Windows Installer (.msi) 或 Linux 上的 RPM Package Manager (.rpm)等等。
使用 Electron Forge 打包
Electron Forge 是一個處理 Electron 應用程序打包與分發(fā)的一體化工具。 在工具底層，它將許多現(xiàn)有的 Electron 工具 (例如 electron-packager、 @electron/osx-sign、electron-winstaller 等) 組合到一起，因此您不必費心處理不同系統(tǒng)的打包工作。
將 Electron Forge 添加到您應用的開發(fā)依賴中，并使用其"import"命令設(shè)置 Forge 的腳手架，將項目導入至 Electron Forge。命令如下：
npm install --save-dev @electron-forge/cli
npx electron-forge import
執(zhí)行以上命令后，F(xiàn)orge 會將一些腳本添加到您的 package.json 文件中。并且會生成一個配置文件 orge.config.js。
//...
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
//...
要創(chuàng)建可分發(fā)文件，請使用項目中的 make 腳本，該腳本最終運行了 electron-forge make 命令。執(zhí)行命令如下：
npm run make
該 make 命令包含兩步：
它將首先運行 electron-forge package ，把您的應用程序 代碼與 Electron 二進制包結(jié)合起來。 完成打包的代碼將會被生成到一個特定的文件夾中。
然后它將使用這個文件夾為每個 maker 配置生成一個可分發(fā)文件。
Electron-forge 會創(chuàng)建 out 文件夾，其中包括可分發(fā)文件與一個包含其源碼的文件夾。在該文件夾下可以找到安裝包 setup.exe 和運行程序 exe。
打包報錯解決方法
運行以下命令可以會報錯：
npx electron-forge import
報錯信息如下：
這是因為 node 版本過低導致的，使用 electron 時 node 最低需要 14.x 版本。
三、打包應用程序（Linux平臺）
本來 electron-builder是支持在windows下開發(fā)，然后一條命令打包到不同平臺的，但此命令需要使用遠程服務器來完成打包，然后此服務器已經(jīng)停止很長時間了，而且從官方文檔可感知后續(xù)不會開啟。所以要打linux包必須到linux平臺下打包。
Windows下無法打linux版本的包，如果你要打linux系統(tǒng)的amd64架構(gòu)需要找一臺linux amd64的系統(tǒng)打包，也可以在amd64下打arm架構(gòu)的包，但是不能運行，需要放到arm架構(gòu)的系統(tǒng)里才能運行。
electron builder打包
參考：https://blog.51cto.com/u_12303347/5424258、https://www.cnblogs.com/tuyile006/p/16399745.html
照上述步驟打包可能會報錯，如下：
這是因為 ico 圖標不支持 Linux系統(tǒng)，此時應該找到代碼中所有用到 favicon.ico 的地方，將其改為 xxx.png ，即改成png圖片，并將該 png 圖片放在跟之前 favicon.ico 相同位置上。（實際上應該只需要改electron-builder.json5文件即可。）
打包成功后，在 release 目錄下將會生成一個 AppImage 文件，該文件就是 Linux 系統(tǒng)上的可執(zhí)行文件。
先賦予該文件可執(zhí)行權(quán)限，然后再直接執(zhí)行即可：
// 賦予AppImage文件可執(zhí)行權(quán)限：
chmod a+x AppImage文件的路徑
//運行AppImage程序（下面如果是通過root用戶運行，則可能需要加上 --no-sandbox參數(shù)）
./AppImage文件
文章來源：http://www.zghlxwxcb.cn/news/detail-503983.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-503983.html
到了這里，關(guān)于Electron詳解（二）：基本使用與項目打包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
