1. 安装 Electron

• npm install -g package --registry=https://registry.npm.taobao.org 淘宝镜像
• npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm
• cnpm install -g electron 全局安装electron
• npx electron -v 查看electron版本

2. Electron 官网简介

Electron 是一个使用JavaScript、HTML和CSS等Web技术创建原生程序的框架，它负责比较难搞的部分，你只需把经历放在你的应用的核心上即可。
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

2.1 Web技术

Electron基于Chromium和Node.js，让你可以使用HTML、CSS和JavaScript创建应用

2.2 开源

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

2.3 跨平台

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

3. 创建第一个Electron应用

• npm init 初始化项目，生成package.json文件
• 添加.gitignore文件 Github的Node.js gitignore模板
• npm install electron --save-dev 安装electron

3.1 package.json文件配置

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "学习electron实现个人功能需求",
  "main": "main.js", // 任何electron应用程序的入口都是main文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面。
  "scripts": {
    "start": "electron .", // 配置start命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Ably",
  "license": "ISC",
  "devDependencies": {
    "electron": "^20.1.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.2 创建页面

创建加载进该窗口的内容，在electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。

index.html




    
    
    
    


    
Hello Electron
    

        We are using Node.js ,
        Chromium ,
        and Electron .
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们会发现，对于Node.js 版本，Chromium，Electron内内容并未指定，过后会使用JavaScript动态插入。

3.3 加载应用窗口

我们已经创建一个页面，那么如何才能将它加载至应用窗口中呢？需要两个Electron模块：

• app 模块，控制应用程序的时间生命周期
• BrowserWindow 模块，创建和管理应用程序窗口

main.js 
// 配置窗口,将内容展示在窗口中

// 因为主进程运行着Node.js，故可以在main.js文件头部将它们导入作为CommonJS模块
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
    const win = new BrowserWindow({
        width: 888,
        height: 666
    }) // 创建一个宽为888，高为666的窗口
    win.loadFile('index.html') // 这个窗口加载index.html文件
}

// 在Electron中，只有在app模块的ready事件被激发后才能创建浏览器窗口。可以通过使用app.whenReady() API 监听此事件。
app.whenReady().then(() => {
    createWindow() // 调用该函数，打开一个我们配置好的窗口。 在whenReady()成功后调用createWindow()。不然会报错Cannot create BrowserWindow before app is ready
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

窗口配置成功后，我们可以执行yarn start查看electron的效果是否如我们所示，出现了一个宽888高666的窗口，展示内容为index.html中的内容

3.4 管理窗口的生命周期

我们现在可以打开浏览器窗口，但我们还需要一些额外的模块代码使其看起来更像各平台原生的。应用程序窗口再每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者。

一般而言，可以使用进程全局的platform属性来专门操作某些操作系统运行代码。

3.4.1 关闭所有窗口时退出应用

在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。我们可以监听app模块的window-all-closed事件。如果用户不是在macOS(darwin)上运行程序则调用app.quit()，macOS程序无需做这项处理

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

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

• 当Linux和Windows应用在没有窗口打开时退出了，macOS应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口
• 为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
• 因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。

app.whenReady().then(() => {
    createWindow() // 调用该函数，打开一个我们配置好的窗口。 在whenReady()成功后调用createWindow()。不然会报错Cannot create BrowserWindow before app is ready
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
1
2
3
4
5
6

若想查看效果，可以将whenReady后的第一个createWindow()方法注释掉，我们在运行项目时会发现并没有窗口直接出现，点击electron图标时，触发activate事件，窗口出现

以上，窗口控件功能齐全。

4. 通过预加载脚本从渲染器访问Node.js

上述项目启动时我们会发现，只有展示静态的html内容，但是我们期望展示的各个内容的版本还未加载到内容中。最后我们需要做的就是输出Electron的版本号和它的依赖项到web页面中。

在主进程中通过Node的全局process对象访问这个信息是微不足道的。但是，你不能直接在主进程中编辑DOM，因为它无法访问渲染器文档上下文。它们存在于完全不同的进程。

预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码 。 这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。

预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。

main.js中给对应进程增加预加载内容

const createWindow = () => {
    const win = new BrowserWindow({
        width: 888,
        height: 666,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),  // 必须为绝对路径
        }
    }) // 创建一个宽为888，高为666的窗口，预加载preload.js文件中的内容
    win.loadFile('index.html') // 这个窗口加载index.html文件
    win.webContents.openDevTools()  // 打开控制台
}
1
2
3
4
5
6
7
8
9
10
11
12
13

preload.js 预加载执行内容

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })
1
2
3
4
5
6
7
8
9
10
11
12

5. 页面增加css样式和js操作

• index.html中定义页面结构，引入对应的css文件和js文件

    
    
    
    
    


    
Hello Electron
    

        
        We are using Node.js ,
        Chromium ,
        and Electron .
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• index.css中设置样式

.my_title {
    color: blue;
}
1
2
3

• index.js 定义页面自定义操作

let count = 0
function add() {
    count ++
    document.getElementById('myBtn').innerText = `当前count值： ${count}`
}

window.onload = function() {
    document.getElementById('myBtn').innerText = `当前count值： ${count}`
}
1
2
3
4
5
6
7
8
9

6. 打包并分发应用程序

使用Electron Forge打包

• npm install --save-dev @electron-forge/cli 安装
• npx electron-forge import 将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架
• npm run make 使用 Forge 的 make 命令来创建可分发的应用程序

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

7. 小知识

7.1 如何在electron窗口进行内容打印调试呢？

• 主进程main.js中打印，可以在调用终端看到
• 渲染进程中进行打印，可以在主进程中添加webContents.openDevTools()

const createWindow = () => {
    const win = new BrowserWindow({
        width: 888,
        height: 666,
        webPreferences: {
            preload: '/preload.js',  // 必须为绝对路径
        }
    }) // 创建一个宽为888，高为666的窗口
    win.loadFile('index.html') // 这个窗口加载index.html文件
    win.webContents.openDevTools()  // 打开控制台
}
1
2
3
4
5
6
7
8
9
10
11

这样在启动electron后就会自动打开控制台，可查看对应渲染进程中的打印内容

安装步骤来源文章传送门
electron官网传送门
macOS中不需要app.quit()原因传送门

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~