HoRain云--Electron入门：快速搭建桌面应用
本文详细介绍了如何从零开始搭建一个Electron桌面应用。主要内容包括：安装Node.js环境、初始化项目、安装Electron依赖、创建主进程和渲染进程文件、配置启动脚本以及打包发布等步骤。文章提供了完整的代码示例，包括main.js主进程文件和index.html页面文件，并说明了如何使用Electron Forge进行应用打包。最后还列出了安装过程中可能遇到的常见问题及解决方法，为开发者快
🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
|
专栏名称 |
专栏介绍 |
|
本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
|
|
本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
|
|
全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
|
|
本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
|
|
本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
|
|
本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
安装 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-app
3. 初始化项目
npm init -y # 生成 package.json 文件
4. 安装 Electron
npm install electron --save-dev
5. 创建基本项目结构
在项目目录下创建以下文件：
(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 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
21
0- 0
已为社区贡献437条内容
所有评论(0)