Electron系列文章-什麼是Electron？
系列簡介：本系列文章首先圍繞Electron框架的關鍵知識點進行詳細講解，然後對DEMO程式進行分析，讓前端開發人員對使用Electron開發桌面應用程式有一個初步的瞭解。該系列文章更新週期為每週1~2篇。
Electron 是什麼
定義
Electron是一個能讓你使用傳統前端技術（Nodejs, Javascript, HTML, CSS）開發一個跨平臺桌面應用的框架。這裡所說的桌面應用指的是在Windows、OSX及Linux系統上執行的程式。
歷史
2013年的時候，Atom編輯器問世，作為實現它的底層框架Electron也逐漸被熟知，到2014年時被開源，那時它還是叫 Atom Shell 。
接下來的幾年，Electron在不斷的更新迭代，幾乎每年都有一個重大的里程碑
- 2013年4月11日，Electron以Atom Shell為名起步。
- 2014年5月6日，Atom以及Atom Shell以MIT許可證開源。
- 2015年4月17日，Atom Shell改名為Electron。
- 2016年5月11日，1.0版本釋出。
- 2016年5月20日，允許向Mac應用商店提交軟體包。
- 2016年8月2日，支援Windows商店。
在最新的穩定版本V3.x中，Electorn集成了Nodejs v10.2.0和核心為v66.0.3359.181的Chromium
基於Electron實現的軟體
Electron現已被多個開源應用軟體所使用，其中被廣大程式設計師所熟知和使用的Atom和VsCode編輯器就是基於Electron實現的。嘗試開啟VsCode，點選幫助選單中的 切換開發人員工具 ，可以在介面上看到我們熟悉的Chrome devtool，如下圖
底層實現
由於應用場景是在系統平臺上開發應用，所以我們開發時需要有能呼叫原生系統api的能力。為了能讓前端語言能跟底層可以互動，Electron集成了Nodejs+Chromium。Nodejs主要負責應用程式主執行緒邏輯控制、底層互動等功能，Chromium主要負責渲染執行緒視窗的業務邏輯。主要的架構如下圖：
這樣的架構讓單獨升級Chromium版本成為可能。假設你的程式當前使用的是Electron v3.x的版本，這個版本的Electron所帶的Chromium是66版本。這時如果你用的某些特性必須要使用Chromium 69版本，除了整體升級Electron到指定最新版本外，你還可以單獨的對Chromium版本進行升級，官方文件上提供了升級的方法。升級 Chromium
但是一般情況我們不建議這麼做，因為成功的升級需要你具備C和C++相關的知識，並且對Chromium的底層實現具有一定的瞭解。即使你成功升級了Chromium的版本，但是對於軟體整體的穩定性是無法保證的。
為什麼要用
以Windows平臺為例，大部分人會首先想到使用QT(C++)，WPF(C#) 等語言去開發應用。不可否認的是，這些已經是非常成熟的開發方案了。但是，我們來看下如下兩種場景：
- 公司要做個全新的APP，但是技術人員構成大部分都是前端開發
- 公司原本就有線上的web應用，但是想包個殼能在桌面直接開啟，同時增加一些與系統互動的功能
對於第一種場景，團隊中開發人員對於C++和C#並不熟悉，雖然可以現學，但是整個專案的技術管理和專案管理就會變得不可控。
對於第二種場景，對於應用的業務邏輯要求並不多，只是套一個具有瀏覽器的執行環境，單獨為此配置一個C++、C#開發人員划不來。
對於這兩種情況，如果現有的前端開發人員能直接搞定，那就非常完美了。
Electron的誕生提供了這種可能性。它可以幫助前端開發者在不需要學習其他語言和技能的前提下，快速開發跨平臺的桌面應用。
怎麼用
在後面的章節中，我們會根據主要的知識點並輔以實際案例來具體講解如何使用Electron進行開發。這裡我們只簡單的介紹下如何使用Electron寫一個經典的Hello World。
首先，新建一個目錄，初始化npm
mkdir helloword npm init 複製程式碼
修改package.json檔案，增加npm run start命令
{
"name": "electron demo",
"version": "1.0.0",
"description": "",
"main": "main.js",//修改為main.js
"scripts": {
"start": "electron ."//增加start命令
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^3.0.10"
}
}
複製程式碼
通過npm安裝Electron
npm i electron --save-dev 複製程式碼
在根目錄建立main.js和index.html
main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 建立瀏覽器視窗
win = new BrowserWindow({ width: 800, height: 600 })
// 然後載入應用的 index.html。
win.loadFile('index.html')
}
app.on('ready', createWindow)
複製程式碼
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> 複製程式碼
到這裡，我們所有的準備工作都完成了，接下來就是執行它！
npm run start 複製程式碼
看看效果
關於Electron的簡單介紹就到這裡為止，想必大家已經對Electron有了一些初步的認識，接下來的章節我們開始進入實戰。