桌面应用开发--Electron_electron开源项目-优快云博客

本文链接：https://blog.youkuaiyun.com/wl_qianduan/article/details/145882250

Electron 是一款流行的开源框架，用于使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。以下是关于它的详细介绍：

基本信息

诞生背景： 由 GitHub 开发，最初于 2013 年以 Atom Shell 的名称发布，旨在为 Atom 文本编辑器提供跨平台的桌面应用解决方案，后来更名为 Electron，成为独立的开源项目，被广泛应用于各种桌面应用的开发。
原理： Electron 基于 Chromium 和 Node.js，它将 Chromium 的渲染引擎用于显示应用的用户界面，允许开发者使用 HTML、CSS 和 JavaScript 来构建界面，就像开发网页一样。同时，集成了 Node.js，使开发者能够在桌面环境中使用 Node.js 的丰富生态系统和 API，进行文件操作、网络请求、系统交互等后端任务，实现了前端和后端技术在桌面应用开发中的融合。

主要特点

跨平台性： Electron 应用可以在 Windows、Mac 和 Linux 等多个主流操作系统上运行，一次编写的代码能够在不同平台上具有相似的外观和功能，大大提高了开发效率，减少了开发成本。
丰富的技术栈： 开发者可以使用熟悉的 Web 技术进行开发，前端开发者无需学习新的编程语言和开发工具，就能够快速上手桌面应用开发，同时可以充分利用 Node.js 的各种模块和工具，实现复杂的功能。
强大的社区支持： 拥有庞大且活跃的社区，社区提供了大量的开源项目、插件、教程和文档。开发者可以很容易地找到解决问题的方案，分享自己的经验和代码，这有助于推动技术的发展和应用的创新。
丰富的原生功能支持： 通过调用系统级的 API，Electron 能够实现与操作系统原生功能的交互，如文件系统操作、系统托盘、通知、菜单等，使应用能够更好地融入操作系统环境，提供良好的用户体验。

基本语法

Electron 的基本语法主要基于 JavaScript，结合其特有的 API 来实现桌面应用的各种功能

主进程与渲染进程

主进程： 在 Electron 中，负责创建浏览器窗口、管理应用生命周期等的进程称为主进程。在主进程文件（通常是main.js）中，引入electron模块并使用其 API。例如：

