Electron入门 01：快速入门_electron教程-程序员宅基地

文章目录

目的
基础介绍
开发环境准备
快速入门
窗口与菜单
总结

目的

自从HTML5、CSS3、ES6这些标准加入后，前端做不管是做界面还是做功能都越来越强大、越来越方便了。通常来说前端应用只能运行在浏览器中，无法当作独立的桌面或移动端应用使用，不过因为前端开发方便、开发人员多，现在已经有了很多可以将前端应用变为桌面或移动端应用的方法了，Electron就是其中一种方案。这篇文章将对Electron的入门使用做个说明。

在这里插入图片描述
Electron官方网站： https://www.electronjs.org/

基础介绍

Electron可以把前端项目打包成为桌面（Windows、macOS、Linxu）应用，比如Windows上 .exe 格式的程序。

Electron的实现思路很简单，既然网页可以在浏览器中运行，而浏览器是个原生的应用程序，那只要把浏览器和网页打包在一起，前端应用就也可以成为原生应用了。Electron使用了谷歌的Chromium浏览器，打包后的前端应用其实就是运行在Chromium上而已。

Electron这种方式带来一个好处，因为Chromium是个原生应用，它可以和操作系统进行交互，调用操作系统的资源，所以Electron中的前端应用也就变相的可以进行这些操作了，比如读写文件、操作网络、使用TCP/UDP等等功能。

Electron这种方式还有一个隐藏的好处，因为浏览器是确定的，开发前端应用的时候就不容考虑兼容性问题了。

Electron也有缺点，那就是打包出来的应用容量大，100MB起步，毕竟打包了个浏览器。还有就是性能差，浏览器上开网页性能也就这样了。

在这里插入图片描述

Electron使用非常简单，官方文档写的也很详细，并且提供了中文版本的：https://www.electronjs.org/zh/docs/latest/

这里写 Electron入门文章主要依照官方文档做个记录，并在此基础上对一些内容做个补充。

开发环境准备

Electron项目是基于Node.js的，所以需要安装Node.js环境并了解一些Node.js使用知识，可以参考下面文章：
《Node.js入门 01：基础使用与说明》https://blog.csdn.net/Naisu_kun/article/details/120665042
《Node.js入门 02：包管理器npm》https://blog.csdn.net/Naisu_kun/article/details/120663782
《Node.js入门 03：模块化规范 CommonJS 与 ES Module》https://blog.csdn.net/Naisu_kun/article/details/120663822

另外编写调试程序什么的最好有个趁手的编辑器，比如 Visual Studio Code ，顺带一提这个软件就是用Electron开发的。

Electron的开发和版本有挺大的关联，不同版本下很多内容可能有较大差异，本文编写时使用的Electron版本为：15.3.0

对于大陆用户来说基于Node.js的各类项目最容易碰到的问题可能是使用npm下载模块时遇到的网络问题，可以参考上面讲npm的文章中换源相关内容。简单点的比如使用nrm工具来换源：
在这里插入图片描述

或者也可以对Electron单独设置淘宝源：
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

当然上面方式也不一定能解决所有问题，有些时候还是需要具体问题具体分析。大多数会遇到的问题都是模块下载失败，或者未下载完整造成的，可以通过删除缓存重新下载或是对有问题的模块强制重新下载等方式来尝试解决。

另外在Electron使用过程中会用到很多第三方的模块，有些模块需要编译后才能运行，编译大多数时候是自动的，但是需要一些工具环境，这方面内容也可以参考上面讲npm的文章中模块编译相关内容。

快速入门

创建应用

首先创建一个项目文件夹，在文件夹中使用 npm init -y 命令生成项目配置文件 package.json ：
在这里插入图片描述
package.json 文件中有几个比较重要的字段，相关说明如下：

name 项目名称，必须项；
version 项目版本号，必须项；
description 项目描述，应用打包必须项；
main 项目入口文件，必须项（这个在Electron官方的文档中名称为 main.js ，下面演示中也将手动改成 main.js ）；
author 作者，应用打包必须项；

