前端Electron新手入門教程詳解
Electron 是什么
定義
Electron是一個能讓你使用傳統(tǒng)前端技術(shù)（Nodejs, Javascript, HTML, CSS）開發(fā)一個跨平臺桌面應(yīng)用的框架。這里所說的桌面應(yīng)用指的是在Windows、OSX及Linux系統(tǒng)上運行的程序。
歷史
2013年的時候，Atom編輯器問世，作為實現(xiàn)它的底層框架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版本發(fā)布。
- 2016年5月20日，允許向Mac應(yīng)用商店提交軟件包。
- 2016年8月2日，支持Windows商店。
在最新的穩(wěn)定版本V3.x中，Electorn集成了Nodejs v10.2.0和內(nèi)核為v66.0.3359.181的Chromium
基于Electron實現(xiàn)的軟件
Electron現(xiàn)已被多個開源應(yīng)用軟件所使用，其中被廣大程序員所熟知和使用的Atom和VsCode編輯器就是基于Electron實現(xiàn)的。嘗試打開VsCode，點擊幫助菜單中的切換開發(fā)人員工具，可以在界面上看到我們熟悉的Chrome devtool，如下圖
底層實現(xiàn)
由于應(yīng)用場景是在系統(tǒng)平臺上開發(fā)應(yīng)用，所以我們開發(fā)時需要有能調(diào)用原生系統(tǒng)api的能力。為了能讓前端語言能跟底層可以交互，Electron集成了Nodejs+Chromium。Nodejs主要負責應(yīng)用程序主線程邏輯控制、底層交互等功能，Chromium主要負責渲染線程窗口的業(yè)務(wù)邏輯。主要的架構(gòu)如下圖：
這樣的架構(gòu)讓單獨升級Chromium版本成為可能。假設(shè)你的程序當前使用的是Electron v3.x的版本，這個版本的Electron所帶的Chromium是66版本。這時如果你用的某些特性必須要使用Chromium 69版本，除了整體升級Electron到指定最新版本外，你還可以單獨的對Chromium版本進行升級。
但是一般情況我們不建議這么做，因為成功的升級需要你具備C和C++相關(guān)的知識，并且對Chromium的底層實現(xiàn)具有一定的了解。即使你成功升級了Chromium的版本，但是對于軟件整體的穩(wěn)定性是無法保證的。
為什么要用
以Windows平臺為例，大部分人會首先想到使用QT(C++)，WPF(C#) 等語言去開發(fā)應(yīng)用。不可否認的是，這些已經(jīng)是非常成熟的開發(fā)方案了。但是，我們來看下如下兩種場景：
- 公司要做個全新的APP，但是技術(shù)人員構(gòu)成大部分都是前端開發(fā)
- 公司原本就有在線的web應(yīng)用，但是想包個殼能在桌面直接打開，同時增加一些與系統(tǒng)交互的功能
對于第一種場景，團隊中開發(fā)人員對于C++和C#并不熟悉，雖然可以現(xiàn)學，但是整個項目的技術(shù)管理和項目管理就會變得不可控。
對于第二種場景，對于應(yīng)用的業(yè)務(wù)邏輯要求并不多，只是套一個具有瀏覽器的運行環(huán)境，單獨為此配置一個C++、C#開發(fā)人員劃不來。
對于這兩種情況，如果現(xiàn)有的前端開發(fā)人員能直接搞定，那就非常完美了。
Electron的誕生提供了這種可能性。它可以幫助前端開發(fā)者在不需要學習其他語言和技能的前提下，快速開發(fā)跨平臺的桌面應(yīng)用。
怎么用
在后面的章節(jié)中，我們會根據(jù)主要的知識點并輔以實際案例來具體講解如何使用Electron進行開發(fā)。這里我們只簡單的介紹下如何使用Electron寫一個經(jīng)典的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
在根目錄創(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>
到這里，我們所有的準備工作都完成了，接下來就是運行它！
npm run start
看看效果
關(guān)于Electron的簡單介紹就到這里為止，想必大家已經(jīng)對Electron有了一些初步的認識。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解nodejs實現(xiàn)本地上傳圖片并預(yù)覽功能（express4.0+）
本篇文章主要介紹了nodejs實現(xiàn)本地上傳圖片并預(yù)覽功能（express4.0+） ，具有一定的參考價值，有興趣的可以了解一下2017-06-06
Node.js web 應(yīng)用如何封裝到Docker容器中
這篇文章主要介紹了Node.js web 應(yīng)用如何封裝到Docker容器中，幫助大家更好的學習node.js和使用docker容器，感興趣的朋友可以了解下2020-09-09
nodejs 圖解express+supervisor+ejs的用法(推薦)
下面小編就為大家?guī)硪黄猲odejs 圖解express+supervisor+ejs的用法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
npm的中文意思為"node包管理器",是Node.js平臺的默認包管理工具,會隨著Nodejs一起安裝,npm管理對應(yīng)node.js的第三方插件,下面這篇文章主要給大家介紹了關(guān)于nodejs卸載和安裝教程的相關(guān)資料，這可能全網(wǎng)最詳細的教程了,需要的朋友可以參考下2023-05-05
PostgreSQL Node.js實現(xiàn)函數(shù)計算方法示例
這篇文章主要給大家介紹了關(guān)于PostgreSQL Node.js實現(xiàn)函數(shù)計算的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-02-02
下面小編就為大家?guī)硪黄猲odejs加密Crypto的實例代碼。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
如何在Node.js中使用async函數(shù)的方法詳解
這篇文章主要為大家介紹了如何在Node.js中使用async函數(shù)的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
node?puppeteer爬蟲爬取電影網(wǎng)站及生成pdf文檔示例
這篇文章主要介紹了node?puppeteer爬蟲爬取電影網(wǎng)站及生成pdf文檔使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了node.js中的dns.getServers方法使用說明,本文介紹了dns.getServers方法說明、語法和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
nvm是一個node的版本管理工具,可以簡單操作node版本的切換、安裝、查看,下面這篇文章主要給大家介紹了關(guān)于如何通過三步完成切換nodejs版本的相關(guān)資料,需要的朋友可以參考下2023-01-01