Electron

1- Electron

Electron 是一个开源框架，允许开发者使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。

它由 GitHub 开发，最初用于创建 Atom 编辑器，并迅速发展成为一个广泛使用的工具。

1- 核心特点

跨平台兼容性：Electron 应用可以在 macOS、Windows 和 Linux 上运行，且无需针对每个平台进行单独开发。
基于 Chromium 和 Node.js：Electron 将 Chromium 和 Node.js 集成在一起，使得开发者可以在桌面应用中使用 Web 技术，同时访问操作系统的本地 API。
自动更新：Electron 提供自动更新功能，开发者可以轻松地向用户推送软件更新。
丰富的本地 API：Electron 提供了丰富的 API，允许开发者与操作系统进行深度交互，如文件系统操作、通知、菜单等。

2- 知名应用

许多知名应用都是使用 Electron 构建的，包括：

Visual Studio Code：微软的代码编辑器，广泛用于软件开发。
Slack：一款流行的团队协作工具。
WhatsApp Desktop：WhatsApp 的桌面客户端。
WebTorrent：一个基于 Web 技术的 Torrent 客户端。

3- 开发流程

3.1- 安装 Electron

首先，确保你已经安装了 Node.js 和 npm。然后在终端中运行以下命令来安装 Electron：

npm install electron --save-dev

3.2- 创建项目结构

创建一个新的项目文件夹并初始化 npm 包：

mkdir my-electron-app && cd my-electron-app
npm init -y

3.3- 编写主进程脚本（main.js）

主进程负责创建和管理应用窗口。以下是一个简单的主进程脚本示例：

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

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载应用的 index.html 文件
  win.loadFile('index.html');

  // 打开开发者工具
  win.webContents.openDevTools();
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(createWindow);

// 当所有窗口关闭时退出应用（macOS 除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// 在 macOS 上，当点击 dock 图标并且没有其他窗口打开时，重新创建一个窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

3.4- 创建渲染进程文件（index.html）

渲染进程负责显示用户界面。以下是一个简单的 HTML 文件示例：

<!DOCTYPE html>
<html>
<head>
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>

3.5- 运行应用

在终端中运行以下命令启动应用：

npx electron .

3.6- 图表显示

为了在 Electron 应用中显示图表，可以使用 D3.js 或 Chart.js 等库。以下是一个使用 Chart.js 显示简单图表的示例：

3.6.1- 安装 Chart.js

npm install chart.js

3.7- 更新 index.html 文件

<!DOCTYPE html>
<html>
<head>
  <title>My Electron App</title>
  <script src="node_modules/chart.js/dist/chart.js"></script>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

4- 结论

Electron 通过将 Web 技术与桌面应用开发相结合，极大地简化了跨平台应用的开发过程。它不仅适用于小型项目，也被许多大型企业和知名应用所采用，展示了其强大的功能和灵活性。通过上述步骤和示例代码，小白用户也可以轻松上手并开发出自己的 Electron 应用。

#编程

#electron

Review 上一篇

ESLint 下一篇