Electron 入門指南
Electron 是一個使用 JavaScript、HTML 和 CSS 構建跨平臺桌面應用的框架。通過 Electron，你可以利用 Web 技術開發出功能強大的桌面應用程序，并且能夠運行在 Windows、Mac 和 Linux 系統上。
本文將帶你從零開始構建一個簡單的 Electron 應用程序，并介紹一些基本概念和技巧。
1. 安裝 Node.js 和 npm
首先，你需要確保你的機器上已經安裝了 Node.js。Electron 是基于 Node.js 構建的，因此需要 Node.js 環境來運行。
你可以訪問 Node.js 官網 下載并安裝最新版本的 Node.js。安裝過程中會一并安裝 npm（Node Package Manager），這是一個用于管理 JavaScript 包的強大工具。
2. 創建項目結構
接下來，創建一個新目錄作為你的 Electron 應用程序的工作空間，并在該目錄中初始化一個新的 Node.js 項目：
mkdir my-electron-app
cd my-electron-app
npm init -y
執行 npm init 命令會生成一個 package.json 文件，這是 Node.js 項目的配置文件。
3. 安裝 Electron
在你的項目目錄中安裝 Electron：
npm install electron --save-dev
這行命令將在你的開發依賴項中添加 Electron。此外，你還需要更新 scripts 部分的 package.json 文件，以便能夠通過 npm 腳本運行 Electron 應用程序。
4. 編寫基本的 HTML 和 JavaScript
在項目根目錄下創建一個 index.html 文件作為你的應用程序主界面：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Electron App</title>
</head>
<body><h1>Hello, Electron!</h1><button id="click-me">Click Me</button><script src="./main.js"></script>
</body>
</html>
接下來，創建一個 main.js 文件作為你的應用程序的入口點：
// main.js
document.getElementById('click-me').addEventListener('click', () => {alert('Button Clicked!');
});
5. 編寫主進程代碼
在 Electron 中，每個應用都有一個 主進程 和一個或多個 渲染進程。主進程負責創建和管理窗口，而渲染進程則運行在每一個窗口中。
創建一個 main.js 文件作為主進程入口文件：
// main.js (主進程)
const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true // 允許在渲染進程中使用 Node.js API}});win.loadFile('index.html');
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});
6. 更新 package.json
更新 package.json 文件以包含啟動應用的腳本：
{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"start": "electron ."},"dependencies": {},"devDependencies": {"electron": "^23.0.0" // 確保使用正確的版本}
}
7. 運行應用程序
現在你可以通過以下命令來啟動你的 Electron 應用：
npm start
這將打開一個新的窗口并顯示你在 index.html 中定義的內容。點擊按鈕時，會觸發 JavaScript 的事件處理器并彈出一個警告框。
總結
以上步驟展示了如何使用 Electron 創建一個簡單的桌面應用程序。你可以在此基礎上進一步擴展你的應用，例如添加更多的功能、界面元素或整合其他 Web 技術（如 React 或 Vue.js）來構建更復雜的應用程序。
Electron 的強大之處在于它允許你利用熟悉的 Web 開發技能來創建跨平臺的原生應用。希望這個入門指南能為你提供一個良好的起點！
![[隨筆] 升級uniapp舊項目的vue、pinia、vite、dcloudio依賴包等](http://pic.xiahunao.cn/[隨筆] 升級uniapp舊項目的vue、pinia、vite、dcloudio依賴包等)
![[更新完畢]2025五一杯A題五一杯數學建模思路代碼文章教學:支路車流量推測問題](http://pic.xiahunao.cn/[更新完畢]2025五一杯A題五一杯數學建模思路代碼文章教學:支路車流量推測問題)
