HoRain云--Electron入门：快速搭建桌面应用
🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
1. 安装前提条件
2. 创建项目目录
3. 初始化项目
4. 安装 Electron
5. 创建基本项目结构
(1) main.js（主进程文件）
(2) index.html（渲染进程文件）
6. 配置启动脚本
7. 运行应用
8. 打包应用（可选）
安装 Electron Forge
打包应用
常见问题
安装 Electron 并创建一个基本的应用程序可以按照以下步骤进行。Electron 是一个基于 Node.js 和 Chromium 的框架，允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。
1. 安装前提条件
- Node.js 和 npm：确保已安装 Node.js（推荐使用最新 LTS 版本）。
node -v # 检查 Node.js 版本 npm -v # 检查 npm 版本
2. 创建项目目录
mkdir my-electron-app cd my-electron-app3. 初始化项目
npm init -y # 生成 package.json 文件4. 安装 Electron
npm install electron --save-dev5. 创建基本项目结构
在项目目录下创建以下文件：
(1)main.js（主进程文件）
const { app, BrowserWindow } = require('electron') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') // 加载 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() } })(2)index.html（渲染进程文件）
<!DOCTYPE html> <html> <head> <title>Hello Electron</title> </head> <body> <h1>Hello from Electron!</h1> </body> </html>6. 配置启动脚本
在package.json中添加启动脚本：
{ "scripts": { "start": "electron ." } }7. 运行应用
npm start此时会弹出一个窗口，显示 "Hello from Electron!"。
8. 打包应用（可选）
使用 Electron Forge 打包成安装包：
安装 Electron Forge
npm install --save-dev @electron-forge/cli npx electron-forge import打包应用
npm run make打包后的文件会生成在out/目录下。
常见问题
- 权限问题：在某些系统上需要管理员权限安装全局依赖。
- 版本兼容性：确保 Node.js 和 Electron 版本兼容（Electron 对 Node.js 版本有要求）。
- 安全警告：
nodeIntegration: true可能存在安全隐患，生产环境建议启用contextIsolation和sandbox。
通过以上步骤，你可以快速搭建一个 Electron 应用。如果需要更复杂的功能（如与原生系统交互、调试、发布等），可以进一步查阅 Electron 官方文档。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