🚀第一个Electron程序

📅 2023/4/15

环境准备

确保你的电脑上装有nodejs (opens new window),这是一切的基础。安装好nodejs后建议将npm切换为国内镜像以便提高下载速度，或者安装你自已喜欢的包管理器例如yarn、cnpm、pnpm 等，接下来我将都以npm作为包管理器。

//切换淘宝镜像
npm config set registry https://registry.npm.taobao.org
//切换默认镜像
npm config set registry https://registry.npmjs.org/
//安装其他包管理器
npm i yarn/cnpm/pnpm -g

这里我们暂时不做Electron的全局安装，因为Electron的版本更新很快并且只维护最新的四个版本，我们将再项目中根据需要进行安装。

初始化node项目

进入项目根目录通过以下命令进行node项目的初始化并且安装最新版本的Electron。安装Electron可能会由于网络原因造成下载失败，此时推荐切换镜像源或者改用其他包管理工具，例如pnpm。也可以尝试使用.npmrc文件。

# .npmrc文件内容
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
sqlite3_binary_host_mirror=https://npmmirror.com/mirrors/sqlite3/
# sass_binary_site=https://npmmirror.com/mirrors/node-sass/
chromedriver_cdnurl=https://npmmirror.com/mirrors/chromedriver/
operadriver_cdnurl=https://npmmirror.com/mirrors/operadriver/
fse_binary_host_mirror=https://npmmirror.com/mirrors/fsevents/

npm init
type nul > index.js
npm i electron -D

上述index.js为程序的入口文件，也是Electron的主进程。在主进程中可以使用node的能力，当然在渲染进程中也可以使用，但是需要特殊的配置。
在Electron中，主进程和渲染进程是应用程序中的两个核心进程，它们共同协作来实现应用程序的各种功能。
主进程是整个应用程序的控制中心，它是由 Node.js 环境运行的进程。主进程负责创建和管理所有的渲染进程，以及提供各种系统级别的功能，例如菜单栏、窗口管理、文件系统访问等。在主进程中，您可以使用 Electron 提供的 API 来调用各种系统级别的功能。
渲染进程是在 Web 页面中运行的进程，它是由 Chromium 内核运行的进程。在 Electron 应用程序中，每个窗口都有一个对应的渲染进程。渲染进程负责显示和交互用户界面，它可以使用 HTML、CSS、JavaScript 等 Web 技术来创建用户界面。在渲染进程中，您可以使用浏览器提供的 API 来操作 DOM、处理用户事件等。
进程和渲染进程之间通过 IPC（进程间通信）通信。通过 IPC，渲染进程可以向主进程发送请求，主进程则可以响应这些请求并执行相应的操作，例如访问文件系统、创建新窗口等。主进程也可以向渲染进程发送消息，例如在菜单栏中点击一个菜单项时，主进程可以向渲染进程发送消息告诉它执行相应的操作。

建立窗口

我们在index.js中写下这样的代码，并且运行npx electron . 命令，第一个Electron程序则创建完成。

const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
    const mainWin = new BrowserWindow()
    mainWin.loadURL('https://www.baidu.com')
})

上述代码中app模块是用来管理和控制 Electron 应用程序的。BrowserWindow为Electron的窗口对象，也就是渲染进程，其必须在app初始化完成以后创建，其中在创建时可以包含一些配置项来实现更为丰富的效果，具体的配置可以查看BrowserWindow API (opens new window)。
基础知识官方文档 (opens new window)比较齐全。