文章

Electron 入门

入门

发表于
作者 独行的风
9 分钟阅读
Electron 入门

入门

特点

Web技术

Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

Chromium 是由Google主导开发的网页浏览器。以BSD许可证等多重自由版权发行并开放源代码，Chromium的开发可能早自2006年即开始。Chromium 是 Google 的Chrome浏览器背后的引擎，其目的是为了创建一个安全、稳定和快速的通用浏览器。

1
2
3
4
5
6
7
8
9

## Chromium和Chrome的区别：

1. Chromium是谷歌的开源项目，开发者们可以共同去改进它，然后谷歌会收集改进后的Chromium并发布改进后安装包。Chrome不是开源项目，谷歌会把Chromium的东西更新到Chrome中。你也可以这么理解Chromium是体验版，Chrome是正式版；

2. Chromium不用安装，下载下来的是压缩包，解压后直接就可以使用。Chrome需要安装；

3. Chromium功能比Chrome多，因为新功能都是先在Chromium中使用，等完善后才添加到Chrome中。相对的Chrome就要比Chromium稳定很多不容易出错；

4. Chromium不开放自动更新功能，所以用户需手动下载更新，而Chrome则可自动连上Google的服务器更新，但新版的推出很慢。

开源

Electron是一个由OpenJS基金会和一个活跃的贡献者社区管理的**开源项目**。

跨平台

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

主要操作系统构建语言：Mac：Objective C； Linux：C； Windows：C ++。

是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 这些应用程序可以打包为在 Mac，Windows 和 Linux 计算机上运行，也可以放置在 Mac 和 Windows 应用程序商店中。

Hello Word

初始化

1
2

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

需要遵循：

  • entry point 应为 main.js
  • author 与 description 可为任意值，但对于应用打包是必填项。

安装依赖

1

$ npm install electron -D

运行 Electron 应用：

在您的 package.json 配置文件中的 scripts 字段下增加一条 start 命令：

1
2
3
4
5

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

npm start 此时运行脚本 您的应用将立即抛出一个错误提示您它无法找到要运行的应用

运行主进程

任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。

执行期间，Electron 将依据应用中 package.json 配置下main 字段中配置的值查找此文件，可在初始化步骤中配置。

要初始化这个main文件，需要在您项目的根目录下创建一个名为 main.js 的空文件。

注意：如果您此时再次运行 start 命令，您的应用将不再抛出任何错误！ 然而，它不会做任何事因为我们还没有在 main.js 中添加任何代码。

创建页面

在创建窗口前，需要先创建加载进该窗口的内容。 在 Electron 中，每个窗口中无论是**本地的HTML文件还是远程URL**都可以被加载显示。
在项目根目录下创建一个名为 index.html 的文件：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>hello electron</h1>
    
    <h2>Node.js <span id="node-version"></span></h2>
    <h2>Chromium <span id="chrome-version"></span></h2>
    <h2>Electron <span id="electron-version"></span></h2>
  </body>
</html>

在窗口中打开您的页面

现在讲页面加载进应用窗口中。 要做到这一点，你需要 两个Electron模块：

  • app 模块，它控制应用程序的事件生命周期。
  • BrowserWindow 模块，它创建和管理应用程序 窗口。
1

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

然后，添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。

createWindow 【方法】创建窗口

1
2
3
4
5
6
7
8

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

接着，调用createWindow()函数来打开您的窗口。

在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。

1
2
3

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

注意：此时，您的电子应用程序应当成功 打开显示您页面的窗口！

ready 【事件】当 Electron 完成初始化时

whenReady 【方法】当Electron 初始化完成。

管理窗口的生命周期

关闭所有窗口时退出应用 (Windows & Linux)

在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。

1
2
3

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

window-all-closed 当所有的窗口都被关闭时触发。

process Node的全局对象：进程模块，用于操作进程与获取进程相关信息。

process.platform 返回进程平台系统。

  • ‘aix’ UNIX（一个分支）
  • ‘freebsd’ UNIX（一个分支）
  • ‘openbsd’ UNIX（一个分支）
  • ‘linux’
  • ‘sunos’ SunOS
  • ‘win32’ Windows
  • ‘darwin’ 达尔文（苹果核心系统）
  • ‘android’ 测试阶段

Linux和UNIX的关系及区别（详解版）

如果没有窗口打开则打开一个窗口 (macOS)

macOS 应用通常即使在没有打开任何窗口的情况下关闭也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。

因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后监听 activate 事件。 通过 whenReady() 回调中附上您的事件监听器来完成这个操作。

1
2
3
4
5
6
7

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

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

activate 当应用被激活时发出。 如首次启动应用程序、尝试在应用程序已运行时或单击应用程序的坞站或任务栏图标时重新激活它。

打包并分发您的应用程序

  1. 将 Electron Forge 添加到您应用的开发依赖中，并使用其”import”命令设置 Forge 的脚手架：
1
2

npm install --save-dev @electron-forge/cli
npx electron-forge import

node 版本需要 12.13.0 以上

  1. 使用 Forge 的 make 命令来创建可分发的应用程序：
1

npm run make

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到。

其他, Electron
Electron
本文由作者按照 CC BY 4.0 进行授权