Electron 项目教程

2024-09-20 19:28:39作者：羿妍玫Ivan

项目介绍

Electron 是一个开源框架，允许开发者使用 Web 技术（HTML、CSS、JavaScript）来构建跨平台的桌面应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时，使得开发者可以利用熟悉的 Web 技术栈来创建功能强大的桌面应用。Electron 最初由 GitHub 开发，现在已经成为许多知名应用的基础，如 Visual Studio Code、Slack 和 Discord。

项目快速启动

安装 Node.js 和 npm

在开始之前，确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已安装：

node -v
npm -v

如果没有安装，请访问 Node.js 官网下载并安装。

创建 Electron 项目

创建一个新的项目目录并进入该目录：
```
mkdir my-electron-app
cd my-electron-app
```
初始化 npm 项目：
```
npm init -y
```
安装 Electron：
```
npm install electron --save-dev
```

在项目根目录下创建一个 main.js 文件，这是 Electron 应用的主进程文件：

const { app, BrowserWindow } = require('electron');

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    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();
    }
});

创建一个 index.html 文件，这是应用的界面文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <script>
        document.getElementById('node-version').innerText = process.versions.node;
        document.getElementById('chrome-version').innerText = process.versions.chrome;
        document.getElementById('electron-version').innerText = process.versions.electron;
    </script>
</body>
</html>

修改 package.json 文件，添加 start 脚本：

{
    "name": "my-electron-app",
    "version": "1.0.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

启动应用：
```
npm start
```

应用案例和最佳实践

应用案例

Visual Studio Code: 一个强大的代码编辑器，使用 Electron 构建，支持多种编程语言和丰富的插件生态。
Slack: 一个团队协作工具，使用 Electron 构建，提供跨平台的桌面客户端。
Discord: 一个流行的语音、视频和文本聊天应用，使用 Electron 构建，支持多平台。

最佳实践

模块化开发: 将应用的不同功能模块化，便于维护和扩展。
性能优化: 使用预加载脚本和懒加载技术来优化应用的性能。
安全性: 避免在渲染进程中直接使用 Node.js 模块，使用 contextBridge 进行安全通信。

典型生态项目

Electron Forge: 一个用于打包和发布 Electron 应用的工具集。
Electron Builder: 一个用于构建和打包 Electron 应用的工具。
Electron React Boilerplate: 一个使用 React 和 Electron 的样板项目，帮助开发者快速启动新项目。

通过以上步骤，你可以快速启动一个 Electron 项目，并了解其应用案例和最佳实践。希望这篇教程能帮助你更好地使用 Electron 构建跨平台的桌面应用。

项目优选

收起

本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！

Cangjie

286

✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性

Vue

111

openHiTLS

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

RuoYi-Cloud-Vue3

🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统

Vue

go-stock

🦄🦄🦄AI赋能股票分析：自选股行情获取，成本盈亏展示，涨跌报警推送，市场整体/个股情绪分析，K线技术指标分析等。数据全部保留在本地。支持DeepSeek，OpenAI， Ollama，LMStudio，AnythingLLM，硅基流动，火山方舟，阿里云百炼等平台或模型。

Cangjie-Examples

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。

Cangjie

205

MateChat

前端智能化场景解决方案UI库，轻松构建你的AI应用，我们将持续完善更新，欢迎你的使用与建议。官网地址：https://matechat.gitcode.com

376

RuoYi-Vue

🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

Java

182

frog

这是一个人工生命试验项目，最终目标是创建“有自我意识表现”的模拟生命体。

Java

Electron 项目教程

项目介绍

项目快速启动

安装 Node.js 和 npm

创建 Electron 项目

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

热门内容推荐

最新内容推荐

项目优选

Electron 项目教程

项目介绍

项目快速启动

安装 Node.js 和 npm

创建 Electron 项目

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选