2024Jun24 禹神：一小时快速上手Electron，前端Electron开发教程 by鱼钩星探

飞书用户2122

飞书用户4815

2024年7月4日修改

readme

Electron 初学者必看，如果时间紧，可以从 45 分开始，主进程和渲染进程之间，需要有预加载脚本进行通信​

视频 https://www.bilibili.com/video/BV1sE421N7M5/

视频提到的工具链接

Electron 官网 https://www.electronjs.org/zh/docs/latest/

打包工具 Electron-Fiddle https://www.electronjs.org/zh/fiddle

便于 vue、react 框架开发的 electron-vite https://cn.electron-vite.org/

正文

我们今天讲 electron 快速上手，目标不是写出来一个复杂的软件，是理解得到 electron 的工作流程、核心概念、三种核心的进程通信方式，熟悉 electron 的小伙伴呢，应该都知道其核心就是进程通信​

讲之前呢，先展示一个小软件，我的屏幕上有一个安装包，这是一个客户端，准确说是一个桌面应用，安装在电脑上能直接用的，而不是手机上的。比如电脑上可能安装过视频编辑软件、图像处理软件，界面上能看到的都属于桌面软件啊。当然啦对于微信来说也有手机版，但是我目前电脑上安装的，那肯定是桌面应用啊，就是电脑版。这个是干嘛的呢，放大一下，看这个名字，就能猜出来 video 是视频的意思，所以说我这个呢是用 electron 技术写的一个视频加工器​

能干什么呢？双击测试啊，一般软件安装的时候，都会让选择一个安装位置是吧，那这个呢是我临时选的这么一个位置，就是我直播之前呢，我测试了一下，我安装在这个位置了，它就识别出来了，它就记住了，它就一直往这安啊，那我单击安装，迅速就能安装完毕，会发现桌面创建了一个快捷方式​

这个工具能干什么？对一个视频进行变速、格式转换，我为什么要写这工具呢，是因为我自己面临着这个需求，有的时候呢给大家录一些教程，录完了之后觉得自己的语速慢了，调到1.5倍，市面上明明那么多的视频编辑软件，剪映、pr，用那些东西弄不就得了吗？不知道有没有了解新媒体方向的同学哈，其实用视频编辑软件，把一个视频调成1.5 倍速的声音是变音了的，声音呢是略发尖锐的，还得调很多参数，再把这个声音给调回来。正常的声音是这样的，视频一旦要是倍速了音调特别高，得通过调一些配置，再把这个音调调回来，比较麻烦。我写的这个，不会产生任何音调上的改变。所以说我自己面临这个需求，我就写了这么一个软件​

选择一个视频，桌面正好有一个视频，video 单击打开，这时候会把这个视频加载进来，并且预览，当然如果喜欢播放的话，播放，当然也可以全屏、退出。然后参数调节。由于时间关系我一两天写的没写的太复杂，这个呢就是调整倍速，这个呢就是调整格式，当然了，这个倍速可以调的更快，格式更多，只不过我没有写那么多。比如说呢我给它转成这个 MKV，倍速 2.4，哎大家注意看啊，我的原视频在桌面。生成的视频放在跟原视频的同一目录下，其实还可以更细节，选择输出位置，没有写那么多。接下来 2.5 倍速，不知道大家平时视频都选择的是几倍速啊，我在这呢就选择2.5了好了，单击执行，下边就会有一个进度条，关键来了。等着软件运行，等处理完了吧。哎说老师那没有个提示呢，有看这看这它是有一个提示的，看硅谷视频处理工具通知操作完成，注意这可不是网页的 alert，这是操作系统级别的通知​

那为啥刚才没出来呢？是我嫌这个通知烦，打开了专注模式，现在把专注模式取消掉，清除一下，重新再来一次，比如说这回调到最大，3 倍速啊，然后这回格式换了，变成 FLV，这时候接下来单击执行处理，重新跑处理流程。右下角出现系统级别的通知，当然我也没有做那么多的细节，细节如果做的足够多，这个名字也是可以改的，甚至还可以调用 windows 的高级通知。大家有没有见过出现的通知很大，大到什么程度呢，甚至都可以放一个图片。OK，在这就是简单跟大家说一下，软件就是拿electron写的，回头我把这个软件的安装包，就是这个桌面程序的源代码都给大家，可以在我的基础上呢去再完善，比如说加上录屏功能，再把视频编辑功能，截取几分到几秒这些功能都给它加上，那你会问，老师，今天是不是就带着我，就整个把这个视频编辑器都给他写完？不行，一次直播肯定是不行​

今天咱们先给大家讲一些 electron 的核心概念，带着先把这些进程通信跑通，做点小 demo，如果说大家对这东西特别感兴趣，后边也可以再加几场直播，带着大家写一个更加完善的视频处理工具，这就是整个介绍​

6分49 1.什么是 Electron