const { app, BrowserWindow } = require('electron');
// 保持对窗口对象的全局引用，防止被垃圾回收
let mainWindow;
function createWindow() {
    // 创建浏览器窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    // 加载应用的index.html文件
    mainWindow.loadFile('index.html');
    // 打开开发者工具
    mainWindow.webContents.openDevTools();
    // 当窗口关闭时，取消引用
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}
// 当Electron完成初始化并准备创建浏览器窗口时调用
app.on('ready', createWindow);
// 当所有窗口关闭时退出应用
app.on('window-all-closed', () => {
    // 在macOS上，除非用户明确按下Command+Q，否则通常不应该退出应用
    if (process.platform!== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    // 在macOS上，当应用程序图标被点击并且没有其他窗口打开时，通常会重新创建一个窗口
    if (mainWindow === null) {
        createWindow();
    }
});

渲染进程： 负责显示网页内容的进程是渲染进程，它可以使用 HTML、CSS 和 JavaScript 来构建用户界面。在渲染进程中，可以使用electron模块的remote模块来与主进程进行通信。例如，在渲染进程的 JavaScript 文件中：

const { remote } = require('electron');
// 获取主进程中的应用对象
const app = remote.app;
// 获取当前窗口对象
const currentWindow = remote.getCurrentWindow();
// 监听窗口的最大化事件
currentWindow.on('maximize', () => {
    console.log('窗口已最大化');
});

进程间通信

主进程发送消息到渲染进程： 在主进程中，可以使用webContents.send方法发送消息。

// 主进程中
const { BrowserWindow } = require('electron');
let mainWindow;
function createWindow() {
    mainWindow = new BrowserWindow({...});
    // 发送消息给渲染进程
    mainWindow.webContents.send('message-from-main', { data: '这是来自主进程的消息' });
}

渲染进程接收消息： 在渲染进程中，使用ipcRenderer来接收消息。

// 渲染进程中
const { ipcRenderer } = require('electron');
ipcRenderer.on('message-from-main', (event, data) => {
    console.log(data); // 输出：这是来自主进程的消息
});

渲染进程发送消息到主进程： 在渲染进程中，使用ipcRenderer.send发送消息。

// 渲染进程中
const { ipcRenderer } = require('electron');
// 发送消息给主进程
ipcRenderer.send('message-from-renderer', { data: '这是来自渲染进程的消息' });

主进程接收消息： 在主进程中，使用ipcMain来接收消息。

// 主进程中
const { ipcMain } = require('electron');
ipcMain.on('message-from-renderer', (event, data) => {
    console.log(data); // 输出：这是来自渲染进程的消息
});

菜单创建

在主进程中，可以使用Menu模块来创建菜单。

const { app, Menu } = require('electron');
function createMenu() {
    // 创建菜单模板
    const menuTemplate = [
        {
            label: '文件',
            submenu: [
                {
                    label: '打开',
                    click: () => {
                        // 在这里添加打开文件的逻辑
                    }
                },
                {
                    label: '关闭',
                    click: () => {
                        // 在这里添加关闭窗口或退出应用的逻辑
                    }
                }
            ]
        },
        {
            label: '编辑',
            submenu: [
                // 编辑菜单的菜单项
            ]
        }
    ];
    // 创建菜单
    const menu = Menu.buildFromTemplate(menuTemplate);
    // 将菜单设置为应用的菜单
    Menu.setApplicationMenu(menu);
}
app.on('ready', () => {
    createMenu();
});

应用案例

Atom： 作为 Electron 的起源项目，Atom 是一款流行的开源文本编辑器，具有高度可定制性和丰富的插件生态系统，被众多开发者广泛使用。
Visual Studio Code： 微软开发的一款轻量级但功能强大的代码编辑器，使用 Electron 构建，支持多种编程语言和开发框架，深受开发者喜爱。
Slack： 一款团队协作工具，提供了跨平台的桌面应用，方便团队成员进行沟通、文件共享和项目管理等操作，其桌面应用就是使用 Electron 开发的。

适合开发的桌面应用

文本编辑与代码开发类
- 代码编辑器： 如 Visual Studio Code，开发者可以利用 Electron 结合丰富的代码编辑库和插件体系，构建功能强大的跨平台代码编辑器，支持多种编程语言的语法高亮、代码补全、调试等功能。
- 文本写作工具： 对于需要专注于文本创作的应用，如 markdown 编辑器，Electron 可以提供简洁的界面和便捷的文本编辑功能，同时利用 Node.js 的文件系统操作能力，方便用户保存、打开和管理文本文件。
办公协作类
- 团队沟通工具： 像 Slack 这样的团队协作软件，需要在不同操作系统上提供一致的沟通体验。Electron 能够实现跨平台的即时通讯功能，支持聊天、群组讨论、文件共享等功能，方便团队成员之间的交流与协作。
- 项目管理工具： 可以开发具有甘特图、任务列表、进度跟踪等功能的项目管理应用，利用 Electron 结合相关的项目管理框架和后端服务，帮助团队更好地规划和管理项目进度。
多媒体类
- 音乐播放器： Electron 可以调用系统的音频播放 API，结合美观的界面设计，开发出具有个性化界面和丰富功能的音乐播放器，支持本地音乐播放、在线音乐搜索与播放等功能。
- 视频编辑工具： 对于一些简单的视频编辑需求，如视频裁剪、拼接、添加字幕等基础操作，Electron 可以结合视频编辑库，提供一个跨平台的轻量级视频编辑环境。
开发辅助类
- API 调试工具： 开发人员在进行接口开发和调试时，需要一款方便的工具来发送 HTTP 请求、查看响应结果等。Electron 可以结合相关的网络请求库，开发出功能强大的 API 调试工具，方便开发人员进行接口测试和调试。
- 数据库管理工具： 可以利用 Electron 开发数据库管理工具，实现对各种数据库的连接、数据查询、表结构管理等功能，为开发人员和数据库管理员提供一个便捷的数据库管理界面。
学习教育类
- 在线学习客户端： 教育机构可以使用 Electron 开发在线学习客户端，学生可以通过该客户端观看教学视频、参与在线课程、提交作业等，实现与在线学习平台的无缝对接，提供更好的学习体验。
- 语言学习软件： 开发具有单词背诵、语法练习、听力训练等功能的语言学习软件，利用 Electron 的跨平台特性，让用户在不同设备上都能方便地进行语言学习。

局限性

应用体积较大： 由于需要打包 Chromium 和 Node.js 运行时环境，Electron 应用的安装包通常比较大，这可能会影响下载和安装速度，特别是对于网络条件不佳或存储空间有限的用户。
性能相对较低： 与原生应用相比，Electron 应用在性能上可能会稍逊一筹，尤其是在处理复杂的图形渲染、大规模数据处理等场景下，可能会出现卡顿或响应缓慢的情况。
资源占用较高： Electron 应用在运行时可能会占用较多的系统资源，导致系统性能下降，特别是在同时运行多个 Electron 应用或系统资源有限的情况下，这种情况可能会更加明显。