Electron入门 01：快速入门
文章目錄
- 目的
- 基礎介紹
- 開發環境準備
- 快速入門
- 創建應用
- 調試應用
- 打包應用
- 窗口與菜單
- 總結
目的
自從HTML5、CSS3、ES6這些標準加入后，前端做不管是做界面還是做功能都越來越強大、越來越方便了。通常來說前端應用只能運行在瀏覽器中，無法當作獨立的桌面或移動端應用使用，不過因為前端開發方便、開發人員多，現在已經有了很多可以將前端應用變為桌面或移動端應用的方法了，Electron就是其中一種方案。這篇文章將對Electron的入門使用做個說明。
Electron官方網站： https://www.electronjs.org/
基礎介紹
Electron可以把前端項目打包成為桌面（Windows、macOS、Linxu）應用，比如Windows上 .exe 格式的程序。
Electron的實現思路很簡單，既然網頁可以在瀏覽器中運行，而瀏覽器是個原生的應用程序，那只要把瀏覽器和網頁打包在一起，前端應用就也可以成為原生應用了。Electron使用了谷歌的Chromium瀏覽器，打包后的前端應用其實就是運行在Chromium上而已。
Electron這種方式帶來一個好處，因為Chromium是個原生應用，它可以和操作系統進行交互，調用操作系統的資源，所以Electron中的前端應用也就變相的可以進行這些操作了，比如讀寫文件、操作網絡、使用TCP/UDP等等功能。
Electron這種方式還有一個隱藏的好處，因為瀏覽器是確定的，開發前端應用的時候就不容考慮兼容性問題了。
Electron也有缺點，那就是打包出來的應用容量大，100MB起步，畢竟打包了個瀏覽器。還有就是性能差，瀏覽器上開網頁性能也就這樣了。
Electron使用非常簡單，官方文檔寫的也很詳細，并且提供了中文版本的：https://www.electronjs.org/zh/docs/latest/
這里寫 Electron入門 文章主要依照官方文檔做個記錄，并在此基礎上對一些內容做個補充。
開發環境準備
Electron項目是基于Node.js的，所以需要安裝Node.js環境并了解一些Node.js使用知識，可以參考下面文章：
《Node.js入門 01：基礎使用與說明》https://blog.csdn.net/Naisu_kun/article/details/120665042
《Node.js入門 02：包管理器npm》https://blog.csdn.net/Naisu_kun/article/details/120663782
《Node.js入門 03：模塊化規范 CommonJS 與 ES Module》https://blog.csdn.net/Naisu_kun/article/details/120663822
另外編寫調試程序什么的最好有個趁手的編輯器，比如 Visual Studio Code ，順帶一提這個軟件就是用Electron開發的。
Electron的開發和版本有挺大的關聯，不同版本下很多內容可能有較大差異，本文編寫時使用的Electron版本為：15.3.0
對于大陸用戶來說基于Node.js的各類項目最容易碰到的問題可能是使用npm下載模塊時遇到的網絡問題，可以參考上面講npm的文章中換源相關內容。簡單點的比如使用nrm工具來換源：
或者也可以對Electron單獨設置淘寶源：
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
當然上面方式也不一定能解決所有問題，有些時候還是需要具體問題具體分析。大多數會遇到的問題都是模塊下載失敗，或者未下載完整造成的，可以通過刪除緩存重新下載或是對有問題的模塊強制重新下載等方式來嘗試解決。
另外在Electron使用過程中會用到很多第三方的模塊，有些模塊需要編譯后才能運行，編譯大多數時候是自動的，但是需要一些工具環境，這方面內容也可以參考上面講npm的文章中模塊編譯相關內容。
快速入門
創建應用
首先創建一個項目文件夾，在文件夾中使用 npm init -y 命令生成項目配置文件 package.json ：
package.json 文件中有幾個比較重要的字段，相關說明如下：
- name 項目名稱，必須項；
- version 項目版本號，必須項；
- description 項目描述，應用打包必須項；
- main 項目入口文件，必須項（這個在Electron官方的文檔中名稱為 main.js ，下面演示中也將手動改成 main.js ）；
- author 作者，應用打包必須項；
接下來使用 npm install --save-dev electron 命令安裝electron，安裝完成后可以在 package.json 文件的 scripts 字段中添加 "start": "electron ." ，這樣就可以在終端中使用 npm start 來啟動程序了，當然現在直接啟動會報錯，因為還未添加項目中的各種程序文件：
接下來添加上面提到的程序入口文件，這里使用名稱為 main.js ，內容如下：
// 控制應用生命周期和創建原生瀏覽器窗口的模塊 const { app, BrowserWindow } = require('electron') const path = require('path')function createWindow() {const mainWindow = new BrowserWindow() // 創建瀏覽器窗口mainWindow.loadFile('index.html') // 加載 index.html }// 應用程序準備就緒時觸發 app.whenReady().then(() => {createWindow() // 創建窗口// macOS 上需要的特殊處理，以正確打開窗口app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()}) })// 所有窗口關閉時觸發 app.on('window-all-closed', function () {// 除 macOS（darwin）外，關閉所有窗口時通常意味著退出應用程序if (process.platform !== 'darwin') app.quit() })// 可以在這個文件中包含應用程序剩余的所有代碼，也可以拆分成幾個文件然后用 require 導入上面代碼中可以看到應用程序準備就緒后會創建窗口并加載網頁文件 index.html ，所以我們還需要準備一個這個文件，這里先準備下面內容：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>test</title> </head> <body><h1 id="txt">Hello World!</h1> </body> </html>這樣就可以進行基本的測試了：
上面就是最基礎的演示了，如果做過前端開發就可以看到這其實就是個瀏覽器加載了個網頁而已，開發工具就是Chromium瀏覽器的開發工具。
調試應用
開發過程中非常依賴調試來處理各種問題，對于Electron項目而言主要需要調試的分為兩個部分：創建、管理窗口的 主進程 （比如上面的main.js）；窗口本身內容與腳本等的 渲染進程 （比如上面的index.html）。
渲染進程的調試很方便，像前面演示中直接打開 Chromium瀏覽器的開發工具 即可，也可以在使用代碼打開，比如在創建窗口的同時用 mainWindow.webContents.openDevTools() 打開。
主進程的調試一般可以通過使用 console.log() 方法向終端輸出信息的方式進行。在VScode中也可以通過下面設置后調試：
在項目目錄下創建 .vscode 文件夾，在此文件夾中創建 launch.json 文件，文件內容如下：
{"version": "0.2.0","configurations": [{"name": "Debug Main Process","type": "node","request": "launch","cwd": "${workspaceFolder}","runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron","windows": {"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"},"args" : ["."]}] }然后就可以打斷點調試程序了：
打包應用
使用Electron最大的用處就是用來生成桌面端原生應用程序了，比如windows上的 .exe 程序。Electron打包成桌面端原生應用程序的方式很多，比如 electron-packager 、 electron-builder 等。目前來說官方推薦使用 Electron Forge 來打包，其官方頁面如下：
https://www.electronforge.io/
https://github.com/electron-userland/electron-forge
Electron Forge使用時會用到 Git 功能，可以從 https://git-scm.com/ 下載安裝，安裝完成后設置下用戶名和郵箱地址就可以了：
針對前面的項目可以使用下面步驟進行打包：
使用 npm install --save-dev @electron-forge/cli 安裝相關工具：
然后在現有項目中應用electron-forge，對于npm6來說使用 npx electron-forge import ，對于npm7來說使用 npm exec --package=@electron-forge/cli -c "electron-forge import" ：
配置完成后就可以使用 npm run make 來打包生成桌面端原生應用程序了（這個過程稍微花點時間）：
上面演示中打包輸出情況如下：
out\
├── make\squirrel.windows\x64\
└── test-win32-x64\
上面第一個目錄下是安裝包形式的程序，雙擊exe文件會將程序解壓縮安裝到 用戶文件夾\AppData\Local\應用名稱 中，以后就可以通過這里的exe來啟動應用。
第二個目錄下面內容整個就是個免安裝的程序，可以直接雙擊其中的exe來運行程序，用起來這個更方便些。
不管是哪種方式都可以在應用程序目錄中找到 resources\app ，這里面的內容就是應用程序的資源了，可以在這里直接修改網頁內容，這樣雙擊exe啟動程序的時候窗口中的內容也會直接改變，不用每次都重新打包生成：
打包時可以通過 package.json > { } config > { } forge > { } packageConfig > icon 添加應用程序圖標：
需要注意的是因為系統緩存等原因對于圖標的修改可能并不會立刻奏效，可以嘗試使用不同的查看方式或者清除系統緩存之后再試。
可以通過 package.json > { } config > { } forge > { } packageConfig > asar 把所有源碼加密打包成一個文件：
更多參數可以參考下面鏈接
https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html
窗口與菜單
通過上面的內容可以看到Electron最基本的功能就是把網頁和瀏覽器整合變成一個原生的桌面應用。通常對于界面而言通常我們還會有設置界面大小、菜單等的需求，在Electron中對于界面本身可以通過創建界面所用的 BrowserWindow 模塊功能來設置，對于菜單可以使用 Menu 模塊來設置。
可以改寫 main.js 代碼做個測試：
const { app, BrowserWindow, Menu } = require('electron') const path = require('path')function createWindow() {const mainWindow = new BrowserWindow({// fullscreen: true, // 設置全屏width: 600, // 窗口寬度，默認為800height: 400, // 窗口高度，默認為600resizable: false // 禁用窗口大小調整，默認為啟用})mainWindow.loadFile('index.html')mainWindow.webContents.openDevTools() }app.whenReady().then(() => {Menu.setApplicationMenu(null); // 禁用菜單createWindow()app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()}) })app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit() })總結
Electron基礎使用打包等非常簡單，基本上了解上面的內容就可以把現有的前端項目打包成桌面端應用程序使用了。
總結
以上是生活随笔為你收集整理的Electron入门 01：快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。
