前言 先說幾句廢話，本人是一名 web 後端開發，主語言是 java，在學 Electron 之前，只會一點點 HTML和 JavaScript。本文講的也是我學習 Electron 的過程，而非教程，請酌情參考。 Electron是什麼 Electron是一個使用 JavaScript、HTML ...
前言
先說幾句廢話，本人是一名 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 的流程模型（主進程和渲染器進程）、上下文隔離等。進程間通信可以看完教程部分再回來細看。
在渲染器進程中無法使用 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文件
文檔：多視窗應用程式
-
不要阻塞主進程，耗時的任務開線程去做，否則會造成頁面卡頓
註意在 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 並搗鼓出一個小工具的過程。
