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 构建跨平台的桌面应用。

项目优选

收起

CangjieCommunity

为仓颉编程语言开发者打造活跃、开放、高质量的社区环境

Markdown

669

RuoYi-Vue

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

Java

136

openHiTLS

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

redis-sdk

仓颉语言实现的Redis客户端SDK。已适配仓颉0.53.4 Beta版本。接口设计兼容jedis接口语义，支持RESP2和RESP3协议，支持发布订阅模式，支持哨兵模式和集群模式。

Cangjie

322

advanced-java

Advanced-Java是一个Java进阶教程，适合用于学习Java高级特性和编程技巧。特点：内容深入、实例丰富、适合进阶学习。

为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers

🚀简而轻的低侵入式在线构建、自动部署、日常运维、项目监控软件

Yi Coder 编程模型，小而强大的编程助手

HTML

easy-es

Elasticsearch 国内Top1 elasticsearch搜索引擎框架es ORM框架,索引全自动智能托管,如丝般顺滑,与Mybatis-plus一致的API,屏蔽语言差异,开发者只需要会MySQL语法即可完成对Es的相关操作,零额外学习成本.底层采用RestHighLevelClient,兼具低码,易用,易拓展等特性,支持es独有的高亮,权重,分词,Geo,嵌套,父子类型等功能...

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

TypeScript

35.34 K

4.77 K

Electron 项目教程

项目介绍

项目快速启动

安装 Node.js 和 npm

创建 Electron 项目

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

热门内容推荐

最新内容推荐

项目优选

Electron 项目教程

项目介绍

项目快速启动

安装 Node.js 和 npm

创建 Electron 项目

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选