Electron简介

# 什么是Electron？

一个使用JavaScript、HTML 和 CSS 构建桌面应用程序的框架。依赖于内嵌的嵌入 Chromium (opens new window) 和 Node.js (opens new window)。

一个重要的能力：能够在主进程中访问 Node.js 环境的所有功能，即不再被浏览器所限制。

# 硬性要求

需要下载 node.js（开发使用） ,推荐最新的长期支持 (LTS) 版本。

虽然需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用系统的 Node.js 环境来运行它的代码。相反地，它使用它内置的 Node.js 运行时。这意味着您的终端用户不需要 Node.js 环境也可以运行您的应用。

一个文本编辑器来编写代码。推荐使用 Visual Studio Code (VS Code)。

# 初始化项目

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

1
2

# 安装并构建Electron

npm install electron --save-dev

# 应用入口

在 package.json 中指定的脚本文件 main (opens new window) 是所有 Electron 应用的入口点。这个文件控制 主程序 (main process)，它运行在 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)。

index.js

console.log(`欢迎来到 Electron 👋`)

# 运行

再 package.json 中配置node进程，如在scripts (opens new window) 字段中添加一个 start 命令，执行内容为 electron . 。

 "scripts": {
    "start": "electron ."
  },

1
2
3

// package.json
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "start": "electron ."s
  },
  "devDependencies": {
    "electron": "^19.0.0"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

输入npm run start，将会执行 index.js 中的代码，即输出

欢迎来到 Electron 👋

编辑

上次更新: 2023/7/11 18:57:41

构建一个基础应用→