electron 入门

Electron 入门指南

1. 什么是Electron？

Electron是一个由GitHub开发的开源框架，允许开发者利用Web技术（如HTML、CSS和JavaScript）构建跨平台的桌面应用程序。它结合了Node.js和Chromium浏览器的核心功能，使开发者能够创建高性能且具有丰富用户界面的应用程序。

2. 安装Node.js和npm

在开始使用Electron之前，首先需要安装Node.js和npm（Node包管理器）。访问Node.js官方网站下载并安装最新版本。安装完成后，在终端或命令提示符中运行以下命令来验证安装：

node -v
npm -v

确保输出了相应的版本号。

3. 安装Electron

通过npm可以轻松安装Electron。在终端中输入以下命令：

npm install electron --save-dev

这会将Electron添加到项目的开发依赖项中。

4. 创建一个基本的Electron应用

接下来，创建一个简单的“Hello World”示例：

初始化项目：在你的项目目录中运行以下命令来初始化一个新的Node.js项目：
```
npm init -y
```

创建主进程文件：新建一个名为main.js的文件，并添加以下代码：

const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false}});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();}
});

创建HTML文件：新建一个名为index.html的文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head><title>Hello World</title>
</head>
<body><h1>Welcome to Electron!</h1>
</body>
</html>

运行应用：在终端中输入以下命令来启动Electron应用：
```
electron .
```
你将看到一个窗口显示“Hello World”页面。

5. 理解进程模型

Electron采用两层架构：主进程和渲染进程。主进程负责管理应用的生命周期、处理系统资源（如文件对话框），而渲染进程则负责加载和显示网页内容。

主进程：通过main.js文件启动，使用Electron提供的API来创建窗口和其他功能。
渲染进程：在每个窗口中运行，负责呈现网页内容，并可以通过 IPC 与主进程通信。

6. 安全性和上下文隔离

为了提高应用的安全性，Electron推荐启用contextIsolation选项，默认情况下它是开启的。这样可以防止渲染进程直接访问Node.js的功能，从而减少潜在的安全风险。如果需要在渲染进程中使用Node.js功能，可以通过 IPC 进行通信。

修改主进程文件中的webPreferences部分：

webPreferences: {nodeIntegration: false,contextIsolation: true
}

然后，在渲染进程中可以使用以下代码与主进程通信：

main.js（主进程）：

const { ipcMain } = require('electron');ipcMain.on('message', (event, arg) => {console.log(arg);
});

renderer.js（渲染进程）：

const { ipcRenderer } = require('electron');ipcRenderer.send('message', 'Hello from renderer!');

确保在HTML文件中引入renderer.js：

<script src="renderer.js"></script>

7. 打包和分发应用

开发完成后，需要将Electron应用打包成适用于不同平台的安装包。可以使用工具如electron-builder来实现这一点。

安装依赖：

npm install electron-builder --save-dev

配置构建脚本：在项目的根目录下创建或修改package.json文件，添加以下内容到"scripts"部分：
```
"build": "electron-builder"
```
运行构建命令：
```
npm run build
```
这将生成适用于当前操作系统的安装包。根据需要，可以指定目标平台和架构。