前言

先说几句废话  
  
  
  
  
  
  
 ，本人是一名 web 后端开发 
  
  
  
  
  
  
  ，主语言是 java


 


 


 


 


 


 


 

，在学 Electron 之前 
 
 
 
 
 
 
，只会一点点 HTML和 JavaScript  
  
  
  
  
  
  
 。本文讲的也是我学习 Electron 的过程  
   
   
   
   
   
   
   ，而非教程

 

 

 

 

 

 

 
，请酌情参考 
  
  
  
  
  
  
  。

Electron是什么

Electron是一个使用 JavaScript               、HTML 和 CSS 构建桌面应用程序的框架


 


 


 


 


 


 


 

。 嵌入Chromiu 和Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验 
 
 
 
 
 
 
。

前置准备

下面列举一下学 electron 之前需要掌握哪些技能：

独立开发一个页面的能力

HTML+ JS + CSS
 

 

 

 

 

 

 

，这是必备技能

Node.js

建议掌握  
   
   
   
   
   
   
   。需要会安装 node 环境               ，剩下的 API 可以边用边学

因为 js 是弱类型语言
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，在缺少注释和约束的情况下














，写时一时爽                      ，维护

 

 

 

 

 

 

 
。
 

 

 

 

 

 

 

。               。

而 TypeScript 的显式类型使代码可读性更高
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，更符合我使用 Java 时的习惯





















，所以又去学了 TypeScript
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。下面的讲解都基于 Electron + TypeScript               ，而非 Electron + JS
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，这个需要区分下














。

开始学习

一阶段

Electron文档

按照官方文档学习














，学习顺序如下：

安装 Electron

Electron中的流程 部分

了解 Electron 的流程模型（主进程和渲染器进程） 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、上下文隔离等                      。进程间通信可以看完教程部分再回来细看
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。

在渲染器进程中无法使用 Node.js 和 Electron 的 API 是很难受的一点  
  
  
  
  
  
  
 ，下文细说





















。

教程 部分

只学习基本要求













、创建您的第一个应用程序
  
  
  
  
  
  
  
 、使用预加载脚本 
  
  
  
  
  
  
  ，其他的先略过

二阶段

完成了一阶段的学习


 


 


 


 


 


 


 

，还是不知道如何打包一个桌面端程序               。此时就轮到 electron-vite 登场了
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。

electron-vite 是一个新型构建工具 
 
 
 
 
 
 
，旨在为Electron ****提供更快 
  
  
  
  
  
  
 、更精简的开发体验














。

创建基础工程

electron-vite 提供了多种模板  
   
   
   
   
   
   
   ，因为我使用 TypeScript 开发

 

 

 

 

 

 

 
，也不打算引入 vue 等框架
 

 

 

 

 

 

 

，所以使用的是 vanilla-ts 模板  
  
  
  
  
  
  
 。

npm create @quick-start/electron my-app √ Select a framework: » vanilla √ Add TypeScript? ... Yes √ Add Electron updater plugin? ... No √ Enable Electron download mirror proxy? ... No

运行

按照提示               ，使用命令行进入到项目中
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，执行npm install安装依赖














，然后执行npm run dev即可进行调试 
  
  
  
  
  
  
  。

模板也集成了 VsCode 调试                      ，在安装完依赖之后
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，用 VsCode 打开项目





















，按 F5 也可进行调试


 


 


 


 


 


 


 

。

默认情况下               ，构建输出将放置在 my-app/out 文件夹中
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，

打包

npm run build:win

window 系统的打包一行命令搞定














，生成的 exe 安装包在 my-app/dist 文件夹中

三阶段

在掌握了基础的 Electron API 和能将程序打包之后  
  
  
  
  
  
  
 ，就可以开始开发自己的程序了 
 
 
 
 
 
 
。

由于 Electron 的上下文隔离 
  
  
  
  
  
  
  ，Electron API 和 Node API 都无法在渲染器进程中使用


 


 


 


 


 


 


 

，只能绕个弯 
 
 
 
 
 
 
，由主进程提供方法  
   
   
   
   
   
   
   ，渲染器进程通过预加载脚本的方式去调用  
   
   
   
   
   
   
   。这就导致了一个问题

 

 

 

 

 

 

 
，很多方法的实际执行都放在主进程中（渲染器进程只是调用）
 

 

 

 

 

 

 

，导致了主进程的卡顿               ，有没有大佬有好的解决方案？

对我来说
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，这就是一个面向搜索引擎编程的阶段

 

 

 

 

 

 

 
。遇到问题














，我一般用以下步骤处理：

只看搜索引擎第一页                      ，没有就换种描述再搜
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，还没有就跳转步骤2 翻官方文档





















，大部分问题在官方文档中都能找到解决方案
 

 

 

 

 

 

 

。这步需要点耐心               ，很多问题不是文档没写
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，而是没找对               。 最后就是请教大神了

附上：提问的智慧

坑

记录下新手容易遇到的坑

不要使用 window.alert 和 window.confirm 方法














，会导致 input 框光标消失

https://github.com/electron/electron/issues/20400

解决方案是使用 Electron 的弹框 dialog.showMessageBoxSync()

有多个页面时  
  
  
  
  
  
  
 ，使用预加载脚本出错 
  
  
  
  
  
  
  ，提示找不到对应的js文件

文档：多窗口应用程序

静态资源处理

不要阻塞主进程


 


 


 


 


 


 


 

，耗时的任务开线程去做 
 
 
 
 
 
 
，否则会造成页面卡顿

文档：Worker Threads

注意在 Electron 中  
   
   
   
   
   
   
   ，web worker脚本可以使用 node api

 

 

 

 

 

 

 
，但是不支持 Electron API
 

 

 

 

 

 

 

，也不允许使用其他依赖 Electron API 的库               ，例如 electron-store

安装引导

默认配置打包出来的安装包
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，运行就直接安装在默认路径了
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。可以去修改 electron-builder 中的 nsis配置

# electron-builder.yml 文件 nsis: oneClick: false # 创建一键安装程序还是辅助安装程序（默认是一键安装） allowElevation: true # 是否允许请求提升














，如果为false                      ，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序） allowToChangeInstallationDirectory: true # 是否允许修改安装目录 （仅作用于辅助安装程序） createStartMenuShortcut: true # 是否创建开始菜单快捷方式 artifactName: ${name}-${version}-setup.${ext} shortcutName: ${productName} uninstallDisplayName: ${productName} createDesktopShortcut: always

文档：electron-builder#nsis

总结

本文描述了笔者学习 Electron 并捣鼓出一个小工具的过程














。