想必大家呢看到这句话，也应该能猜得到了——使用 HTML CSS JAVASCRIPT 来构建跨平台的桌面应用程序，用的还是熟悉的 web 技术来构建什么，看这词儿叫跨平台的，也就是说一套代码它可以生成 windows、Linux，macOS，三个平台的安装包，不用去对代码有过多的改动。当然了也不是一点不改，如果调用了很多高级的底层系统的 API，可能还是得修改一下代码，但是不会很复杂。唉注意这是桌面应用程序，就是安装在我们电脑上的那一种，缺点是安装包体积相对来说会有点大，为什么，一会我给解释好了​

首先我们进入第一个话题啊，什么是 electron，说这么几句话

第一句话，它是一款应用广泛的跨平台，桌面应用开发框架，哎我说了这么几个词叫跨平台，刚才也说了是吧，这不再赘述了啊，桌面应用大家也知道了，看我还用了一个词叫应用广泛，很多的软件其实都有 Electron 技术的参与，比如说我在这列举的这些​

common.docs_name - LarkCCM_Docs_Menu_Image

像我们每天都用的 vscode 写代码，还有 GITHUB官方出了一个桌面端的 git 管理工具叫 github desktop，反正我个人觉得不是特别好用，还有 one password 密码管理器，有浏览器端的插件，也有安装在电脑上的应用程序，最新版的腾讯QQ，像什么网易云呐，还有很多很多啊都是用 electron 写的，这才叫应用广泛，OK 这是第一句话​

第二句话，electron的本质呢，其实结合了 Chromium、Node.js，可能有一些同学不知道，Chrome 这个成型的浏览器，是基于 Chromium 开发的​

如果说，老师我不想用成型的 chrome，就想用核心的 chromium，哎，那我告诉啊，能丢失抛弃——最大化、最小化、关闭这些窗口，没有浏览器炫酷的小标签、右键菜单了。所以 chromium 是一个核心，然后在此基础上，加上炫酷的菜单，加上小按钮、插件、利于使用的小功能，摇身一变就成了 chrome​

但是其实我个人觉得呢，如果这样去描述 electron，也略微的有一些不准确，哎就说什么呢，这个 electron 确实是等于 chromium 加上 node.js，也就是说我们可以用前端人员特别熟悉的代码，写完交给谁呢，chrome运行，那 chrome 就能给一个页面，那当说哎我要调一些底层的 API，比如说我就想在D盘创建一个文件，那怎么办呀，就得借助 node.js 了，确实好像表面上看来就是他们两个，但实际上应该再加一个叫 Native API（原生 API）​

这三个加一起，才能整个组成 electron 哎，简单来说就是当写一个功能的时候，页面都是谁呀，页面都交给 Chromium，那对于接下来的那些后台的操作交给 node.js，那再比如说现在我就要修改 windows 操作系统里边，某一个注册表里的项，那怎么办呀，那得借助这些 native API​

相信前两个大家应该都是OK的，要是不 OK 也来不到咱们今天的直播间。其实学习 electron 呢，就是学习 electron 给我们提供的这些原生的 API，比如说我想唤起一个系统级别的对话框，我怎么去唤醒啊，那其实都是这些东西，好这第二句话呢，说完了​

我们再说第三句话，就是使用 web技术，来构建桌面应用，但我想说的是不一定非得写最为纯粹的 HTML CSS JS，问大家，如果用了 view 框架，可不可以写 .view 文件？玩的是 react，可不可以写 .tsx 呢，也都是可以的。必须写 CSS 吗，我 less sars 是不是都可以啊，必须是 js 吗？ts 是不是也行啊。只要最终这些东西能够转成 HTML CSS JS 就可以，所以这就是 ELECTRON​

11分58 2.Electron流程模型

说完了之后，聊一个特别特别重要的——流程模型，本来我是不打算在这讲的，感觉给大家想讲一个东西，说半天也不写代码，然后就在这放 PPT，好像感觉挺不好的，但实际上各位想写代码，前提是脑子里得有这个流程模型​

这个 electron 应用啊核心就是围绕着主进程 main，像这个 java 里边的一些 main 方法。主进程是一个啥东西？别把它想的太高端，这个破玩意就是一个 .js 文件，但我想告诉的是，这是一个特别纯粹的 node 环境，就是node相关的任何的 API，它都可以肆无忌惮地调用，基于 node 环境去运行的这个主进程。我考一下大家，那说这里边能不能用 _dirname 关键词？可以。能不能引入 FS 模块进行文件操作？可以​

能不能调 alert 方法？不能。因为 node 里边没有 alert。能不能访问 window？不能，因为 node 环境对吧，不再赘述了，一说 node 环境，大家伙都门儿清。那主进程 main 干嘛呀，难道就一个主进程 + 一堆 node 的 API 就给提供了？那要这样的话，它和 node 不就没区别了吗？官网上的话，主进程它最主要的目的就是管理渲染进程，来给大家放图，走渲染进程，说大白话——窗口，安装游戏、VSCode、网易云音乐，那玩意打开之后，是不是得有窗口​

2024Jun24 禹神：一小时快速上手Electron，前端Electron开发教程 by鱼钩星探​

2024Jun24 禹神：一小时快速上手Electron，前端Electron开发教程 by鱼钩星探