Electron工程搭建

Electron是基于NodeJS、Chromium和Web技术栈的框架，这使得它的使用方式和其它GUI框架都略有区别。这篇笔记我们学习如何搭建Electron工程，并通过实际代码编写一个简单的例子。

前置条件

在使用Electron开发之前，我们首先需要安装NodeJS环境，这些内容可以参考NodeJS相关章节，这里就不再重复介绍了。

工程搭建

首先我们创建一个NodeJS工程，按照交互提示输入必要的信息。

npm init

然后执行以下命令，安装electron框架的相关依赖项。

npm install electron --save-dev

我们工程的代码结构如下：

|_node_modules
|_index.html    // 窗体显示的HTML页面
|_app.js        // 渲染进程代码
|_main.js       // NodeJS主进程代码
|package.json   // 工程描述文件

进程分为主进程和渲染进程两部分，这和Chromium的多进程架构有关。Electron中，主进程负责窗体管理以及一些本地操作，而渲染进程可以理解为它就是运行在浏览器中的“页面”代码，它运行在浏览器沙箱环境中。

main.js

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

const createWindow = () => {
    // 创建窗体
    const window = new BrowserWindow({
        width: 800,
        height: 600
    });
    // 加载HTML文件
    window.loadFile('index.html');
};

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    })
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

main.js是我们的主进程代码，熟悉桌面GUI框架的开发人员肯定对其中的逻辑十分熟悉，代码中我们在程序启动时创建窗体，在所有窗体被关闭后结束程序。

注：熟悉Windows的开发人员可能对app.on('activate', () => {})和if (process.platform !== 'darwin') {}这两处代码不太理解，其实这些代码是出于macOS兼容性考虑的，有兴趣可以自行了解。

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello from Electron renderer!</title>
</head>

<body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
    <p id="info"></p>
    <script src="./app.js"></script>
</body>

</html>

index.html是我们窗体中显示的页面。

app.js

document.getElementById('info').innerText = 'Hello, world!';

app.js是运行在渲染进程的JavaScript代码，这些代码操作了浏览器DOM，输出了一些文本信息。我们可以发现，app.js中的代码和我们平时开发Web应用程序中的代码是完全相同的。唯一的区别是上面例子中Electron窗体使用文件协议加载页面和静态资源，而非HTTP协议（当然，Electron也支持从HTTP协议加载资源）。

package.json

{
  "name": "demo-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.2.0"
  }
}

package.json中，我们添加了一条命令electron .，它是Electron框架提供的一个命令行工具，用来调试Electron工程。

执行npm start命令后，我们可以看到程序运行窗体：

作者：Gacfox
版权声明：本网站为非盈利性质，文章如非特殊说明均为原创，版权遵循知识共享协议CC BY-NC-ND 4.0进行授权，转载必须署名，禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap