Electron快速入门

女爷i 2024-03-16 11:59 40阅读 0赞

**目录**

前言

一、安装需知

二、安装electron

三、开始

3.1 修改package.json文件

3.2 创建main.js文件

3.3 启动预览窗口

3.4 显示内容

四、 热加载

五、主进程和渲染进程概念介绍

六、自定义原生菜单

6.1 自定义菜单

6.2 给菜单添加点击事件

6.3 抽离菜单定义

6.4 无边框菜单

6.4.1 为无边框菜单添加新建窗口点击事件

6.4.2 小总结

6.4.2 点击打开网页

七、打开对话框读取文件

--------------------

##  ##

## 前言 ##

Electron是由GitHub众多开发者开发的一个开源项目，能够使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。

当然了，它也可以与vue和react相结合。前端的小伙伴们，学习它应该很快，是很容易上手的一门技术。

文档编写不易，还请各位耐心观看。另外本人能力有限，如有不足之处，还请不吝批评指正！

## 一、安装需知 ##

需要提前安装好Nodejs，因为Electron依赖于Nodejs。

注意二者有版本要求，比如Electron的v25.0.1版本就要求nodejs必须大于等于18.15.0版本。

所以安装之前建议去Electron的官网查看以下对应的版本。附上地址：[Electron Releases][]

## 二、安装electron ##

个人推荐版本：

Node：v16.13.2 Electron：v18.1.0

> 初始化项目

新建一个文件夹，在文件夹内初始化项目

npm init

> 安装electron

注意安装时指定版本，否则就是安装的最新版本。一旦安装最新版本，倘若你们nodejs不是最新的，就有可能导致无法安装，提示让你下载更高版本的nodejs。

npm install electron@v18.1.0 --save-dev

> 检查是否安装成功

安装完成后，我们可以通过如下命令检验版本号来判断是否安装成功

npx electron -v

或者我们可以直接进入在根路径下执行如下命令打开程序，如果弹出应用程序，说明安装成功了。

./node_modules/.bin/electron

![d3cf8dafbe6a4272b9d43c48d722e700.png][]

## 三、开始 ##

上面出现的这个应用程序界面是electron内置的一个demo样例。

下面我们就正式开发一个属于自己的界面了。

### 3.1 修改package.json文件 ###

我们项目初始化完成后，默认会生成一个package.json的文件。

我们需要在scripts对象中追加一个执行命令：

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

当然了，执行命令叫什么自己取都行，但是实际要执行的必须是electron .

其次，我们发现"main": "index.js",但是，我们并没有这个index.js，因此需要自己在根路径下新建该文件。为了符合electron的习惯，我们习惯上将index.js命名为main.js。它就是我们主程序的入口。

所以，修改后的package.json文件如下：

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

### 3.2 创建main.js文件 ###

main.js作为程序的入口，我们应该怎么写呢？

直接看下面的代码，相关说明我都注释标注了。

// 导入electron对象
    // app 控制应用程序的事件生命周期。
    // BrowserWindow 创建并控制浏览器窗口。
    const { app,BrowserWindow } = require('electron')
    
    // 控制ready事件
    // ready事件是：当 Electron 完成初始化时，发出一次。
    app.on('ready',()=>{
      // 新建窗口
      new BrowserWindow({
        width: 800,
        height: 600
      })
    })

### 3.3 启动预览窗口 ###

下面，我们执行启动命令查看一下：

npm run electron

![1dbd3a1f24544ce08f4b97c608bc644f.png][]

ok，窗口成功创建出来了，我们接下来就是让他显示内容了。

### 3.4 显示内容 ###

我们创建窗口之后，就可以获得这个窗口的返回对象。

通过这个返回对象，我们可以让它加载一个HTML页面，这就是electron显示内容的方式了。

// 导入electron对象
    // app 控制应用程序的事件生命周期。
    // BrowserWindow 创建并控制浏览器窗口。
    const { app,BrowserWindow } = require('electron')
    
    // 控制ready事件
    // ready事件是：当 Electron 完成初始化时，发出一次。
    app.on('ready',()=>{
      // 新建窗口
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
      });
      // 让主窗口加载文件 html文件
      mainWindow.loadFile('./src/index.html');
    })

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>欢迎来到electron</h1>
    </body>
    </html>

重新执行npm run electron启动，发现就成功的读取到了我们编写的index.html页面了。

![2a7a1381f1db48c2bdca2ab79d4c8595.png][]

## 四、 热加载 ##

通过上面的案例我们发现，每次编写完代码都需要重新运行。这样就比较麻烦了，有没有办法让我们代码修改完成就直接能看到效果了？

这就是热加载功能。

安装十分简单：

npm install --save-dev electron-reloader

使用方法只需要在main.js的入口文件中引入即可：

// 开启热加载
    const reloader = require('electron-reloader')
    reloader(module)

## 五、主进程和渲染进程概念介绍 ##

Electron 运行 `package.json` 的 `main` 脚本的进程被称为**主进程**。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它的叫**渲染进程**的进程中。也就是说每个页面都是渲染进程。

在普通的浏览器中，web页面无法访问操作系统的原生资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

ctrl+shift+i打开渲染进程调试

> 演示快捷键

![d32f5b5bd21a4833b0e82eacbcead774.png][]

![43762ad01da24037b49b96a703bad9b9.png][]

![86463ad4764e43bd97c763387eefafba.png][]

## 六、自定义原生菜单 ##

### 6.1 自定义菜单 ###

![d758ac9cc2f44bb68ad4b785651726d5.png][]

electron默认为我们提供了菜单栏，如上所示。

如果我们不想使用默认的原生菜单，自定义也是可以的。

这需要我们先引入electron的menu菜单对象。

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

然后我们自定义需要先配置模板，再通过模板创建出新的菜单对象，最后将菜单对象放到我们的Menu菜单对象中。

完整的代码为：

// 导入electron对象
    // app 控制应用程序的事件生命周期。
    // BrowserWindow 创建并控制浏览器窗口。
    // Menu 创建原生应用菜单和上下文菜单。
    const { app,BrowserWindow,Menu} = require('electron')
    
    // 开启热加载
    const reloader = require('electron-reloader')
    reloader(module)
    
    
    // 控制ready事件
    // ready事件是：当 Electron 完成初始化时，发出一次。
    app.on('ready',()=>{
      // 新建窗口
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
      });
      // 让主窗口加载文件 html文件
      mainWindow.loadFile('./src/index.html');
    
      // 配置模板
      const template = [
        {
          label: '文件'
        },
        {
          label: '编辑'
        },
        {
          label: '关于我们'
        }
      ]
    
      // 菜单对象构建该模板,生成菜单对象
      const menu = Menu.buildFromTemplate(template);
      // 设置我们构建好的菜单
      Menu.setApplicationMenu(menu);
    })

ok，我们的菜单栏就彻底改变了。

![482eee25828940f19573a391189ffb19.png][]

至于为什么模板中的键值为label，这个是官网要求的具体可查询相关api。[Menu | Electron][Menu _ Electron]

ok，我们可以参考api丰富一下菜单，这里演示为文件菜单设置一些子菜单。

![e18812ad9f2e4c46a2802553cd90707f.png][]![2404396468b74abbabe8d96d86d3a98d.png][]

### 6.2 给菜单添加点击事件 ###

接下来，我们实现一个功能，就是点击新建窗口的时候，让它弹出一个新的窗口。

实现起来也很容器，template中提供有click()方法来完成。

![44af4b866794411cb271bd65707db5e6.png][]![6396e7251be2413183017f3bbd514b84.png][]

### 6.3 抽离菜单定义 ###

为了方便后续维护，我们最好不把所有的功能都写在main.js中。比如菜单栏相关的代码，单独抽取成为一个menu.js。然后再引入到main.js中。

> menu.js

const {BrowserWindow,Menu} = require('electron')
      
    // 配置模板
    const template = [
        {
            label: '文件',
            submenu: [
                {
                    label: '新建窗口',
                    click(){
                        new BrowserWindow({
                            width: 300,
                            height: 200
                        })
                    }
                },
            {
                label: '保存'
            },
            {
                label: '另存为'
            },
            {
                label: '首选项'
            },
            {
                label: '退出'
            }
            ]
        },
        {
            label: '编辑'
        },
        {
            label: '关于我们'
        }
    ]
    
    // 菜单对象构建该模板,生成菜单对象
    const menu = Menu.buildFromTemplate(template);
    // 设置我们构建好的菜单
    Menu.setApplicationMenu(menu);

> main.js

界面效果依然一样，这里就不展示了。

### 6.4 无边框菜单 ###

我们不用原生的这种菜单方式，像QQ音乐这种，菜单是自定义的。其实实现起来也不复杂。只需要隐藏掉frame即可，然后自己写菜单结构和样式。如下：

![8b883719d4cc46a1afb5800144137231.png][]

![a0d91255ad654a12b944133c01939973.png][]

我们发现移走了是移走了，可是现在也无法拖拽了，也没有自己的菜单怎么办？

别急，我们一步一步来实现，先自定义菜单。

在index.html中写上菜单的html，然后再为它写一个css样式。

