electron：我们开始吧！

梦里梦外; 2024-03-31 03:35 8阅读 0赞

**一、背景**

最近有个获得用户mac地址的需求，IE内核浏览器可以利用ActiveX实现，但不能满足需求。想到使用[electron][]项目客户端开发实现，electron基于node的，`node是可以`获得网卡的物理地址的。本文我们先初始化项目。

**二、electron简介**

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。说白了就是一个沙盒包了一个浏览器，从而实现桌面应用。

主进程：在 Electron 里，运行 `package.json` 里 `main` 脚本的进程被称为**主进程**。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程：由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为**渲染进程**。

在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别：

主进程使用 BrowserWindow 实例创建窗口。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

**三、官方文档**

[快速入门 | Electron][_ Electron]

[官方指南 | Electron][_ Electron 1]

**四、开发工具Electron Fiddle**

[Electron Fiddle | Electron][Electron Fiddle _ Electron]

**五、init项目**

5.1、创建目录文件夹

> mkdir electron-base

5.2、

> pnpm init

5.3、

> pnpm add electron -D

5.4、index.html

<!DOCTYPE html>
    <html>
        <head>
          <meta charset="UTF-8">
          <title>Hello World!</title>
        </head>
        <body>
            <h1 id="h1">Hello World!</h1>
            We are using node
            <script>
                document.write(process.versions.node)
            </script>
            Chrome
            <script>
                document.write(process.versions.chrome)
            </script>,
            and Electron
            <script>
                document.write(process.versions.electron)
            </script>
        </body>
    </html>

5.5、index.js

const {app, BrowserWindow} = require('electron')
    // 创建全局变量并在下面引用，避免被GC
    let win
    function createWindow () {
        // 创建浏览器窗口并设置宽高
        win = new BrowserWindow({ width: 800, height: 600 })
        
        // 加载页面
        win.loadFile('./index.html')
        
        // 打开开发者工具
        win.webContents.openDevTools()
        
        // 添加window关闭触发事件
        
        win.on('closed', () => {
            win = null  // 取消引用
        })
    }
    
    // 初始化后 调用函数
    app.on('ready', createWindow)  
    // 当全部窗口关闭时退出。
    app.on('window-all-closed', () => {
       // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
       // 否则绝大部分应用及其菜单栏会保持激活。
       if (process.platform !== 'darwin') {
            app.quit()
       }
    })
      
    app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
        if (win === null) {
          createWindow()
        }
    })

5.6、package.json，增加start

> "start": "electron .",

{
      "name": "electron-base",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "electron .",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "electron": "^21.3.1"
      }
    }

5.7、

> pnpm run start

![57d23813bac14e6aad1cca41d612ba06.png][]

初始化项目启动成功

5.8、目录结构

![eb29fb1780d4455388da7e2f84f048ca.png][]

**六、调试**

Electron 有两个进程，主进程和渲染进程，开发过程中我们这样调试它们：

6.1、渲染进程

`BrowserWindow` 用来创建和控制浏览器窗口，我们调用它的实例上的API即可

win = new BrowserWindow({width: 800, height: 600})
    win.webContents.openDevTools() // 打开调试

6.2、主进程

可以使用vscode进行调试，未测试

**七、打包发布程序**

发布新应用的最快方式是使用[Electron Forge][]  
(1)添加Electron Forge作为你应用的开发依赖，并使用它的`import`命令来设置Forge的脚手架：

> npm install --save-dev @electron-forge/cli

> npx electron-forge import

(2)使用 Forge 的`package`命令打包发布成exe文件：

> npm run package

双击打包后的exe文件即可执行项目。

**八、项目配置**

**九、过程记录**

9.1、[electron/electron-quick-start][electron_electron-quick-start]

[https://github.com/electron/electron-quick-start.git][https_github.com_electron_electron-quick-start.git]

**十、欢迎交流指正，关注我，一起学习。**

参考链接：

[electron-vue获得用户mac地址\_荷花微笑的博客-CSDN博客\_vue获取mac地址][electron-vue_mac_-CSDN_vue_mac]

[Electron入门教学(electron菜鸟教程)][Electron_electron]

[Electron入门教程1 —— 编写第一个桌面应用程序\_害恶细君的博客-CSDN博客\_electron教程][Electron_1 _ _-CSDN_electron]

[electron-vue获得用户mac地址\_荷花微笑的博客-CSDN博客\_vue获取mac地址][electron-vue_mac_-CSDN_vue_mac]

[electron]: https://so.csdn.net/so/search?q=electron&spm=1001.2101.3001.7020
[_ Electron]: https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
[_ Electron 1]: https://www.electronjs.org/zh/docs/latest/README
[Electron Fiddle _ Electron]: https://www.electronjs.org/fiddle
[57d23813bac14e6aad1cca41d612ba06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2c02594c8db7429c946901f6215bba50.png
[eb29fb1780d4455388da7e2f84f048ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/91fefa5148b74551a6ebaa7ae4eb6ce9.png
[Electron Forge]: https://www.electronforge.io/
[electron_electron-quick-start]: https://github.com/electron/electron-quick-start
[https_github.com_electron_electron-quick-start.git]: https://github.com/electron/electron-quick-start.git
[electron-vue_mac_-CSDN_vue_mac]: https://blog.csdn.net/qq_35432904/article/details/122166918
[Electron_electron]: http://www.cncsto.com/article/76720
[Electron_1 _ _-CSDN_electron]: https://blog.csdn.net/weixin_50216991/article/details/124188494