Electron 简介

Electron 是一个用于构建跨平台桌面应用程序的开源框架，基于 Node.js 和 Chromium。开发者可以使用 HTML、CSS 和 JavaScript 构建应用，支持 Windows、macOS 和 Linux。

环境配置

安装 Node.js（建议 LTS 版本）并确保 npm 或 yarn 可用。通过以下命令安装 Electron：

npm install -g electron

验证安装：

electron --version

创建第一个 Electron 应用

  1. 初始化项目：
mkdir my-electron-app && cd my-electron-app
npm init -y

  1. 修改 package.json，添加 main 字段和启动脚本：
{
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

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

app.whenReady().then(createWindow);

  1. 创建 index.html（渲染进程）：
<!DOCTYPE html>
<html>
<head>
  <title>Electron App</title>
</head>
<body>
  <h1>Hello Electron!</h1>
</body>
</html>

  1. 启动应用：
npm start

主进程与渲染进程

  • 主进程：通过 main.js 控制应用生命周期，创建窗口。
  • 渲染进程：每个窗口运行独立的 Chromium 实例，通过 ipcRenderer 和 ipcMain 与主进程通信。

示例通信代码：
main.js 添加：

const { ipcMain } = require('electron');
ipcMain.on('message', (event, arg) => {
  console.log(arg); // 接收渲染进程消息
  event.reply('reply', 'pong');
});

index.html 添加：

<script>
  const { ipcRenderer } = require('electron');
  ipcRenderer.send('message', 'ping');
  ipcRenderer.on('reply', (event, arg) => {
    console.log(arg); // 输出 'pong'
  });
</script>

打包与分发

使用 electron-builder 打包：

  1. 安装依赖：
npm install electron-builder --save-dev

  1. 在 package.json 中添加配置：
"build": {
  "appId": "com.example.myapp",
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": "dmg"
  }
}

  1. 打包命令：
npx electron-builder

生成的文件位于 dist 目录。

常用功能扩展

  • 系统托盘：使用 Tray 模块。
  • 原生菜单：通过 Menu 模块定制。
  • 文件操作：结合 Node.js 的 fs 模块。

参考 Electron 官方文档 获取更多高级功能。

# electron # javascript # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区