![b05480272412422d8a8ef9af079a4105.png][]

![ca357993df654f65b6dc0415b2da04b0.png][]

![2df2ec40d86d47cdb96949710765aeb0.png][]

最后是使它能够拖拽，追加css：\-webkit-app-region: drag; 实现拖拽。

![ffadf59b820a4126908062cc65183d5c.png][]![f24173fcce2b4afdb679e4beded5b6a5.png][]

#### 6.4.1 为无边框菜单添加新建窗口点击事件 ####

上面我们已经实现了无边框的菜单栏，并且让它拥有了可拖拽能力。

下面我们还是要实现一下点击新建窗口弹出一个新的窗口。

这时，问题来了，之前我们都是在主进程中也就是main.js文件中，通过BrowserWindow对象实现的。

现在我们的菜单栏是在index.html文件中实现的，它是在一个渲染进程中。渲染进程是无法操作主进程的对象的。

![180ea54123864c84ad61749b13d365a6.png][]

想在渲染进程中使用主进程中才能使用的对象，这就必须先remote出来。

![d02bf42ad4ff4c03aa279c06082a5c8b.png][]

![3edfaca464334a73b30ed1e7e108deed.png][]

ok，重新运行一下，发现点击并没有反应，我们打开调试窗口看看，结果发现报错了。

![5fb2ab2c56c749a3b81bc87f46f6d544.png][]

他说require is not defined。

这是因为JavaScript中默认是不能使用require这些属于nodejs的东西的。

如果想在JavaScript代码中使用nodejs的东西，就必须在主进程中开启node模块以及remote模块。

> webPreferences: \{  
> // 开启node模块  
> nodeIntegration: true,
> 
> // 如果无法开启node模块，还是报这个错，那么请关闭下面这个配置项
> 
> contextIsolation: false,
> 
>   
> // 开启remote模块  
> enableRemoteModule: true  
> \}

![2046d2923f1d466987ecb3575880bd60.png][]

这里要注意：electron12版本以后，默认是移除了remote的，官方推荐路由的方式来处理。如果想了解的建议直接去官网。这里我们还是选择用remote，既然官网移除了，那么我们再把它安装回来。

npm install @electron/remote --save

![206963d2f9034e1593115caa4b385a42.png][]

> 问题：

此时再次点击新建窗口，发现还是不能，这是为什么呢？

我们console.log("随便")随便打印点东西看看能否出现结果。结果无法展示出来，说明点击就没起作用。

而我们检查了语法又没有问题。

这是因为我们把整个菜单栏全部都设置成了拖拽功能了，所以才导致无法点击。

解决办法就是将li标签列表设置为不可拖拽。

#### 6.4.2 小总结 ####

> 总结使用无边框的菜单栏使用步骤：

1. main.js的主窗口中关闭frame。

2. 在对应渲染页面中编写菜单的html结构，并自己设置对应的css样式。

3. 记得在css样式合适的位置设置\-webkit-app-region: drag;让其可拖拽，为保障菜单功能点击有效，记得在对应的名称上设置禁止拖拽-webkit-app-region: no-drag;否则父标签的拖拽效果会传递给子标签。

4. 给菜单添加点击事件。

5. 如果要让点击后弹窗，需要使用到Main进程的BrowserWindow。则需要remote出来。

6. 因此需要在主进程开启remote模块。

7. 同时要在js中使用nodejs的东西，则也需要开启node模块。

#### 6.4.2 点击打开网页 ####

同样的道理，我们再来试一试点击打开一个网页。

为了照顾到不同版本带来的remote差异，我们直接用原生的菜单栏。然后把原来自己写的自定义菜单栏html代码注释掉，免得影响美观。

## 七、打开对话框读取文件 ##

为了照顾到不同版本带来的remote差异，我们直接用原生的菜单栏。然后把原来自己写的自定义菜单栏html代码注释掉，免得影响美观。接着给菜单栏增加一个子菜单：导入文件。

// 导入electron对象
    // app 控制应用程序的事件生命周期。
    // BrowserWindow 创建并控制浏览器窗口。
    // Menu 创建原生应用菜单和上下文菜单。
    
    const { app,BrowserWindow} = require('electron')
    
    
    
    // 开启热加载
    const reloader = require('electron-reloader')
    reloader(module)
    
    
    // 控制ready事件
    // ready事件是：当 Electron 完成初始化时，发出一次。
    app.on('ready',()=>{
      // 新建窗口
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        // 是否显示原生菜单栏
        frame: true,
        webPreferences: {
          // 开启node模块
          nodeIntegration: true,
          // 开启remote模块
          enableRemoteMoudle: true
        }
      });
      // 让主窗口加载文件 html文件
      mainWindow.loadFile('./src/index.html');
    
      // 引入自定义菜单
      require('./menu')
    
    
      // 自动打开调试窗口
      mainWindow.webContents.openDevTools();
    })