接下来使用 npm install --save-dev electron 命令安装electron，安装完成后可以在 package.json 文件的 scripts 字段中添加 "start": "electron ." ，这样就可以在终端中使用 npm start 来启动程序了，当然现在直接启动会报错，因为还未添加项目中的各种程序文件：
在这里插入图片描述

接下来添加上面提到的程序入口文件，这里使用名称为 main.js ，内容如下：

// 控制应用生命周期和创建原生浏览器窗口的模块
const {
     app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
    
    const mainWindow = new BrowserWindow() // 创建浏览器窗口
    mainWindow.loadFile('index.html')      // 加载 index.html
}

// 应用程序准备就绪时触发
app.whenReady().then(() => {
    
    createWindow() // 创建窗口

    // macOS 上需要的特殊处理，以正确打开窗口
    app.on('activate', function () {
    
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// 所有窗口关闭时触发
app.on('window-all-closed', function () {
    
    // 除 macOS（darwin）外，关闭所有窗口时通常意味着退出应用程序
    if (process.platform !== 'darwin') app.quit()
})

// 可以在这个文件中包含应用程序剩余的所有代码，也可以拆分成几个文件然后用 require 导入

上面代码中可以看到应用程序准备就绪后会创建窗口并加载网页文件 index.html ，所以我们还需要准备一个这个文件，这里先准备下面内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1 id="txt">Hello World!</h1>
</body>
</html>

这样就可以进行基本的测试了：
在这里插入图片描述
上面就是最基础的演示了，如果做过前端开发就可以看到这其实就是个浏览器加载了个网页而已，开发工具就是Chromium浏览器的开发工具。

调试应用

开发过程中非常依赖调试来处理各种问题，对于Electron项目而言主要需要调试的分为两个部分：创建、管理窗口的 主进程 （比如上面的main.js）；窗口本身内容与脚本等的 渲染进程 （比如上面的index.html）。

渲染进程的调试很方便，像前面演示中直接打开 Chromium浏览器的开发工具即可，也可以在使用代码打开，比如在创建窗口的同时用 mainWindow.webContents.openDevTools() 打开。

主进程的调试一般可以通过使用 console.log() 方法向终端输出信息的方式进行。在VScode中也可以通过下面设置后调试：

在项目目录下创建 .vscode 文件夹，在此文件夹中创建 launch.json 文件，文件内容如下：

{
    
  "version": "0.2.0",
  "configurations": [
    {
    
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
    
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."]
    }
  ]
}

然后就可以打断点调试程序了：
在这里插入图片描述

打包应用

使用Electron最大的用处就是用来生成桌面端原生应用程序了，比如windows上的 .exe 程序。Electron打包成桌面端原生应用程序的方式很多，比如 electron-packager 、 electron-builder 等。目前来说官方推荐使用 Electron Forge 来打包，其官方页面如下：
https://www.electronforge.io/
https://github.com/electron-userland/electron-forge

Electron Forge使用时会用到 Git 功能，可以从 https://git-scm.com/ 下载安装，安装完成后设置下用户名和邮箱地址就可以了：
在这里插入图片描述

针对前面的项目可以使用下面步骤进行打包：

使用 npm install --save-dev @electron-forge/cli 安装相关工具：
在这里插入图片描述
然后在现有项目中应用electron-forge，对于npm6来说使用 npx electron-forge import ，对于npm7来说使用 npm exec --package=@electron-forge/cli -c "electron-forge import" ：

配置完成后就可以使用 npm run make 来打包生成桌面端原生应用程序了（这个过程稍微花点时间）：
在这里插入图片描述
上面演示中打包输出情况如下：
out\
├── make\squirrel.windows\x64\
└── test-win32-x64\

上面第一个目录下是安装包形式的程序，双击exe文件会将程序解压缩安装到 用户文件夹\AppData\Local\应用名称 中，以后就可以通过这里的exe来启动应用。

第二个目录下面内容整个就是个免安装的程序，可以直接双击其中的exe来运行程序，用起来这个更方便些。

不管是哪种方式都可以在应用程序目录中找到 resources\app ，这里面的内容就是应用程序的资源了，可以在这里直接修改网页内容，这样双击exe启动程序的时候窗口中的内容也会直接改变，不用每次都重新打包生成：
在这里插入图片描述
打包时可以通过 package.json > { } config > { } forge > { } packageConfig > icon 添加应用程序图标：

需要注意的是因为系统缓存等原因对于图标的修改可能并不会立刻奏效，可以尝试使用不同的查看方式或者清除系统缓存之后再试。
在这里插入图片描述
可以通过 package.json > { } config > { } forge > { } packageConfig > asar 把所有源码加密打包成一个文件：

窗口与菜单

通过上面的内容可以看到Electron最基本的功能就是把网页和浏览器整合变成一个原生的桌面应用。通常对于界面而言通常我们还会有设置界面大小、菜单等的需求，在Electron中对于界面本身可以通过创建界面所用的 BrowserWindow 模块功能来设置，对于菜单可以使用 Menu 模块来设置。

在这里插入图片描述

可以改写 main.js 代码做个测试：

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

function createWindow() {
    
    const mainWindow = new BrowserWindow({
    
        // fullscreen: true, // 设置全屏
        width: 600, // 窗口宽度，默认为800
        height: 400, // 窗口高度，默认为600
        resizable: false // 禁用窗口大小调整，默认为启用
    })

    mainWindow.loadFile('index.html')
    mainWindow.webContents.openDevTools()
}

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

    Menu.setApplicationMenu(null); // 禁用菜单

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

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

在这里插入图片描述

总结

Electron基础使用打包等非常简单，基本上了解上面的内容就可以把现有的前端项目打包成桌面端应用程序使用了。

本文链接：https://blog.csdn.net/Naisu_kun/article/details/120664068

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

光的波粒二象性-程序员宅基地

文章浏览阅读5.3k次。光的波粒二象性光的波动性笛卡儿提出的两点假说《折光学》中提出了两种假说。一种假说认为，光是类似于微粒的一种物质；另一种假说认为光是一种以“以太”为媒质的压力。虽然笛卡儿更强调媒介对光的影响和作用，但他的这两种假说已经为后来的微粒说和波动说的争论埋下了伏笔。格里马第发现了光的衍射现象首先发现了光的衍射现象。据此他推想光可能是与水波类似的一种流体。格里马第第一个提出了“光的衍射”这一概念，..._光的波粒二象性

BZOJ1189 HNOI2007 紧急疏散evacuate 网络流+BFS+二分法-程序员宅基地

文章浏览阅读79次。题意：一个N M的矩形区域。格子如果是'.'，那么表示这是一块空地；如果是'X'，那么表示这是一面墙，如果是'D'，那么表示这是一扇门，人们可以从这儿撤出房间。已知门一定在房间的边界上，并且边界上不会有空地。每块空地上都有一个人，在疏散的时候，每一秒钟每个人都可以向上下左右四个方向移动一格，当然他也可以站着不动。疏散开始后，每块空地上就没有人数限制。每一秒钟只能有一个人移动到门的位置，一...

linux 压缩和解压缩zip、unzip_unzip解压后删除-程序员宅基地

文章浏览阅读728次。zip基本用法zip [参数] [打包后的文件名] [打包的目录路径]常用参数:-a 将文件转成ASCII模式-F 尝试修复损坏的压缩文件-h 显示帮助界面-m 将文件压缩之后，删除源文件-n 特定字符串不压缩具有特定字尾字符串的文件-o 将压缩文件内的所有文件的最新变动时间设为压缩时候的时间-q 安静模式，在压缩的时候不显示指令的执行过程-r 将指定的目录下的所有子目录以及文件一起处理-S 包含系统文件和隐含文件（S是大写）unzip基本用法_unzip解压后删除

降低AI辅写率小技巧：让内容更具原创性和独特性的七大秘诀-程序员宅基地

文章浏览阅读629次，点赞9次，收藏12次。通过掌握和运用这些秘诀，我们可以让内容更具原创性和独特性，从而更好地展示我们的思想和观点。通过阅读、学习和实践，提高自己的写作技巧和表达能力，以更好地掌握降低AI辅写率的方法。此外，关注行业动态和最新技术进展，了解最新的降低AI辅写率技巧和策略，以保持自己在写作领域的领先地位。针对发现的问题，及时进行修改和调整，确保内容的原创性和独特性。在写作过程中，尝试融入自己的见解、观点和独特风格，使内容更具个性化和创新性。明确的目的和主题将确保你的内容始终围绕核心思想展开，减少不必要的偏离和重复。

C++如何选择类型_c++ 数据类型的选择原则-程序员宅基地

文章浏览阅读379次。和C语言一样，C++的设计准则之一也是尽可能地接近硬件。C++的算术类型必须满足各种硬件特质，所以它们常常显得繁杂而令人不知所措。事实上，大多数程序员能够(也应该)对数据类型的使用做出限定从而简化选择的过程。以下是选择类型的一些经验准则:●当明确知晓数值不可能为负时，选用无符号类型。●使用int执行整数运算。在实际应用中，short常常显得太小而long-般和int有一样的尺寸。如果你的数值超过了int的表示范围，选用long long。●在算术表达式中不要使用 char或bool，只有在._c++ 数据类型的选择原则

错误: 无效的源发行版:18 :亲测有效_java: 错误: 无效的源发行版:18-程序员宅基地

文章浏览阅读6.6k次，点赞3次，收藏18次。错误: 无效的源发行版:18 :亲测有效_java: 错误: 无效的源发行版:18

随便推点

restful api与传统api的区别(方式及语法)-程序员宅基地

文章浏览阅读3.1k次。示例：一个状态数据操作接口传统模式：api/getstate.aspx- 获取状态信息api/updatestate.aspx - 更新状态信息api/deletestate.aspx - 删除该状态的数据RESTful模式：api/state 只需要这一个接口GET 方式请求 api/state- 获取该状态的数据POST 方式请求 api/state- 更新该状态的数..._restful和传统的api接口区别

2023中职组网络建设与运维Linux部分题解方法及思路-Part1_23国赛网络搭键linux脚本编写-程序员宅基地

文章浏览阅读1.2k次，点赞3次，收藏10次。2023中职组网络建设与运维Linux部分题解方法及思路-Part1_23国赛网络搭键linux脚本编写

#UML# Astah+Doxygen 将C++源码映射为类图_如何将代码导入astah生成类图-程序员宅基地

文章浏览阅读3.5w次。工具准备Astah Astah plug-in Doxygen插件安装下载好的插件cplusreverse-1.1.0.jar拷贝到／Application／Astah／plugin中然后重启Astah，或者参考官方文档http://astah.net/features/cpp-reverse-pluginC++源码生成xml文件（Doxygen）使..._如何将代码导入astah生成类图

[802.11]IEEE 802.11的帧格式介绍_ieee80211数据帧格式 408-程序员宅基地

文章浏览阅读4.9w次，点赞33次，收藏211次。一、IEEE 802.11的帧格式1.1 IEEE 802.11是什么？ 802.11是国际电工电子工程学会（IEEE）为无线局域网络制定的标准。目前在802.11的基础上开发出了802.11a、802.11b、802.11g、802.11n、802.11ac。并且为了保证802.11更加安全的工作，开发出了802.1x、802.11i等协议1.2 IEEE 802.1..._ieee80211数据帧格式 408

纯前端实现—JQ轮播图（轮播图完全版）_jq轮播图全集网址-程序员宅基地

文章浏览阅读4w次，点赞16次，收藏47次。实现效果：前面有篇文讲解过鼠标轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121315021，还得鼠标点，有点麻烦，所以这篇给B格提升些！实现JQ轮播图（完全版~）！ JQ轮播图源码：<!DOCTYPE html><html lang="en"><head> <_jq轮播图全集网址

liunx环境安装elasticsearch-7.XX_avxf-程序员宅基地

文章浏览阅读353次。解压压缩包：tar -avxf elasticsearch-7.10.2-linux-aarch64.tar.gz修改config/elasticsearch.yml：vi config/elasticsearch.yml取消下列项注释并修改：cluster.name: my-application #集群名称node.name: node-1 #节点名称#数据和日志的存储目录path.data: /home/elasticsearch/datapath.logs: /home/ela_avxf