Electron 是什么
定義
Electron是一個(gè)能讓你使用傳統(tǒng)前端技術(shù)（Nodejs, Javascript, HTML, CSS）開發(fā)一個(gè)跨平臺(tái)桌面應(yīng)用的框架。這里所說的桌面應(yīng)用指的是在Windows、OSX及Linux系統(tǒng)上運(yùn)行的程序。
歷史
2013年的時(shí)候，Atom編輯器問世，作為實(shí)現(xiàn)它的底層框架Electron也逐漸被熟知，到2014年時(shí)被開源，那時(shí)它還是叫Atom Shell。
接下來的幾年，Electron在不斷的更新迭代，幾乎每年都有一個(gè)重大的里程碑
在最新的穩(wěn)定版本V3.x中，Electorn集成了Nodejs v10.2.0和內(nèi)核為v66.0.3359.181的Chromium
基于Electron實(shí)現(xiàn)的軟件
Electron現(xiàn)已被多個(gè)開源應(yīng)用軟件所使用，其中被廣大程序員所熟知和使用的Atom和VsCode編輯器就是基于Electron實(shí)現(xiàn)的。嘗試打開VsCode，點(diǎn)擊幫助菜單中的切換開發(fā)人員工具，可以在界面上看到我們熟悉的Chrome devtool，如下圖
底層實(shí)現(xiàn)
由于應(yīng)用場(chǎng)景是在系統(tǒng)平臺(tái)上開發(fā)應(yīng)用，所以我們開發(fā)時(shí)需要有能調(diào)用原生系統(tǒng)api的能力。為了能讓前端語言能跟底層可以交互，Electron集成了Nodejs+Chromium。Nodejs主要負(fù)責(zé)應(yīng)用程序主線程邏輯控制、底層交互等功能，Chromium主要負(fù)責(zé)渲染線程窗口的業(yè)務(wù)邏輯。主要的架構(gòu)如下圖：
這樣的架構(gòu)讓單獨(dú)升級(jí)Chromium版本成為可能。假設(shè)你的程序當(dāng)前使用的是Electron v3.x的版本，這個(gè)版本的Electron所帶的Chromium是66版本。這時(shí)如果你用的某些特性必須要使用Chromium 69版本，除了整體升級(jí)Electron到指定最新版本外，你還可以單獨(dú)的對(duì)Chromium版本進(jìn)行升級(jí)。
但是一般情況我們不建議這么做，因?yàn)槌晒Φ纳?jí)需要你具備C和C++相關(guān)的知識(shí)，并且對(duì)Chromium的底層實(shí)現(xiàn)具有一定的了解。即使你成功升級(jí)了Chromium的版本，但是對(duì)于軟件整體的穩(wěn)定性是無法保證的。
為什么要用
以Windows平臺(tái)為例，大部分人會(huì)首先想到使用QT(C++)，WPF(C#) 等語言去開發(fā)應(yīng)用。不可否認(rèn)的是，這些已經(jīng)是非常成熟的開發(fā)方案了。但是，我們來看下如下兩種場(chǎng)景：
對(duì)于第一種場(chǎng)景，團(tuán)隊(duì)中開發(fā)人員對(duì)于C++和C#并不熟悉，雖然可以現(xiàn)學(xué)，但是整個(gè)項(xiàng)目的技術(shù)管理和項(xiàng)目管理就會(huì)變得不可控。
對(duì)于第二種場(chǎng)景，對(duì)于應(yīng)用的業(yè)務(wù)邏輯要求并不多，只是套一個(gè)具有瀏覽器的運(yùn)行環(huán)境，單獨(dú)為此配置一個(gè)C++、C#開發(fā)人員劃不來。
對(duì)于這兩種情況，如果現(xiàn)有的前端開發(fā)人員能直接搞定，那就非常完美了。
Electron的誕生提供了這種可能性。它可以幫助前端開發(fā)者在不需要學(xué)習(xí)其他語言和技能的前提下，快速開發(fā)跨平臺(tái)的桌面應(yīng)用。
怎么用
在后面的章節(jié)中，我們會(huì)根據(jù)主要的知識(shí)點(diǎn)并輔以實(shí)際案例來具體講解如何使用Electron進(jìn)行開發(fā)。這里我們只簡(jiǎn)單的介紹下如何使用Electron寫一個(gè)經(jīng)典的Hello World。
首先，新建一個(gè)目錄，初始化npm
mkdir hellowordnpm 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
在根目錄創(chuàng)建main.js和index.html
main.js
const { app, BrowserWindow } = require('electron')function createWindow () { // 創(chuàng)建瀏覽器窗口win = new BrowserWindow({ width: 800, height: 600 })// 然后加載應(yīng)用的 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>
到這里，我們所有的準(zhǔn)備工作都完成了，接下來就是運(yùn)行它！
npm run start
看看效果
關(guān)于Electron的簡(jiǎn)單介紹就到這里為止，想必大家已經(jīng)對(duì)Electron有了一些初步的認(rèn)識(shí)。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
