半个前端新手入门Electron的过程

庸政亾朝

前言

先说几句废话，本人是一名 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 模板。

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

复制代码

运行

按照提示，使用命令行进入到项目中，执行npm install安装依赖，然后执行npm run dev即可进行调试。
模板也集成了 VsCode 调试，在安装完依赖之后，用 VsCode 打开项目，按 F5 也可进行调试。
默认情况下，构建输出将放置在 my-app/out 文件夹中，
打包

1. 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配置
  1. # electron-builder.yml 文件
  2. nsis:
  3.   oneClick: false # 创建一键安装程序还是辅助安装程序（默认是一键安装）
  4.   allowElevation: true # 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
  5.   allowToChangeInstallationDirectory: true # 是否允许修改安装目录 （仅作用于辅助安装程序）
  6.   createStartMenuShortcut: true # 是否创建开始菜单快捷方式
  7.   artifactName: ${name}-${version}-setup.${ext}
  8.   shortcutName: ${productName}
  9.   uninstallDisplayName: ${productName}
  10.   createDesktopShortcut: always

  复制代码
  文档：electron-builder#nsis
  

总结

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

来源:https://www.cnblogs.com/konghuanxi/p/17081776.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！