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

来源:https://www.cnblogs.com/konghuanxi/archive/2023/02/01/17081776.html
-Advertisement-
Play Games

前言 先說幾句廢話,本人是一名 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文檔

按照官方文檔學習,學習順序如下:

  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 並搗鼓出一個小工具的過程。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 疑惑 最近在反覆搭建ceph集群過程中,總是遇到osd創建不成功的問題,疑似硬碟殘留信息,排查中引出了很多陌生的命令,比如vgremove等,於是打算重新瞭解這部分。 LVM是什麼? 邏輯捲管理器(LVM,Logical Volume Manager)是一種把硬碟空間分配成邏輯捲的方法。 看到定義可 ...
  • Windows server 2016 搭建DNS伺服器 環境說明: 1、Windows server 2016標準版 實操步驟: 1、添加DNS伺服器功能 1.1、點擊win圖標打開菜單,點擊打開伺服器管理器。 1.2、點擊“ 管理 ”,點擊“ 添加角色和功能 ” 下一步 基於角色或功能的安裝,下 ...
  • Taier 介紹 Taier 是袋鼠雲開源項目之一,是一個分散式可視化的DAG任務調度系統。 旨在降低ETL開發成本、提高大數據平臺穩定性,大數據開發人員可以在 Taier 直接進行業務邏輯的開發,而不用關心任務錯綜複雜的依賴關係與底層的大數據平臺的架構實現,將工作的重心更多地聚焦在業務之中。 項目 ...
  • 0.前言 MySQL由於開源的原因,有各式各樣的中件間Proxy ,極大的豐富了做高可用或遷移的方案,習慣了MySQL生態圈的靈活和便利,Oracle官方不開源代碼和協議,沒有中間件proxy,顯得很笨重。 比如以下的方案就會很不好辦: 實時抓取Oralce的訪問SQL日誌 慢日誌捕獲和收集 高可用 ...
  • 有相當一部分 iPhone 用戶會拒絕iOS更新最新系統,不管是因為各種BUG還是因為其他優化方面的問題,他們都會選擇一個自己覺得均衡的系統版本,安逸養老。 但是蘋果 iOS 系統如果你不及時更新推送版本的話,就會在手機桌面「設置」上方出現角標數字紅點,系統設置中也會出現紅點提示。強迫症患者表示簡直 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 可視化大屏該如何做?有可能一天完成嗎?廢話不多說,直接看效果,線上 Demo 地址 lxfu1.github.io/large-scree…。 看完這篇文章(這個項目),你將收穫: 全局狀態真的很簡單,你只需 5 分鐘就能上手 如何 ...
  • 1.CSS、SCSS、SASS CSS是開發人員熟知的一種用於頁面樣式開發的語言,可以通過內容的分離控制減少代碼的重覆性,降低代碼的複雜程度。 SASS 與 SCSS 都是 CSS 預處理器,可包含在基於 CSS 的 UI(用戶界面)或前端框架中以簡化開發。這些 SASS 與 SCSS 框架在高級別 ...
  • 鑒於阮一峰老師的技術文章,在此做一個轉載記錄。轉戰react技術一年,希望在技術上可以不斷精進,日後成為一位大牛! 引子:《準備工作》 知識準備 環境準備 第一講:《前端開發的歷史和趨勢》 前端開發的歷史演變 前端MVC框架的興起 前後端分離 全棧工程師 前端開發的未來 第二講:《React 技術棧 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...