介绍
Electron是一个使用HTML、CSS和JavaScript等Web技术来构建跨平台桌面应用程序的开源框架。它由GitHub创建，可让您使用Node.js运行JavaScript代码，并在Mac、Windows和Linux等不同操作系统上以本机应用程序的形式分发。
在本文中，我们将介绍如何在零基础的情况下使用Electron框架开发一个简单的桌面应用程序，包括如何安装和配置Electron环境、如何创建主进程和渲染进程、如何通过IPC通信实现进程间通信，以及如何打包和分发应用程序。
环境搭建
在开始之前，您需要确保已经安装了Node.js和npm（Node.js包管理器）。如果您还没有安装，请先安装它们。
接下来，我们需要全局安装Electron：
npm install -g electron
如果您在中国大陆地区，可能会遇到网络问题，可以考虑使用淘宝镜像进行安装：
npm install -g electron --registry=https://registry.npm.taobao.org
创建应用程序
首先，我们需要创建一个空的项目目录并进入该目录：
mkdir my-electron-app cd my-electron-app
接下来，我们需要在该目录下创建一个package.json文件来描述我们的应用程序。可以使用以下命令来快速生成：
npm init -y
接下来，我们需要将Electron作为项目依赖项添加到该文件中：
npm install --save-dev electron
现在，我们已经准备好开始编写代码了。
创建主进程
我们先创建一个名为main.js的主进程文件。该文件将负责创建应用程序窗口和与渲染进程通信。
我们需要引入Electron模块：
const { app, BrowserWindow } = require('electron')接下来，我们需要创建一个应用程序窗口并监听应用程序准备就绪事件：
-- -------------------- ---- -------
--------------- -- -- -
----- ---------- - --- ---------------
------ ----
------- ----
--------------- -
---------------- ----
-
--
---------------------------------
--在上述代码中，我们创建了一个大小为800x600的窗口，并将nodeIntegration属性设置为true以允许在渲染进程中使用Node.js。
最后，我们将index.html加载到窗口中。
创建渲染进程
接下来，我们需要创建一个名为index.html的HTML文件来显示应用程序的用户界面。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ --------------
-------
------
--------- -----------
-------
-------在main.js中，我们加载了该文件：
mainWindow.loadFile('index.html')现在，我们已经准备好显示窗口了。
进程间通信
接下来，我们将演示如何通过IPC（进程间通信）在主进程和渲染进程之间传递消息。
在主进程中，我们需要监听IPC消息：
const { ipcMain } = require('electron')
ipcMain.on('message', (event, data) => {
console.log(data)
})在渲染进程中，我们可以使用ipcRenderer模块发送IPC消息：
const { ipcRenderer } = require('electron')
ipcRenderer.send('message', 'Hello from renderer process!')当渲染进程发送消息时，主进程会打印该消息。
打包和分发应用程序
最后
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5157