![ddc5804c17c54423876e67fa3d01839e.png][]![3a7a6deaf6144b47914580e9d49417ee.png][]

引入dialog并展示，此时就弹出了对话框

![06893f15884f40a09f8bec52b65e5c5f.png][]

![5548ffae30c34c478f2b3869c0c0906b.png][]

下面我们看看可以填写哪些参数：[dialog | Electron][dialog _ Electron]

由于时间有限，暂时整理到这里，如果有迫切的需要，请联系我，我会以你意想不到的速度进行补充。O(∩\_∩)O

[Electron Releases]: https://releases.electronjs.org/releases/stable
[d3cf8dafbe6a4272b9d43c48d722e700.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b17b0fa8b75b4025a365e45d885252e0.png
[1dbd3a1f24544ce08f4b97c608bc644f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/48cf12d49f164b608f18246d199f0be5.png
[2a7a1381f1db48c2bdca2ab79d4c8595.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0a0b79d2283c465bb3ad8f49c130bbe9.png
[d32f5b5bd21a4833b0e82eacbcead774.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6cc2d19d24784803b608ff57045002fd.png
[43762ad01da24037b49b96a703bad9b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8823142e041e4bf49cf2accc212b6c9b.png
[86463ad4764e43bd97c763387eefafba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0c9b1a70e943429a9804fc11de0484bf.png
[d758ac9cc2f44bb68ad4b785651726d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4cde014e9b154e7eb4c1facd76cd8619.png
[482eee25828940f19573a391189ffb19.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5d17b4269b764b27bc77f08e7145ecd7.png
[Menu _ Electron]: https://www.electronjs.org/zh/docs/latest/api/menu
[e18812ad9f2e4c46a2802553cd90707f.png]: https://img-blog.csdnimg.cn/e18812ad9f2e4c46a2802553cd90707f.png
[2404396468b74abbabe8d96d86d3a98d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/77fed88cd1ba43d1a0f5e65d87e56f91.png
[44af4b866794411cb271bd65707db5e6.png]: https://img-blog.csdnimg.cn/44af4b866794411cb271bd65707db5e6.png
[6396e7251be2413183017f3bbd514b84.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/326b11c5fcae4c4fa12b8401abc653cf.png
[8b883719d4cc46a1afb5800144137231.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f4f2bca046b84cffb16b2bb2df52aa5a.png
[a0d91255ad654a12b944133c01939973.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cc31184f424849c69557c10464f8fb38.png
[b05480272412422d8a8ef9af079a4105.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/90457ee61d1e44d9accb4449fda1243a.png
[ca357993df654f65b6dc0415b2da04b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c402f4de20364a048b346c6477fa0b81.png
[2df2ec40d86d47cdb96949710765aeb0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8af665aef7ff4cfd87e143d5f2354397.png
[ffadf59b820a4126908062cc65183d5c.png]: https://img-blog.csdnimg.cn/ffadf59b820a4126908062cc65183d5c.png
[f24173fcce2b4afdb679e4beded5b6a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f5fdb91172124f6e892f55cf7e081108.png
[180ea54123864c84ad61749b13d365a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/169caeb9b8b541cf8684c244b57d18fa.png
[d02bf42ad4ff4c03aa279c06082a5c8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/27e64498ac4f4b0985e3e0c197726454.png
[3edfaca464334a73b30ed1e7e108deed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/29b095868b5849568e915cf722b07137.png
[5fb2ab2c56c749a3b81bc87f46f6d544.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f80e55d56bd5427f8f9f3f2c71ad4df6.png
[2046d2923f1d466987ecb3575880bd60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/745430e1e54a48cab58cf0d83adc1a86.png
[206963d2f9034e1593115caa4b385a42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6fbb7dbb0de8471db983fcc585cb8096.png
[ddc5804c17c54423876e67fa3d01839e.png]: https://img-blog.csdnimg.cn/ddc5804c17c54423876e67fa3d01839e.png
[3a7a6deaf6144b47914580e9d49417ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1be2aff5c0a64e158464ad58c5605042.png
[06893f15884f40a09f8bec52b65e5c5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e794e14c749c43d498cb2d5036f1cf62.png
[5548ffae30c34c478f2b3869c0c0906b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e7542562c945461a9918c66918bdab19.png
[dialog _ Electron]: https://www.electronjs.org/zh/docs/latest/api/dialog