半個前端新手入門Electron的過程

王穀雨發表於2023-02-01
前端

前言

先說幾句廢話，本人是一名 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檔案

按照官方檔案學習，學習順序如下：

  1. 安裝 Electron

  2. Electron中的流程 部分

    瞭解 Electron 的流程模型（主程式和渲染器程式）、上下文隔離等。程式間通訊可以看完教程部分再回來細看。

    在渲染器程式中無法使用 Node.js 和 Electron 的 API 是很難受的一點，下文細說。

  3. 教程 部分

    只學習基本要求、建立您的第一個應用程式、使用預載入指令碼，其他的先略過

二階段

完成了一階段的學習，還是不知道如何打包一個桌面端程式。此時就輪到 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 都無法在渲染器程式中使用，只能繞個彎，由主程式提供方法，渲染器程式透過預載入指令碼的方式去呼叫。這就導致了一個問題，很多方法的實際執行都放在主程式中（渲染器程式只是呼叫），導致了主程式的卡頓，有沒有大佬有好的解決方案？

對我來說，這就是一個面向搜尋引擎程式設計的階段。遇到問題，我一般用以下步驟處理：

  1. 只看搜尋引擎第一頁，沒有就換種描述再搜，還沒有就跳轉步驟2
  2. 翻官方檔案，大部分問題在官方檔案中都能找到解決方案。這步需要點耐心，很多問題不是檔案沒寫，而是沒找對。
  3. 最後就是請教大神了

附上：提問的智慧

坑

記錄下新手容易遇到的坑

  1. 不要使用 window.alert 和 window.confirm 方法，會導致 input 框遊標消失

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

    解決方案是使用 Electron 的彈框 dialog.showMessageBoxSync()

  2. 有多個頁面時，使用預載入指令碼出錯，提示找不到對應的js檔案

    檔案：多視窗應用程式

  3. 靜態資源處理

  4. 不要阻塞主程式，耗時的任務開執行緒去做，否則會造成頁面卡頓

    檔案：Worker Threads

    注意在 Electron 中，web worker指令碼可以使用 node api，但是不支援 Electron API，也不允許使用其他依賴 Electron API 的庫，例如 electron-store

  5. 安裝引導

    預設配置打包出來的安裝包，執行就直接安裝在預設路徑了。可以去修改 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 並搗鼓出一個小工具的過程。

相關文章